Maxime/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

adding base template for working

Browse Source
This commit is contained in:
Debucquoy Anthony 2024-02-27 00:51:30 +01:00
parent d8cbbdc94b
commit 4f4ed952cc
Signed by untrusted user: tonitch
GPG Key ID: A78D6421F083D42E
4 changed files with 125 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
frontend/src/App.vue
View File

@ -1,47 +1,135 @@
<script setup> <script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script> </script>
<template> <template>
<header> <ul style="padding-top:60px"class="vertical">
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> <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"> <ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
<HelloWorld msg="You did it!" /> <li title="Home">
</div> <a href="#home">
</header> <img src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
</a>
<main> </li>
<TheWelcome /> <li title="Home">
</main> <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> </template>
<style scoped> <style scoped>
header { ul.vertical{
line-height: 1.5; 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 { li a{
display: block; display: flex;
margin: 0 auto 2rem; padding: 8px 16px;
} color:rgb(255, 255, 255);
text-decoration: none;
}
@media (min-width: 1024px) { ul.vertical li a:hover:not(.active) {
header { background-color: rgb(112, 112, 112);
display: flex; border-radius:6px;
place-items: center; color: white;
padding-right: calc(var(--section-gap) / 2);
} transform: translate(0px ,1px);
}
.logo { ul.vertical li a.active {
margin: 0 2rem 0 0; background-color: rgb(239, 60, 168);
} border-radius:6px;
}
header .wrapper { ul.horizontal li a.active {
display: flex; background-color: rgb(57, 57, 57);
place-items: flex-start; border-radius:6px;
flex-wrap: wrap; }
} 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> </style>

BIN
frontend/src/assets/Clyde.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
frontend/src/assets/logo.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 276 B

36
frontend/src/assets/main.css
View File

@ -1,35 +1,5 @@
@import './base.css'; body {
background-color: rgb(53, 25, 60);
#app { margin:0;
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
} }
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;
}
}