Commit 3fda8b5db13114425c67509882810e472a5b3ca6
1 parent
543e5426
voila
Showing
3 changed files
with
83 additions
and
0 deletions
Show diff stats
| ... | ... | @@ -0,0 +1,18 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="en"> | |
| 3 | +<head> | |
| 4 | + <meta charset="UTF-8"> | |
| 5 | + <title>Changement d'intensité</title> | |
| 6 | + | |
| 7 | +</head> | |
| 8 | +<body> | |
| 9 | +<h1>Changement d'intensite de votre veilleuse connectée</h1> | |
| 10 | +<div id = "slider"> | |
| 11 | + <input type ="range" min ="0" max="255" value ="100" onchange = "rangevalue.value=value"> | |
| 12 | + <span class = "highlight"></span> | |
| 13 | + <output id="rangevalue">50</output> | |
| 14 | +</div> | |
| 15 | + | |
| 16 | +<h3><a href="Menu.html">Retour</a></h3> | |
| 17 | +</body> | |
| 18 | +</html> | ... | ... |
| ... | ... | @@ -0,0 +1,45 @@ |
| 1 | +.onoffswitch { | |
| 2 | + position: relative; width: 138px; | |
| 3 | + -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; | |
| 4 | +} | |
| 5 | +.onoffswitch-checkbox { | |
| 6 | + display: none; | |
| 7 | +} | |
| 8 | +.onoffswitch-label { | |
| 9 | + display: block; overflow: hidden; cursor: pointer; | |
| 10 | + border: 2px solid #999999; border-radius: 19px; | |
| 11 | +} | |
| 12 | +.onoffswitch-inner { | |
| 13 | + display: block; width: 200%; margin-left: -100%; | |
| 14 | + transition: margin 0.3s ease-in 0s; | |
| 15 | +} | |
| 16 | +.onoffswitch-inner:before, .onoffswitch-inner:after { | |
| 17 | + display: block; float: left; width: 50%; height: 34px; padding: 0; line-height: 34px; | |
| 18 | + font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; | |
| 19 | + box-sizing: border-box; | |
| 20 | +} | |
| 21 | +.onoffswitch-inner:before { | |
| 22 | + content: "Automatique"; | |
| 23 | + padding-left: 10px; | |
| 24 | + background-color: #30A9C7; color: #FFFFFF; | |
| 25 | +} | |
| 26 | +.onoffswitch-inner:after { | |
| 27 | + content: "Manuel"; | |
| 28 | + padding-right: 10px; | |
| 29 | + background-color: #EEEEEE; color: #999999; | |
| 30 | + text-align: right; | |
| 31 | +} | |
| 32 | +.onoffswitch-switch { | |
| 33 | + display: block; width: 23px; margin: 5.5px; | |
| 34 | + background: #FFFFFF; | |
| 35 | + position: absolute; top: 0; bottom: 0; | |
| 36 | + right: 100px; | |
| 37 | + border: 2px solid #999999; border-radius: 19px; | |
| 38 | + transition: all 0.3s ease-in 0s; | |
| 39 | +} | |
| 40 | +.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { | |
| 41 | + margin-left: 0; | |
| 42 | +} | |
| 43 | +.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { | |
| 44 | + right: 0px; | |
| 45 | +} | |
| 0 | 46 | \ No newline at end of file | ... | ... |
| ... | ... | @@ -0,0 +1,20 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="en"> | |
| 3 | +<head> | |
| 4 | + <meta charset="UTF-8"> | |
| 5 | + <link rel="stylesheet" href="mode.css" /> | |
| 6 | + <title>Changement de mode</title> | |
| 7 | +</head> | |
| 8 | +<body> | |
| 9 | +<h1>Changement de mode de votre veilleuse connectée</h1> | |
| 10 | +<div class="onoffswitch"> | |
| 11 | + <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> | |
| 12 | + <label class="onoffswitch-label" for="myonoffswitch"> | |
| 13 | + <span class="onoffswitch-inner"></span> | |
| 14 | + <span class="onoffswitch-switch"></span> | |
| 15 | + </label> | |
| 16 | +</div> | |
| 17 | + | |
| 18 | +<h3><a href="Menu.html">Retour</a></h3> | |
| 19 | +</body> | |
| 20 | +</html> | ... | ... |