1 files changed, 174 insertions, 9 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 51d2206..f9e3b4e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -134,6 +134,11 @@ main {
     padding: 10px;
 }
 
+.content-main h1 {
+    color: #ff99cc;
+    margin-bottom: 8px;
+}
+
 .centered-main {
     display: flex;
     flex-direction: column;
@@ -143,17 +148,21 @@ main {
     min-height: 580px;
 }
 
-.centered-main h1 {
-    color: #ffccff;
-    margin: 8px 0px;
+.centered-horizontal {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
 }
 
-.content-main h1 {
-    color: #ff99cc;
-    margin-bottom: 8px;
+.centered-main h1,
+.centered-horizontal h1 {
+    color: #ffccff;
+    margin: 8px 0px;
 }
 
-.centered-main p {
+.centered-main p,
+.centered-horizontal p {
     color: #99ffcc;
 }
 
@@ -187,7 +196,8 @@ main {
 input[type="text"],
 input[type="email"],
 input[type="password"],
-input[type="number"] {
+input[type="number"],
+input[type="url"] {
     background-color: #1a0033;
     border: 1px solid #9999ff;
     color: #ccccff;
@@ -197,13 +207,15 @@ input[type="number"] {
 input[type="text"]:focus,
 input[type="email"]:focus,
 input[type="password"]:focus,
-input[type="number"]:focus {
+input[type="number"]:focus,
+input[type="url"]:focus {
     border-color: #ff99cc;
     background-color: #260040;
     outline: none;
 }
 
 input[type="button"],
+button[type="button"],
 input[type="submit"] {
     background-color: #330066;
     border: 1px solid #9999ff;
@@ -213,6 +225,7 @@ input[type="submit"] {
 }
 
 input[type="button"]:hover,
+button[type="button"]:hover,
 input[type="submit"]:hover {
     background-color: #ff99cc;
     color: #1a001a;
@@ -379,4 +392,156 @@ footer::before {
     padding: 8px;
     margin-bottom: 16px;
     text-align: center;
+}
+
+.upload-drag-box {
+    border: 2px dashed #9999ff;
+    background-color: #1a0033;
+    padding-top: 20px;
+    text-align: center;
+    cursor: pointer;
+    width: 768px;
+    margin: 24px 0px 12px 0px;
+}
+
+.upload-drag-box.dragover {
+    border-color: #ff99cc;
+    background-color: #260040;
+    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+
+.upload-drag-box h1 {
+    margin: 0;
+}
+
+.upload-drag-box p {
+    margin: 8px 0 12px 0;
+}
+
+.upload-drag-box small {
+    display: block;
+    border-top: 1px dashed #9999ff;
+    margin-top: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.upload-area {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.upload-via-link>form {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    width: 768px;
+}
+
+.upload-via-link>form input[type="url"] {
+    flex: 1;
+    width: 100%;
+}
+
+.upload-previews {
+    margin-top: 16px;
+    width: 768px;
+}
+
+.preview-area {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    margin-bottom: 16px;
+}
+
+.preview-image {
+    width: 96px;
+    height: 96px;
+    object-fit: cover;
+    border: 1px solid #9999ff;
+    flex-shrink: 0;
+}
+
+.preview-details {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.preview-link {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    min-width: 0;
+}
+
+.preview-rating-form {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+}
+
+.preview-remove-btn {
+    display: inline-block;
+    width: auto;
+    align-self: flex-start;
+    max-width: 120px;
+}
+
+
+
+.upload-area {
+    position: relative;
+}
+
+.upload-drag-box {
+    position: relative;
+}
+
+.upload-loading-indicator {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(26, 0, 51, 0.85);
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    z-index: 20;
+    pointer-events: none;
+}
+
+.upload-loading-icon {
+    font-size: 2.5em;
+    color: #ff99cc;
+    filter: drop-shadow(0 0 8px #ff99cc88);
+    animation: uploadspin 1.2s linear infinite;
+}
+
+.upload-loading-icon {
+    font-size: 3em;
+    color: #ff99cc;
+    filter: drop-shadow(0 0 8px #ff99cc88);
+    animation: uploadspin 1.2s linear infinite;
+}
+
+@keyframes uploadspin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
 }
\ No newline at end of file