-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (168 loc) · 6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<title>
J.D. Lowe's Portfolio
</title>
<style type="text/css">
html {
background-color: steelblue;
background-position: initial initial;
background-repeat: initial initial;
font-family: 'Roboto', sans-serif;
overflow-y: hidden;
}
#tabs {
position: absolute;
top: 5px;
left: 5px;
height: 30px;
}
#tabs a {
color: black;
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
font-size: 12px;
border: 1px solid lightgray;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-decoration: none;
display: inline-block;
vertical-align:middle;
padding: 5px;
}
#tabs a.active {
color: white;
background: linear-gradient(to bottom, #0080e2 0%,#1e5799 100%);
border-bottom: 1px solid #1e5799;
text-shadow:0 -1px 1px rgba(0,0,0,0.5);
}
#container {
border: 1px solid gray;
border-top: 5px solid #1e5799;
position: absolute;
top: 31px;
left: 5px;
bottom: 0px;
overflow-y:auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: white;
width: 100%;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 0px;
}
.content {
padding-top: 5px;
}
</style>
<script src="scripts/jquery.js"></script>
<script>
$(window).ready(function() {
$('#tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a'), $spans = $(this).children().find("span");
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active.attr('href'));
$spans.css("color", "black");
$active.parent().find("span").css("color", "white");
// Hide the remaining content
$links.not($active).each(function () {
$($(this).attr('href')).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$active.parent().find("span").css("color", "black");
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $($(this).attr('href'));
// Make the tab active.
$active.addClass('active');
$active.parent().find("span").css("color", "white");
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
//$("#container").css(
});
</script>
</head>
<body>
<div id="tabs">
<span class="tab"><a href="#price">WenAMPS</a></span>
<span class="tab"><a href="#sorcery">Sorcery</a></span>
<span class="tab"><a href="#ocs">Simple OCS</a></span>
<span class="tab"><a href="#hypersplode">Hypersplode</a></span>
<span class="tab"><a href="#getelected">Get Elected!</a></span>
<span class="tab"><a href="#misc">Miscellaneous</a></span>
<span class="tab"><a href="#about">About</a></span>
</div>
<div id="container">
<div class="content" id="misc">
<ul>
<li><a href="https://github.com/jdllama/fancy_filter" target="_blank">Fancy Filter</a> is a JQuery addon; when a specified text box is clicked on, it allows a drop down box to appear so the user can select multiple items or all items easily.</li>
<li><a href="https://github.com/jdllama/node_workbook" target="_blank">Node Workbook</a> is a node.js module that allows the developer to create an Excel Spreadsheet file.</li>
</ul>
</div>
<div class="content" id="about">
<center>
Jeffrey "J.D." Lowe has been writing applications for various companies using JavaScript and HTML5 since 2008. These are some examples of the applications. If you have any further questions, you can reach J.D. at <a href="mailto:[email protected]">[email protected]</a>.
</center>
</div>
<div class="content" id="ocs">
<center>
This is a prototype of a tool to be used to change the images on the screen where customers place their orders. This was written in Javascript, HTML5, and node-webkit.<br />
<br />
<img src="images/ocs1.png" style="width: 780px"/><br />
<img src="images/ocs2.png" style="width: 780px"/><br />
<img src="images/ocs3.png" style="width: 780px"/><br />
</center>
</div>
<div class="content" id="price">
<center>
This is the application currently being used by Wendy's to price all of their items in all Corporate locations. The authentication is handled by an Express server in node.js that stores the login data in a MongoDB database, and the application is written in JavaScript, HTML5, and node-webkit.<br />
<br />
<img src="images/wenampslogin.png"/><br />
<img src="images/wenampsmain.png"/><br />
Below is the prototype version of the application.<br />
<img src="images/price1.png" style="width: 780px"/><br />
<img src="images/price2.png" style="width: 780px"/><br />
<img src="images/price3.png" style="width: 780px"/><br />
<img src="images/price4.png" style="width: 780px"/>
</center>
</div>
<div class="content" id="sorcery">
<center>
Partial source code available at <a href="https://github.com/jdllama/Sorcery" target="_blank">https://github.com/jdllama/Sorcery</a><br />
<img src="images/sorcery1.png" style="width: 780px"/><br />
<img src="images/sorcery2.png" style="width: 780px"/><br />
<img src="images/sorcery3.png" style="width: 780px"/><br />
<img src="images/sorcery4.png" style="width: 780px"/>
</center>
</div>
<div class="content" id="hypersplode">
<center>
Source code available at <a href="https://github.com/jdllama/Hypersplode" target="_blank">https://github.com/jdllama/Hypersplode</a><br />
<img src="images/hypersplode1.png" style="width: 780px"/><br />
<img src="images/hypersplode2.png" style="width: 780px"/><br />
<img src="images/hypersplode3.png" style="width: 780px"/>
</center>
</div>
<div class="content" id="getelected">
<center>
Game can actually be played at <a href="http://gdriv.es/getelected" target="_blank">http://gdriv.es/getelected</a><br />
<br />
Source code available at <a href="https://github.com/jdllama/GetElected" target="_blank">https://github.com/jdllama/GetElected</a>
</center>
</div>
</div>
</body>
</html>