les prémices d'une refonte graphique...
This commit is contained in:
parent
2bdc235a25
commit
351ac8bb62
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<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"/>
|
||||
<title>Guams - About</title>
|
||||
</head>
|
||||
|
||||
66
index.html
66
index.html
@ -3,70 +3,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<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"/>
|
||||
<title>Guams - Home</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="fixed-top navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Guams.fr</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./about.html">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://fish.golf">
|
||||
<img src="./src/img/fishgolf.gif" alt="fish-golf" title="frien :3">
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex " role="search">
|
||||
<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>
|
||||
<main>
|
||||
<p>grge</p>
|
||||
</main>
|
||||
</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>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "asa_pres_bootstrap",
|
||||
"name": "guams",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
@ -9,10 +9,8 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "~5.7.2",
|
||||
"vite": "^6.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.3.3"
|
||||
}
|
||||
}
|
||||
|
||||
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,9 @@
|
||||
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
|
||||
* {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
main {
|
||||
gap: 50px;
|
||||
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 {
|
||||
padding-top: 90px;
|
||||
}
|
||||
|
||||
div.body {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
img.showcase {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
main {
|
||||
width: 100%;
|
||||
}
|
||||
div.body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
width: 850px;
|
||||
background-color: white;
|
||||
}
|
||||
@ -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