]>
Commit | Line | Data |
---|---|---|
59c011d8 JF |
1 | <?xml version="1.0" encoding="UTF-16"?> |
2 | <html><head> | |
f79a4512 | 3 | <title localize="STORAGE"></title> |
59c011d8 JF |
4 | <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/> |
5 | <link rel="stylesheet" type="text/css" href="menes/style.css"/> | |
6 | <script type="text/javascript" src="menes/menes.js"></script> | |
7 | <script type="text/javascript" src="storage.js"></script> | |
f79a4512 | 8 | <script type="text/javascript" src="localize.js"></script> |
59c011d8 JF |
9 | <base target="_blank"/> |
10 | ||
11 | <style> | |
12 | body { | |
13 | display: table; | |
14 | font-family: Helvetica; | |
15 | height: 337px; | |
16 | margin: 0; | |
17 | padding: 0; | |
18 | -webkit-text-size-adjust: none; | |
19 | -webkit-user-select: none; | |
20 | } | |
21 | ||
22 | div.page { | |
23 | display: table-cell; | |
24 | text-align: center; | |
25 | margin: 0 auto; | |
26 | vertical-align: middle; | |
27 | width: 320px; | |
28 | } | |
29 | ||
30 | a.giant-button { | |
9dd60d81 JF |
31 | background-color: rgba(0, 0, 0, 0.15); |
32 | -webkit-border-radius: 10px; | |
59c011d8 JF |
33 | color: #193250; |
34 | display: block; | |
35 | margin: 8px 10px; | |
9dd60d81 | 36 | position: relative; |
59c011d8 | 37 | text-decoration: none; |
59c011d8 | 38 | width: 300px; |
59c011d8 JF |
39 | } |
40 | ||
9dd60d81 | 41 | a.giant-button > piechart { |
59c011d8 JF |
42 | float: left; |
43 | margin: 10px; | |
44 | vertical-align: middle; | |
45 | } | |
46 | ||
9dd60d81 | 47 | a.giant-button > label { |
59c011d8 JF |
48 | display: block; |
49 | float: left; | |
50 | font-size: 25px; | |
51 | margin: 10px 0 4px 4px; | |
52 | text-align: center; | |
53 | text-shadow: rgba(200, 200, 200, 0.75) 1px 1px 0; | |
54 | width: 155px; | |
55 | } | |
56 | ||
9dd60d81 | 57 | a.giant-button > div.text { |
59c011d8 JF |
58 | display: block; |
59 | float: left; | |
60 | font-size: 14px; | |
61 | margin-left: 4px; | |
62 | text-align: center; | |
63 | width: 155px; | |
64 | } | |
65 | ||
66 | div.key { | |
67 | display: inline-block; | |
68 | width: 50%; | |
69 | } | |
70 | ||
9dd60d81 | 71 | a.giant-button > div.legend { |
59c011d8 JF |
72 | float: left; |
73 | font-size: 14px; | |
74 | left: 15px; | |
75 | position: absolute; | |
76 | top: 120px; | |
77 | width: 290px; | |
78 | } | |
79 | ||
59c011d8 JF |
80 | div.key { |
81 | margin-bottom: 4px; | |
82 | } | |
83 | ||
84 | piechart { | |
85 | /*-webkit-transform: rotate(-5deg);*/ | |
86 | /*-webkit-transform: rotateY(15deg) rotateX(-45deg);*/ | |
87 | } | |
88 | ||
89 | piechart > div { | |
0adc554b | 90 | -webkit-border-radius: 50px; |
59c011d8 | 91 | height: 100px; |
0adc554b | 92 | overflow: hidden; |
59c011d8 | 93 | position: relative; |
0adc554b | 94 | width: 100px; |
59c011d8 JF |
95 | } |
96 | ||
0adc554b | 97 | piechart > div > div:first-child { |
59c011d8 | 98 | height: 100px; |
0adc554b | 99 | overflow: hidden; |
59c011d8 | 100 | position: absolute; |
0adc554b JF |
101 | z-index: 102; |
102 | width: 51px; | |
59c011d8 JF |
103 | } |
104 | ||
0adc554b JF |
105 | piechart > div > div:last-child { |
106 | height: 100px; | |
107 | overflow: hidden; | |
108 | position: absolute; | |
109 | width: 100px; | |
110 | z-index: 0; | |
59c011d8 JF |
111 | } |
112 | ||
0adc554b JF |
113 | piechart > div div.lslice, |
114 | piechart > div div.rslice, | |
115 | piechart > div div.tslice, | |
116 | piechart > div div.bslice { | |
117 | background-color: #4d4d70; | |
59c011d8 JF |
118 | } |
119 | ||
0adc554b JF |
120 | piechart > div div.lslice, |
121 | piechart > div div.rslice, | |
122 | piechart > div div.tslice, | |
123 | piechart > div div.bslice, | |
124 | piechart > div div.xslice { | |
125 | /* XXX: technically, these aren't needed */ | |
59c011d8 JF |
126 | -webkit-border-bottom-left-radius: 50px; |
127 | -webkit-border-top-left-radius: 50px; | |
128 | height: 100px; | |
59c011d8 | 129 | position: absolute; |
0adc554b | 130 | -webkit-transform-origin: 100% 50%; |
59c011d8 JF |
131 | width: 50px; |
132 | } | |
133 | ||
0adc554b JF |
134 | piechart > div div.lslice { |
135 | z-index: 100; | |
136 | } | |
137 | ||
138 | piechart > div div.rslice, | |
139 | piechart > div div.tslice, | |
140 | piechart > div div.bslice { | |
141 | z-index: 0; | |
142 | } | |
143 | ||
144 | piechart > div div.rslice { | |
145 | -webkit-transform: rotate(180deg); | |
146 | } | |
147 | ||
148 | piechart > div div.tslice { | |
149 | -webkit-transform: rotate(90deg); | |
150 | } | |
151 | ||
152 | piechart > div div.bslice { | |
153 | -webkit-transform: rotate(270deg); | |
154 | } | |
155 | ||
156 | piechart > div > div.nslice { | |
59c011d8 JF |
157 | position: absolute; |
158 | text-align: center; | |
159 | top: 42px; | |
160 | width: 100px; | |
0adc554b | 161 | z-index: 103; |
59c011d8 JF |
162 | } |
163 | ||
0adc554b | 164 | piechart > div > div.nslice > div { |
59c011d8 JF |
165 | background-color: rgba(255, 255, 255, 0.7); |
166 | -webkit-border-radius: 7px; | |
167 | display: inline; | |
168 | color: black; | |
169 | font-size: 15px; | |
170 | font-weight: bold; | |
171 | margin: 0 auto; | |
172 | padding: 2px 4px; | |
173 | text-align: center; | |
174 | } | |
175 | ||
176 | div.color { | |
177 | background-color: black; | |
178 | border: 1px solid #4d4d70; | |
179 | display: inline-block; | |
180 | vertical-align: middle; | |
181 | } | |
182 | ||
183 | div.color > div { | |
184 | border: 1px solid white; | |
185 | display: inline-block; | |
186 | height: 12px; | |
187 | width: 12px; | |
188 | } | |
189 | ||
190 | div.name { | |
191 | display: inline-block; | |
192 | font-size: 14px; | |
193 | margin-left: 5px; | |
194 | vertical-align: middle; | |
195 | } | |
196 | </style> | |
197 | </head><body class="pinstripe"> | |
58241d4c | 198 | <panel> |
59c011d8 | 199 | |
9dd60d81 JF |
200 | <a class="giant-button" style="height: 149px"> |
201 | <piechart><div> | |
202 | <div id="system-left"></div> | |
203 | <div id="system-right"> | |
204 | <div class="lslice"></div> | |
205 | <div class="rslice"></div> | |
206 | <div class="tslice"></div> | |
207 | <div class="bslice"></div> | |
208 | </div> | |
209 | <div class="nslice"><div id="system-size"></div></div> | |
210 | </div></piechart> | |
211 | ||
212 | <label>System</label> | |
213 | <div class="text">A small partition used to store iPhone OS. Cydia adds a few important programs and libraries.</div> | |
214 | ||
215 | <div class="legend" id="system-legend"></div> | |
59c011d8 JF |
216 | </a> |
217 | ||
9dd60d81 JF |
218 | <a class="giant-button" style="height: 189px"> |
219 | <piechart><div> | |
220 | <div id="private-left"></div> | |
221 | <div id="private-right"> | |
222 | <div class="lslice"></div> | |
223 | <div class="rslice"></div> | |
224 | <div class="tslice"></div> | |
225 | <div class="bslice"></div> | |
226 | </div> | |
227 | <div class="nslice"><div id="private-size"></div></div> | |
228 | </div></piechart> | |
229 | ||
230 | <label>Private</label> | |
231 | <div class="text">Most content is stored on this partition: from applications (Cydia and Apple) to multimedia.</div> | |
232 | ||
233 | <div class="legend" id="private-legend"></div> | |
59c011d8 JF |
234 | </a> |
235 | ||
58241d4c | 236 | </panel> |
59c011d8 | 237 | </body></html> |