nathan.boileau
/
Scripted
0
3
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases Wiki Activity

page profil terminé

Browse Source
ServeurDeTest
nathan boileau 2 years ago
parent 636a37e40b
commit 615bc1aa65
8 changed files with 222 additions and 16 deletions
Show Stats Download Patch File Download Diff File

BIN
WEB/View/assets/img/CyberpunkGirl4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
WEB/View/assets/img/CyperpunkGirl.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
WEB/View/assets/img/ImgMain.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 MiB

BIN
WEB/View/assets/img/ImgMain2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
WEB/View/assets/img/ScriptedLogo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.5 KiB

156
WEB/View/src/CSS/Main2.css
Unescape View File

@ -4,7 +4,7 @@
color: white; color: white;
scroll-behavior: smooth; scroll-behavior: smooth;
height: 100vh; height: 100vh;
background-image: url("../../assets/img/ImgMain.png"); background-image: url("../../assets/img/ImgMain2.png");
background-position: center center; background-position: center center;
background-attachment: fixed; background-attachment: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -24,22 +24,160 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 85%; width: 70%;
height: 70%; height: 80%;
border-radius: 10px; border-radius: 10px;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px; -moz-border-radius: 10px;
-ms-border-radius: 10px; -ms-border-radius: 10px;
-o-border-radius: 10px; -o-border-radius: 10px;
border: 1px solid #fff;
} }
#AllBg { .neonBg {
background-color: #511949; background-color: #511949;
opacity: 0.8; opacity: 0.8;
background-size: 10px 10px; background-size: 10px 10px;
border-radius: 5px; border-radius: 10px;
-webkit-border-radius: 5px; -webkit-border-radius: 10px;
-moz-border-radius: 5px; -moz-border-radius: 10px;
-ms-border-radius: 5px; -ms-border-radius: 10px;
-o-border-radius: 5px; -o-border-radius: 10px;
}
button:focus {
outline: none;
}
#imgProfil {
width: 30%;
height: 100%;
}
@media screen and (max-width: 1100px) {
#imgProfil {
display: none;
}
}
#profil {
position: fixed;
top: 0;
left: 0;
opacity: 0;
height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: all 0.1s;
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-ms-transition: all 0.1s;
-o-transition: all 0.1s;
}
#profil.open {
left: 0;
opacity: 1;
display: flex;
}
#profilIcon.open {
transition: transform 0.5s;
-webkit-transition: transform 0.5s;
-moz-transition: transform 0.5s;
-ms-transition: transform 0.5s;
-o-transition: transform 0.5s;
background: none;
transform: rotate(180deg) !important;
-webkit-transform: rotate(180deg) !important;
-moz-transform: rotate(180deg) !important;
-ms-transform: rotate(180deg) !important;
-o-transform: rotate(180deg) !important;
}
#profilContainer.open {
justify-content: end;
}
/* Button Login/ Logout animation */
button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
text-decoration: none;
background: transparent;
padding: 0;
font-size: inherit;
font-family: inherit;
}
button.logButton {
width: 12rem;
height: 50px;
}
button.logButton .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
display: block;
margin: 0;
width: 3rem;
height: 3rem;
background: #fff;
border-radius: 1.625rem;
}
button.logButton .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #222831;
}
button.logButton .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 0.625rem;
width: 1.125rem;
height: 0.125rem;
background: none;
}
button.logButton .circle .icon.arrow::before {
position: absolute;
content: "";
top: -0.25rem;
right: 0.0625rem;
width: 0.625rem;
height: 0.625rem;
border-top: 0.125rem solid #222831;
border-right: 0.125rem solid #222831;
transform: rotate(45deg);
}
button.logButton .button-text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
color: #fff;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
button:hover .circle {
width: 100%;
}
button:hover .circle .icon.arrow {
background: #222831;
transform: translate(1rem, 0);
}
button:hover .button-text {
color: #222831;
} }

67
WEB/View/src/pages/Main2.html
Unescape View File

@ -27,9 +27,70 @@
<link rel="stylesheet" href="../CSS/Main2.css" /> <link rel="stylesheet" href="../CSS/Main2.css" />
</head> </head>
<body> <body>
<div> <script>
<div id="imgMain"> function displayProfil() {
<span class="material-symbols-outlined p-2" id="AllBg" style="font-size:40px; transform: rotate(90deg)"> clear_all </span> profil.classList.toggle("open");
profilIcon.classList.toggle("open");
profilContainer.classList.toggle("open");
}
</script>
<div id="imgMain">
<div class="col-3 d-flex" id="profilContainer">
<button
class="d-flex p-0"
id="btnProfil"
style="background: transparent; border: none; z-index: 10"
onclick="displayProfil()"
>
<span
class="material-symbols-outlined p-1 neonBg"
id="profilIcon"
style="font-size: 40px; color: white; transform: rotate(90deg)"
>
clear_all
</span>
</button>
<div
class="col-3"
id="profil"
style="
background-color: #222831;
border-radius: 10px;
height: 100%;
z-index: 2;
"
>
<!-- If connected this, else nothing (don't display the img) -->
<div class="row py-5 d-flex justify-content-center mx-0">
<img
src="../../assets/img/CyberpunkGirl4.png"
alt="Profil"
id="imgProfil"
class="img-fluid rounded-circle align-self-center"
style="
width: 125px;
height: 125px;
padding: 0;
border: 2px solid #44fff6;
background-image: url('View/assets/img/BackgroundMain.jpg');
background-size: cover;
background-position: center;
"
/>
<p class="d-flex justify-content-center">Pseudo</p>
<div class="d-flex justify-content-center align-self-end p-0 m-0" id="container">
<button class="logButton">
<span class="circle" aria-hidden="true">
<span class="icon arrow"></span>
</span>
<span class="button-text">Logout</span>
</button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</body> </body>

13
WEB/View/src/pages/Presentation.html
Unescape View File

@ -81,9 +81,11 @@
</p> </p>
</section> </section>
<section class="hidden row" style="min-height: 50vh;"> <section class="hidden row" style="min-height: 50vh">
<p> <p>
Clique sur le bouton NEXT pour commencer tes premiers pas dans l'ère du developpement.<br /> <br/> Clique sur le bouton NEXT pour commencer tes premiers pas dans
l'ère du developpement.<br />
<br />
Clique sur SKIP pour aller directement aux énigmes. Clique sur SKIP pour aller directement aux énigmes.
</p> </p>
</section> </section>
@ -94,7 +96,12 @@
src="View/assets/img/Foxy.png" src="View/assets/img/Foxy.png"
alt="Logo" alt="Logo"
class="img-fluid rounded-circle moving-fox" class="img-fluid rounded-circle moving-fox"
style="border: 2px solid #44fff6" style="
border: 2px solid #44fff6;
background-image: url('View/assets/img/BackgroundMain.jpg');
background-size: cover;
background-position: center;
"
/> />
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save