diff options
| -rw-r--r-- | lib/partials.php | 17 | ||||
| -rw-r--r-- | public/index.php | 43 | ||||
| -rw-r--r-- | public/static/style.css | 79 |
3 files changed, 138 insertions, 1 deletions
diff --git a/lib/partials.php b/lib/partials.php new file mode 100644 index 0000000..042e5a8 --- /dev/null +++ b/lib/partials.php @@ -0,0 +1,17 @@ +<?php +include_once $_SERVER['DOCUMENT_ROOT'] . '/../config.php'; + +function html_big_navbar() +{ + echo '' ?> + <section class="column justify-center align-center navbar"> + <div class="column justify-center grow"> + <h1><img src="/static/img/brand/big.webp" alt="<?= INSTANCE_NAME ?>"></h1> + </div> + + <div class="row justify-center"> + + </div> + </section> + <?php ; +}
\ No newline at end of file diff --git a/public/index.php b/public/index.php index 1e59c2d..3f3dd98 100644 --- a/public/index.php +++ b/public/index.php @@ -1,4 +1,45 @@ +<?php +include_once $_SERVER['DOCUMENT_ROOT'] . '/../config.php'; +include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php'; + +$accepted_mime_types = []; + +foreach (FILE_ACCEPTED_MIME_TYPES as $k => $v) { + $m = []; + + foreach ($v as $z) { + array_push($m, "$k/$z"); + } + + array_push($accepted_mime_types, implode(', ', $m)); +} + +$accepted_mime_types = implode(', ', $accepted_mime_types); +?> <html> -<p>nhh</p> + +<head> + <title><?= INSTANCE_NAME ?></title> + <link rel="stylesheet" href="/static/style.css"> + <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"> +</head> + +<body> + <main> + <?php html_big_navbar() ?> + + <section class="box column"> + <div class="tab"> + <p>File Upload</p> + </div> + <div class="content"> + <form action="/upload.php" method="post" enctype="multipart/form-data" column="column gap-8"> + <input type="file" name="file" required accept="<?= $accepted_mime_types ?>"> + <button type="submit">Upload</button> + </form> + </div> + </section> + </main> +</body> </html>
\ No newline at end of file diff --git a/public/static/style.css b/public/static/style.css new file mode 100644 index 0000000..335d4ad --- /dev/null +++ b/public/static/style.css @@ -0,0 +1,79 @@ +:root { + --background: #ffe1d4; + --background-2: #f7f0f0; + --foreground: #800; + --box-tab-background: #efc2c2; + --box-border: #800; + --box-content-background: #fff; +} + +* { + padding: 0; + margin: 0; +} + +body { + background: linear-gradient(0deg, var(--background-2), var(--background)); + color: var(--foreground); + + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + font-family: Arial, Helvetica, sans-serif; +} + +main { + width: 50%; + flex-grow: 1; + display: flex; + flex-direction: column; + gap: 8px; +} + +/** BOX */ +.box { + border: 2px solid var(--box-border); +} + +.box:has(.content)>.tab { + background: var(--box-tab-background); + border-bottom: 2px solid var(--box-border); + padding: 8px; + font-weight: bold; +} + +.box:has(.tab)>.content { + background: var(--box-content-background); + padding: 8px; +} + +/** SHORTCUTS */ +.column { + display: flex; + flex-direction: column; +} + +.row { + display: flex; + flex-direction: row; +} + +.grow { + flex-grow: 1; +} + +.justify-center { + justify-content: center; +} + +.align-center { + align-items: center; +} + +.gap-8 { + gap: 8px; +}
\ No newline at end of file |