-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
160 lines (139 loc) · 6.52 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Retina CSS Sprite Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="icon" sizes="16x16" href="img/icon16.png">
<link rel="icon" sizes="32x32" href="img/icon32.png">
<link rel="icon" sizes="60x60" href="img/icon60.png">
<link rel="icon" sizes="120x120" href="img/icon120.png">
<!-- styles -->
<link rel="stylesheet" href="css/styles.css">
<!--[if IE lte 9]><link rel="stylesheet" href="css/ie9.min.css"><![endif]-->
<!-- scripts -->
<!--[if IE lte 9]><script type="text/javascript" src="js/ie9.min.js"></script><![endif]-->
<script type="text/javascript" src="js/libs/require.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!--<script type="text/javascript" src="js/scripts.min.js"></script>-->
</head>
<body id="index" data-ng-controller="AppCtrl">
<div class="jump-links">
<ul>
<li><a href="#" data-anchor-smooth-scroll="anchorImages">Images</a></li>
<li><a href="#" data-anchor-smooth-scroll="anchorSprites">Sprites</a></li>
<li><a href="#" data-anchor-smooth-scroll="anchorStylesheet">Stylesheet</a></li>
<li><a href="#" data-anchor-smooth-scroll="anchorPreview">Preview</a></li>
</ul>
</div>
<!-- error message -->
<div class="error-message" data-ng-class="{'show':s.msg.invalidSize}">
<p>
Normal image must be 50% of the Retina image size.
</p>
<p>
Required size is <em>{{s.msg.invalidSize.requiredWidth}}px x {{s.msg.invalidSize.requiredHeight}}px</em>.
</p>
<a href="#" class="icon error-close" data-ng-click="s.msg.invalidSize=null"></a>
</div>
<!-- content -->
<div class="content">
<div class="panel">
<h1><span data-mode="retina">Retina</span> CSS Sprite Generator</h1>
<!-- Select Mode -->
<div class="select-box" title="Mode" data-ng-model="g.mode" data-on-select="triggerSprites()">
<div class="display">
<span class="title">Mode</span>
<span class="value"></span>
</div>
<ul data-transition-height="select.isOpen">
<li data-value="retina">Retina</li>
<li data-value="normal">Normal</li>
</ul>
</div>
<!-- Session Options -->
<div class="session-options">
<a href="#" class="icon disk" data-popup-button="sessionOptions"></a>
<ul id="sessionOptions" data-popup-box>
<li>
<span class="text">Load Session</span>
<input type="file" accept=".json" data-load-session-btn>
</li>
<li>
<a href="." class="text" download="sprite-session.json" data-save-session-btn>Save Session</a>
</li>
</ul>
</div>
<!-- Intro Content -->
<div class="panel-content" data-mode="retina">
<div class="half-box">
<p>
Sprites reduce bandwidth used to request images from a server and help speed up
your page load time by combining icons, logos, and other static images into a single file.
</p>
<p>
Retina and other double density pixel displays have to enlarge your images to display at
the correct size. This causes the images to appear blurry.
</p>
</div>
<div class="half-box">
<p>
This sprite generator creates sprites that look good on both Retina and normal screens.
Using CSS, your website can easily use a normal size sprite for regular displays and a 2x
large sprite for high density displays to prevent blurring.
</p>
</div>
<div class="full-box">
Add your 2x large Retina images below to begin. If you need more info, each panel has its own
help button in the upper right corner.
</div>
</div>
<div class="panel-content hidden" data-mode="normal">
<div class="half-box">
<p>
Sprites reduce bandwidth used to request images from a server and help speed up your page
load time by combining icons, logos, and other static images into a single file.
</p>
</div>
<div class="half-box">
<p>
This sprite generator combines your images and generates the CSS needed to display them
on your website.
</p>
</div>
<div class="full-box">
Add your images below to begin. If you need more info, each panel has its own help button in
the upper right corner.
</div>
</div>
<!-- IE 9 Message -->
<div class="ie9 hidden">
This tool is not compatible with Internet Explorer 9 or below. Please consider upgrading to a more
recent browser.
</div>
</div>
<!-- Image Drop Area -->
<span id="anchorImages"></span>
<ext-template data-path="images"></ext-template>
<!-- Sprites -->
<span id="anchorSprites"></span>
<ext-template data-path="sprites"></ext-template>
<!-- Stylesheet Output -->
<span id="anchorStylesheet"></span>
<ext-template data-path="stylesheet"></ext-template>
<!-- Preview -->
<span id="anchorPreview"></span>
<ext-template data-path="preview"></ext-template>
</div>
<!-- Footer -->
<div class="footer">
<div>
Retina CSS Sprite Generator by <a href="https://twitter.com/JCThePants" target="_blank">JCThePants</a>.
</div>
<div>
Icons by <a href="https://www.iconfinder.com/designmodo" target="_blank">Designmodo</a>.
</div>
<a href="https://github.com/JCThePants/Retina-CSS-Sprite-Generator" class="icon github" target="_blank"></a>
</div>
</body>
</html>