diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-02-20 16:11:50 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-02-20 16:15:08 +0100 |
| commit | 73a5c7fae9ffbe9ada721148c8c454a643aceebe (patch) | |
| tree | c8fad013ed9b5dd589add87f8d45cf02bbfc6e91 /public/projects/js-small-apps/color-cycle/index.html | |
| parent | b01239fbdcc5bbc5921f73ec0e8fee7bedd5c8e8 (diff) | |
chore!: restructure repo
I separated public files from the config/dev files. It improves repo
readability.
I also moved dotenv helper to public/inc directory and extract the
Matomo tracker in the same directory.
Diffstat (limited to 'public/projects/js-small-apps/color-cycle/index.html')
| -rw-r--r-- | public/projects/js-small-apps/color-cycle/index.html | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/public/projects/js-small-apps/color-cycle/index.html b/public/projects/js-small-apps/color-cycle/index.html new file mode 100644 index 0000000..bb99787 --- /dev/null +++ b/public/projects/js-small-apps/color-cycle/index.html @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Color Cycle</title> + <link rel="stylesheet" href="style.css" /> + </head> + <body class="body"> + <header class="header"> + <h1 class="branding">Color Cycle</h1> + </header> + <main class="main"> + <div class="color-cycle"> + <div class="color-cycle__preview"> + <div class="preview"></div> + <button class="btn" type="button">Start</button> + </div> + <form action="" class="color-cycle__settings form"> + <fieldset class="form__fieldset"> + <legend class="form__legend">Hex Color</legend> + <div class="form__item"> + <label for="color-red" class="form__label">Red</label + ><input + type="text" + name="color-red" + id="color-red" + class="form__input" + size="2" + value="FF" + /> + </div> + <div class="form__item"> + <label for="color-green" class="form__label">Green</label + ><input + type="text" + name="color-green" + id="color-green" + class="form__input" + size="2" + value="FF" + /> + </div> + <div class="form__item"> + <label for="color-blue" class="form__label">Blue</label + ><input + type="text" + name="color-blue" + id="color-blue" + class="form__input" + size="2" + value="FF" + /> + </div> + </fieldset> + <fieldset class="form__fieldset"> + <legend class="form__legend">Increment</legend> + <div class="form__item"> + <label for="increment-red" class="form__label">Red</label + ><input + type="number" + name="increment-red" + id="increment-red" + class="form__input" + size="2" + value="0" + /> + </div> + <div class="form__item"> + <label for="increment-green" class="form__label">Green</label + ><input + type="number" + name="increment-green" + id="increment-green" + class="form__input" + size="2" + value="0" + /> + </div> + <div class="form__item"> + <label for="increment-blue" class="form__label">Blue</label + ><input + type="number" + name="increment-blue" + id="increment-blue" + class="form__input" + size="2" + value="0" + /> + </div> + </fieldset> + <fieldset class="form__fieldset"> + <legend class="form__legend">Time</legend> + <div class="form__item"> + <label for="time-interval" class="form__label" + >Interval (ms)</label + > + <input + type="range" + name="time-interval" + id="time-interval" + min="1" + max="1000" + value="250" + /> + </div> + </fieldset> + </form> + </div> + </main> + <footer class="footer"> + <p class="copyright">Color Cycle. MIT 2021. Armand Philippot.</p> + </footer> + <script src="app.js"></script> + </body> +</html> |