<?xml version="1.0" encoding="UTF-16"?> <html><head> <title localize="STORAGE"></title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/> <link rel="stylesheet" type="text/css" href="menes/style.css"/> <script type="text/javascript" src="menes/menes.js"></script> <script type="text/javascript" src="storage.js"></script> <script type="text/javascript" src="localize.js"></script> <base target="_blank"/> <style> body { display: table; font-family: Helvetica; height: 337px; margin: 0; padding: 0; -webkit-text-size-adjust: none; -webkit-user-select: none; } div.page { display: table-cell; text-align: center; margin: 0 auto; vertical-align: middle; width: 320px; } a.giant-button { background-color: rgba(0, 0, 0, 0.15); -webkit-border-radius: 10px; color: #193250; display: block; margin: 8px 10px; position: relative; text-decoration: none; width: 300px; } a.giant-button > piechart { float: left; margin: 10px; vertical-align: middle; } a.giant-button > label { display: block; float: left; font-size: 25px; margin: 10px 0 4px 4px; text-align: center; text-shadow: rgba(200, 200, 200, 0.75) 1px 1px 0; width: 155px; } a.giant-button > div.text { display: block; float: left; font-size: 14px; margin-left: 4px; text-align: center; width: 155px; } div.key { display: inline-block; width: 50%; } a.giant-button > div.legend { float: left; font-size: 14px; left: 15px; position: absolute; top: 120px; width: 290px; } div.key { margin-bottom: 4px; } piechart { /*-webkit-transform: rotate(-5deg);*/ /*-webkit-transform: rotateY(15deg) rotateX(-45deg);*/ } piechart > div { -webkit-border-radius: 50px; height: 100px; overflow: hidden; position: relative; width: 100px; } piechart > div > div:first-child { height: 100px; overflow: hidden; position: absolute; z-index: 102; width: 51px; } piechart > div > div:last-child { height: 100px; overflow: hidden; position: absolute; width: 100px; z-index: 0; } piechart > div div.lslice, piechart > div div.rslice, piechart > div div.tslice, piechart > div div.bslice { background-color: #4d4d70; } piechart > div div.lslice, piechart > div div.rslice, piechart > div div.tslice, piechart > div div.bslice, piechart > div div.xslice { /* XXX: technically, these aren't needed */ -webkit-border-bottom-left-radius: 50px; -webkit-border-top-left-radius: 50px; height: 100px; position: absolute; -webkit-transform-origin: 100% 50%; width: 50px; } piechart > div div.lslice { z-index: 100; } piechart > div div.rslice, piechart > div div.tslice, piechart > div div.bslice { z-index: 0; } piechart > div div.rslice { -webkit-transform: rotate(180deg); } piechart > div div.tslice { -webkit-transform: rotate(90deg); } piechart > div div.bslice { -webkit-transform: rotate(270deg); } piechart > div > div.nslice { position: absolute; text-align: center; top: 42px; width: 100px; z-index: 103; } piechart > div > div.nslice > div { background-color: rgba(255, 255, 255, 0.7); -webkit-border-radius: 7px; display: inline; color: black; font-size: 15px; font-weight: bold; margin: 0 auto; padding: 2px 4px; text-align: center; } div.color { background-color: black; border: 1px solid #4d4d70; display: inline-block; vertical-align: middle; } div.color > div { border: 1px solid white; display: inline-block; height: 12px; width: 12px; } div.name { display: inline-block; font-size: 14px; margin-left: 5px; vertical-align: middle; } </style> </head><body class="pinstripe"> <panel> <a class="giant-button" style="height: 149px"> <piechart><div> <div id="system-left"></div> <div id="system-right"> <div class="lslice"></div> <div class="rslice"></div> <div class="tslice"></div> <div class="bslice"></div> </div> <div class="nslice"><div id="system-size"></div></div> </div></piechart> <label>System</label> <div class="text">A small partition used to store iPhone OS. Cydia adds a few important programs and libraries.</div> <div class="legend" id="system-legend"></div> </a> <a class="giant-button" style="height: 189px"> <piechart><div> <div id="private-left"></div> <div id="private-right"> <div class="lslice"></div> <div class="rslice"></div> <div class="tslice"></div> <div class="bslice"></div> </div> <div class="nslice"><div id="private-size"></div></div> </div></piechart> <label>Private</label> <div class="text">Most content is stored on this partition: from applications (Cydia and Apple) to multimedia.</div> <div class="legend" id="private-legend"></div> </a> </panel> </body></html>