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             background-color: rgba(0, 0, 0, 0.15);
  31             -webkit-border-radius: 10px;
  32             color: #193250;
  33             display: block;
  34             margin: 8px 10px;
  35             position: relative;
  36             text-decoration: none;
  37             width: 300px;
  38         }
  39
  40         a.giant-button > piechart {
  41             float: left;
  42             margin: 10px;
  43             vertical-align: middle;
  44         }
  45
  46         a.giant-button > label {
  47             display: block;
  48             float: left;
  49             font-size: 25px;
  50             margin: 10px 0 4px 4px;
  51             text-align: center;
  52             text-shadow: rgba(200, 200, 200, 0.75) 1px 1px 0;
  53             width: 155px;
  54         }
  55
  56         a.giant-button > div.text {
  57             display: block;
  58             float: left;
  59             font-size: 14px;
  60             margin-left: 4px;
  61             text-align: center;
  62             width: 155px;
  63         }
  64
  65         div.key {
  66             display: inline-block;
  67             width: 50%;
  68         }
  69
  70         a.giant-button > div.legend {
  71             float: left;
  72             font-size: 14px;
  73             left: 15px;
  74             position: absolute;
  75             top: 120px;
  76             width: 290px;
  77         }
  78
  79         div.key {
  80             margin-bottom: 4px;
  81         }
  82
  83         piechart {
  84             /*-webkit-transform: rotate(-5deg);*/
  85             /*-webkit-transform: rotateY(15deg) rotateX(-45deg);*/
  86         }
  87
  88         piechart > div {
  89             -webkit-border-radius: 50px;
  90             height: 100px;
  91             overflow: hidden;
  92             position: relative;
  93             width: 100px;
  94         }
  95
  96         piechart > div > div:first-child {
  97             height: 100px;
  98             overflow: hidden;
  99             position: absolute;
 100             z-index: 102;
 101             width: 51px;
 102         }
 103
 104         piechart > div > div:last-child {
 105             height: 100px;
 106             overflow: hidden;
 107             position: absolute;
 108             width: 100px;
 109             z-index: 0;
 110         }
 111
 112         piechart > div div.lslice,
 113         piechart > div div.rslice,
 114         piechart > div div.tslice,
 115         piechart > div div.bslice {
 116             background-color: #4d4d70;
 117         }
 118
 119         piechart > div div.lslice,
 120         piechart > div div.rslice,
 121         piechart > div div.tslice,
 122         piechart > div div.bslice,
 123         piechart > div div.xslice {
 124             /* XXX: technically, these aren't needed */
 125             -webkit-border-bottom-left-radius: 50px;
 126             -webkit-border-top-left-radius: 50px;
 127             height: 100px;
 128             position: absolute;
 129             -webkit-transform-origin: 100% 50%;
 130             width: 50px;
 131         }
 132
 133         piechart > div div.lslice {
 134             z-index: 100;
 135         }
 136
 137         piechart > div div.rslice,
 138         piechart > div div.tslice,
 139         piechart > div div.bslice {
 140             z-index: 0;
 141         }
 142
 143         piechart > div div.rslice {
 144             -webkit-transform: rotate(180deg);
 145         }
 146
 147         piechart > div div.tslice {
 148             -webkit-transform: rotate(90deg);
 149         }
 150
 151         piechart > div div.bslice {
 152             -webkit-transform: rotate(270deg);
 153         }
 154
 155         piechart > div > div.nslice {
 156             position: absolute;
 157             text-align: center;
 158             top: 42px;
 159             width: 100px;
 160             z-index: 103;
 161         }
 162
 163         piechart > div > div.nslice > div {
 164             background-color: rgba(255, 255, 255, 0.7);
 165             -webkit-border-radius: 7px;
 166             display: inline;
 167             color: black;
 168             font-size: 15px;
 169             font-weight: bold;
 170             margin: 0 auto;
 171             padding: 2px 4px;
 172             text-align: center;
 173         }
 174
 175         div.color {
 176             background-color: black;
 177             border: 1px solid #4d4d70;
 178             display: inline-block;
 179             vertical-align: middle;
 180         }
 181
 182         div.color > div {
 183             border: 1px solid white;
 184             display: inline-block;
 185             height: 12px;
 186             width: 12px;
 187         }
 188
 189         div.name {
 190             display: inline-block;
 191             font-size: 14px;
 192             margin-left: 5px;
 193             vertical-align: middle;
 194         }
 195     </style>
 196 </head><body class="pinstripe">
 197 <dialog>
 198     <panel>
 199
 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>
 216 </a>
 217
 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>
 234 </a>
 235
 236     </panel>
 237 </dialog>
 238 </body></html>