From 4f4ed952ccebbd42cb9a0528c992efe6b323f326 Mon Sep 17 00:00:00 2001
From: Anthony Debucquoy <debucquoy.anthony@gmail.com>
Date: Tue, 27 Feb 2024 00:51:30 +0100
Subject: [PATCH] adding base template for working
---
frontend/src/App.vue | 156 ++++++++++++++++++++++++++--------
frontend/src/assets/Clyde.png | Bin 0 -> 1312 bytes
frontend/src/assets/logo.svg | 1 -
frontend/src/assets/main.css | 36 +-------
4 files changed, 125 insertions(+), 68 deletions(-)
create mode 100644 frontend/src/assets/Clyde.png
delete mode 100644 frontend/src/assets/logo.svg
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 633a5df..820becd 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,47 +1,135 @@
<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
- <header>
- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+ <ul style="padding-top:60px"class="vertical">
+ <li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
+ <div class="text">Messages</div> </a></li>
+ <li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
+ <div class="text">Notifications</div></a></li>
+ <li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
+ <div class="text">Schedules</div></a></li>
+ <li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
+ <div class="text">Forum</div></a></li>
+ </ul>
- <div class="wrapper">
- <HelloWorld msg="You did it!" />
- </div>
- </header>
-
- <main>
- <TheWelcome />
- </main>
+ <ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
+ <li title="Home">
+ <a href="#home">
+ <img src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
+ </a>
+ </li>
+ <li title="Home">
+ <a href="#home">
+ <item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item>
+ </a>
+ </li>
+ <li style="float: right;" title="Account">
+ <a href="#Account">
+ <item class="fa-solid fa-user" style="margin-top: 7px; margin-bottom: 3px;"></item>
+ </a></li>
+ <li style="float: right;" title="Notifications">
+ <a href="#Notifications">
+ <item class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></item>
+ </a></li>
+ <li style="float: right;" title="Options">
+ <a href="#Options">
+ <item class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></item>
+ </a></li>
+ </ul>
</template>
<style scoped>
-header {
- line-height: 1.5;
-}
+ ul.vertical{
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ width: 70px ;
+ background-color: rgb(53, 53, 53);
+ border-right:5px;
+ border-color:black;
+ height: 100%;
+ position: fixed;
+ overflow:auto;
+ transition-duration: .3s;
+ }
-.logo {
- display: block;
- margin: 0 auto 2rem;
-}
+ li a{
+ display: flex;
+ padding: 8px 16px;
+ color:rgb(255, 255, 255);
+ text-decoration: none;
+ }
-@media (min-width: 1024px) {
- header {
- display: flex;
- place-items: center;
- padding-right: calc(var(--section-gap) / 2);
- }
+ ul.vertical li a:hover:not(.active) {
+ background-color: rgb(112, 112, 112);
+ border-radius:6px;
+ color: white;
+
+ transform: translate(0px ,1px);
+ }
- .logo {
- margin: 0 2rem 0 0;
- }
+ ul.vertical li a.active {
+ background-color: rgb(239, 60, 168);
+ border-radius:6px;
+ }
- header .wrapper {
- display: flex;
- place-items: flex-start;
- flex-wrap: wrap;
- }
-}
+ ul.horizontal li a.active {
+ background-color: rgb(57, 57, 57);
+ border-radius:6px;
+ }
+ ul.horizontal {
+ z-index: 101;
+ display: block ;
+ list-style-type:none;
+ margin:0;
+ padding: 0;
+ top: 0;
+ position: fixed;
+ height:61px;
+ width: 100%;
+ overflow: hidden;
+ background-color: rgb(24, 24, 24);
+ }
+
+ ul.horizontal li {
+ font-size: 35px;
+ float: left;
+ align-items: center;
+ }
+
+
+ ul.horizontal li a:hover:not(.active){
+ background-color: black;
+ border-radius:6px;
+ color:white;
+ transform: translate(0px ,1px);
+
+ }
+
+ ul.vertical:hover {
+ z-index: 100;
+ width: 250px;
+ border-radius: 40px;
+ transition-duration: .3s;
+
+ }
+
+ .text {
+ position: absolute;
+ right: 0%;
+ width: 0%;
+ opacity: 0;
+ color: white;
+ font-size: 1.2em;
+ font-weight: 600;
+ transition-duration: .3s;
+ }
+
+ ul.vertical:hover .text {
+ opacity: 1;
+ width: 70%;
+ transition-duration: .3s;
+ padding-left: 5px;
+ }
</style>
diff --git a/frontend/src/assets/Clyde.png b/frontend/src/assets/Clyde.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8ac27fb5b7240c4b56d24187b778152a4016b15
GIT binary patch
literal 1312
zcmeAS@N?(olHy`uVBq!ia0y~yVAKI&4mO}jWo=(6kYX$ja(7}_cTVOdki(Mh=<CS9
zu(6-}Pa-Rj&spFRS<Jw|cNl~jkLRyQ0jk;R>Eakt5%>1aM&Bn63~d*`h9><|*cr5K
zns!T&Ml1I={>c`5T1B^=`&@b7dj^BzMrAwShJTrn)3_ZDuK%ii-~$Wy2>~4i=M4=!
z2bqjeIDeK`U%mb0(Y76Wm#dVHaN|^mq6r6Q_Pg&le4cxlJ^z1_B7=H9=j^(j(Ei(R
zli>SS))Wr035pR8Z3&E$O(b%T70!O=zwO|^@86GCNnQT)Z_~UVoy&LMZ#H|h7fVp!
z@D+N90hMidS$F(}^xehMwaWMY<{6*g>|5Tjo_uGv`F^){yZ@)IcJB4dGxF;BX8x(0
z@%!$xvfVdI*nf19;csYI+3b61_k->Cy_~xI<jb|Qfj)oz=>q?kLug5Wcz*-a(BWmj
z>y3W3{Qw6h=l9(ceaj!@kYoZ%Dm=W*y1-`ky8|~V2tD!xXs}p%Y>Uq6sz1kWe|cao
z_hgsP>rDB@|Mykj{{8v(?B6$@snqX}BQO0!(}B$Pmv+D?yEiXaxIW)*|3;ZB%=*|%
r10o|*?tTfo#SC#g`BI>8XARRNi)vNvqwGt8r5b~$tDnm{r-UW|jMBO_
literal 0
HcmV?d00001
diff --git a/frontend/src/assets/logo.svg b/frontend/src/assets/logo.svg
deleted file mode 100644
index 7565660..0000000
--- a/frontend/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 36fb845..6a52f86 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,35 +1,5 @@
-@import './base.css';
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- font-weight: normal;
+body {
+ background-color: rgb(53, 25, 60);
+ margin:0;
}
-a,
-.green {
- text-decoration: none;
- color: hsla(160, 100%, 37%, 1);
- transition: 0.4s;
- padding: 3px;
-}
-
-@media (hover: hover) {
- a:hover {
- background-color: hsla(160, 100%, 37%, 0.2);
- }
-}
-
-@media (min-width: 1024px) {
- body {
- display: flex;
- place-items: center;
- }
-
- #app {
- display: grid;
- grid-template-columns: 1fr 1fr;
- padding: 0 2rem;
- }
-}