diff --git a/src/index.ts b/src/index.ts
index 4f53ff0..5614fc7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,6 +4,7 @@ import loadServiceWorker from './loadServiceWorker';
require('./assets/favicon.ico');
require('./assets/android-chrome-192x192.png');
require('./assets/android-chrome-512x512.png');
+require('./styles/main.scss');
const padding = {
top: 20,
@@ -11,8 +12,11 @@ const padding = {
bottom: 0,
left: 0,
};
-const w = 500 - padding.left - padding.right;
-const h = 500 - padding.top - padding.bottom;
+
+const baseSpinnerSizePx = 800;
+
+const w = baseSpinnerSizePx - padding.left - padding.right;
+const h = baseSpinnerSizePx - padding.top - padding.bottom;
const r = Math.min(w, h) / 2;
let rotation = 0;
let oldrotation = 0;
@@ -76,8 +80,8 @@ function drawWheel() {
.select('#chart')
.append('svg')
.data([data])
- .attr('width', w + padding.left + padding.right)
- .attr('height', h + padding.top + padding.bottom);
+ .attr('preserveAspectRatio', 'xMinYMin meet')
+ .attr('viewBox', `0 0 ${w + padding.left + padding.right} ${h + padding.top + padding.bottom}`);
const container = svg
.append('g')
.attr('class', 'chartholder')
@@ -192,9 +196,12 @@ function startSpinning() {
// Make the elements
const chartElement = document.createElement('div');
chartElement.setAttribute('id', 'chart');
+ chartElement.setAttribute('class', 'spinner-items');
+ document.getElementById('spinner-container').appendChild(chartElement);
document.getElementById('spinner-container').appendChild(chartElement);
const questionElement = document.createElement('div');
questionElement.setAttribute('id', 'question');
+ questionElement.setAttribute('class', 'spinner-items');
const h1Element = document.createElement('h1');
questionElement.appendChild(h1Element);
document.getElementById('spinner-container').appendChild(questionElement);
diff --git a/src/loadServiceWorker.ts b/src/loadServiceWorker.ts
index 323c629..dd378ce 100644
--- a/src/loadServiceWorker.ts
+++ b/src/loadServiceWorker.ts
@@ -2,7 +2,7 @@ export default function loadServiceWorker() {
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
- const installApp = document.getElementById('install-offline-app');
+ const installApp = document.getElementById('install-app-btn-container');
installApp.addEventListener('click', async () => {
if (deferredPrompt !== null) {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 9bca362..9c9aa39 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,34 +1,261 @@
+body {
+ margin: 0;
+ font-family: Arial, sans-serif;
+}
+
+.topbar-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-around;
+ align-items: flex-start;
+ align-content: flex-start;
+ background-color: #ff8800;
+ margin-bottom: 25px;
+ gap: 5px;
+}
+
+.topbar-container h1 {
+ color: white;
+ font-family: 'Fuzzy Bubbles', cursive;
+ font-weight: 700;
+ margin-block-start: 0.2em;
+ margin-block-end: 0.2em;
+
+ a {
+ color: white;
+ }
+
+ a:link {
+ text-decoration: none;
+ }
+}
+.topbar-container p {
+ margin-block-start: 0.2em;
+ margin-block-end: 0.2em;
+}
+
+.topbar-items:nth-child(1) {
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ align-self: flex-start;
+ order: 0;
+}
+
+.topbar-items:nth-child(2) {
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: 200px;
+ align-self: center;
+ order: 0;
+}
+
+#input-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: flex-start;
+ align-content: center;
+ gap: 25px;
+}
+
+.input-items:nth-child(1) {
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: 500px;
+ align-self: auto;
+ order: 0;
+}
+
+.input-items:nth-child(2) {
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ align-self: center;
+ order: 0;
+}
+
+#input-lines {
+ max-width: 100%;
+}
+
+#start-over {
+ position: absolute;
+ top: 100px;
+ left: auto;
+}
+
+#spinner-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: flex-start;
+ align-content: center;
+}
+
+.spinner-items:nth-child(1) {
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: 800px;
+ align-self: auto;
+ order: 0;
+}
+
+.spinner-items:nth-child(2) {
+ display: block;
+ flex-grow: 0;
+ flex-shrink: 1;
+ flex-basis: auto;
+ align-self: auto;
+ order: 0;
+ width: 100%;
+}
+
text{
- font-family:Helvetica, Arial, sans-serif;
- font-size:11px;
+ font-family: Arial, sans-serif;
+ font-size:35px;
pointer-events:none;
}
-#chart{
- position:absolute;
- width:500px;
- height:500px;
- top:0;
- left:0;
-}
-#question{
- position: absolute;
- width:400px;
- height:500px;
- top:0;
- left:520px;
+#chart{
+ max-width:800px;
+ margin-left: auto;
+ margin-right: auto;
}
+
#question h1{
font-size: 50px;
font-weight: bold;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- position: absolute;
- padding: 0;
- margin: 0;
- top:50%;
+ font-family: Arial, sans-serif;
-webkit-transform:translate(0,-50%);
transform:translate(0,-50%);
+ text-align: center;
}
-#install-offline-app {
+#install-app-btn-container {
display: none;
+}
+
+.footer-container {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ color: #423E37;
+ padding-bottom: 10px;
+ background-color: white;
+}
+
+.footer-container hr {
+ max-width: 500px;
+ border-top: 0.5px solid #423E37;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.footer-container a, #privacy-container a {
+ color: #423E37;
+}
+
+.footer-container a:hover, #privacy-container a:hover {
+ color: #81796c;
+}
+
+#privacy-container {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 800px;
+ margin-bottom: 50px;
+}
+
+/* Buttons */
+
+.button {
+ appearance: none;
+ border: 1px solid rgba(27, 31, 35, .15);
+ border-radius: 6px;
+ box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
+ box-sizing: border-box;
+ color: #fff;
+ cursor: pointer;
+ display: inline-block;
+ font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 20px;
+ padding: 6px 16px;
+ position: relative;
+ text-align: center;
+ text-decoration: none;
+ user-select: none;
+ -webkit-user-select: none;
+ touch-action: manipulation;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+
+.button:focus:not(:focus-visible):not(.focus-visible) {
+ box-shadow: none;
+ outline: none;
+}
+
+.button:disabled {
+ border-color: rgba(27, 31, 35, .1);
+ color: rgba(255, 255, 255, .8);
+ cursor: default;
+}
+
+.button:focus {
+ outline: none;
+}
+
+.button-green {
+ background-color: #2ea44f;
+}
+
+.button-green:hover {
+ background-color: #2c974b;
+}
+
+.button-green:focus {
+ box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
+ outline: none;
+}
+
+.button-green:disabled {
+ background-color: #94d3a2;
+}
+
+.button-green:active {
+ background-color: #298e46;
+ box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
+}
+
+.button-black {
+ background-color: #423E37;
+}
+
+.button-black:hover {
+ background-color: #2e2b26;
+}
+
+.button-blue {
+ background-color: #388697;
+}
+
+.button-blue:hover {
+ background-color: #275d69;
+}
+
+.button-white {
+ background-color: #FFFFFF;
+ color: black;
}
\ No newline at end of file
diff --git a/src/template.html b/src/template.html
index 9cc7394..5c7f539 100644
--- a/src/template.html
+++ b/src/template.html
@@ -18,19 +18,37 @@
<%= htmlWebpackPlugin.options.title %>
+
+
+
+
+
+
+
+
-
-
+
+
-
-
-
+