diff options
| author | ilotterytea <iltsu@alright.party> | 2025-10-26 04:09:50 +0500 |
|---|---|---|
| committer | ilotterytea <iltsu@alright.party> | 2025-10-26 04:09:50 +0500 |
| commit | 6a848158b079af271363392c36921c6e623046a3 (patch) | |
| tree | d5e6345d7d5c929583c7a522a9635b174671c373 | |
| parent | afcc61d3e035e9343a16abf58eb8bcfc5b563925 (diff) | |
feat: design (it doesn't look the same as tinyemotes)
| -rw-r--r-- | lib/config.php | 2 | ||||
| -rw-r--r-- | lib/partials.php | 22 | ||||
| -rw-r--r-- | sounds/upload.php | 45 | ||||
| -rw-r--r-- | static/style.css | 95 |
4 files changed, 149 insertions, 15 deletions
diff --git a/lib/config.php b/lib/config.php index 8705999..73c2efb 100644 --- a/lib/config.php +++ b/lib/config.php @@ -8,6 +8,8 @@ define('DB_URL', "{$c['database']['driver']}:dbname={$c['database']['name']};hos define('DB_USER', $c['database']['user'] ?? null); define('DB_PASS', $c['database']['pass'] ?? null); +define('INSTANCE_NAME', $c['instance']['name'] ?? $_SERVER['HTTP_HOST']); + define('SOUND_DIRECTORY', $c['sound']['directory'] ?? "{$_SERVER['DOCUMENT_ROOT']}/static/userdata/sounds"); define('IS_JSON_REQUEST', isset($_SERVER['HTTP_ACCEPT']) && str_contains($_SERVER['HTTP_ACCEPT'], 'application/json'));
\ No newline at end of file diff --git a/lib/partials.php b/lib/partials.php new file mode 100644 index 0000000..d7026ec --- /dev/null +++ b/lib/partials.php @@ -0,0 +1,22 @@ +<?php +include_once $_SERVER['DOCUMENT_ROOT'] . '/lib/config.php'; + +function html_header() +{ + echo '' ?> + <header> + <section class="brand"> + <a href="/"> + <img src="/static/img/brand/mini.webp" alt=""> + <h1><?= INSTANCE_NAME ?></h1> + </a> + <a href="/sounds/"> + <button>Sounds</button> + </a> + <a href="/sounds/upload.php"> + <button>Upload</button> + </a> + </section> + </header> + <?php ; +}
\ No newline at end of file diff --git a/sounds/upload.php b/sounds/upload.php index eecf9c5..155bd42 100644 --- a/sounds/upload.php +++ b/sounds/upload.php @@ -1,6 +1,7 @@ <?php include_once $_SERVER['DOCUMENT_ROOT'] . '/lib/config.php'; include_once $_SERVER['DOCUMENT_ROOT'] . '/lib/sounds.php'; +include_once $_SERVER['DOCUMENT_ROOT'] . '/lib/partials.php'; if ($_SERVER['REQUEST_METHOD'] == 'POST') { $db = new PDO(DB_URL, DB_USER, DB_PASS); @@ -59,23 +60,37 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') { </head> <body> - <form action="/sounds/upload.php" method="post" enctype="multipart/form-data"> - <div class="column gap-8"> - <label for="file"><b>Sound<span class="red">*</span></b></label> - <input type="file" name="file" id="file" required> - </div> - <div class="column gap-8"> - <label for="name"><b>Sound name<span class="red">*</span></b></label> - <input type="text" name="name" id="name" required> - </div> + <?php html_header(); ?> - <div class="row gap-8"> - <label for="tos">Do you accept <a href="/tos.php">the rules</a>?<span class="red">*</span></label> - <input type="checkbox" name="tos" id="tos" value="1"> - </div> + <main> + <div class="row"> + <div class="box"> + <div class="tab"> + <p>Upload a new sound</p> + </div> + <div class="content"> + <form action="/sounds/upload.php" method="post" enctype="multipart/form-data"> + <div class="column gap-8"> + <label for="file"><b>Sound<span class="red">*</span></b></label> + <input type="file" name="file" id="file" required> + </div> + <div class="column gap-8"> + <label for="name"><b>Sound name<span class="red">*</span></b></label> + <input type="text" name="name" id="name" required> + </div> - <button type="submit">Upload</button> - </form> + <div class="row gap-8"> + <label for="tos">Do you accept <a href="/tos.php">the rules</a>?<span + class="red">*</span></label> + <input type="checkbox" name="tos" id="tos" value="1"> + </div> + + <button type="submit">Upload</button> + </form> + </div> + </div> + </div> + </main> </body> </html>
\ No newline at end of file diff --git a/static/style.css b/static/style.css index a068d89..05a2676 100644 --- a/static/style.css +++ b/static/style.css @@ -1,4 +1,99 @@ +:root { + --primary-1: #97ca96; + --primary-2: #c6eec5; + --primary-3: #d5e9d5; + --border: #445e43; +} + * { padding: 0; margin: 0; +} + +body { + background: var(--primary-3); + width: 100%; + min-height: 100vh; +} + +main { + padding: 8px; +} + +header { + background: linear-gradient(0deg, var(--primary-1), var(--primary-2)); + border-bottom: 1px solid var(--border); + display: flex; + flex-direction: row; + padding: 2px 8px; +} + +header .brand { + display: flex; + flex-direction: row; + gap: 8px; + align-items: end; +} + +header .brand>a { + text-decoration: none; + color: black; + font-size: 12px; +} + +.box { + background: var(--primary-1); + border: 1px solid var(--border); + padding: 8px; + border-radius: 4px; +} + +.box:has(.content):has(.tab) { + background-color: unset; + border: unset; + padding: unset; + border-radius: unset; +} + +.box>.tab { + display: inline-block; + background: var(--primary-1); + padding: 4px 8px; + border: 1px solid var(--border); + border-bottom: unset; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + margin-bottom: -1px; +} + +.box>.content { + background: var(--primary-1); + border: 1px solid var(--border); + padding: 8px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} + +.sound-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 16px; +} + +.sound-item { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.sound-item>.timestamp { + font-size: 12px; +} + +.row { + display: flex; + flex-direction: row; }
\ No newline at end of file |