les prémices d'une refonte graphique...
This commit is contained in:
parent
2bdc235a25
commit
37f6c535fb
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
|
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
|
||||||
<script type="module" src="./src/main.ts"></script>
|
<script type="module" src="src/main.js"></script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Guams - About</title>
|
<title>Guams - About</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
87
index.html
87
index.html
@ -1,72 +1,41 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="fr" id="html" data-bs-theme="dark">
|
<html lang="fr" id="html">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" href="/icon.jpg"/>
|
<link rel="icon" href="/icon.jpg"/>
|
||||||
<script type="module" src="./src/main.ts"></script>
|
|
||||||
<script type="module" src="bootstrap/js/dist/"></script>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||||
<title>Guams - Home</title>
|
<title>Guams - Home</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="fixed-top navbar navbar-expand-lg bg-body-tertiary">
|
<main>
|
||||||
<div class="container-fluid">
|
<div class="title-bar">
|
||||||
<a class="navbar-brand" href="#">Guams.fr</a>
|
<div class="title-bar-text">Guams - Home</div>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
<div class="title-bar-controls">
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="title-bar-button">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<button class="title-bar-button">
|
||||||
<ul class="navbar-nav">
|
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||||
<li class="nav-item">
|
</button>
|
||||||
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
<button class="title-bar-button">
|
||||||
</li>
|
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
|
||||||
<li class="nav-item">
|
</button>
|
||||||
<a class="nav-link" href="./about.html">About</a>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="nav-item">
|
<div class="content">
|
||||||
<a class="nav-link" href="https://fish.golf">
|
<nav>
|
||||||
<img src="./src/img/fishgolf.gif" alt="fish-golf" title="frien :3">
|
<ul>
|
||||||
</a>
|
<li><a class="navbar-link" href="/">Home</a></li>
|
||||||
</li>
|
<li><a class="navbar-link" href="./about.html">My projects</a></li>
|
||||||
|
<li><a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="welcome">
|
||||||
|
<span>coucou</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex " role="search">
|
</main>
|
||||||
<div class="gap-3 d-flex align-items-center form-check form-switch">
|
|
||||||
<input class="form-check-input" type="checkbox" id="dark-mode" onclick="changeTheme()" checked>
|
|
||||||
<label class="form-check-label" id="dark-mode-text" for="dark-mode">Dark theme enabled 🌕</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<div class="body">
|
|
||||||
<main class="d-flex ">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
My gitea instance !
|
|
||||||
</div>
|
|
||||||
<div class="gap-3 card-body d-flex align-items-center row justify-content-center">
|
|
||||||
<h5 class="card-title">This is my gitea instance, this is here I share my projects.</h5>
|
|
||||||
<img src="./src/img/gitea.png" class="showcase img-fluid" alt="gitea showcase">
|
|
||||||
<a href="https://gitea.guams.fr/Guams" class="mt-5 btn btn-primary">Go to website</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header">
|
|
||||||
À bon entendeur
|
|
||||||
</div>
|
|
||||||
<div class="gap-3 card-body d-flex align-items-center row justify-content-center">
|
|
||||||
<h5 class="card-title">This is my personal blog, where I share reviews of the things I enjoy (did it by
|
|
||||||
myself btw 😁).</h5>
|
|
||||||
<img src="./src/img/abonentendeur.png" class="showcase img-fluid" alt="abonentendeur showcase">
|
|
||||||
<footer class="blockquote-footer">It is not 100% functional for now, but I'll fix all the bug that are reported</footer>
|
|
||||||
<div class="d-flex justify-content-center gap-2">
|
|
||||||
<a href="https://gitea.guams.fr/Guams/review-front" class="mt-5 btn btn-primary w-100">Source code</a>
|
|
||||||
<a href="https://abonentendeur.guams.fr" class="mt-5 btn btn-primary w-100">Go to website</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "asa_pres_bootstrap",
|
"name": "guams",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
@ -9,10 +9,8 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"typescript": "~5.7.2",
|
|
||||||
"vite": "^6.2.0"
|
"vite": "^6.2.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^5.3.3"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
3
src/img/close.svg
Normal file
3
src/img/close.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 270 B |
3
src/img/maximize.svg
Normal file
3
src/img/maximize.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 203 B |
3
src/img/minimize.svg
Normal file
3
src/img/minimize.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="6" height="2" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 141 B |
516
src/main.js
Normal file
516
src/main.js
Normal file
@ -0,0 +1,516 @@
|
|||||||
|
import './style.css'
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
await loadFull(tsParticles);
|
||||||
|
|
||||||
|
await tsParticles.load({
|
||||||
|
id: "tsparticles",
|
||||||
|
options: {
|
||||||
|
"autoPlay": true,
|
||||||
|
"background": {
|
||||||
|
"color": {
|
||||||
|
"value": "#141414"
|
||||||
|
},
|
||||||
|
"image": "",
|
||||||
|
"position": "",
|
||||||
|
"repeat": "",
|
||||||
|
"size": "",
|
||||||
|
"opacity": 1
|
||||||
|
},
|
||||||
|
"backgroundMask": {
|
||||||
|
"composite": "destination-out",
|
||||||
|
"cover": {
|
||||||
|
"opacity": 1,
|
||||||
|
"color": {
|
||||||
|
"value": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"clear": true,
|
||||||
|
"defaultThemes": {},
|
||||||
|
"delay": 0,
|
||||||
|
"fullScreen": {
|
||||||
|
"enable": true,
|
||||||
|
"zIndex": -1
|
||||||
|
},
|
||||||
|
"detectRetina": true,
|
||||||
|
"duration": 0,
|
||||||
|
"fpsLimit": 120,
|
||||||
|
"interactivity": {
|
||||||
|
"detectsOn": "window",
|
||||||
|
"events": {
|
||||||
|
"onClick": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": {}
|
||||||
|
},
|
||||||
|
"onDiv": {
|
||||||
|
"selectors": {},
|
||||||
|
"enable": false,
|
||||||
|
"mode": {},
|
||||||
|
"type": "circle"
|
||||||
|
},
|
||||||
|
"onHover": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": {},
|
||||||
|
"parallax": {
|
||||||
|
"enable": false,
|
||||||
|
"force": 2,
|
||||||
|
"smooth": 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"resize": {
|
||||||
|
"delay": 0.5,
|
||||||
|
"enable": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"trail": {
|
||||||
|
"delay": 1,
|
||||||
|
"pauseOnStop": false,
|
||||||
|
"quantity": 1
|
||||||
|
},
|
||||||
|
"attract": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4,
|
||||||
|
"easing": "ease-out-quad",
|
||||||
|
"factor": 1,
|
||||||
|
"maxSpeed": 50,
|
||||||
|
"speed": 1
|
||||||
|
},
|
||||||
|
"bounce": {
|
||||||
|
"distance": 200
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4,
|
||||||
|
"mix": false,
|
||||||
|
"divs": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4,
|
||||||
|
"mix": false,
|
||||||
|
"selectors": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"connect": {
|
||||||
|
"distance": 80,
|
||||||
|
"links": {
|
||||||
|
"opacity": 0.5
|
||||||
|
},
|
||||||
|
"radius": 60
|
||||||
|
},
|
||||||
|
"grab": {
|
||||||
|
"distance": 100,
|
||||||
|
"links": {
|
||||||
|
"blink": false,
|
||||||
|
"consent": false,
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"default": true,
|
||||||
|
"groups": [],
|
||||||
|
"quantity": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"quantity": 2
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4,
|
||||||
|
"factor": 100,
|
||||||
|
"speed": 1,
|
||||||
|
"maxSpeed": 50,
|
||||||
|
"easing": "ease-out-quad",
|
||||||
|
"divs": {
|
||||||
|
"distance": 200,
|
||||||
|
"duration": 0.4,
|
||||||
|
"factor": 100,
|
||||||
|
"speed": 1,
|
||||||
|
"maxSpeed": 50,
|
||||||
|
"easing": "ease-out-quad",
|
||||||
|
"selectors": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"slow": {
|
||||||
|
"factor": 3,
|
||||||
|
"radius": 200
|
||||||
|
},
|
||||||
|
"particle": {
|
||||||
|
"replaceCursor": false,
|
||||||
|
"pauseOnStop": false,
|
||||||
|
"stopDelay": 0
|
||||||
|
},
|
||||||
|
"light": {
|
||||||
|
"area": {
|
||||||
|
"gradient": {
|
||||||
|
"start": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"stop": {
|
||||||
|
"value": "#000000"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"radius": 1000
|
||||||
|
},
|
||||||
|
"shadow": {
|
||||||
|
"color": {
|
||||||
|
"value": "#000000"
|
||||||
|
},
|
||||||
|
"length": 2000
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"manualParticles": [],
|
||||||
|
"particles": {
|
||||||
|
"bounce": {
|
||||||
|
"horizontal": {
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
"vertical": {
|
||||||
|
"value": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"collisions": {
|
||||||
|
"absorb": {
|
||||||
|
"speed": 2
|
||||||
|
},
|
||||||
|
"bounce": {
|
||||||
|
"horizontal": {
|
||||||
|
"value": 1
|
||||||
|
},
|
||||||
|
"vertical": {
|
||||||
|
"value": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"enable": false,
|
||||||
|
"maxSpeed": 50,
|
||||||
|
"mode": "bounce",
|
||||||
|
"overlap": {
|
||||||
|
"enable": true,
|
||||||
|
"retries": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#fff",
|
||||||
|
"animation": {
|
||||||
|
"h": {
|
||||||
|
"count": 0,
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"decay": 0,
|
||||||
|
"delay": 0,
|
||||||
|
"sync": true,
|
||||||
|
"offset": 0
|
||||||
|
},
|
||||||
|
"s": {
|
||||||
|
"count": 0,
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"decay": 0,
|
||||||
|
"delay": 0,
|
||||||
|
"sync": true,
|
||||||
|
"offset": 0
|
||||||
|
},
|
||||||
|
"l": {
|
||||||
|
"count": 0,
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"decay": 0,
|
||||||
|
"delay": 0,
|
||||||
|
"sync": true,
|
||||||
|
"offset": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"effect": {
|
||||||
|
"close": true,
|
||||||
|
"fill": true,
|
||||||
|
"options": {},
|
||||||
|
"type": {}
|
||||||
|
},
|
||||||
|
"groups": {},
|
||||||
|
"move": {
|
||||||
|
"angle": {
|
||||||
|
"offset": 0,
|
||||||
|
"value": 90
|
||||||
|
},
|
||||||
|
"attract": {
|
||||||
|
"distance": 200,
|
||||||
|
"enable": false,
|
||||||
|
"rotate": {
|
||||||
|
"x": 3000,
|
||||||
|
"y": 3000
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"center": {
|
||||||
|
"x": 50,
|
||||||
|
"y": 50,
|
||||||
|
"mode": "percent",
|
||||||
|
"radius": 0
|
||||||
|
},
|
||||||
|
"decay": 0,
|
||||||
|
"distance": {},
|
||||||
|
"direction": "bottom",
|
||||||
|
"drift": 0,
|
||||||
|
"enable": true,
|
||||||
|
"gravity": {
|
||||||
|
"acceleration": 9.81,
|
||||||
|
"enable": false,
|
||||||
|
"inverse": false,
|
||||||
|
"maxSpeed": 50
|
||||||
|
},
|
||||||
|
"path": {
|
||||||
|
"clamp": true,
|
||||||
|
"delay": {
|
||||||
|
"value": 0
|
||||||
|
},
|
||||||
|
"enable": false,
|
||||||
|
"options": {}
|
||||||
|
},
|
||||||
|
"outModes": {
|
||||||
|
"default": "out",
|
||||||
|
"bottom": "out",
|
||||||
|
"left": "out",
|
||||||
|
"right": "out",
|
||||||
|
"top": "out"
|
||||||
|
},
|
||||||
|
"random": false,
|
||||||
|
"size": false,
|
||||||
|
"speed": 2,
|
||||||
|
"spin": {
|
||||||
|
"acceleration": 0,
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"straight": true,
|
||||||
|
"trail": {
|
||||||
|
"enable": false,
|
||||||
|
"length": 10,
|
||||||
|
"fill": {}
|
||||||
|
},
|
||||||
|
"vibrate": false,
|
||||||
|
"warp": false
|
||||||
|
},
|
||||||
|
"number": {
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"width": 1920,
|
||||||
|
"height": 1080
|
||||||
|
},
|
||||||
|
"limit": {
|
||||||
|
"mode": "delete",
|
||||||
|
"value": 0
|
||||||
|
},
|
||||||
|
"value": 400
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 1,
|
||||||
|
"animation": {
|
||||||
|
"count": 0,
|
||||||
|
"enable": false,
|
||||||
|
"speed": 2,
|
||||||
|
"decay": 0,
|
||||||
|
"delay": 0,
|
||||||
|
"sync": false,
|
||||||
|
"mode": "auto",
|
||||||
|
"startValue": "random",
|
||||||
|
"destroy": "none"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"reduceDuplicates": false,
|
||||||
|
"shadow": {
|
||||||
|
"blur": 0,
|
||||||
|
"color": {
|
||||||
|
"value": "#000"
|
||||||
|
},
|
||||||
|
"enable": false,
|
||||||
|
"offset": {
|
||||||
|
"x": 0,
|
||||||
|
"y": 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"close": true,
|
||||||
|
"fill": true,
|
||||||
|
"options": {},
|
||||||
|
"type": "circle"
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 10,
|
||||||
|
"animation": {
|
||||||
|
"count": 0,
|
||||||
|
"enable": false,
|
||||||
|
"speed": 5,
|
||||||
|
"decay": 0,
|
||||||
|
"delay": 0,
|
||||||
|
"sync": false,
|
||||||
|
"mode": "auto",
|
||||||
|
"startValue": "random",
|
||||||
|
"destroy": "none"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"stroke": {
|
||||||
|
"width": 0
|
||||||
|
},
|
||||||
|
"zIndex": {
|
||||||
|
"value": {
|
||||||
|
"min": 0,
|
||||||
|
"max": 100
|
||||||
|
},
|
||||||
|
"opacityRate": 10,
|
||||||
|
"sizeRate": 10,
|
||||||
|
"velocityRate": 10
|
||||||
|
},
|
||||||
|
"destroy": {
|
||||||
|
"bounds": {},
|
||||||
|
"mode": "none",
|
||||||
|
"split": {
|
||||||
|
"count": 1,
|
||||||
|
"factor": {
|
||||||
|
"value": 3
|
||||||
|
},
|
||||||
|
"rate": {
|
||||||
|
"value": {
|
||||||
|
"min": 4,
|
||||||
|
"max": 9
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"sizeOffset": true,
|
||||||
|
"particles": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"roll": {
|
||||||
|
"darken": {
|
||||||
|
"enable": false,
|
||||||
|
"value": 0
|
||||||
|
},
|
||||||
|
"enable": false,
|
||||||
|
"enlighten": {
|
||||||
|
"enable": false,
|
||||||
|
"value": 0
|
||||||
|
},
|
||||||
|
"mode": "vertical",
|
||||||
|
"speed": 25
|
||||||
|
},
|
||||||
|
"tilt": {
|
||||||
|
"value": 0,
|
||||||
|
"animation": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 0,
|
||||||
|
"decay": 0,
|
||||||
|
"sync": false
|
||||||
|
},
|
||||||
|
"direction": "clockwise",
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"twinkle": {
|
||||||
|
"lines": {
|
||||||
|
"enable": false,
|
||||||
|
"frequency": 0.05,
|
||||||
|
"opacity": 1
|
||||||
|
},
|
||||||
|
"particles": {
|
||||||
|
"enable": false,
|
||||||
|
"frequency": 0.05,
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"wobble": {
|
||||||
|
"distance": 10,
|
||||||
|
"enable": true,
|
||||||
|
"speed": {
|
||||||
|
"angle": 10,
|
||||||
|
"move": 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"life": {
|
||||||
|
"count": 0,
|
||||||
|
"delay": {
|
||||||
|
"value": 0,
|
||||||
|
"sync": false
|
||||||
|
},
|
||||||
|
"duration": {
|
||||||
|
"value": 0,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"rotate": {
|
||||||
|
"value": 0,
|
||||||
|
"animation": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 0,
|
||||||
|
"decay": 0,
|
||||||
|
"sync": false
|
||||||
|
},
|
||||||
|
"direction": "clockwise",
|
||||||
|
"path": false
|
||||||
|
},
|
||||||
|
"orbit": {
|
||||||
|
"animation": {
|
||||||
|
"count": 0,
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"decay": 0,
|
||||||
|
"delay": 0,
|
||||||
|
"sync": false
|
||||||
|
},
|
||||||
|
"enable": false,
|
||||||
|
"opacity": 1,
|
||||||
|
"rotation": {
|
||||||
|
"value": 45
|
||||||
|
},
|
||||||
|
"width": 1
|
||||||
|
},
|
||||||
|
"links": {
|
||||||
|
"blink": false,
|
||||||
|
"color": {
|
||||||
|
"value": "#fff"
|
||||||
|
},
|
||||||
|
"consent": false,
|
||||||
|
"distance": 100,
|
||||||
|
"enable": false,
|
||||||
|
"frequency": 1,
|
||||||
|
"opacity": 1,
|
||||||
|
"shadow": {
|
||||||
|
"blur": 5,
|
||||||
|
"color": {
|
||||||
|
"value": "#000"
|
||||||
|
},
|
||||||
|
"enable": false
|
||||||
|
},
|
||||||
|
"triangles": {
|
||||||
|
"enable": false,
|
||||||
|
"frequency": 1
|
||||||
|
},
|
||||||
|
"width": 1,
|
||||||
|
"warp": false
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"value": 0,
|
||||||
|
"enabled": false,
|
||||||
|
"distance": 1,
|
||||||
|
"duration": 1,
|
||||||
|
"factor": 1,
|
||||||
|
"speed": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"pauseOnBlur": true,
|
||||||
|
"pauseOnOutsideViewport": true,
|
||||||
|
"responsive": [],
|
||||||
|
"smooth": false,
|
||||||
|
"style": {},
|
||||||
|
"themes": [],
|
||||||
|
"zLayers": 100,
|
||||||
|
"key": "snow",
|
||||||
|
"name": "Snow",
|
||||||
|
"motion": {
|
||||||
|
"disable": false,
|
||||||
|
"reduce": {
|
||||||
|
"factor": 4,
|
||||||
|
"value": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
20
src/main.ts
20
src/main.ts
@ -1,20 +0,0 @@
|
|||||||
import './style.css'
|
|
||||||
import 'bootstrap';
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const chkBox = document.getElementById('dark-mode') as HTMLInputElement;
|
|
||||||
chkBox?.addEventListener("change", changeTheme);
|
|
||||||
});
|
|
||||||
|
|
||||||
function changeTheme() {
|
|
||||||
const htmlElement = document.getElementById('html');
|
|
||||||
const chkBox = document.getElementById('dark-mode') as HTMLInputElement;
|
|
||||||
|
|
||||||
if (chkBox && htmlElement) {
|
|
||||||
htmlElement.setAttribute("data-bs-theme", chkBox.checked ? "dark" : "light");
|
|
||||||
document.getElementById("dark-mode-text")!.innerHTML = chkBox.checked ? "Dark theme enabled 🌕" : "Light theme enabled ☀️";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,40 +1,78 @@
|
|||||||
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
|
* {
|
||||||
|
font-family: ms ui gothic, sans-serif;
|
||||||
main {
|
margin: 0;
|
||||||
gap: 50px;
|
font-size: 12px;
|
||||||
border-radius: 4px;
|
|
||||||
padding: 1%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
|
|
||||||
min-height: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding-top: 90px;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.body {
|
main {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
width: 50%;
|
width: 850px;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img.showcase {
|
.title-bar-text {
|
||||||
width: 80%;
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0;
|
||||||
|
margin-right: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
.title-bar {
|
||||||
main {
|
box-shadow: inset -1px -1px #404040, inset 1px 1px #DFDFDF, inset -2px -2px #7F7F7F, inset 2px 2px #FFFFFF, inset -3px -3px #C3C3C3, inset 3px 3px #C3C3C3, inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
}
|
background: #19191E;
|
||||||
div.body {
|
display: flex;
|
||||||
width: 100%;
|
justify-content: space-between;
|
||||||
}
|
padding: 7px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title-bar-button {
|
||||||
|
background: silver;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: transparent;
|
||||||
|
text-shadow: 0 0 #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: stretch;
|
||||||
|
background-color: #373737;
|
||||||
|
color: white;
|
||||||
|
box-shadow: inset -1px -1px #404040, inset 1px 1px #DFDFDF, inset -2px -2px #7F7F7F, inset 2px 2px #FFFFFF, inset -3px -3px #C3C3C3, inset 3px 3px #C3C3C3, inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
|
||||||
|
padding: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-link:visited {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-link:hover {
|
||||||
|
text-decoration-line: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
border-right: 1px solid #0a0a0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user