From 1c1035ba9570cd62079ed525a00299da39e73ac2 Mon Sep 17 00:00:00 2001 From: Wawilski Date: Thu, 29 Feb 2024 15:30:42 +0100 Subject: [PATCH 1/6] 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 1d402bc..3efb969 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -26,7 +26,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; + +} + + -- 2.46.0 From 53ddf5b44c69953a6b6a272ea1a30fea3766a9f3 Mon Sep 17 00:00:00 2001 From: Wawilski Date: Fri, 1 Mar 2024 15:21:10 +0100 Subject: [PATCH 2/6] Table for navigation bars --- frontend/src/App.vue | 66 ++++++++++++++++++++++++++---------- frontend/src/assets/main.css | 5 +-- 2 files changed, 50 insertions(+), 21 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 647d10b..7eff7ee 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -13,18 +13,12 @@ diff --git a/frontend/src/login.js b/frontend/src/login.js new file mode 100644 index 0000000..59eb2ea --- /dev/null +++ b/frontend/src/login.js @@ -0,0 +1,6 @@ +import './assets/main.css' + +import { createApp } from 'vue' +import App from './Login.vue' + +createApp(App).mount('#login') diff --git a/frontend/src/main.js b/frontend/src/main.js index cd29b9e..59b267a 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -1,5 +1,4 @@ import './assets/main.css' -import './assets/styleLogin.css' import 'vue3-toastify/dist/index.css'; import { createApp } from 'vue' -- 2.46.0 From d774daab59f3012a53709701b3249e683dd2b092 Mon Sep 17 00:00:00 2001 From: Anthony Debucquoy Date: Mon, 4 Mar 2024 13:16:42 +0100 Subject: [PATCH 6/6] Fixing the login page availability To access the login page you need login.html. Then this page loads the login.js that generate the login.vue in the div#app (with the '#app') --- frontend/login.html | 11 +++++++++++ frontend/src/login.js | 2 +- 2 files changed, 12 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..05192e0 --- /dev/null +++ b/frontend/login.html @@ -0,0 +1,11 @@ + + + + + Clyde - Login + + +
    + + + diff --git a/frontend/src/login.js b/frontend/src/login.js index 59eb2ea..3ca2456 100644 --- a/frontend/src/login.js +++ b/frontend/src/login.js @@ -3,4 +3,4 @@ import './assets/main.css' import { createApp } from 'vue' import App from './Login.vue' -createApp(App).mount('#login') +createApp(App).mount('#app') -- 2.46.0