From 057d8ff0015a3af1516c15af3f43437edce7d80d Mon Sep 17 00:00:00 2001 From: Wawilski Date: Thu, 29 Feb 2024 15:30:42 +0100 Subject: [PATCH] Login prototype --- frontend/login.html | 29 +++++++++++++ frontend/src/App.vue | 2 +- frontend/src/assets/main.css | 80 ++++++++++++++++++++++++++++++++++++ 3 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 frontend/login.html diff --git a/frontend/login.html b/frontend/login.html new file mode 100644 index 0000000..5b1f2eb --- /dev/null +++ b/frontend/login.html @@ -0,0 +1,29 @@ + + + +
+
+
+

SIGN IN

+
+

USERNAME

+ +
+
+

PASSWORD

+ +
+
+ Register +
+
+ +
+
+
+
+ + + + + diff --git a/frontend/src/App.vue b/frontend/src/App.vue index e77b88d..647d10b 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -36,7 +36,7 @@
  • - +
  • diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 6a52f86..446f1b9 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -3,3 +3,83 @@ body { margin:0; } +.logBoxCenterer { + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.loginBox { + background-color: rgb(24,24,24); + position : absolute; + width: 400px; + display:flex; + justify-content: center; + padding: 40px; + border-radius: 20px; + box-shadow:0 5px 25px #000000; + +} +.form { + position:relative; + width:100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items:center; + gap: 15px; +} + +.inputBox{ + width: px; + +} + +.inputBox input { + width:100%; + background:rgb(255, 0 255); + border: none; + margin-right: 50px; + padding-left: 10px; + padding-top:10px; + padding-bottom:10px; + outline:none; + border-radius: 4px; + font-size:1.35em; +} + +.inputBox p{ + position:relative; + z-index: 100; + font-family:sans-serif ; + color:rgb(239,60,168); + transition:0.5; + +} + +.register{ + color:rgb(239,60,168); + width: 100%; + align-items:center; + display:flex; + justify-content: center; + cursor: pointer; +} + +input[type = "submit"] { + background-color: rgb(239,60,168); + cursor: pointer; + padding:10px; + font-size:1.35em; +} + +input[type = "submit"]:active{ + opacity:0.8; + +} + +