From dd4aada41cd3c12016d1702e03b858d193325d52 Mon Sep 17 00:00:00 2001 From: Greg Gauthier Date: Tue, 25 Jun 2024 11:05:57 +0100 Subject: [PATCH] add simple web page to use the api --- web/rolldice.html | 88 +++++++++++++++++++++++++++++++++++++++++++++++ web/styles.css | 20 +++++++++++ 2 files changed, 108 insertions(+) create mode 100644 web/rolldice.html create mode 100644 web/styles.css diff --git a/web/rolldice.html b/web/rolldice.html new file mode 100644 index 0000000..4c1c3ee --- /dev/null +++ b/web/rolldice.html @@ -0,0 +1,88 @@ + + + + + Gamma World Die Roller + + + + + +

Gamma World Die Roller

+ +

Roll Dice

+ +
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/web/styles.css b/web/styles.css new file mode 100644 index 0000000..a140b2f --- /dev/null +++ b/web/styles.css @@ -0,0 +1,20 @@ +.form-row { + display: flex; + justify-content: space-between; + margin-bottom: 1em; +} + +.form-field { + display: flex; + flex-direction: row; /* changed this from column */ + align-items: center; /* added this to vertically align elements in the row */ + justify-content: space-between; /* added this to put some space between the label and the input field */ + width: 200px; /* optionally set a width to keep it consistent */ +} + +.content-container { + max-width: 500px; /* adjust the max width as per requirement */ + /* this line centers your container */ + margin: 20px 0px 0 20px; + padding: 0 20px; /* bit of padding so content doesn't touch the edges */ +} \ No newline at end of file