238 lines
6.3 KiB
HTML
238 lines
6.3 KiB
HTML
<?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>
|