-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (91 loc) · 3.2 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
<!DOCTYPE html>
<html>
<head>
<title>Codagogy Card-o-Matic</title>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/features.css" type="text/css">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body>
<div id='wrapper'>
<h1>Codagogy Card-o-Matic</h1>
<!-- Left side with all the controls -->
<div id='controls'>
<!-- Color picker -->
<h2>Pick a color</h2>
<div class="colors" id="red"></div>
<div class="colors" id="orange"></div>
<div class="colors" id="yellow"></div>
<div class="colors" id="green"></div>
<div class="colors" id="blue"></div>
<div class="colors" id="indigo"></div>
<div class="colors" id="purple"></div>
<div class="clearfix"></div>
<!-- Texture picture -->
<h2>Pick a texture</h2>
<div class="textures" id="paper"></div>
<div class="textures" id="swirls"></div>
<div class="textures" id="circles"></div>
<div class="textures" id="cloth"></div>
<div class="clearfix"></div>
<!-- Message -->
<h2>Pick a message</h2>
<div>
<input type='radio' name='message' class="messages" id="happy-birthday">
<label for="happy-birthday">Happy Birthday</label>
</div>
<div>
<input type='radio' name='message' class="messages" id="thank-you">
<label for="thank-you">Thank You</label>
</div>
<div>
<input type='radio' name='message' class="messages" id="congratulations">
<label for="congratulations">Congratulations</label>
</div>
<div>
<input type='radio' name='message' class="messages" id="miss-you">
<label for="miss-you">I miss you</label>
</div>
<!-- Recipient -->
<h2>Dear...</h2>
<div>
<input type='text' id='recipient' maxlength="14">
<span class="error" id="recipient-error"></span>
</div>
<!-- Sticker picker -->
<h2>Click a sticker to add</h2>
<div id="allstickers">
<div>
<img class='stickers' src='images/sticker-green-gift.png' alt='Green gift sticker'>
<img class='stickers' src='images/sticker-heart.png' alt='Heart sticker'>
<img class='stickers' src='images/sticker-yellow-gift.png' alt='Yellow gift sticker'>
<img class='stickers' src='images/sticker-star.png' alt='Star sticker'>
</div>
<div>
<p>Find your own from Google!</p>
<input type="text" id="sticker-search">
<input type="button" id="sticker-search-btn" value="Search">
<p>Ex: "unicorns", "sparkles", "balloons"</p>
<div id="sticker-search-results"></div>
<span class="error" id="search-error"></span>
</div>
</div>
</div>
<!-- Right side with the live preview -->
<div id='preview'>
<div id='card-background'>
<div id='canvas'>
<div id='message-output'></div>
<div id='recipient-output'></div>
</div>
</div>
<!-- Buttons -->
<input type='button' id='refresh-btn' value='Start over'>
<input type='button' id='print-btn' value='Print'>
</div>
</div>
<script src="js/card-o-matic.js"></script>
</body>
</html>