epickiwi/drags-and-nerds
1
0 Fork 0
forked from vgaNAR6ta/drags-and-nerds
Code Pull Requests Activity

tunnel: création de toute la structure et contenu textes, sans les images de drag, interactivté et style (bug avec le dossier typo dans /public => déplacer dans assets)

Browse Source
This commit is contained in:
vgaNAR6ta committed 2026-03-11 00:14:29 +01:00
1 parent cf2ce6ba2f
commit e92655ac93
16 files changed
+1181 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

v0-appel-projet/src/assets/2.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.66 304.5">
<path d="M2.79,304.5l34.12-87h43.5l17.06-43.5h43.5l17.06-43.5h87l17.06-43.5h43.5l17.06-43.5h-130.5l-17.06,43.5h-87l17.06-43.5h43.5L165.72,0h217.5l-17.06,43.5h43.5l-34.12,87h-43.5l-17.06,43.5h-43.5l-17.06,43.5h-87l-17.06,43.5h174l-17.06,43.5H2.79Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

v0-appel-projet/src/assets/close.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.73 53.59">
<path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 304 B

v0-appel-projet/src/assets/noise.svg
+12
View File
@@ -0,0 +1,12 @@
<!-- svg: first layer -->
<svg viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='333'
numOctaves='6'
stitchTiles='stitch'/>
</filter>
<rect width='100vw' height='100vh' opacity="1" filter='url(#noiseFilter)'/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

v0-appel-projet/src/assets/style.css
+164
View File
@@ -0,0 +1,164 @@
/*====================Couleurs*/
:root{
--light-color: #FFFFFFFF;
--dark-color: #000000FF;
--accent-color: #C303FFFF;
--accent-color-2: #00FF76FF;
}
/*====================Typo*/
@font-face {
font-family: 'lineal';
src: url('./typo/Lineal-Heavy.ttf');
}
@font-face {
font-family: 'pressStart2P';
src: url('./typo/PressStart2P-Regular.ttf');
}
@font-face {
font-family: 'velvelyne';
src: url('./typo/Velvelyne-Light.ttf') format('truetype');
font-weight:lighter;
}
@font-face {
font-family: 'avara';
src: url('./typo/Avara-Black.woff2') format('woff2');
}
@font-face {
font-family: 'velvelyne';
src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
font-weight: bold;
}
/*====================App Racine Vue*/
#app{
inset: 0;
position: fixed;
width: 100%;
height: 100%;
z-index: 0;
cursor: cell;
scrollbar-color: var(--accent-color-2) transparent;
scrollbar-width: thin;
background-size: 100% 100%;
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
background-image:
radial-gradient(150px 150px at 15% 80%, var(--dark-color) 18%, var(--accent-color) 87%, transparent 100%),
radial-gradient(200px 200px at 33% 50%, var(--dark-color) 20%, var(--accent-color) 93%, transparent 99%),
radial-gradient(66% 100% at 0% 0%, var(--dark-color) 15%, var(--accent-color) 45%, var(--light-color) 64%, transparent 81%),
radial-gradient(150% 100% at 80% 0%, var(--dark-color) 0%, var(--accent-color) 0%, var(--light-color) 27%, transparent 100%),
radial-gradient(142% 91% at -6% 74%, var(--accent-color) 4%, transparent 99%),
radial-gradient(142% 200% at 83% 77%, var(--dark-color) 20%, var(--accent-color) 39%, var(--light-color) 69%);
}
/*===================Desact. Default*/
input {
-webkit-appearance: none;
appearance: none;
}
a{
text-decoration: none;
}
/*===================Animation*/
@keyframes blink {
0% { color: var(--accent-color);}
15% { color: var(--accent-color-2);}
35% { color: var(--accent-color-2);}
50% { color: var(--accent-color);}
65% { color: var(--accent-color-2);}
85% { color: var(--accent-color-2);}
100% { color: var(--accent-color);}
}
@keyframes blinkBack {
0% { background-color: var(--accent-color);}
15% { background-color: var(--accent-color-2);}
35% { background-color: var(--accent-color-2);}
50% { background-color: var(--accent-color);}
65% { background-color: var(--accent-color-2);}
85% { background-color: var(--accent-color-2);}
100% { background-color: var(--accent-color);}
}
@keyframes float {
0% { transform: translateY(0px); }
35% { transform: translateY(1px); }
50% { transform: translateY(-10px); }
65% { transform: translateY(1px); }
100% { transform: translateY(0px); }
}
/*===================Classes générales*/
.windowStyle{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: var(--light-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--dark-color);
}
.windowTitle{
width:100%;
height:50px;
background-color: var(--dark-color);
border-radius: 16.1px 16.1px 0 0;
font-family: 'lineal';
font-size: 16.1px;
color: var(--light-color);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
.windowTitleLower{
font-family: 'velvelyne';
font-weight: lighter;
font-size: 13.12px;
}
.closeBtn{
color: var(--light-color);
background-color: var(--dark-color);
border-style: solid;
border-width: thin;
border-radius: 16.1px;
border-color: var(--light-color);
width: 50px;
height: 33px;
align-items: center;
cursor: pointer;
}
.closeBtn:hover{
color: var(--dark-color);
background-color: var(--light-color);
}
.icon{
height:16.1px;
width:auto;
fill: currentColor;
}
.windowContent{
height:77%;
width:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}