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)

2026-03-11 00:14:29 +01:00
parent cf2ce6ba2f
commit e92655ac93
16 changed files with 1181 additions and 2 deletions
@@ -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;
+}