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