Compare commits
11 Commits
2bdc235a25
...
6f5607fdab
| Author | SHA1 | Date | |
|---|---|---|---|
| 6f5607fdab | |||
| 9520b60148 | |||
| ee86ea5a07 | |||
| 3e585fb7c9 | |||
| 2baa1f5885 | |||
| cce2ff6cfc | |||
| 341dd400a4 | |||
| 33fdb9af12 | |||
| ea843f6667 | |||
| 5065e4366c | |||
| 37f6c535fb |
47
about.html
47
about.html
@ -1,47 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="fr" id="html" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Guams - About</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 mt-10">
|
||||
<main class="mt-5">
|
||||
<h1 class="text-center">Work in progress...</h1>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
162
index.html
162
index.html
@ -1,72 +1,124 @@
|
||||
<!doctype html>
|
||||
<html lang="fr" id="html" data-bs-theme="dark">
|
||||
<html lang="fr" id="html">
|
||||
<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>
|
||||
<link rel="icon" href="/icon.webp"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Guams - Home</title>
|
||||
<title>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>
|
||||
<main id="closed-main">
|
||||
<h1>Look what you've done !</h1>
|
||||
</main>
|
||||
<main class="main">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">Guams - Home</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button minimize-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button maximize-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button close-button" onclick="closeWindow('main')">
|
||||
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</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 class="window-border">
|
||||
<div class="banner-div window-border">
|
||||
<img id="banner" alt="profile banner" src="/src/img/banner_home.webp">
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="body">
|
||||
<main class="d-flex ">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
My gitea instance !
|
||||
<div class="content window-border">
|
||||
<div class="left-panel">
|
||||
<div class="navigation">
|
||||
<span id="nav-title">Navigation</span>
|
||||
<a class="navbar-link" href="/">Home</a>
|
||||
<a class="navbar-link" href="projects.html">My projects</a>
|
||||
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
|
||||
</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 class="about-me-panel">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">Changelog</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button minimize-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button maximize-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button">
|
||||
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="changelog-content">
|
||||
</ul>
|
||||
</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 class="changelog-panel">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">About me</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button minimize-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button maximize-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button">
|
||||
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="about-me-content">
|
||||
<div class="about-top">
|
||||
<img class="osaka" alt="osaka :3" src="/src/img/default.webp">
|
||||
<div class="about-top-text">
|
||||
<p>Guams</p>
|
||||
<p>21 years old</p>
|
||||
<p>he/him</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text status">
|
||||
<p class="text">My current status :</p>
|
||||
<p class="text">Might update my blog someday...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="presentation">
|
||||
<div>
|
||||
<h1>Welcome to my website</h1>
|
||||
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
|
||||
<span>
|
||||
I'm currently studying computer science, especially web development.
|
||||
My hobbies are giving life to my ideas thanks to my coding skills, reading books and watching anime. On my
|
||||
free time I share my thoughts on the works I play or read on my
|
||||
<a class="hypertext-link" target="_blank" href="https://abonentendeur.guams.fr">blog.</a>
|
||||
</span><br><br>
|
||||
<span>I'm still studying, and I mostly learned Java. But since I'm very curious, I'm interested in all kinds of programming languages, such as:</span>
|
||||
<ul>
|
||||
<li class="language-list">Python</li>
|
||||
<li class="language-list">C</li>
|
||||
<li class="language-list">Rust</li>
|
||||
<li class="language-list">Java</li>
|
||||
<li class="language-list">TypeScript (with the Angular framework)</li>
|
||||
<li class="language-list">PHP (never again)</li>
|
||||
<li class="language-list">R (also never again)</li>
|
||||
</ul>
|
||||
<span>You can also take a look at one of my friend's <a class="hypertext-link" href="https://fish.golf">website</a></span>
|
||||
</div>
|
||||
<a href="https://fish.golf">
|
||||
<img src="src/img/fishgolf.gif"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<script src="/src/gitea.js"></script>
|
||||
<script src="/src/window.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"
|
||||
}
|
||||
}
|
||||
|
||||
148
projects.html
Normal file
148
projects.html
Normal file
@ -0,0 +1,148 @@
|
||||
<!doctype html>
|
||||
<html lang="fr" id="html">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" href="/icon.webp"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>My projects</title>
|
||||
</head>
|
||||
<body>
|
||||
<main id="closed-main">
|
||||
<h1>Look what you've done !</h1>
|
||||
</main>
|
||||
<main class="main">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">Guams - My projects</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button minimize-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button maximize-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button close-button" onclick="closeWindow('main')">
|
||||
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-border">
|
||||
<div class="banner-div window-border">
|
||||
<img id="banner" alt="profile banner" src="/src/img/banner_about.webp">
|
||||
</div>
|
||||
</div>
|
||||
<div class="content window-border">
|
||||
<div class="left-panel">
|
||||
<div class="navigation">
|
||||
<span id="nav-title">Navigation</span>
|
||||
<a class="navbar-link" href="/">Home</a>
|
||||
<a class="navbar-link" href="projects.html">My projects</a>
|
||||
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
|
||||
</div>
|
||||
<div class="changelog-panel">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">Changelog</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button minimize-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button maximize-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button">
|
||||
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="changelog-content">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="changelog-panel">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">About me</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button minimize-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button maximize-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button">
|
||||
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="about-me-content">
|
||||
<div class="about-top">
|
||||
<img class="osaka" alt="osaka :3" src="/src/img/default.webp">
|
||||
<div class="about-top-text">
|
||||
<p>Guams</p>
|
||||
<p>21 years old</p>
|
||||
<p>he/him</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text status">
|
||||
<p class="text">My current status :</p>
|
||||
<p class="text">Might update my blog someday...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="projects">
|
||||
<div class="project-panel">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">My own Gitea instance</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button minimize-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button maximize-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button">
|
||||
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<img class="project-top" alt="screen of my gitea" src="/src/img/gitea.webp">
|
||||
<div class="text status">
|
||||
<u><p class="text">Summary :</p></u>
|
||||
<p class="text">This is my own Gitea instance where I share my projects.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-panel">
|
||||
<div class="title-bar window-border">
|
||||
<div class="title-bar-text">My blog "Abonentendeur"</div>
|
||||
<div class="title-bar-controls">
|
||||
<button class="title-bar-button minimize-button">
|
||||
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button maximize-button">
|
||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||
</button>
|
||||
<button class="title-bar-button">
|
||||
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-content">
|
||||
<img class="project-top" alt="screen of abonentendeur" src="/src/img/abonentendeur.webp">
|
||||
<div class="text status">
|
||||
<u><p class="text">Summary :</p></u>
|
||||
<p class="text">This is my <a href="https://abonentendeur.guams.fr" target="_blank" class="hypertext-link">blog</a> where I share my thoughts on the works I play or read.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<iframe src="https://john.citrons.xyz/embed?ref=example.com"
|
||||
style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;height:94px;border:none;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<script src="/src/gitea.js"></script>
|
||||
<script src="/src/window.js"></script>
|
||||
</html>
|
||||
BIN
public/icon.jpg
BIN
public/icon.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
BIN
public/icon.webp
Normal file
BIN
public/icon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
25
src/gitea.js
Normal file
25
src/gitea.js
Normal file
@ -0,0 +1,25 @@
|
||||
let xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.open("GET", 'https://gitea.guams.fr/api/v1/repos/Guams/guams_homepage/commits?sha=main');
|
||||
xhr.send();
|
||||
|
||||
xhr.onload = () => {
|
||||
if (xhr.status === 200) {
|
||||
commits = JSON.parse(xhr.response);
|
||||
commits.forEach(commit => {
|
||||
const ul = document.getElementById("changelog-content");
|
||||
const li = document.createElement("li");
|
||||
const h2 = document.createElement("h2");
|
||||
const span = document.createElement("span");
|
||||
h2.innerText = new Date(commit.created).toLocaleDateString();
|
||||
span.innerText = commit.commit.message;
|
||||
li.appendChild(h2);
|
||||
li.appendChild(span);
|
||||
ul.appendChild(li);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
xhr.onerror = function () {
|
||||
console.error("Network error with gitea");
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
BIN
src/img/abonentendeur.webp
Normal file
BIN
src/img/abonentendeur.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
src/img/banner_about.webp
Normal file
BIN
src/img/banner_about.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/img/banner_home.webp
Normal file
BIN
src/img/banner_home.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/img/button.webp
Normal file
BIN
src/img/button.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
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 |
BIN
src/img/cursor.webp
Normal file
BIN
src/img/cursor.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 B |
BIN
src/img/default.webp
Normal file
BIN
src/img/default.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB |
BIN
src/img/gitea.webp
Normal file
BIN
src/img/gitea.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
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 |
BIN
src/img/template_banner.xcf
Normal file
BIN
src/img/template_banner.xcf
Normal file
Binary file not shown.
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 ☀️";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
322
src/style.css
322
src/style.css
@ -1,40 +1,318 @@
|
||||
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
|
||||
|
||||
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;
|
||||
* {
|
||||
font-family: 'M PLUS 1p', sans-serif;
|
||||
/*font-family: ms ui gothic, sans-serif;*/
|
||||
text-align: justify;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card {
|
||||
.window-border {
|
||||
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;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 7px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.changelog-panel, .project-panel {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 90px;
|
||||
cursor: url('/src/img/cursor.webp'), default;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div.body {
|
||||
margin: auto;
|
||||
|
||||
.banner-div {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#closed-main > h1 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#closed-main {
|
||||
display: none;
|
||||
color: white;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);}
|
||||
|
||||
main {
|
||||
margin: 16px 0;
|
||||
width: 850px;
|
||||
}
|
||||
|
||||
.title-bar-text {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
align-items: center;
|
||||
background: #131862;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
#changelog-content > li {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
word-break: keep-all;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.osaka {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img.showcase {
|
||||
.status {
|
||||
background-color: #546bab;
|
||||
}
|
||||
|
||||
.project-top {
|
||||
align-self: center;
|
||||
width: 90%;
|
||||
max-height: 175px;
|
||||
object-fit: cover;
|
||||
height: auto;
|
||||
}
|
||||
.project-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
box-sizing: border-box;
|
||||
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,
|
||||
inset -5px -5px #FFFFFF,
|
||||
inset 5px -5px #808080,
|
||||
inset -6px -6px #DFDFDF,
|
||||
inset 6px -6px #000000;
|
||||
padding: 7px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#about-me-content {
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
box-sizing: border-box;
|
||||
max-height: 400px;
|
||||
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,
|
||||
inset -5px -5px #FFFFFF,
|
||||
inset 5px -5px #808080,
|
||||
inset -6px -6px #DFDFDF,
|
||||
inset 6px -6px #000000;
|
||||
padding: 7px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#changelog-content {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
box-sizing: border-box;
|
||||
max-height: 160px;
|
||||
scrollbar-color: #a2a2a2 #ffffff;
|
||||
scrollbar-width: thin;
|
||||
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,
|
||||
inset -5px -5px #FFFFFF,
|
||||
inset 5px -5px #808080,
|
||||
inset -6px -6px #DFDFDF,
|
||||
inset 6px -6px #000000;
|
||||
padding: 7px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.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-between;
|
||||
align-items: stretch;
|
||||
color: white;
|
||||
background-color: #2e4482;
|
||||
padding: 7px;
|
||||
}
|
||||
|
||||
.navbar-link:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
li.language-list {
|
||||
list-style-type: disclosure-closed;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
border-right: 1px solid #bea9de;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #546bab;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.navbar-link:hover {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
#nav-title {
|
||||
background-color: #bea9de;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.hypertext-link:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hypertext-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-link:hover {
|
||||
border-radius: 4px;
|
||||
background-color: #bea9de;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
border-bottom: 1px solid #bea9de;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.presentation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
padding: 7px;
|
||||
min-width: 70%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.projects {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
padding: 7px;
|
||||
min-width: 70%;
|
||||
}
|
||||
|
||||
.about-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
||||
@media (max-width: 850px) {
|
||||
* {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.presentation {
|
||||
word-break: break-word;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.minimize-button {
|
||||
width: 0;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.maximize-button {
|
||||
height: 0;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#banner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.osaka {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
}
|
||||
div.body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.banner-div {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
10
src/window.js
Normal file
10
src/window.js
Normal file
@ -0,0 +1,10 @@
|
||||
function closeWindow(windowClass) {
|
||||
const elements = document.querySelectorAll(`.${windowClass}`);
|
||||
elements.forEach(el => {
|
||||
el.style.display = 'none';
|
||||
});
|
||||
if (windowClass === 'main') {
|
||||
const newMain = document.getElementById("closed-main");
|
||||
newMain.style.display = 'block'
|
||||
}
|
||||
}
|
||||
@ -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