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             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>