add a bunch of ui for the search page and style

1 files changed, 59 insertions, 0 deletions

diff --git a/frontend/style.sass b/frontend/style.sass
new file mode 100644
index 0000000..e61799a
--- /dev/null
+++ b/frontend/style.sass
@@ -0,0 +1,59 @@
+$ac-dark: rgb(52, 35, 50) 
+$ac-light: rgb(255, 116, 227)
+
+body
+    background-color: $ac-dark
+    margin: 0px
+
+p, h1, h2, h3, h4, h5, h6, input, button
+    color: white
+
+section.info
+    margin: 5em
+
+.status
+    background-color: black
+    padding: 1em
+    margin: 0px
+    text-align: center
+    box-shadow: 0px 0px 10px 0px black
+
+    &.level-error
+        color: #ff0000
+
+    &.level-success
+        color: #00ff00
+
+
+section.search
+    width: 100vw
+    height: 50vh
+    display: flex;
+    flex-direction: column
+    place-content: center;
+    align-items: center;
+
+    font-size: large
+    font-weight: 500
+
+    input, button
+        border-radius: 0.5em
+        padding: 0.5em
+
+    input
+        width: 25em
+        border: 0.15em solid $ac-light
+        background-color: rgba(0, 0, 0, 0.3)
+        outline: none
+
+        &:focus
+            transition: 0.1s ease-out
+            background-color: rgba(0, 0, 0, 0.5)
+            border-color: lightgray !important
+
+    button
+        margin-left: 1em
+        background-color: $ac-light
+        backdrop-filter: blur(5px)
+        border: 0
+        cursor: pointer