-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
134 lines (114 loc) · 5.28 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
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Buttonizer</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link type="text/css" href="css/themes/base/jquery.ui.all.css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script src="js/farbtastic.js" type="text/javascript"></script>
<script src="js/vendors/template.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body>
<div class="container_16">
<div class="grid_16">
<div id="header">
<img src="img/logo.png" alt="CSS3 Buttonizer" id="logo" />
</div>
</div>
<div id="main" class="grid_16">
<div class="grid_7 alpha">
<div id="control">
<h3>Customize to your heart's content!</h3>
<div class="controlInput">
<label>Choose a class name:</label>
<input type="text" id="className" class="txtin" placeholder="Pick a class" value="" />
</div>
<div class="controlInput">
<label>Choose your button text:</label>
<input type="text" id="button-text" class="txtin" value="" />
</div>
<div class="controlSlider">
<label>How rounded should your border be?</label><br />
<div id="borderRadiusSlider"></div>
</div>
<div id="colorWrapper">
<div id="colorSample">
<!--
********************************
*** Label seems unnecessary. ***
********************************
<label>Pick a main color:</label><br />
-->
<input type="text" id="colorInput" class="colorIn" placeholder="Pick a color" value="#FFFFFF" />
</div>
<!--
********************************************************************
*** Removing so that it's easier to create a good looking button ***
********************************************************************
<label>Pick a highlight color:</label><br />
<input type="text" id="highlightInput" class="colorIn" placeholder="Pick a color" value="#FFFFFF" /><br />
<label>Pick a shadow color:</label><br />
<input type="text" id="shadowInput" class="colorIn" placeholder="Pick a color" value="#FFFFFF" />
-->
<div id="colorPicker"></div>
</div><!-- end #colorWrapper -->
<div class="controlSlider">
<label>What font size do you want?</label><br />
<div id="fontSizeSlider"></div>
</div>
<div class="controlSlider">
<label>Font style options:</label><br />
Checkboxes for normal / bold / italic / uppercase
</div>
<div class="controlSlider">
<label>How much padding would you like?</label><br />
<div id="paddingSlider"></div>
</div>
<div class="controlSlider">
<label>What type of background should we optimize the buttons for?</label><br />
Radio for Light // Radio for Dark
</div>
</div>
</div>
<div class="grid_9 omega">
<h3>This is what you get!</h3>
<div id="output">
<div class="inner">
<h3>HTML:</h3>
<pre id="outputHtml"><a class="minim" href=""> Your Button </a></pre>
<h3>CSS:</h3>
<pre id="outputCss"></pre>
</p>
</div>
</div>
<div id="preview">
<div id="previewText">
<h3>Preview:</h3>
</div>
<div id="renderedPreview">
<a class="minim ltBlue" href="">Your Button</a>
<a class="minim dkBlue" href="">Your Button</a>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="grid_16">
<div id="more">
<div class="inner">
If you want to come back to this specific button, just visit: <a href="#">buttonizer.com/save?border=1&color=FFFF00&size=small</a>.
</div>
</div>
</div>
<div class="grid_16">
<div id="footer">
Copyright © 2010 - a collaboration of <a href="http://minim.co/">Minim Group</a> and <a href="http://alexle.net/">Alex Le</a>
</div>
</div>
</div>
</body>
</html>