167 lines
5.9 KiB
HTML
167 lines
5.9 KiB
HTML
<!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="css/squared.css">
|
|
<body>
|
|
|
|
<div class="item-container">
|
|
<div class="item-container-header">Colors</div>
|
|
<div class="item-container-content">
|
|
<label class="item bwhide">
|
|
Number Color
|
|
<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">
|
|
Ornament Color
|
|
<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 Color
|
|
<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 bwhide">
|
|
<img class="preview-b" src="img/b-Black.png" />
|
|
<img class="preview-o" src="img/o-Ruby.png" />
|
|
<img class="preview-n" src="img/n-Diamond.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/0-Ruby.png" />
|
|
</div>
|
|
<div class="preview-zero2 smallzero showzero eurodate">
|
|
<img class="preview-o2 showzero eurodate" src="img/0-Ruby.png" />
|
|
</div>
|
|
<div class="preview-eurodate eurodate">
|
|
<img class="preview-b" src="img/b-Black.png" />
|
|
<img class="preview-o" src="img/o-Ruby.png" />
|
|
<img class="preview-n" src="img/n-Diamond.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/n-Diamond.png" />
|
|
<div class="preview-centeralign-digit2">
|
|
<img class="preview-b" src="img/b-Black.png" />
|
|
<img class="preview-o" src="img/o-Ruby.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-eurodate2 eurodate">
|
|
<img class="preview-b" src="img/b-Black.png" />
|
|
<img class="preview-o" src="img/o-Ruby.png" />
|
|
<img class="preview-n" src="img/n-Diamond.png" />
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<label class='item'>
|
|
Fast Start Delay
|
|
<input id='delay' 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.js"></script>
|
|
</body>
|
|
</html> |