<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Squared 4.0 Settings</title>
<link rel="stylesheet" href="css/slate.min.css">
<link rel="stylesheet" href="squared.min.css">
<body>
<div class="item-container">
<div class="item-container-header">Colors</div>
<div class="item-container-content">
<label class="item bwhide">
Numbers
<select id="num_color" dir='rtl' class="item-select">
<option selected="selected">Diamond</option>
<option>Ruby</option>
<option>Fire</option>
<option>Forest</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Yellow</option>
<option>Cyan</option>
<option>Magenta</option>
<option>Violet</option>
<option>Orange</option>
<option>Vivid Cerulean</option>
<option>Chrome Yellow</option>
<option>Spring Green</option>
<option>Black</option>
<option>Dark Gray</option>
<option>Light Gray</option>
<option>White</option>
</select>
</label>
<label class="item bwhide">
Ornaments
<select id="orn_color" dir='rtl' class="item-select">
<option>Diamond</option>
<option selected="selected">Ruby</option>
<option>Fire</option>
<option>Forest</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Yellow</option>
<option>Cyan</option>
<option>Magenta</option>
<option>Violet</option>
<option>Orange</option>
<option>Vivid Cerulean</option>
<option>Chrome Yellow</option>
<option>Spring Green</option>
<option>Black</option>
<option>Dark Gray</option>
<option>Light Gray</option>
<option>White</option>
</select>
</label>
<label class="item bwhide">
Background
<select id="bg_color" dir='rtl' class="item-select">
<option selected="selected">Black</option>
<option>Dark Gray</option>
<option>Light Gray</option>
<option>White</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Yellow</option>
<option>Cyan</option>
<option>Magenta</option>
<option>Violet</option>
<option>Orange</option>
<option>Vivid Cerulean</option>
<option>Chrome Yellow</option>
<option>Spring Green</option>
</select>
</label>
<label class='item colorhide'>
Three Colors
<input id='monochrome' type='checkbox' class='item-toggle'>
</label>
<label class='item colorhide'>
Invert colors
<input id='invert' type='checkbox' class='item-toggle'>
</label>
</div>
<div class='item-container-footer bwhide'>
Diamond, Ruby, Fire and Forest are the four magical facetted colors.
</div>
</div>
<div class="preview">
<img class="preview-b preview-b-round" src="img/b-Black.png" />
<div class="preview-scaler">
<img class="preview-b" src="img/b-Black.png" />
<img class="preview-o" src="img/b-Black.png" />
<img class="preview-n" src="img/b-Black.png" />
<div class="preview-zero showzero">
<img class="preview-b" src="img/b-Black.png" />
</div>
<div class="preview-zero2 showzero eurodate">
<img class="preview-b" src="img/b-Black.png" />
</div>
<div class="preview-zero showzero">
<img class="preview-o2 showzero eurodate" src="img/b-Black.png" />
</div>
<div class="preview-zero2 smallzero showzero eurodate">
<img class="preview-o2 showzero eurodate" src="img/b-Black.png" />
</div>
<div class="preview-eurodate eurodate">
<img class="preview-b" src="img/b-Black.png" />
<img class="preview-o" src="img/b-Black.png" />
<img class="preview-n" src="img/b-Black.png" />
<img class="preview-b showzero" src="img/b-Black.png" />
<img class="preview-o2 showzero" src="img/0-Ruby.png" />
<div class="preview-centeralign">
<img class="preview-b" src="img/b-Black.png" />
<img class="preview-n" src="img/b-Black.png" />
<div class="preview-centeralign-digit2">
<img class="preview-b" src="img/b-Black.png" />
<img class="preview-o" src="img/b-Black.png" />
</div>
</div>
</div>
<div class="preview-eurodate2 eurodate">
<img class="preview-b" src="img/b-Black.png" />
<img class="preview-o" src="img/b-Black.png" />
<img class="preview-n" src="img/b-Black.png" />
</div>
</div>
<img class="preview-r recthide" src="img/r-Black.png" />
</div>
</div>
<div class="previewbezel"></div>
<div class='item-container'>
<div class='item-container-header'>Appearance</div>
<div class='item-container-content'>
<label class='item'>
European Date (dd/mm)
<input id='date' type='checkbox' class='item-toggle'>
</label>
<label class='item'>
Center-Align Date
<input id='center' type='checkbox' class='item-toggle'>
</label>
<label class='item'>
Leading Zeroes
<input id='zero' type='checkbox' class='item-toggle'>
</label>
<label class='item roundhide'>
Large Numbers
<input id='size' type='checkbox' class='item-toggle'>
</label>
</div>
</div>
<div class='item-container'>
<div class='item-container-header'>Animation</div>
<div class='item-container-content'>
<label class='item'>
Fast Start Delay
<input id='delay' type='checkbox' class='item-toggle'>
</label>
<label class='item'>
Battery Saver
<input id='nightsaver' type='checkbox' class='item-toggle'>
</label>
</div>
</div>
<div class='item-container hide show-on-nightsaver'>
<div class='item-container-header'>Battery Saver</div>
<div class='item-container-content'>
<label class="item">
Stop Animations at
<select id="ns_start" dir='rtl' class="item-select">
<option value="14">2:00pm</option>
<option value="16">4:00pm</option>
<option value="18">6:00pm</option>
<option value="20">8:00pm</option>
<option value="22">10:00pm</option>
<option selected="selected" value="0">Midnight</option>
<option value="2">2:00am</option>
<option value="4">4:00am</option>
<option value="6">6:00am</option>
<option value="8">8:00am</option>
<option value="10">10:00am</option>
<option value="12">12:00am</option>
</select>
</label>
<label class="item">
Continue Animations at
<select id="ns_stop" dir='rtl' class="item-select">
<option value="0">Midnight</option>
<option value="2">2:00am</option>
<option value="4">4:00am</option>
<option selected="selected" value="6">6:00am</option>
<option value="8">8:00am</option>
<option value="10">10:00am</option>
<option value="12">12:00am</option>
<option value="14">2:00pm</option>
<option value="16">4:00pm</option>
<option value="18">6:00pm</option>
<option value="20">8:00pm</option>
<option value="22">10:00pm</option>
</select>
</label>
</div>
</div>
<div class='item-container'>
<div class='item-container-header'>Advanced</div>
<div class='item-container-content'>
<label class='item'>
Vibrate on Disconnect
<input id='btvibe' type='checkbox' class='item-toggle'>
</label>
<label class='item bwhide'>
High Contrast While Charging
<input id='contrast' type='checkbox' class='item-toggle'>
</label>
<label class='item'>
Backlight on While Charging
<input id='backlight' type='checkbox' class='item-toggle'>
</label>
</div>
</div>
<div class="item-container">
<div class="button-container">
<input id="send" type="button" class="item-button" value="SEND">
</div>
</div>
<script src="js/slate.min.js"></script>
<script src="js/main.min.js"></script>
</body> <!-- hey, why are you reading my source? -->
</html>