jcreek/SelectionWheel
1
0
Fork 0
mirror of https://github.com/jcreek/SelectionWheel.git synced 2026-07-13 03:03:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(#5): Improve styling and responsiveness

Browse Source
This commit is contained in:
Josh Creek
2022-10-08 16:20:26 +01:00
parent 43edb4062d
commit eb449b0e62
4 changed files with 285 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/template.html
+25 -7
View File
@@ -18,19 +18,37 @@
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="manifest" href="<%= require('../src/assets/manifest.webmanifest') %>" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="topbar-container">
<div class="topbar-items"><h1><a href="/">Selection Wheel</a></h1></div>
<p id="install-app-btn-container" class="topbar-items">
<button id="install-offline-app" class="button button-black" role="button">
<span>Install the app (you can even use it offline!)</span>
</button>
</p>
</header>
<div id="spinner-container">
</div>
<textarea id="input-lines" rows="15" cols="60" name="text"
<div id="input-container">
<textarea id="input-lines" class="input-items" rows="15" cols="60" name="text"
placeholder="Enter names to be shuffled, one per line. Leave this area empty in order to use a default set of generated names."></textarea>
<button id="startSpinning">Start spinning</button>
<button id="startSpinning" class="input-items button button-green" role="button">Start spinning</button>
</div>
<p id="install-app-btn-container">
<button id="install-offline-app" class="btn btn-secondary btn-xs">
<span>Install the app (you can even use it offline!)</span>
</button>
</p>
<footer class="footer-container">
<hr>
<span class="footer-items">Copyright &copy; 2022 Josh Creek</span>
<span> | </span>
<span class="footer-items"><a href="/privacy-policy.html">Privacy Policy</a></span>
</footer>
</body>
</html>