Tired of just drawing T-shirt and pants? Use this generator and expand your horizons.
Add files via upload
Work In Progress for 2.0 Version with New Assets
All Sleeves Complete.
authored by
Vivian Vee
and committed by
GitHub
d653bc5a
24e266ed
+333
-6
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
+
}
+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
}