Cydia.app/storage.html

   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             -webkit-border-radius: 50px;
 100             height: 100px;
 101             overflow: hidden;
 102             position: relative;
 103             width: 100px;
 104         }
 105
 106         piechart > div > div:first-child {
 107             height: 100px;
 108             overflow: hidden;
 109             position: absolute;
 110             z-index: 102;
 111             width: 51px;
 112         }
 113
 114         piechart > div > div:last-child {
 115             height: 100px;
 116             overflow: hidden;
 117             position: absolute;
 118             width: 100px;
 119             z-index: 0;
 120         }
 121
 122         piechart > div div.lslice,
 123         piechart > div div.rslice,
 124         piechart > div div.tslice,
 125         piechart > div div.bslice {
 126             background-color: #4d4d70;
 127         }
 128
 129         piechart > div div.lslice,
 130         piechart > div div.rslice,
 131         piechart > div div.tslice,
 132         piechart > div div.bslice,
 133         piechart > div div.xslice {
 134             /* XXX: technically, these aren't needed */
 135             -webkit-border-bottom-left-radius: 50px;
 136             -webkit-border-top-left-radius: 50px;
 137             height: 100px;
 138             position: absolute;
 139             -webkit-transform-origin: 100% 50%;
 140             width: 50px;
 141         }
 142
 143         piechart > div div.lslice {
 144             z-index: 100;
 145         }
 146
 147         piechart > div div.rslice,
 148         piechart > div div.tslice,
 149         piechart > div div.bslice {
 150             z-index: 0;
 151         }
 152
 153         piechart > div div.rslice {
 154             -webkit-transform: rotate(180deg);
 155         }
 156
 157         piechart > div div.tslice {
 158             -webkit-transform: rotate(90deg);
 159         }
 160
 161         piechart > div div.bslice {
 162             -webkit-transform: rotate(270deg);
 163         }
 164
 165         piechart > div > div.nslice {
 166             position: absolute;
 167             text-align: center;
 168             top: 42px;
 169             width: 100px;
 170             z-index: 103;
 171         }
 172
 173         piechart > div > div.nslice > div {
 174             background-color: rgba(255, 255, 255, 0.7);
 175             -webkit-border-radius: 7px;
 176             display: inline;
 177             color: black;
 178             font-size: 15px;
 179             font-weight: bold;
 180             margin: 0 auto;
 181             padding: 2px 4px;
 182             text-align: center;
 183         }
 184
 185         div.color {
 186             background-color: black;
 187             border: 1px solid #4d4d70;
 188             display: inline-block;
 189             vertical-align: middle;
 190         }
 191
 192         div.color > div {
 193             border: 1px solid white;
 194             display: inline-block;
 195             height: 12px;
 196             width: 12px;
 197         }
 198
 199         div.name {
 200             display: inline-block;
 201             font-size: 14px;
 202             margin-left: 5px;
 203             vertical-align: middle;
 204         }
 205     </style>
 206 </head><body class="pinstripe">
 207 <dialog>
 208     <panel>
 209
 210 <a class="giant-button">
 211     <div class="contents">
 212         <piechart><div>
 213             <div id="system-left"></div>
 214             <div id="system-right">
 215                 <div class="lslice"></div>
 216                 <div class="rslice"></div>
 217                 <div class="tslice"></div>
 218                 <div class="bslice"></div>
 219             </div>
 220             <div class="nslice"><div id="system-size"></div></div>
 221         </div></piechart>
 222
 223         <label>System</label>
 224         <div class="text">A small partition used to store iPhone OS. Cydia adds a few important programs and libraries.</div>
 225
 226         <div class="legend" id="system-legend"></div>
 227     </div>
 228
 229     <div class="background" style="height: 149px"></div>
 230 </a>
 231
 232 <a class="giant-button">
 233     <div class="contents">
 234         <piechart><div>
 235             <div id="private-left"></div>
 236             <div id="private-right">
 237                 <div class="lslice"></div>
 238                 <div class="rslice"></div>
 239                 <div class="tslice"></div>
 240                 <div class="bslice"></div>
 241             </div>
 242             <div class="nslice"><div id="private-size"></div></div>
 243         </div></piechart>
 244
 245         <label>Private</label>
 246         <div class="text">Most content is stored on this partition: from applications (Cydia and Apple) to multimedia.</div>
 247
 248         <div class="legend" id="private-legend"></div>
 249     </div>
 250
 251     <div class="background" style="height: 189px"></div>
 252 </a>
 253
 254     </panel>
 255 </dialog>
 256 </body></html>