diff options
| author | Steph Enders <steph@senders.io> | 2024-02-29 09:31:15 -0500 |
|---|---|---|
| committer | Steph Enders <steph@senders.io> | 2024-02-29 09:31:15 -0500 |
| commit | 2b39175011422a0d8f96d7f598f46e2a781dd28f (patch) | |
| tree | dd896a1e35e2ec194bfce829afd61f553652464a /www/dice | |
| parent | 350a5058cf383733a7e75f753abdcd1cb7aae2c5 (diff) | |
Initial rework commit: Build Script POC and CSS done
I've created the main CSS layout and a proof of concept for the build
script: this will actually build any "done" _post/ file and generate
it as a workable HTML file. However, no index file generate, rss, or
gemini is implemented
Diffstat (limited to 'www/dice')
| -rw-r--r-- | www/dice/index.css | 38 | ||||
| -rw-r--r-- | www/dice/index.html | 105 |
2 files changed, 0 insertions, 143 deletions
diff --git a/www/dice/index.css b/www/dice/index.css deleted file mode 100644 index 9c3a8e4..0000000 --- a/www/dice/index.css +++ /dev/null @@ -1,38 +0,0 @@ -#numdice { - font-size: 2em; - width: 100px; - text-align: center; -} - -#rollbtn { - font-size: 2em; - padding: 8px 32px; -} - -.output tbody tr:nth-child(even) { - background-color: #e6e6e6; -} - -#history { - min-width: 33%; -} - -.num { - text-align: center; - padding: 0 4px; -} - -tr th { - border-bottom: 1px dotted #444; -} - -#history tr th:nth-child(2), #history tr td:nth-child(2) { - border-right: 1px solid #444; -} - -.footer { - font-size: 0.5em; - text-align: center; - width: 100%; -} - diff --git a/www/dice/index.html b/www/dice/index.html deleted file mode 100644 index 990be2d..0000000 --- a/www/dice/index.html +++ /dev/null @@ -1,105 +0,0 @@ -<!DOCTYPE html> -<html> -<head> - <meta name="generator" - content="HTML Tidy for HTML5 for Linux version 5.7.45"> - <meta charset="utf-8"> - <title>senders.io - Dice Roller</title> - <link rel="stylesheet" - type="text/css" - href="/index.css"> - <link rel="stylesheet" - type="text/css" - href="./index.css"> - <meta name="viewport" - content="width=device-width, initial-scale=1"> -</head> -<body> - <article id="body"> - <h1>Dice Roller</h1> - <p>Set your number of dice and press roll. The output tables will display - the number of count of each result rolled.</p> - <div class='form'> - <input type='number' - min="1" - max="999" - id="numdice" - value="4"> <button id='rollbtn' - onclick="roll()">Roll</button> - </div> - <h2>Roll Results</h2> - <table id='results' - class='output'> - <thead> - <tr> - <th>Dice Face</th> - <th>Num Rolled</th> - </tr> - </thead> - <tbody id='resbody'></tbody> - </table> - <h2>Roll History</h2> - <table id='history' - class='output'> - <thead> - <tr> - <th class='num'>#</th> - <th colspan="2">cnt</th> - <th>1s</th> - <th>2s</th> - <th>3s</th> - <th>4s</th> - <th>5s</th> - <th>6s</th> - </tr> - </thead> - <tbody id='histbody'></tbody> - </table> - </article> - <article class='footer'> - <i>This page uses basic javascript. Nothing external.</i> - </article> - <div id='copyright'> - <small>© 2023 senders dot io - <a rel= - "license external noopener noreferrer" - target="_blank" - href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a> - unless otherwise noted.</small> - </div> - <script> - var numRolls = 0; - - function roll() { - numRolls += 1; - var nI = document.getElementById("numdice"); - var numDice = nI.value; - var results = {}; - results[1] = 0; - results[2] = 0; - results[3] = 0; - results[4] = 0; - results[5] = 0; - results[6] = 0; - for (var i = 0; i < numDice; i++) { - var r = Math.floor((Math.random() * 100) % 6) + 1; - results[r] += 1; - } - display(results, numDice); - } - - function display(res, numDice) { - var resBody = document.getElementById("resbody"); - var histBody = document.getElementById("histbody"); - resHTML = ""; - histHTML = `<tr><td class='num'>${numRolls}</td><td colspan=2>${numDice}</td>`; - for (var i = 1; i <= 6; i++) { - resHTML += `<tr><td>${i}</td><td>${res[i]}</td></tr>`; - histHTML += `<td>${res[i]}</td>`; - } - histHTML += "</tr>"; - histBody.innerHTML = histHTML + histBody.innerHTML; - resBody.innerHTML = resHTML; - } - </script> -</body> -</html> |