diff options
-rw-r--r-- | public/global.css | 144 | ||||
-rw-r--r-- | src/App.svelte | 7 | ||||
-rw-r--r-- | src/Navbar.svelte | 18 | ||||
-rw-r--r-- | src/algorithms/line-drawing/DDA.svelte | 45 |
4 files changed, 137 insertions, 77 deletions
diff --git a/public/global.css b/public/global.css index d63c896..a7545c5 100644 --- a/public/global.css +++ b/public/global.css @@ -1,76 +1,77 @@ /* Colors from Modus theme. **************************************************/ /* Stylesheets used on https://andinus.unfla.me ******************************/ :root { - --bg-main: #ffffff; - --bg-dim: #f8f8f8; - --bg-alt: #f0f0f0; - - --blue-subtle-bg: #b5d0ff; - --cyan-subtle-bg: #c0efff; - --bg-hl-alt-intense: #e8dfd1; - - --fg-main: #000000; - --fg-dim: #282828; - --fg-alt: #505050; - - --fg-special-cold: #093060; - --fg-special-mild: #184034; - --fg-special-warm: #5d3026; - --fg-special-calm: #61284f; - - --red: #a60000; - --green: #005e00; - --yellow: #813e00; - --blue: #0031a9; - --magenta: #721045; - --cyan: #00538b; - - --blue-alt-other: #0000c0; - --yellow-nuanced-fg: #3f3000; + --bg-main: #ffffff; + --bg-dim: #f8f8f8; + --bg-alt: #f0f0f0; + + --blue-subtle-bg: #b5d0ff; + --cyan-subtle-bg: #c0efff; + --bg-hl-alt-intense: #e8dfd1; + + --fg-main: #000000; + --fg-dim: #282828; + --fg-alt: #505050; + + --fg-special-cold: #093060; + --fg-special-mild: #184034; + --fg-special-warm: #5d3026; + --fg-special-calm: #61284f; + + --red: #a60000; + --green: #005e00; + --yellow: #813e00; + --blue: #0031a9; + --magenta: #721045; + --cyan: #00538b; + + --blue-alt-other: #0000c0; + --yellow-nuanced-fg: #3f3000; } @media (prefers-color-scheme: dark) { - :root { - --bg-main: #000000; - --bg-dim: #100f10; /* #110b11 */ - --bg-alt: #191a1b; /* #181a20 */ - - --blue-subtle-bg: #10387c; - --cyan-subtle-bg: #00415e; - --bg-hl-alt-intense: #282e46; - - --fg-main: #ffffff; - --fg-dim: #e0e6f0; - --fg-alt: #a8a8a8; - - --fg-special-cold: #c6eaff; - --fg-special-mild: #bfebe0; - --fg-special-warm: #f8dec0; - --fg-special-calm: #fbd6f4; - - --red: #ff8059; - --green: #44bc44; - --yellow: #eecc00; - --blue: #2fafff; - --magenta: #feacd0; - --cyan: #00d3d0; - - --blue-alt-other: #00bcff; - --yellow-nuanced-fg: #dfdfb0; - - } + :root { + --bg-main: #000000; + --bg-dim: #100f10; /* #110b11 */ + --bg-alt: #191a1b; /* #181a20 */ + + --blue-subtle-bg: #10387c; + --cyan-subtle-bg: #00415e; + --bg-hl-alt-intense: #282e46; + + --fg-main: #ffffff; + --fg-dim: #e0e6f0; + --fg-alt: #a8a8a8; + + --fg-special-cold: #c6eaff; + --fg-special-mild: #bfebe0; + --fg-special-warm: #f8dec0; + --fg-special-calm: #fbd6f4; + + --red: #ff8059; + --green: #44bc44; + --yellow: #eecc00; + --blue: #2fafff; + --magenta: #feacd0; + --cyan: #00d3d0; + + --blue-alt-other: #00bcff; + --yellow-nuanced-fg: #dfdfb0; + + } } ::selection { background-color: var(--bg-hl-alt-intense); } html { - color: var(--fg-main); - background-color: var(--bg-main); - font-family: "Iosevka Aile", sans-serif; + color: var(--fg-main); + background-color: var(--bg-main); + font-family: "Iosevka Aile", sans-serif; } body { - margin: 2ch; - line-height: 1.5; + max-width: 96ch; + margin: auto; + line-height: 1.5; } h1 { color: var(--fg); } @@ -81,18 +82,29 @@ h5 { color: var(--fg-special-calm); } h6 { color: var(--yellow-nuanced-fg); } h1, h2, h3, h4, h5, h6, .title { font-family: "Iosevka Etoile", serif; } .title { - color: var(--fg-special-cold); - border-bottom: 1px solid var(--bg-alt); + color: var(--fg-special-cold); + border-bottom: 1px solid var(--bg-alt); } a { color: var(--blue-alt-other); } a:hover, a:focus { - color: var(--fg-dim); - background-color: var(--blue-subtle-bg); + color: var(--fg-dim); + background-color: var(--blue-subtle-bg); } a:visited { color: var(--cyan); } a:visited:hover, a:visited:focus { - color: var(--fg-dim); - background-color: var(--cyan-subtle-bg); + color: var(--fg-dim); + background-color: var(--cyan-subtle-bg); +} + +form, input { + color: var(--fg-main); + background-color: var(--bg-main); + margin: .25em; + padding: .25em; +} + +input { + border: 2px solid var(--bg-alt); } diff --git a/src/App.svelte b/src/App.svelte index f9742c5..0f4e88d 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,8 +1,9 @@ <script> - import Navbar from './Navbar.svelte' - import Home from './Home.svelte' + import Navbar from './Navbar.svelte'; + import Home from './Home.svelte'; - let page = Home + import DDA from './algorithms/line-drawing/DDA.svelte'; + let page = DDA; const changePage = event => page = event.detail.page; </script> diff --git a/src/Navbar.svelte b/src/Navbar.svelte index 3241646..97d8348 100644 --- a/src/Navbar.svelte +++ b/src/Navbar.svelte @@ -1,9 +1,9 @@ <script> import { createEventDispatcher } from 'svelte'; - import Home from './Home.svelte' - import DDA from './algorithms/line-drawing/DDA.svelte' - import Bresenham from './algorithms/line-drawing/Bresenham.svelte' + import Home from './Home.svelte'; + import DDA from './algorithms/line-drawing/DDA.svelte'; + import Bresenham from './algorithms/line-drawing/Bresenham.svelte'; const dispatch = createEventDispatcher(); @@ -18,19 +18,23 @@ <div class="ddgroup"> Line Drawing Algorithms <div class="ddsub"> - <button on:click={pageDDA}>DDA</button> + <button on:click={pageDDA}>Digital differential analyzer</button> <button on:click={pageBresenham}>Bresenham</button> </div> </div> </nav> <style> - .ddmenu { display: flex; } + .ddmenu { + display: flex; + padding: 0.2em; + border-bottom: 1px solid var(--bg-alt); + } .ddmenu button, .ddmenu .ddgroup { text-align: left; width: 100%; - padding: 15px; + padding: 8px; color: var(--fg-main); text-decoration: none; background: var(--bg-alt); @@ -56,7 +60,7 @@ .ddgroup::after { content: "\27A4"; position: absolute; - top: 13px; right: 10px; + top: 8px; right: 8px; transition: transform 0.2s; } .ddgroup:hover::after { diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte index 5295cfd..db2070a 100644 --- a/src/algorithms/line-drawing/DDA.svelte +++ b/src/algorithms/line-drawing/DDA.svelte @@ -1 +1,44 @@ -<p>DDA</p> +<script> + let x0 = 0, y0 = 0, x1 = 4, y1 = 4; + + $: dx = x1 - x0; + $: dy = y1 - y0; + + $: steps = Math.max(...[dx, dy].map(x => Math.abs(x))); + $: x_inc = dx / steps; + $: y_inc = dy / steps; +</script> + +<h2>Digital differential analyzer</h2> +<form class="points"> + <label for="x0">x0: </label> + <input type="number" id="x0" name="x0" bind:value={x0}> + <label for="y0">y0: </label> + <input type="number" id="y0" name="y0" bind:value={y0}> + <br> + <label for="x1">x1: </label> + <input type="number" id="x1" name="x1" bind:value={x1}> + <label for="y1">y1: </label> + <input type="number" id="y1" name="y1" bind:value={y1}> +</form> +<hr> + +<label for="dx">dx: </label> +<input type="text" id="dx" name="dx" value={dx} disabled><br> +<label for="dy">dy: </label> +<input type="text" id="dy" name="dy" value={dy} disabled> +<hr> + +<label for="steps">steps: </label> +<input type="text" id="steps" name="steps" value={steps} disabled> +<hr> + +<label for="x_inc">x Increment: </label> +<input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br> +<label for="y_inc">y Increment: </label> +<input type="text" id="y_inc" name="y_inc" value={y_inc} disabled> +<hr> + +<style> + hr { color: var(--bg-hl-alt-intense); } +</style> |