File size: 3,326 Bytes
7bfaa28 b4dec13 7bfaa28 09a5f29 b4dec13 73695ec 0b95cf8 73695ec b4dec13 38bf510 d008dac b4dec13 7bfaa28 2738bcb b4dec13 7bfaa28 b4dec13 73695ec bd3ab96 0b95cf8 bd3ab96 38bf510 bd3ab96 73c94e6 bd3ab96 2738bcb 73c94e6 9035960 0b95cf8 b4dec13 7bfaa28 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@font-face {
font-family: Stencil;
src: url("/Stencil.otf");
}
@font-face {
font-family: Rails;
src: url("/Rails.otf");
}
@font-face {
font-family: Aldrich;
src: url("https://fonts.gstatic.com/s/aldrich/v10/MCoLzAbNqrnQxod8bUzPAJZY.woff2");
}
@font-face {
font-family: Digital;
src: url("/Digital.ttf");
}
@font-face {
font-family: SF;
src: url("/SF-Pro-Display-Regular.otf");
}
</style>
<meta charset="UTF-8">
<title>Standby</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="manifest.json" />
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Aldrich'>
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="MyClockDisplay" class="clock" onclick="toggleMenu()"></div>
<div id="menu" class="menu">
<div class="settings">
<div class="color-options">
<h3>Select Color</h3>
<div class="color-option" onclick="changeColor('#73b66f')">Green</div>
<div class="color-option" onclick="changeColor('#ff0000')">Red</div>
<div class="color-option" onclick="changeColor('#0000ff')">Blue</div>
<div class="color-option" onclick="changeColor('#ffffff')">White</div>
</div>
<div class="font-options">
<h3>Select Font</h3>
<div class="font-option" onclick="changeFont('Stencil')">Stencil</div>
<div class="font-option" onclick="changeFont('Rails')">Rails</div>
<div class="font-option" onclick="changeFont('Aldrich')">Aldrich</div>
<div class="font-option" onclick="changeFont('Digital')">Digital</div>
</div>
<div class="toggle-options">
<h3>Toggle Options</h3>
<div class="toggle-option">
<input type="checkbox" id="toggleSeconds" onchange="toggleSeconds()">
<label for="toggleSeconds">Show Seconds</label>
</div>
<div class="toggle-option">
<input type="checkbox" id="toggleAmPm" onchange="toggleAmPm()" checked>
<label for="toggleAmPm">Show AM/PM</label>
</div>
<div class="toggle-option">
<input type="checkbox" id="toggleAutoSize" onchange="toggleAutoSize()" checked>
<label for="toggleAutoSize">Auto Size</label>
</div>
</div>
<div class="spacing-options">
<h3>Character Spacing</h3>
<input type="range" id="spacingSlider" min="0" max="20" value="7" onchange="adjustSpacing(this.value)">
</div>
<div class="size-options">
<h3>Font Size</h3>
<input type="range" id="sizeSlider" min="50" max="300" value="180" onchange="adjustSize(this.value)" disabled>
</div>
</div>
<button onclick="resetDefaults()">Default Settings</button>
<button onclick="toggleMenu()">Done</button>
</div>
<script src="./script.js"></script>
</body>
</html> |