MobileCydia.app/storage.html

   1 <?xml version="1.0" encoding="UTF-16"?>
   2 <html><head>
   3     <title localize="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     <script type="text/javascript" src="localize.js"></script>
   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 {
  31             background-color: rgba(0, 0, 0, 0.15);
  32             -webkit-border-radius: 10px;
  33             color: #193250;
  34             display: block;
  35             margin: 8px 10px;
  36             position: relative;
  37             text-decoration: none;
  38             width: 300px;
  39         }
  40
  41         a.giant-button > piechart {
  42             float: left;
  43             margin: 10px;
  44             vertical-align: middle;
  45         }
  46
  47         a.giant-button > label {
  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
  57         a.giant-button > div.text {
  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
  71         a.giant-button > div.legend {
  72             float: left;
  73             font-size: 14px;
  74             left: 15px;
  75             position: absolute;
  76             top: 120px;
  77             width: 290px;
  78         }
  79
  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 {
  90             -webkit-border-radius: 50px;
  91             height: 100px;
  92             overflow: hidden;
  93             position: relative;
  94             width: 100px;
  95         }
  96
  97         piechart > div > div:first-child {
  98             height: 100px;
  99             overflow: hidden;
 100             position: absolute;
 101             z-index: 102;
 102             width: 51px;
 103         }
 104
 105         piechart > div > div:last-child {
 106             height: 100px;
 107             overflow: hidden;
 108             position: absolute;
 109             width: 100px;
 110             z-index: 0;
 111         }
 112
 113         piechart > div div.lslice,
 114         piechart > div div.rslice,
 115         piechart > div div.tslice,
 116         piechart > div div.bslice {
 117             background-color: #4d4d70;
 118         }
 119
 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 */
 126             -webkit-border-bottom-left-radius: 50px;
 127             -webkit-border-top-left-radius: 50px;
 128             height: 100px;
 129             position: absolute;
 130             -webkit-transform-origin: 100% 50%;
 131             width: 50px;
 132         }
 133
 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 {
 157             position: absolute;
 158             text-align: center;
 159             top: 42px;
 160             width: 100px;
 161             z-index: 103;
 162         }
 163
 164         piechart > div > div.nslice > div {
 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">
 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 </body></html>