diff options
Diffstat (limited to 'MobileCydia.app/storage.html')
| -rw-r--r-- | MobileCydia.app/storage.html | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/MobileCydia.app/storage.html b/MobileCydia.app/storage.html new file mode 100644 index 0000000..55ac5ab --- /dev/null +++ b/MobileCydia.app/storage.html @@ -0,0 +1,237 @@ +<?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> |