vgaNAR6ta/drags-and-nerds
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit: panneau contact + bug fix

Browse Source
This commit is contained in:
vgaNAR6ta
2026-09-07 01:52:51 +02:00
parent 2d06277613
commit 7430ea161f
7 changed files with 74 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+10 -20
View File
@@ -20,7 +20,7 @@
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<link rel="stylesheet" href="style/responsive.css"> <link rel="stylesheet" href="style/responsive.css">
<link rel="stylesheet" href="style/reduced.css"> <link rel="stylesheet" href="style/reduced.css">
</head> </head>
<body> <body>
@@ -36,6 +36,9 @@
On revient bientôt avec toujours plus de drags et de nerds ! On revient bientôt avec toujours plus de drags et de nerds !
<br><br> <br><br>
En attendant tu peux aller voir<br>les sites et projets de nos copaines En attendant tu peux aller voir<br>les sites et projets de nos copaines
<br><br>
Si tu veux rejoindre la team, <br>
n'hésite pas à nous contacter ^^
</p> </p>
</div> </div>
</section> </section>
@@ -62,26 +65,13 @@
</svg> </svg>
</div> </div>
<section id="musicPlayer" class="floating"> <section id="contactSection" class="floating">
<h1> <h1>
artist &mdash; track Nous contacter :
</h1> </h1>
<nav aria-hidden="true"> <nav aria-label="informations de contact de la team drags and nerds">
<button class="iconBtn" id="previousTrack"> <a href="https://signal.me/#eu/jPBmn2MoCUWsKN0eJbWl_3w-HuPNu2SndVwaWZX3iC9HBnQEi4FPSZefIkfS86T8" class="textBtn" target="_blank">Vega</a>
<svg class="icon" viewBox="0 0 18.25 17.52"> <a href="mailto:urazoriapro@gmail.com" class="textBtn" target="_blank">Urazoria</a>
<polygon points="18.25 0 5.28 6.21 5.28 .23 0 .23 0 8.75 0 8.81 0 17.29 5.28 17.29 5.28 11.33 18.25 17.52 18.25 11.58 11.88 8.78 18.25 5.94 18.25 0"/>
</svg>
</button>
<button class="iconBtn" id="toggleMusic">
<svg class="icon" viewBox="0 0 18.25 17.52">
<path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
</svg>
</button>
<button class="iconBtn">
<svg class="icon" viewBox="0 0 18.25 17.52">
<polygon points="12.97 .23 12.97 6.19 0 0 0 5.94 6.37 8.75 0 11.58 0 17.52 12.97 11.31 12.97 17.29 18.25 17.29 18.25 8.78 18.25 8.71 18.25 .23 12.97 .23"/>
</svg>
</button>
</nav> </nav>
</section> </section>
@@ -107,4 +97,4 @@
<script type="module" src="js/main.js"></script> <script type="module" src="js/main.js"></script>
</body> </body>
</html> </html>
js/main.js
+3 -3
View File
@@ -5,9 +5,9 @@ import { themeSwitcher } from './theme.js';
const mainWindow = document.querySelector('main > #seeYouLater'); const mainWindow = document.querySelector('main > #seeYouLater');
//const playerWindow = document.querySelector('main > #musicPlayer'); const contactWindow = document.querySelector('main > #contactSection');
makeItFloat(mainWindow); makeItFloat(mainWindow);
//makeItFloat(playerWindow); makeItFloat(contactWindow);
themeSwitcher(); themeSwitcher();
js/theme.js
+6 -3
View File
@@ -1,17 +1,20 @@
const container = document.querySelector('#colorBtnContainer'); const container = document.querySelector('#colorBtnContainer');
const themeToggler = container.querySelector('.switch input'); const themeToggler = container.querySelector('.switch input');
const background = document.querySelector('aside > #gradient'); const background = document.querySelector('aside > #gradient');
const btn = document.querySelector('#webRing > a:first-child > img');
export function themeSwitcher(){ export function themeSwitcher(){
container.style.visibility = 'visible' container.style.visibility = 'visible';
console.log('selected switch', themeToggler); console.log('selected btn:', btn);
themeToggler.addEventListener('change', (event) => { themeToggler.addEventListener('change', (event) => {
if (event.target.checked){ if (event.target.checked){
document.documentElement.setAttribute('data-theme', 'light'); document.documentElement.setAttribute('data-theme', 'light');
background.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)'; background.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)';
btn.style.filter = 'invert(1) saturate(93%) brightness(233%) hue-rotate(90deg)';
}else{ }else{
document.documentElement.setAttribute('data-theme', 'dark'); document.documentElement.setAttribute('data-theme', 'dark');
background.style.filter = 'unset'; background.style.filter = 'unset';
btn.style.filter = 'unset';
} }
}) })
} }
style/animation.css
+5 -5
View File
@@ -10,11 +10,11 @@
@keyframes blinkBack { @keyframes blinkBack {
0% { background-color: var(--accent-color);} 0% { background-color: var(--accent-color);}
15% { background-color: var(--main-color);} 15% { background-color: var(--neon-color);}
35% { background-color: var(--main-color);} 35% { background-color: var(--neon-color);}
50% { background-color: var(--accent-color);} 50% { background-color: var(--accent-color);}
65% { background-color: var(--main-color);} 65% { background-color: var(--neon-color);}
85% { background-color: var(--main-color);} 85% { background-color: var(--neon-color);}
100% { background-color: var(--accent-color);} 100% { background-color: var(--accent-color);}
} }
@@ -24,4 +24,4 @@
50% { transform: translateY(-10px); } 50% { transform: translateY(-10px); }
65% { transform: translateY(1px); } 65% { transform: translateY(1px); }
100% { transform: translateY(0px); } 100% { transform: translateY(0px); }
} }
style/common.css
+29 -3
View File
@@ -66,6 +66,32 @@
} }
} }
.textBtn{
background-color: var(--back-color);
border-color: var(--main-color);
border-style: solid;
border-radius: 22px;
border-width: thin thin thick thin;
color: var(--main-color);
font-family: 'velvelyne';
font-weight: bold;
text-transform: uppercase;
font-size: 22px;
display: flex;
align-items: center;
justify-content: space-around;
animation: none;
}
.textBtn:hover{
color: var(--back-color);
animation: blinkBack 1.61s infinite;
}
.floating[data-window="selected"]{ .floating[data-window="selected"]{
z-index: 333 !important; z-index: 333 !important;
border-color: var(--accent-color); border-color: var(--accent-color);
@@ -73,10 +99,10 @@
h1{ h1{
background-color: var(--accent-color); background-color: var(--accent-color);
} }
.iconBtn{ .iconBtn{
border-color: var(--accent-color); border-color: var(--accent-color);
color: var(--accent-color); color: var(--accent-color);
} }
} }
style/main.css
+20 -14
View File
@@ -2,15 +2,15 @@
:root[data-theme="dark"]{ :root[data-theme="dark"]{
--back-color: black; --back-color: black;
--main-color: white; --main-color: white;
--accent-color: #3CFF00; --accent-color: #05ff61;
--neon-color: #3CFF00; --neon-color: #fe02c6;
} }
:root[data-theme="light"]{ :root[data-theme="light"]{
--back-color: white; --back-color: white;
--main-color: black; --main-color: black;
--accent-color: #FFA64D; --accent-color: #FFA64D;
--neon-color: black; --neon-color: skyblue;
} }
/*==========================Background*/ /*==========================Background*/
html,body{ html,body{
@@ -35,9 +35,9 @@ main{
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 444px; width: 444px;
height: 444px; height: 377px;
top:33px; top:33px;
left:13.12px; left:33px;
div { div {
padding: 13.12px; padding: 13.12px;
@@ -47,7 +47,7 @@ main{
font-size: 22px; font-size: 22px;
color: var(--main-color) color: var(--main-color)
} }
strong{ strong{
@@ -57,32 +57,38 @@ main{
} }
} }
#musicPlayer{ #contactSection{
position: absolute; position: absolute;
z-index: 1; z-index: 1;
width: 333px; width: 333px;
height: 117px; height: 117px;
top:444px; top:400px;
left:277px; left:13.12px;
visibility: collapse;
nav{ nav{
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 13.12px;
gap: 7.77px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
.iconBtn{ box-sizing: border-box;
width: 33px;
height: 33px; .textBtn{
width: 66%;
height: 77%;
} }
} }
} }
#colorBtnContainer{ #colorBtnContainer{
visibility: collapse;
position:absolute; position:absolute;
right: 13.12px; right: 13.12px;
bottom: 117px; bottom: 117px;
@@ -227,4 +233,4 @@ aside{
transition: 7.77s ease-in; transition: 7.77s ease-in;
} }
} }
style/responsive.css
+1 -1
View File
@@ -12,6 +12,6 @@
@media(min-width: 1300px){ @media(min-width: 1300px){
main > footer{ main > footer{
grid-template-columns: repeat(9, 1fr); grid-template-columns: repeat(9, 1fr);
min-height: 77px; min-height: 99px;
} }
} }