Tired of just drawing T-shirt and pants? Use this generator and expand your horizons.
Merge pull request #4 from The-Beebz/2.0
2.0
+333
-465
-173
Dress.html
-173
Dress.html
···
1
-
<!DOCTYPE html>
2
-
<html>
3
-
<head>
4
-
<title>Outfit Generator</title>
5
-
<link rel="stylesheet" type="text/css" href="style.css">
6
-
<script src="javascriptdress.js"></script>
7
-
</head>
8
-
<body>
9
-
10
-
<h1>Outfit Generator</h1>
11
-
Generate an Outfit!
12
-
<br><br>
13
-
<div class="options">
14
-
<table class="styletable">
15
-
<div class="neckline">
16
-
<tr class="neat">
17
-
<th></th>
18
-
<th><button onclick="randomAll()">RANDOMIZE ALL</button></th>
19
-
<th></th>
20
-
</tr>
21
-
<tr class="neat">
22
-
<th class="left">Neckline Style:</th>
23
-
<th><select id="neckStyle" onchange="neckDisplay()">
24
-
<option value="neck/asymmetric.jpg">Asymmetric</option>
25
-
<option value="neck/bateau.jpg">Bateau</option>
26
-
<option value="neck/cowl.jpg">Cowl</option>
27
-
<option value="neck/grecian.jpg">Grecian</option>
28
-
<option value="neck/halter.jpg">Halter</option>
29
-
<option value="neck/halterstrap.jpg">Halter Strap</option>
30
-
<option value="neck/highneck.jpg">High Neck</option>
31
-
<option value="neck/illusion.jpg">Illusion</option>
32
-
<option value="neck/jewel.jpg">Jewel</option>
33
-
<option value="neck/offshoulder.jpg">Offshoulder</option>
34
-
<option value="neck/queenanne.jpg">Queen Anne</option>
35
-
<option value="neck/sabrina.jpg">Sabrina</option>
36
-
<option value="neck/scoop.jpg">Scoop</option>
37
-
<option value="neck/spaghettistrap.jpg">Spaghetti Strap</option>
38
-
<option value="neck/square.jpg">Square</option>
39
-
<option value="neck/straight.jpg">Straight</option>
40
-
<option value="neck/sweetheart.jpg">Sweetheart</option>
41
-
<option value="neck/vneck.jpg">V Neck</option>
42
-
</select></th>
43
-
<th><button onclick="randomNeck()">RANDOMIZE</button></th>
44
-
</tr>
45
-
</div>
46
-
<div class="sleeve">
47
-
<tr class="neat">
48
-
<th class="left">Sleeve Style:</th>
49
-
<th><select id="sleeveStyle" onchange="sleeveDisplay()">
50
-
<option value="sleeve/batwing.jpg">Batwing</option>
51
-
<option value="sleeve/bell.jpg">Bell</option>
52
-
<option value="sleeve/bishop.jpg">Bishop</option>
53
-
<option value="sleeve/bracelet.jpg">Bracelet</option>
54
-
<option value="sleeve/butterfly.jpg">Butterfly</option>
55
-
<option value="sleeve/buttontab.jpg">Button Tab</option>
56
-
<option value="sleeve/cape.jpg">Cape</option>
57
-
<option value="sleeve/circularcap.jpg">Circular Cap</option>
58
-
<option value="sleeve/cowl.jpg">Cowl</option>
59
-
<option value="sleeve/dropshoulder.jpg">Drop Shoulder</option>
60
-
<option value="sleeve/french.jpg">French</option>
61
-
<option value="sleeve/juliet.jpg">Juliet</option>
62
-
<option value="sleeve/kimono.jpg">Kimono</option>
63
-
<option value="sleeve/lantern.jpg">Lantern</option>
64
-
<option value="sleeve/layered.jpg">Layered</option>
65
-
<option value="sleeve/marie.jpg">Marie</option>
66
-
<option value="sleeve/muttonleg.jpg">Mutton Leg</option>
67
-
<option value="none.jpg">None</option>
68
-
<option value="sleeve/peasant.jpg">Peasant</option>
69
-
<option value="sleeve/petal.jpg">Petal</option>
70
-
<option value="sleeve/poet.jpg">Poet</option>
71
-
<option value="sleeve/puffed.jpg">Puffed</option>
72
-
<option value="sleeve/raglan.jpg">Raglan</option>
73
-
<option value="sleeve/rollup.jpg">Rollup</option>
74
-
<option value="sleeve/shirt.jpg">Shirt</option>
75
-
</select></th>
76
-
<th><button onclick="randomSleeve()">RANDOMIZE</button></th>
77
-
</tr>
78
-
</div>
79
-
<div id="dress">
80
-
<tr class="neat">
81
-
<th class="left topSwitcher"><p id="swap">Dress Type:</p></th>
82
-
<th><select id="DressType" onchange="dressDisplay()">
83
-
<option value="dress/A.jpg">A Shaped</option>
84
-
<option value="dress/Balloon.jpg">Balloon</option>
85
-
<option value="dress/Bell.jpg">Bell</option>
86
-
<option value="dress/Charleston.jpg">Charleston</option>
87
-
<option value="dress/Empire.jpg">Empire</option>
88
-
<option value="dress/H.jpg">H Shaped</option>
89
-
<option value="dress/I.jpg">I Shaped</option>
90
-
<option value="dress/Princess.jpg">Princess</option>
91
-
<option value="dress/Trapeze.jpg">Trapeze</option>
92
-
<option value="dress/Triangle.jpg">Triangle</option>
93
-
<option value="dress/T.jpg">T Shaped</option>
94
-
<option value="dress/V.jpg">V Shaped</option>
95
-
<option value="dress/X.jpg">X Shaped</option>
96
-
<option value="dress/Y.jpg">Y Shaped</option>
97
-
</select> </th>
98
-
<th><button onclick="randomDress()">RANDOMIZE</button></th>
99
-
</tr>
100
-
</div>
101
-
<div class="top">
102
-
103
-
</div>
104
-
<p></p>
105
-
<div id="Shoes">
106
-
<tr class="neat">
107
-
<th class="left">Shoe Style:</th>
108
-
<th><select id="shoeStyle" onchange="shoeDisplay()">
109
-
<option value="shoes/AnkleStrap.jpg">Ankle Strap</option>
110
-
<option value="shoes/Ballerina.jpg">Ballerina</option>
111
-
<option value="shoes/Bicolor.jpg">Bicolor</option>
112
-
<option value="shoes/Chelsea.jpg">Chelsea</option>
113
-
<option value="shoes/Chunky.jpg">Chunky</option>
114
-
<option value="shoes/Clog.jpg">Clog</option>
115
-
<option value="shoes/Cone.jpg">Cone</option>
116
-
<option value="shoes/Country.jpg">Country</option>
117
-
<option value="shoes/Desert.jpg">Desert</option>
118
-
<option value="shoes/Dockside.jpg">Dockside</option>
119
-
<option value="shoes/Dorsay.jpg">Dorsay</option>
120
-
<option value="shoes/Espadrilla.jpg">Espadrilla</option>
121
-
<option value="shoes/FlipFlop.jpg">FlipFlop</option>
122
-
<option value="shoes/fyre.jpg">Fyre</option>
123
-
<option value="shoes/Kitten.jpg">Kitten</option>
124
-
<option value="shoes/Loafer.jpg">Loafer</option>
125
-
<option value="shoes/lobsterclaw.jpg">Lobsterclaw</option>
126
-
<option value="shoes/Maryjane.jpg">Maryjane</option>
127
-
<option value="shoes/Mocassin.jpg">Mocassin</option>
128
-
<option value="shoes/Monk.jpg">Monk</option>
129
-
<option value="shoes/Mule.jpg">Mule</option>
130
-
<option value="shoes/OpenToe.jpg">Open Toe</option>
131
-
<option value="shoes/Oxford.jpg">Oxford</option>
132
-
<option value="shoes/PeepToe.jpg">Peep Toe</option>
133
-
<option value="shoes/Platform.jpg">Platform</option>
134
-
<option value="shoes/Pump.jpg">Pump</option>
135
-
<option value="shoes/RubySlipper.jpg">Ruby Slipper</option>
136
-
<option value="shoes/scarpin.jpg">Scarpin</option>
137
-
<option value="shoes/Slingback.jpg">Slingback</option>
138
-
<option value="shoes/Slipon.jpg">Slipon</option>
139
-
<option value="shoes/spool.jpg">Spool</option>
140
-
<option value="shoes/Stiletto.jpg">Stiletto</option>
141
-
<option value="shoes/Tstrap.jpg">Tstrap</option>
142
-
<option value="shoes/Wedge.jpg">Wedge</option>
143
-
<option value="shoes/Wellington.jpg">Wellington</option>
144
-
<option value="shoes/winklepicker.jpg">Winklepicker</option>
145
-
</select></th>
146
-
<th><button onclick="randomShoe()">RANDOMIZE</button></th>
147
-
</tr>
148
-
</div>
149
-
</table>
150
-
</div>
151
-
<div class="outfitdisplay">
152
-
<table class="tableborder">
153
-
<tr>
154
-
<th></th>
155
-
<th id="neckImage">Neckline</th>
156
-
<th></th>
157
-
</tr>
158
-
<tr>
159
-
<th id="sleeveImage2" class="sleeveFlip">Sleeve</th>
160
-
<th id="dressImage">Dress</th>
161
-
<th id="sleeveImage">Sleeve</th>
162
-
</tr>
163
-
<tr>
164
-
<th></th>
165
-
<th id ="shoeImage">Shoes</th>
166
-
<th></th>
167
-
</tr>
168
-
</table>
169
-
</div>
170
-
171
-
</body>
172
-
173
-
</html>
-207
Outfit.html
-207
Outfit.html
···
1
-
<!DOCTYPE html>
2
-
<html>
3
-
<head>
4
-
<title>Outfit Generator</title>
5
-
<link rel="stylesheet" type="text/css" href="style.css">
6
-
<script src="javascript.js"></script>
7
-
</head>
8
-
<body>
9
-
10
-
<h1>Outfit Generator</h1>
11
-
Generate an Outfit!
12
-
<br><br>
13
-
<div class="options">
14
-
<table class="styletable">
15
-
<div class="neckline">
16
-
<tr class="neat">
17
-
<th></th>
18
-
<th><button onclick="randomAll()">RANDOMIZE ALL</button></th>
19
-
<th></th>
20
-
</tr>
21
-
<tr class="neat">
22
-
<th class="left">Neckline Style:</th>
23
-
<th><select id="neckStyle" onchange="neckDisplay()">
24
-
<option value="neck/asymmetric.jpg">Asymmetric</option>
25
-
<option value="neck/bateau.jpg">Bateau</option>
26
-
<option value="neck/cowl.jpg">Cowl</option>
27
-
<option value="neck/grecian.jpg">Grecian</option>
28
-
<option value="neck/halter.jpg">Halter</option>
29
-
<option value="neck/halterstrap.jpg">Halter Strap</option>
30
-
<option value="neck/highneck.jpg">High Neck</option>
31
-
<option value="neck/illusion.jpg">Illusion</option>
32
-
<option value="neck/jewel.jpg">Jewel</option>
33
-
<option value="neck/offshoulder.jpg">Offshoulder</option>
34
-
<option value="neck/queenanne.jpg">Queen Anne</option>
35
-
<option value="neck/sabrina.jpg">Sabrina</option>
36
-
<option value="neck/scoop.jpg">Scoop</option>
37
-
<option value="neck/spaghettistrap.jpg">Spaghetti Strap</option>
38
-
<option value="neck/square.jpg">Square</option>
39
-
<option value="neck/straight.jpg">Straight</option>
40
-
<option value="neck/sweetheart.jpg">Sweetheart</option>
41
-
<option value="neck/vneck.jpg">V Neck</option>
42
-
</select></th>
43
-
<th><button onclick="randomNeck()">RANDOMIZE</button></th>
44
-
</tr>
45
-
</div>
46
-
<div class="sleeve">
47
-
<tr class="neat">
48
-
<th class="left">Sleeve Style:</th>
49
-
<th><select id="sleeveStyle" onchange="sleeveDisplay()">
50
-
<option value="sleeve/batwing.jpg">Batwing</option>
51
-
<option value="sleeve/bell.jpg">Bell</option>
52
-
<option value="sleeve/bishop.jpg">Bishop</option>
53
-
<option value="sleeve/bracelet.jpg">Bracelet</option>
54
-
<option value="sleeve/butterfly.jpg">Butterfly</option>
55
-
<option value="sleeve/buttontab.jpg">Button Tab</option>
56
-
<option value="sleeve/cape.jpg">Cape</option>
57
-
<option value="sleeve/circularcap.jpg">Circular Cap</option>
58
-
<option value="sleeve/cowl.jpg">Cowl</option>
59
-
<option value="sleeve/dropshoulder.jpg">Drop Shoulder</option>
60
-
<option value="sleeve/french.jpg">French</option>
61
-
<option value="sleeve/juliet.jpg">Juliet</option>
62
-
<option value="sleeve/kimono.jpg">Kimono</option>
63
-
<option value="sleeve/lantern.jpg">Lantern</option>
64
-
<option value="sleeve/layered.jpg">Layered</option>
65
-
<option value="sleeve/marie.jpg">Marie</option>
66
-
<option value="sleeve/muttonleg.jpg">Mutton Leg</option>
67
-
<option value="none.jpg">None</option>
68
-
<option value="sleeve/peasant.jpg">Peasant</option>
69
-
<option value="sleeve/petal.jpg">Petal</option>
70
-
<option value="sleeve/poet.jpg">Poet</option>
71
-
<option value="sleeve/puffed.jpg">Puffed</option>
72
-
<option value="sleeve/raglan.jpg">Raglan</option>
73
-
<option value="sleeve/rollup.jpg">Rollup</option>
74
-
<option value="sleeve/shirt.jpg">Shirt</option>
75
-
</select></th>
76
-
<th><button onclick="randomSleeve()">RANDOMIZE</button></th>
77
-
</tr>
78
-
</div>
79
-
<div class="top">
80
-
<tr class="neat">
81
-
<th class="left">Top Length:</th>
82
-
<th><select id="topStyle" onchange="topDisplay()">
83
-
<option value="top/crop.jpg">Crop</option>
84
-
<option value="top/normal.jpg">Normal</option>
85
-
<option value="top/long.jpg">Long</option>
86
-
</select></th>
87
-
<th><button onclick="randomTop()">RANDOMIZE</button></th>
88
-
</tr>
89
-
</div>
90
-
<div class="bottom">
91
-
<tr class="neat">
92
-
<th class="left">Bottom Style:</th>
93
-
<th><select id="bottomStyle" onchange="bottomDisplay()">
94
-
<option value="bottom/pants/5pocket.jpg">5 Pocket Pants</option>
95
-
<option value="bottom/pants/bermuda.jpg">Bermuda Pants</option>
96
-
<option value="bottom/pants/bootcut.jpg">Bootcut Pants</option>
97
-
<option value="bottom/pants/bush.jpg">Bush Pants</option>
98
-
<option value="bottom/pants/cargo.jpg">Cargo Pants</option>
99
-
<option value="bottom/pants/flare.jpg">Flare Pants</option>
100
-
<option value="bottom/pants/harem.jpg">Harem Pants</option>
101
-
<option value="bottom/pants/hot.jpg">Hot Pants</option>
102
-
<option value="bottom/pants/jodhpurs.jpg">Jodhpurs Pants</option>
103
-
<option value="bottom/pants/palazzo.jpg">Palazzo Pants</option>
104
-
<option value="bottom/pants/pegged.jpg">Pegged Pants</option>
105
-
<option value="bottom/pants/sailor.jpg">Sailor Pants</option>
106
-
<option value="bottom/pants/skinny.jpg">Skinny Pants</option>
107
-
<option value="bottom/pants/skort.jpg">Skort Pants</option>
108
-
<option value="bottom/pants/stirrup.jpg">Stirrup Pants</option>
109
-
<option value="bottom/pants/straight.jpg">Straight Pants</option>
110
-
<option value="bottom/pants/sweat.jpg">Sweat Pants</option>
111
-
<option value="bottom/pants/wideleg.jpg">Wideleg Pants</option>
112
-
<option value="bottom/skirt/accordion.jpg">Accordion Skirt</option>
113
-
<option value="bottom/skirt/aline.jpg">A-line Skirt</option>
114
-
<option value="bottom/skirt/asymmetrical.jpg">Asymmetrical Skirt</option>
115
-
<option value="bottom/skirt/bubble.jpg">Bubble Skirt</option>
116
-
<option value="bottom/skirt/circle.jpg">Circle Skirt</option>
117
-
<option value="bottom/skirt/draped.jpg">Draped Skirt</option>
118
-
<option value="bottom/skirt/godet.jpg">Godet Skirt</option>
119
-
<option value="bottom/skirt/gypsy.jpg">Gypsy Skirt</option>
120
-
<option value="bottom/skirt/layered.jpg">Layered Skirt</option>
121
-
<option value="bottom/skirt/mermaid.jpg">Mermaid Skirt</option>
122
-
<option value="bottom/skirt/mini.jpg">Mini Skirt</option>
123
-
<option value="bottom/skirt/paneled.jpg">Paneled Skirt</option>
124
-
<option value="bottom/skirt/pencil.jpg">Pencil Skirt</option>
125
-
<option value="bottom/skirt/pleated.jpg">Pleated Skirt</option>
126
-
<option value="bottom/skirt/ruffled.jpg">Ruffled Skirt</option>
127
-
<option value="bottom/skirt/tube.jpg">Tube Skirt</option>
128
-
<option value="bottom/skirt/tulip.jpg">Tulip Skirt</option>
129
-
<option value="bottom/skirt/wrap.jpg">Wrap Skirt</option>
130
-
</select></th>
131
-
<th><button onclick="randomBottom()">RANDOMIZE</button></th>
132
-
</tr>
133
-
</div>
134
-
<div id="Shoes">
135
-
<tr class="neat">
136
-
<th class="left">Shoe Style:</th>
137
-
<th><select id="shoeStyle" onchange="shoeDisplay()">
138
-
<option value="shoes/AnkleStrap.jpg">Ankle Strap</option>
139
-
<option value="shoes/Ballerina.jpg">Ballerina</option>
140
-
<option value="shoes/Bicolor.jpg">Bicolor</option>
141
-
<option value="shoes/Chelsea.jpg">Chelsea</option>
142
-
<option value="shoes/Chunky.jpg">Chunky</option>
143
-
<option value="shoes/Clog.jpg">Clog</option>
144
-
<option value="shoes/Cone.jpg">Cone</option>
145
-
<option value="shoes/Country.jpg">Country</option>
146
-
<option value="shoes/Desert.jpg">Desert</option>
147
-
<option value="shoes/Dockside.jpg">Dockside</option>
148
-
<option value="shoes/Dorsay.jpg">Dorsay</option>
149
-
<option value="shoes/Espadrilla.jpg">Espadrilla</option>
150
-
<option value="shoes/FlipFlop.jpg">FlipFlop</option>
151
-
<option value="shoes/fyre.jpg">Fyre</option>
152
-
<option value="shoes/Kitten.jpg">Kitten</option>
153
-
<option value="shoes/Loafer.jpg">Loafer</option>
154
-
<option value="shoes/lobsterclaw.jpg">Lobsterclaw</option>
155
-
<option value="shoes/Maryjane.jpg">Maryjane</option>
156
-
<option value="shoes/Mocassin.jpg">Mocassin</option>
157
-
<option value="shoes/Monk.jpg">Monk</option>
158
-
<option value="shoes/Mule.jpg">Mule</option>
159
-
<option value="shoes/OpenToe.jpg">Open Toe</option>
160
-
<option value="shoes/Oxford.jpg">Oxford</option>
161
-
<option value="shoes/PeepToe.jpg">Peep Toe</option>
162
-
<option value="shoes/Platform.jpg">Platform</option>
163
-
<option value="shoes/Pump.jpg">Pump</option>
164
-
<option value="shoes/RubySlipper.jpg">Ruby Slipper</option>
165
-
<option value="shoes/scarpin.jpg">Scarpin</option>
166
-
<option value="shoes/Slingback.jpg">Slingback</option>
167
-
<option value="shoes/Slipon.jpg">Slipon</option>
168
-
<option value="shoes/spool.jpg">Spool</option>
169
-
<option value="shoes/Stiletto.jpg">Stiletto</option>
170
-
<option value="shoes/Tstrap.jpg">Tstrap</option>
171
-
<option value="shoes/Wedge.jpg">Wedge</option>
172
-
<option value="shoes/Wellington.jpg">Wellington</option>
173
-
<option value="shoes/winklepicker.jpg">Winklepicker</option>
174
-
</select></th>
175
-
<th><button onclick="randomShoe()">RANDOMIZE</button></th>
176
-
</tr>
177
-
</div>
178
-
</table>
179
-
</div>
180
-
<div class="outfitdisplay">
181
-
<table class="tableborder">
182
-
<tr>
183
-
<th></th>
184
-
<th id="neckImage">Neckline</th>
185
-
<th></th>
186
-
</tr>
187
-
<tr>
188
-
<th id="sleeveImage2" class="sleeveFlip">Sleeve</th>
189
-
<th id="topImage">Top</th>
190
-
<th id="sleeveImage">Sleeve</th>
191
-
</tr>
192
-
<tr>
193
-
<th></th>
194
-
<th id="bottomImage">Bottom</th>
195
-
<th></th>
196
-
</tr>
197
-
<tr>
198
-
<th id="shoeImage2" class="sleeveFlip">Shoe</th>
199
-
<th></th>
200
-
<th id ="shoeImage">Shoe</th>
201
-
</tr>
202
-
</table>
203
-
</div>
204
-
205
-
</body>
206
-
207
-
</html>
bottom/pants/5pocket.jpg
bottom/pants/5pocket.jpg
This is a binary file and will not be displayed.
bottom/pants/bermuda.jpg
bottom/pants/bermuda.jpg
This is a binary file and will not be displayed.
bottom/pants/bootcut.jpg
bottom/pants/bootcut.jpg
This is a binary file and will not be displayed.
bottom/pants/bush.jpg
bottom/pants/bush.jpg
This is a binary file and will not be displayed.
bottom/pants/cargo.jpg
bottom/pants/cargo.jpg
This is a binary file and will not be displayed.
bottom/pants/flare.jpg
bottom/pants/flare.jpg
This is a binary file and will not be displayed.
bottom/pants/harem.jpg
bottom/pants/harem.jpg
This is a binary file and will not be displayed.
bottom/pants/hot.jpg
bottom/pants/hot.jpg
This is a binary file and will not be displayed.
bottom/pants/jodhpurs.jpg
bottom/pants/jodhpurs.jpg
This is a binary file and will not be displayed.
bottom/pants/palazzo.jpg
bottom/pants/palazzo.jpg
This is a binary file and will not be displayed.
bottom/pants/pegged.jpg
bottom/pants/pegged.jpg
This is a binary file and will not be displayed.
bottom/pants/sailor.jpg
bottom/pants/sailor.jpg
This is a binary file and will not be displayed.
bottom/pants/skinny.jpg
bottom/pants/skinny.jpg
This is a binary file and will not be displayed.
bottom/pants/skort.jpg
bottom/pants/skort.jpg
This is a binary file and will not be displayed.
bottom/pants/stirrup.jpg
bottom/pants/stirrup.jpg
This is a binary file and will not be displayed.
bottom/pants/straight.jpg
bottom/pants/straight.jpg
This is a binary file and will not be displayed.
bottom/pants/sweat.jpg
bottom/pants/sweat.jpg
This is a binary file and will not be displayed.
bottom/pants/wideleg.jpg
bottom/pants/wideleg.jpg
This is a binary file and will not be displayed.
bottom/skirt/accordion.jpg
bottom/skirt/accordion.jpg
This is a binary file and will not be displayed.
bottom/skirt/aline.jpg
bottom/skirt/aline.jpg
This is a binary file and will not be displayed.
bottom/skirt/asymmetrical.jpg
bottom/skirt/asymmetrical.jpg
This is a binary file and will not be displayed.
bottom/skirt/bubble.jpg
bottom/skirt/bubble.jpg
This is a binary file and will not be displayed.
bottom/skirt/circle.jpg
bottom/skirt/circle.jpg
This is a binary file and will not be displayed.
bottom/skirt/draped.jpg
bottom/skirt/draped.jpg
This is a binary file and will not be displayed.
bottom/skirt/godet.jpg
bottom/skirt/godet.jpg
This is a binary file and will not be displayed.
bottom/skirt/gypsy.jpg
bottom/skirt/gypsy.jpg
This is a binary file and will not be displayed.
bottom/skirt/layered.jpg
bottom/skirt/layered.jpg
This is a binary file and will not be displayed.
bottom/skirt/mermaid.jpg
bottom/skirt/mermaid.jpg
This is a binary file and will not be displayed.
bottom/skirt/mini.jpg
bottom/skirt/mini.jpg
This is a binary file and will not be displayed.
bottom/skirt/paneled.jpg
bottom/skirt/paneled.jpg
This is a binary file and will not be displayed.
bottom/skirt/pencil.jpg
bottom/skirt/pencil.jpg
This is a binary file and will not be displayed.
bottom/skirt/pleated.jpg
bottom/skirt/pleated.jpg
This is a binary file and will not be displayed.
bottom/skirt/ruffled.jpg
bottom/skirt/ruffled.jpg
This is a binary file and will not be displayed.
bottom/skirt/tube.jpg
bottom/skirt/tube.jpg
This is a binary file and will not be displayed.
bottom/skirt/tulip.jpg
bottom/skirt/tulip.jpg
This is a binary file and will not be displayed.
bottom/skirt/wrap.jpg
bottom/skirt/wrap.jpg
This is a binary file and will not be displayed.
dress/A.jpg
dress/A.jpg
This is a binary file and will not be displayed.
dress/Balloon.jpg
dress/Balloon.jpg
This is a binary file and will not be displayed.
dress/Bell.jpg
dress/Bell.jpg
This is a binary file and will not be displayed.
dress/Charleston.jpg
dress/Charleston.jpg
This is a binary file and will not be displayed.
dress/Empire.jpg
dress/Empire.jpg
This is a binary file and will not be displayed.
dress/H.jpg
dress/H.jpg
This is a binary file and will not be displayed.
dress/I.jpg
dress/I.jpg
This is a binary file and will not be displayed.
dress/Princess.jpg
dress/Princess.jpg
This is a binary file and will not be displayed.
dress/T.jpg
dress/T.jpg
This is a binary file and will not be displayed.
dress/Trapeze.jpg
dress/Trapeze.jpg
This is a binary file and will not be displayed.
dress/Triangle.jpg
dress/Triangle.jpg
This is a binary file and will not be displayed.
dress/V.jpg
dress/V.jpg
This is a binary file and will not be displayed.
dress/X.jpg
dress/X.jpg
This is a binary file and will not be displayed.
dress/Y.jpg
dress/Y.jpg
This is a binary file and will not be displayed.
img/asymmetric.png
img/asymmetric.png
This is a binary file and will not be displayed.
img/bateau.png
img/bateau.png
This is a binary file and will not be displayed.
img/doll.png
img/doll.png
This is a binary file and will not be displayed.
img/grecian.png
img/grecian.png
This is a binary file and will not be displayed.
img/sleeve/batwing.png
img/sleeve/batwing.png
This is a binary file and will not be displayed.
img/sleeve/bell.png
img/sleeve/bell.png
This is a binary file and will not be displayed.
img/sleeve/bishop.png
img/sleeve/bishop.png
This is a binary file and will not be displayed.
img/sleeve/bracelet.png
img/sleeve/bracelet.png
This is a binary file and will not be displayed.
img/sleeve/butterfly.png
img/sleeve/butterfly.png
This is a binary file and will not be displayed.
img/sleeve/cape.png
img/sleeve/cape.png
This is a binary file and will not be displayed.
img/sleeve/circularcap.png
img/sleeve/circularcap.png
This is a binary file and will not be displayed.
img/sleeve/cowl.png
img/sleeve/cowl.png
This is a binary file and will not be displayed.
img/sleeve/dropshoulder.png
img/sleeve/dropshoulder.png
This is a binary file and will not be displayed.
img/sleeve/french.png
img/sleeve/french.png
This is a binary file and will not be displayed.
img/sleeve/juliet.png
img/sleeve/juliet.png
This is a binary file and will not be displayed.
img/sleeve/kimono.png
img/sleeve/kimono.png
This is a binary file and will not be displayed.
img/sleeve/lantern.png
img/sleeve/lantern.png
This is a binary file and will not be displayed.
img/sleeve/layered.png
img/sleeve/layered.png
This is a binary file and will not be displayed.
img/sleeve/marie.png
img/sleeve/marie.png
This is a binary file and will not be displayed.
img/sleeve/muttonleg.png
img/sleeve/muttonleg.png
This is a binary file and will not be displayed.
img/sleeve/peasant.png
img/sleeve/peasant.png
This is a binary file and will not be displayed.
img/sleeve/petal.png
img/sleeve/petal.png
This is a binary file and will not be displayed.
img/sleeve/poet.png
img/sleeve/poet.png
This is a binary file and will not be displayed.
img/sleeve/puffed.png
img/sleeve/puffed.png
This is a binary file and will not be displayed.
img/sleeve/raglan.png
img/sleeve/raglan.png
This is a binary file and will not be displayed.
img/sleeve/rollup.png
img/sleeve/rollup.png
This is a binary file and will not be displayed.
img/sleeve/shirt.png
img/sleeve/shirt.png
This is a binary file and will not be displayed.
img/top/crop.png
img/top/crop.png
This is a binary file and will not be displayed.
img/top/long.png
img/top/long.png
This is a binary file and will not be displayed.
img/top/mid.png
img/top/mid.png
This is a binary file and will not be displayed.
+205
index.html
+205
index.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>Outfit Generator</title>
5
+
<link rel="stylesheet" type="text/css" href="style.css">
6
+
<script src="javascript.js"></script>
7
+
</head>
8
+
<body>
9
+
10
+
<h1>Outfit Generator</h1>
11
+
Generate an Outfit!
12
+
<br><br>
13
+
<div class="options">
14
+
<table class="styletable">
15
+
<div class="neckline">
16
+
<tr class="neat">
17
+
<th></th>
18
+
<th><button onclick="randomAll()">RANDOMIZE ALL</button></th>
19
+
<th></th>
20
+
</tr>
21
+
<tr class="neat">
22
+
<th class="left">Neckline Style:</th>
23
+
<th><select id="neckStyle" onchange="neckDisplay()">
24
+
<option value="img/asymmetric.png">Asymmetric</option>
25
+
<option value="img/bateau.png">Bateau</option>
26
+
<option value="neck/cowl.png">Cowl</option>
27
+
<option value="img/grecian.png">Grecian</option>
28
+
<option value="neck/halter.png">Halter</option>
29
+
<option value="neck/halterstrap.png">Halter Strap</option>
30
+
<option value="neck/highneck.png">High Neck</option>
31
+
<option value="neck/illusion.png">Illusion</option>
32
+
<option value="neck/jewel.png">Jewel</option>
33
+
<option value="neck/offshoulder.png">Offshoulder</option>
34
+
<option value="neck/queenanne.png">Queen Anne</option>
35
+
<option value="neck/sabrina.png">Sabrina</option>
36
+
<option value="neck/scoop.png">Scoop</option>
37
+
<option value="neck/spaghettistrap.png">Spaghetti Strap</option>
38
+
<option value="neck/square.png">Square</option>
39
+
<option value="neck/straight.png">Straight</option>
40
+
<option value="neck/sweetheart.png">Sweetheart</option>
41
+
<option value="neck/vneck.png">V Neck</option>
42
+
</select></th>
43
+
<th><button onclick="randomNeck()">RANDOMIZE</button></th>
44
+
</tr>
45
+
</div>
46
+
<div class="sleeve">
47
+
<tr class="neat">
48
+
<th class="left">Sleeve Style:</th>
49
+
<th><select id="sleeveStyle" onchange="sleeveDisplay()">
50
+
<option value="img/sleeve/batwing.png">Batwing</option>
51
+
<option value="img/sleeve/bell.png">Bell</option>
52
+
<option value="img/sleeve/bishop.png">Bishop</option>
53
+
<option value="img/sleeve/bracelet.png">Bracelet</option>
54
+
<option value="img/sleeve/butterfly.png">Butterfly</option>
55
+
<option value="img/sleeve/buttontab.png">Button Tab</option>
56
+
<option value="img/sleeve/cape.png">Cape</option>
57
+
<option value="img/sleeve/circularcap.png">Circular Cap</option>
58
+
<option value="img/sleeve/cowl.png">Cowl</option>
59
+
<option value="img/sleeve/dropshoulder.png">Drop Shoulder</option>
60
+
<option value="img/sleeve/french.png">French</option>
61
+
<option value="img/sleeve/juliet.png">Juliet</option>
62
+
<option value="img/sleeve/kimono.png">Kimono</option>
63
+
<option value="img/sleeve/lantern.png">Lantern</option>
64
+
<option value="img/sleeve/layered.png">Layered</option>
65
+
<option value="img/sleeve/marie.png">Marie</option>
66
+
<option value="img/sleeve/muttonleg.png">Mutton Leg</option>
67
+
<option value="none.png">None</option>
68
+
<option value="img/sleeve/peasant.png">Peasant</option>
69
+
<option value="img/sleeve/petal.png">Petal</option>
70
+
<option value="img/sleeve/poet.png">Poet</option>
71
+
<option value="img/sleeve/puffed.png">Puffed</option>
72
+
<option value="img/sleeve/raglan.png">Raglan</option>
73
+
<option value="img/sleeve/rollup.png">Rollup</option>
74
+
<option value="img/sleeve/shirt.png">Shirt</option>
75
+
</select></th>
76
+
<th><button onclick="randomSleeve()">RANDOMIZE</button></th>
77
+
</tr>
78
+
</div>
79
+
<div class="top">
80
+
<tr class="neat">
81
+
<th class="left">Top Length:</th>
82
+
<th><select id="topStyle" onchange="topDisplay()">
83
+
<option value="img/top/crop.png">Crop</option>
84
+
<option value="img/top/mid.png">Normal</option>
85
+
<option value="img/top/long.png">Long</option>
86
+
</select></th>
87
+
<th><button onclick="randomTop()">RANDOMIZE</button></th>
88
+
</tr>
89
+
</div>
90
+
<div class="bottom">
91
+
<tr class="neat">
92
+
<th class="left">Bottom Style:</th>
93
+
<th><select id="bottomStyle" onchange="bottomDisplay()">
94
+
<option value="bottom/pants/5pocket.png">5 Pocket Pants</option>
95
+
<option value="bottom/pants/bermuda.png">Bermuda Pants</option>
96
+
<option value="bottom/pants/bootcut.png">Bootcut Pants</option>
97
+
<option value="bottom/pants/bush.png">Bush Pants</option>
98
+
<option value="bottom/pants/cargo.png">Cargo Pants</option>
99
+
<option value="bottom/pants/flare.png">Flare Pants</option>
100
+
<option value="bottom/pants/harem.png">Harem Pants</option>
101
+
<option value="bottom/pants/hot.png">Hot Pants</option>
102
+
<option value="bottom/pants/jodhpurs.png">Jodhpurs Pants</option>
103
+
<option value="bottom/pants/palazzo.png">Palazzo Pants</option>
104
+
<option value="bottom/pants/pegged.png">Pegged Pants</option>
105
+
<option value="bottom/pants/sailor.png">Sailor Pants</option>
106
+
<option value="bottom/pants/skinny.png">Skinny Pants</option>
107
+
<option value="bottom/pants/skort.png">Skort Pants</option>
108
+
<option value="bottom/pants/stirrup.png">Stirrup Pants</option>
109
+
<option value="bottom/pants/straight.png">Straight Pants</option>
110
+
<option value="bottom/pants/sweat.png">Sweat Pants</option>
111
+
<option value="bottom/pants/wideleg.png">Wideleg Pants</option>
112
+
<option value="bottom/skirt/accordion.png">Accordion Skirt</option>
113
+
<option value="bottom/skirt/aline.png">A-line Skirt</option>
114
+
<option value="bottom/skirt/asymmetrical.png">Asymmetrical Skirt</option>
115
+
<option value="bottom/skirt/bubble.png">Bubble Skirt</option>
116
+
<option value="bottom/skirt/circle.png">Circle Skirt</option>
117
+
<option value="bottom/skirt/draped.png">Draped Skirt</option>
118
+
<option value="bottom/skirt/godet.png">Godet Skirt</option>
119
+
<option value="bottom/skirt/gypsy.png">Gypsy Skirt</option>
120
+
<option value="bottom/skirt/layered.png">Layered Skirt</option>
121
+
<option value="bottom/skirt/mermaid.png">Mermaid Skirt</option>
122
+
<option value="bottom/skirt/mini.png">Mini Skirt</option>
123
+
<option value="bottom/skirt/paneled.png">Paneled Skirt</option>
124
+
<option value="bottom/skirt/pencil.png">Pencil Skirt</option>
125
+
<option value="bottom/skirt/pleated.png">Pleated Skirt</option>
126
+
<option value="bottom/skirt/ruffled.png">Ruffled Skirt</option>
127
+
<option value="bottom/skirt/tube.png">Tube Skirt</option>
128
+
<option value="bottom/skirt/tulip.png">Tulip Skirt</option>
129
+
<option value="bottom/skirt/wrap.png">Wrap Skirt</option>
130
+
</select></th>
131
+
<th><button onclick="randomBottom()">RANDOMIZE</button></th>
132
+
</tr>
133
+
</div>
134
+
<div id="Shoes">
135
+
<tr class="neat">
136
+
<th class="left">Shoe Style:</th>
137
+
<th><select id="shoeStyle" onchange="shoeDisplay()">
138
+
<option value="shoes/AnkleStrap.png">Ankle Strap</option>
139
+
<option value="shoes/Ballerina.png">Ballerina</option>
140
+
<option value="shoes/Bicolor.png">Bicolor</option>
141
+
<option value="shoes/Chelsea.png">Chelsea</option>
142
+
<option value="shoes/Chunky.png">Chunky</option>
143
+
<option value="shoes/Clog.png">Clog</option>
144
+
<option value="shoes/Cone.png">Cone</option>
145
+
<option value="shoes/Country.png">Country</option>
146
+
<option value="shoes/Desert.png">Desert</option>
147
+
<option value="shoes/Dockside.png">Dockside</option>
148
+
<option value="shoes/Dorsay.png">Dorsay</option>
149
+
<option value="shoes/Espadrilla.png">Espadrilla</option>
150
+
<option value="shoes/FlipFlop.png">FlipFlop</option>
151
+
<option value="shoes/fyre.png">Fyre</option>
152
+
<option value="shoes/Kitten.png">Kitten</option>
153
+
<option value="shoes/Loafer.png">Loafer</option>
154
+
<option value="shoes/lobsterclaw.png">Lobsterclaw</option>
155
+
<option value="shoes/Maryjane.png">Maryjane</option>
156
+
<option value="shoes/Mocassin.png">Mocassin</option>
157
+
<option value="shoes/Monk.png">Monk</option>
158
+
<option value="shoes/Mule.png">Mule</option>
159
+
<option value="shoes/OpenToe.png">Open Toe</option>
160
+
<option value="shoes/Oxford.png">Oxford</option>
161
+
<option value="shoes/PeepToe.png">Peep Toe</option>
162
+
<option value="shoes/Platform.png">Platform</option>
163
+
<option value="shoes/Pump.png">Pump</option>
164
+
<option value="shoes/RubySlipper.png">Ruby Slipper</option>
165
+
<option value="shoes/scarpin.png">Scarpin</option>
166
+
<option value="shoes/Slingback.png">Slingback</option>
167
+
<option value="shoes/Slipon.png">Slipon</option>
168
+
<option value="shoes/spool.png">Spool</option>
169
+
<option value="shoes/Stiletto.png">Stiletto</option>
170
+
<option value="shoes/Tstrap.png">Tstrap</option>
171
+
<option value="shoes/Wedge.png">Wedge</option>
172
+
<option value="shoes/Wellington.png">Wellington</option>
173
+
<option value="shoes/winklepicker.png">Winklepicker</option>
174
+
</select></th>
175
+
<th><button onclick="randomShoe()">RANDOMIZE</button></th>
176
+
</tr>
177
+
</div>
178
+
<tr class="neat">
179
+
<th class="left">Top Color</th>
180
+
<th>
181
+
<div class="colors">
182
+
<span class="gray" onclick="gray()"></span>
183
+
<span class="red" onclick="red()"></span>
184
+
<span class="orange" onclick="orange()"></span>
185
+
<span class="yellow" onclick="yellow()"></span>
186
+
<span class="green" onclick="green()"></span>
187
+
<span class="cyan" onclick="cyan()"></span>
188
+
<span class="blue" onclick="blue()"></span>
189
+
<span class="purple" onclick="purple()"></span>
190
+
</div>
191
+
</th>
192
+
</tr>
193
+
</table>
194
+
</div>
195
+
<div class="outfitdisplay">
196
+
<div id="background">
197
+
<div id="doll"></div>
198
+
<div id="sleeves"></div>
199
+
<div id="top" ></div>
200
+
<div id="neckline"></div>
201
+
</div>
202
+
</div>
203
+
</body>
204
+
205
+
</html>
+50
-4
javascript.js
+50
-4
javascript.js
···
48
48
49
49
function topDisplay() {
50
50
var x = document.getElementById("topStyle").value;
51
-
document.getElementById("topImage").innerHTML = "<img src=\"" + x + "\">";
51
+
document.getElementById("top").innerHTML = "<img src=\"" + x + "\">";
52
52
}
53
53
54
54
function neckDisplay() {
55
55
var x = document.getElementById("neckStyle").value;
56
-
document.getElementById("neckImage").innerHTML = "<img src=\"" + x + "\">";
56
+
document.getElementById("neckline").innerHTML = "<img src=\"" + x + "\">";
57
57
}
58
58
59
59
function sleeveDisplay() {
60
60
var x = document.getElementById("sleeveStyle").value;
61
-
document.getElementById("sleeveImage").innerHTML = "<img src=\"" + x + "\">";
62
-
document.getElementById("sleeveImage2").innerHTML = "<img src=\"" + x + "\">";
61
+
document.getElementById("sleeves").innerHTML = "<img src=\"" + x + "\">";
63
62
}
64
63
65
64
function bottomDisplay() {
···
82
81
randomShoe();
83
82
}
84
83
84
+
function yellow() {
85
+
document.getElementById("top").style.filter = "sepia(200%) saturate(100%) hue-rotate(0deg)";
86
+
document.getElementById("neckline").style.filter = "sepia(200%) saturate(100%) hue-rotate(0deg)";
87
+
document.getElementById("sleeves").style.filter = "sepia(200%) saturate(100%) hue-rotate(0deg)";
88
+
}
89
+
90
+
function green() {
91
+
document.getElementById("top").style.filter = "sepia(200%) saturate(100%) hue-rotate(40deg)";
92
+
document.getElementById("neckline").style.filter = "sepia(200%) saturate(100%) hue-rotate(40deg)";
93
+
document.getElementById("sleeves").style.filter = "sepia(200%) saturate(100%) hue-rotate(40deg)";
94
+
}
95
+
96
+
function cyan() {
97
+
document.getElementById("top").style.filter = "sepia(200%) saturate(100%) hue-rotate(100deg)";
98
+
document.getElementById("neckline").style.filter = "sepia(200%) saturate(100%) hue-rotate(100deg)";
99
+
document.getElementById("sleeves").style.filter = "sepia(200%) saturate(100%) hue-rotate(100deg)";
100
+
}
101
+
102
+
function blue() {
103
+
document.getElementById("top").style.filter = "sepia(200%) saturate(160%) hue-rotate(160deg) brightness(80%) contrast(90%)";
104
+
document.getElementById("neckline").style.filter = "sepia(200%) saturate(160%) hue-rotate(160deg) brightness(80%) contrast(90%)";
105
+
document.getElementById("sleeves").style.filter = "sepia(200%) saturate(160%) hue-rotate(160deg) brightness(80%) contrast(90%)";
106
+
}
107
+
108
+
function purple() {
109
+
document.getElementById("top").style.filter = "sepia(200%) saturate(100%) hue-rotate(230deg) brightness(80%) contrast(90%)";
110
+
document.getElementById("neckline").style.filter = "sepia(200%) saturate(100%) hue-rotate(230deg) brightness(80%) contrast(90%)";
111
+
document.getElementById("sleeves").style.filter = "sepia(200%) saturate(100%) hue-rotate(230deg) brightness(80%) contrast(90%)";
112
+
}
113
+
114
+
function red() {
115
+
document.getElementById("top").style.filter = "sepia(180%) saturate(200%) hue-rotate(300deg)";
116
+
document.getElementById("neckline").style.filter = "sepia(180%) saturate(200%) hue-rotate(300deg)";
117
+
document.getElementById("sleeves").style.filter = "sepia(180%) saturate(200%) hue-rotate(300deg)";
118
+
}
119
+
120
+
function orange() {
121
+
document.getElementById("top").style.filter = "sepia(200%) saturate(180%) hue-rotate(330deg)";
122
+
document.getElementById("neckline").style.filter = "sepia(200%) saturate(180%) hue-rotate(330deg)";
123
+
document.getElementById("sleeves").style.filter = "sepia(200%) saturate(180%) hue-rotate(330deg)";
124
+
}
125
+
126
+
function gray() {
127
+
document.getElementById("top").style.filter = "";
128
+
document.getElementById("neckline").style.filter = "";
129
+
document.getElementById("sleeves").style.filter = "";
130
+
}
-79
javascriptdress.js
-79
javascriptdress.js
···
1
-
function randomDress() {
2
-
var select = document.getElementById('DressType');
3
-
var items = select.getElementsByTagName('option');
4
-
var index = Math.floor(Math.random() * items.length);
5
-
6
-
select.selectedIndex = index;
7
-
dressDisplay();
8
-
}
9
-
10
-
function randomTop() {
11
-
var select = document.getElementById('topLength');
12
-
var items = select.getElementsByTagName('option');
13
-
var index = Math.floor(Math.random() * items.length);
14
-
15
-
select.selectedIndex = index;
16
-
topDisplay();
17
-
}
18
-
19
-
function randomNeck() {
20
-
var select = document.getElementById('neckStyle');
21
-
var items = select.getElementsByTagName('option');
22
-
var index = Math.floor(Math.random() * items.length);
23
-
24
-
select.selectedIndex = index;
25
-
neckDisplay();
26
-
}
27
-
28
-
function randomSleeve() {
29
-
var select = document.getElementById('sleeveStyle');
30
-
var items = select.getElementsByTagName('option');
31
-
var index = Math.floor(Math.random() * items.length);
32
-
33
-
select.selectedIndex = index;
34
-
sleeveDisplay();
35
-
}
36
-
37
-
function randomShoe() {
38
-
var select = document.getElementById('shoeStyle');
39
-
var items = select.getElementsByTagName('option');
40
-
var index = Math.floor(Math.random() * items.length);
41
-
42
-
select.selectedIndex = index;
43
-
shoeDisplay();
44
-
}
45
-
46
-
function dressDisplay() {
47
-
var x = document.getElementById("DressType").value;
48
-
document.getElementById("dressImage").innerHTML = "<img src=\"" + x + "\">";
49
-
}
50
-
51
-
function topDisplay() {
52
-
var x = document.getElementById("topLength").value;
53
-
document.getElementById("dressImage").innerHTML = "<img src=\"" + x + "\">";
54
-
}
55
-
56
-
function neckDisplay() {
57
-
var x = document.getElementById("neckStyle").value;
58
-
document.getElementById("neckImage").innerHTML = "<img src=\"" + x + "\">";
59
-
}
60
-
61
-
function sleeveDisplay() {
62
-
var x = document.getElementById("sleeveStyle").value;
63
-
document.getElementById("sleeveImage").innerHTML = "<img src=\"" + x + "\">";
64
-
document.getElementById("sleeveImage2").innerHTML = "<img src=\"" + x + "\">";
65
-
}
66
-
67
-
function shoeDisplay() {
68
-
var x = document.getElementById("shoeStyle").value;
69
-
document.getElementById("shoeImage").innerHTML = "<img src=\"" + x + "\">";
70
-
}
71
-
72
-
73
-
function randomAll(){
74
-
randomDress();
75
-
randomNeck();
76
-
randomSleeve();
77
-
randomShoe();
78
-
}
79
-
neck/asymmetric.jpg
neck/asymmetric.jpg
This is a binary file and will not be displayed.
neck/bateau.jpg
neck/bateau.jpg
This is a binary file and will not be displayed.
neck/cowl.jpg
neck/cowl.jpg
This is a binary file and will not be displayed.
neck/grecian.jpg
neck/grecian.jpg
This is a binary file and will not be displayed.
neck/halter.jpg
neck/halter.jpg
This is a binary file and will not be displayed.
neck/halterstrap.jpg
neck/halterstrap.jpg
This is a binary file and will not be displayed.
neck/highneck.jpg
neck/highneck.jpg
This is a binary file and will not be displayed.
neck/illusion.jpg
neck/illusion.jpg
This is a binary file and will not be displayed.
neck/jewel.jpg
neck/jewel.jpg
This is a binary file and will not be displayed.
neck/offshoulder.jpg
neck/offshoulder.jpg
This is a binary file and will not be displayed.
neck/queenanne.jpg
neck/queenanne.jpg
This is a binary file and will not be displayed.
neck/sabrina.jpg
neck/sabrina.jpg
This is a binary file and will not be displayed.
neck/scoop.jpg
neck/scoop.jpg
This is a binary file and will not be displayed.
neck/spaghettistrap.jpg
neck/spaghettistrap.jpg
This is a binary file and will not be displayed.
neck/square.jpg
neck/square.jpg
This is a binary file and will not be displayed.
neck/straight.jpg
neck/straight.jpg
This is a binary file and will not be displayed.
neck/sweetheart.jpg
neck/sweetheart.jpg
This is a binary file and will not be displayed.
neck/vneck.jpg
neck/vneck.jpg
This is a binary file and will not be displayed.
none.jpg
none.jpg
This is a binary file and will not be displayed.
shoes/anklestrap.jpg
shoes/anklestrap.jpg
This is a binary file and will not be displayed.
shoes/ballerina.jpg
shoes/ballerina.jpg
This is a binary file and will not be displayed.
shoes/bicolor.jpg
shoes/bicolor.jpg
This is a binary file and will not be displayed.
shoes/chelsea.jpg
shoes/chelsea.jpg
This is a binary file and will not be displayed.
shoes/chunky.jpg
shoes/chunky.jpg
This is a binary file and will not be displayed.
shoes/clog.jpg
shoes/clog.jpg
This is a binary file and will not be displayed.
shoes/cone.jpg
shoes/cone.jpg
This is a binary file and will not be displayed.
shoes/country.jpg
shoes/country.jpg
This is a binary file and will not be displayed.
shoes/desert.jpg
shoes/desert.jpg
This is a binary file and will not be displayed.
shoes/dockside.jpg
shoes/dockside.jpg
This is a binary file and will not be displayed.
shoes/dorsay.jpg
shoes/dorsay.jpg
This is a binary file and will not be displayed.
shoes/espadrilla.jpg
shoes/espadrilla.jpg
This is a binary file and will not be displayed.
shoes/flipflop.jpg
shoes/flipflop.jpg
This is a binary file and will not be displayed.
shoes/fyre.jpg
shoes/fyre.jpg
This is a binary file and will not be displayed.
shoes/kitten.jpg
shoes/kitten.jpg
This is a binary file and will not be displayed.
shoes/loafer.jpg
shoes/loafer.jpg
This is a binary file and will not be displayed.
shoes/lobsterclaw.jpg
shoes/lobsterclaw.jpg
This is a binary file and will not be displayed.
shoes/maryjane.jpg
shoes/maryjane.jpg
This is a binary file and will not be displayed.
shoes/mocassin.jpg
shoes/mocassin.jpg
This is a binary file and will not be displayed.
shoes/monk.jpg
shoes/monk.jpg
This is a binary file and will not be displayed.
shoes/mule.jpg
shoes/mule.jpg
This is a binary file and will not be displayed.
shoes/opentoe.jpg
shoes/opentoe.jpg
This is a binary file and will not be displayed.
shoes/oxford.jpg
shoes/oxford.jpg
This is a binary file and will not be displayed.
shoes/peeptoe.jpg
shoes/peeptoe.jpg
This is a binary file and will not be displayed.
shoes/platform.jpg
shoes/platform.jpg
This is a binary file and will not be displayed.
shoes/pump.jpg
shoes/pump.jpg
This is a binary file and will not be displayed.
shoes/rubyslipper.jpg
shoes/rubyslipper.jpg
This is a binary file and will not be displayed.
shoes/scarpin.jpg
shoes/scarpin.jpg
This is a binary file and will not be displayed.
shoes/slingback.jpg
shoes/slingback.jpg
This is a binary file and will not be displayed.
shoes/slipon.jpg
shoes/slipon.jpg
This is a binary file and will not be displayed.
shoes/spool.jpg
shoes/spool.jpg
This is a binary file and will not be displayed.
shoes/stiletto.jpg
shoes/stiletto.jpg
This is a binary file and will not be displayed.
shoes/tstrap.jpg
shoes/tstrap.jpg
This is a binary file and will not be displayed.
shoes/wedge.jpg
shoes/wedge.jpg
This is a binary file and will not be displayed.
shoes/wellington.jpg
shoes/wellington.jpg
This is a binary file and will not be displayed.
shoes/winklepicker.jpg
shoes/winklepicker.jpg
This is a binary file and will not be displayed.
sleeve/batwing.jpg
sleeve/batwing.jpg
This is a binary file and will not be displayed.
sleeve/bell.jpg
sleeve/bell.jpg
This is a binary file and will not be displayed.
sleeve/bishop.jpg
sleeve/bishop.jpg
This is a binary file and will not be displayed.
sleeve/bracelet.jpg
sleeve/bracelet.jpg
This is a binary file and will not be displayed.
sleeve/butterfly.jpg
sleeve/butterfly.jpg
This is a binary file and will not be displayed.
sleeve/cape.jpg
sleeve/cape.jpg
This is a binary file and will not be displayed.
sleeve/circularcap.jpg
sleeve/circularcap.jpg
This is a binary file and will not be displayed.
sleeve/cowl.jpg
sleeve/cowl.jpg
This is a binary file and will not be displayed.
sleeve/dropshoulder.jpg
sleeve/dropshoulder.jpg
This is a binary file and will not be displayed.
sleeve/french.jpg
sleeve/french.jpg
This is a binary file and will not be displayed.
sleeve/juliet.jpg
sleeve/juliet.jpg
This is a binary file and will not be displayed.
sleeve/kimono.jpg
sleeve/kimono.jpg
This is a binary file and will not be displayed.
sleeve/lantern.jpg
sleeve/lantern.jpg
This is a binary file and will not be displayed.
sleeve/layered.jpg
sleeve/layered.jpg
This is a binary file and will not be displayed.
sleeve/marie.jpg
sleeve/marie.jpg
This is a binary file and will not be displayed.
sleeve/muttonleg.jpg
sleeve/muttonleg.jpg
This is a binary file and will not be displayed.
sleeve/peasant.jpg
sleeve/peasant.jpg
This is a binary file and will not be displayed.
sleeve/petal.jpg
sleeve/petal.jpg
This is a binary file and will not be displayed.
sleeve/poet.jpg
sleeve/poet.jpg
This is a binary file and will not be displayed.
sleeve/puffed.jpg
sleeve/puffed.jpg
This is a binary file and will not be displayed.
sleeve/raglan.jpg
sleeve/raglan.jpg
This is a binary file and will not be displayed.
sleeve/rollup.jpg
sleeve/rollup.jpg
This is a binary file and will not be displayed.
sleeve/shirt.jpg
sleeve/shirt.jpg
This is a binary file and will not be displayed.
+78
-2
style.css
+78
-2
style.css
···
22
22
display: inline-block;
23
23
cursor: pointer;
24
24
}
25
-
div.outfitdisplay > table {
26
-
display: inline-block;
25
+
div.outfitdisplay {
26
+
display:inline-block;
27
27
padding: 1%;
28
28
margin: 1%;
29
+
position:absolute;
30
+
width:400px;
31
+
height:600px;
29
32
}
30
33
31
34
div.options {
···
48
51
.sleeveFlip > img {
49
52
-webkit-transform: scaleX(-1);
50
53
transform: scaleX(-1);
54
+
}
55
+
56
+
.background {
57
+
position:absolute;
58
+
width:400px;
59
+
height:600px;
60
+
}
61
+
62
+
.gray {
63
+
background-color:gray;
64
+
}
65
+
66
+
.red {
67
+
background-color:red;
68
+
}
69
+
70
+
.orange {
71
+
background-color:orange;
72
+
}
73
+
74
+
.yellow {
75
+
background-color:yellow;
76
+
}
77
+
78
+
.green {
79
+
background-color:green;
80
+
}
81
+
82
+
.cyan {
83
+
background-color:cyan;
84
+
}
85
+
86
+
.blue {
87
+
background-color:blue;
88
+
}
89
+
90
+
.purple {
91
+
background-color:purple;
92
+
}
93
+
94
+
95
+
span {
96
+
display:inline-block;
97
+
width: 22px;
98
+
height: 22px;
99
+
outline: 3px solid black;
100
+
}
101
+
102
+
/* Images */
103
+
104
+
#doll {
105
+
position:absolute;
106
+
width:400px;
107
+
height:600px;
108
+
background-image:url("img/doll.png");
109
+
}
110
+
111
+
#neckline {
112
+
position:absolute;
113
+
width:400px;
114
+
height:600px;
115
+
}
116
+
117
+
#top {
118
+
position:absolute;
119
+
width:400px;
120
+
height:600px;
121
+
}
122
+
123
+
#sleeves {
124
+
position:absolute;
125
+
width:400px;
126
+
height:600px;
51
127
}
top/crop.jpg
top/crop.jpg
This is a binary file and will not be displayed.
top/long.jpg
top/long.jpg
This is a binary file and will not be displayed.
top/normal.jpg
top/normal.jpg
This is a binary file and will not be displayed.