summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorjunicchi <junicchi@waifu.club>2021-02-14 01:17:55 +0300
committertejr <tejr@sqt.wtf>2021-02-14 23:32:57 +1300
commite77d617364f8285af5555708400c402261efa58d (patch)
tree56899d3ffbffce988f29a39cf3a3e68f1141aaa1
parentUse IP address instead of hostname for binding (diff)
downloadsoundboard-e77d617364f8285af5555708400c402261efa58d.tar.gz
soundboard-e77d617364f8285af5555708400c402261efa58d.zip
Initial CSS theme to site
Signed-off-by: tejr <tejr@sqt.wtf>
-rw-r--r--background.pngbin0 -> 196 bytes
-rw-r--r--index.php46
-rw-r--r--style.css61
3 files changed, 84 insertions, 23 deletions
diff --git a/background.png b/background.png
new file mode 100644
index 0000000..38f86e1
--- /dev/null
+++ b/background.png
Binary files differ
diff --git a/index.php b/index.php
index ab6b405..4c89801 100644
--- a/index.php
+++ b/index.php
@@ -64,27 +64,29 @@ function html($s) {
<h1>
#sqt Soundboard
</h1>
- <p>
- Click a button to play a sound.
- If I’ve written this right, everyone with the page open in Chrome or Firefox should hear it too!
- Hold down <kbd>Shift</kbd> when you click, if you want the sound to play only for you.
- </p>
- <p>
- <strong>Disclaimer:</strong>
- Please don’t assume any of these sounds reflect our actual opinions of anything at all, ever.
- Most of them are from a collection of <a href="https://duckduckgo.com/?q=mirc+sounds">mIRC sounds</a> one of the administrators collected during his misspent youth.
- </p>
- <form action="" method="post" enctype="multipart/form-data">
- <input name="new" type="file">
- <input type="submit" value="Upload">
- OGG, &lt;2MB
- </form>
- <p style="font-size:0.8em;">
- <strong>Newest:</strong>
- <?=implode(', ', array_map(function ($fn) {
- return html($fn);
- }, $news))?>
- </p>
+ <div id="header">
+ <p class="info">
+ Click a button to play a sound.
+ If I’ve written this right, everyone with the page open in Chrome or Firefox should hear it too!
+ Hold down <kbd>Shift</kbd> when you click, if you want the sound to play only for you.
+ </p>
+ <p class="disclaimer">
+ <strong>Disclaimer:</strong>
+ Please don’t assume any of these sounds reflect our actual opinions of anything at all, ever.
+ Most of them are from a collection of <a href="https://duckduckgo.com/?q=mirc+sounds">mIRC sounds</a> one of the administrators collected during his misspent youth.
+ </p>
+ <form action="" method="post" enctype="multipart/form-data">
+ <input name="new" type="file">
+ <input type="submit" value="Upload">
+ OGG, &lt;2MB
+ </form>
+ <p class="newest" style="font-size:0.8em;">
+ <strong>Newest:</strong>
+ <?=implode(', ', array_map(function ($fn) {
+ return html($fn);
+ }, $news))?>
+ </p>
+ </div>
<p>
<?php foreach (array_keys($sounds) as $index): ?>
<a href="#<?=html($index)?>"><?=html($index)?></a>
@@ -92,7 +94,7 @@ function html($s) {
</p>
<?php foreach (array_keys($sounds) as $index): ?>
<section id="<?=html($index)?>">
- <h2><?=html($index)?></h2>
+ <h2><?=html(strtoupper($index))?></h2>
<?php foreach ($sounds[$index] as $sound): ?>
<button><?=html(basename($sound, '.ogg'))?></button>
<?php endforeach; ?>
diff --git a/style.css b/style.css
index bca3fc3..4987132 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,68 @@
+body {
+ background-image: url(./background.png);
+ font-family: Helvetica;
+ text-align:center;
+}
+
#np-bar {
position: fixed;
top: 0;
right: 0;
z-index: 1;
- background: #ffaaaa;
+ background: #73a5af87;
opacity: 0.5;
padding: 0.5em;
+ margin-top:8px;
+ margin-right:8px;
+}
+
+div#header {
+ max-width: 800px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+a {
+ text-decoration: none;
+ color: #3F8694;
+}
+
+.disclaimer {
+ border: solid 1px;
+ border-radius: 10px;
+ border-color:#2a6275;
+ padding: 10px;
+}
+
+.newest {
+ color:gray;
+ font-style: italic
+}
+
+.info {
+ font-size: 20px;
+}
+
+h1,h2 {
+ color:#3c92ae;
+}
+
+h1 {
+ font-size:52px;
+ margin-bottom: 0px;
+}
+
+h2 {
+ margin-bottom: 2px;
+ margin-top: 30px;
+}
+
+button {
+ background-color: white;
+ color: black;
+ border: 2px solid #4E8F9CB3;
+ color:#4F8793;
+ border-radius: 10px;
+ margin-top: 4px;
+ padding: 6px;
}