feat(CV.html): add a new CV page to showcase personal information and experience
All checks were successful
DEPLOY / deploy (push) Successful in 8s
All checks were successful
DEPLOY / deploy (push) Successful in 8s
feat(blocs.html): create a new page demonstrating flexbox layout with colored blocks refactor(HTML files): replace <div> with <main> for semantic structure in multiple HTML files fix(index.html): correct script tag syntax for utils.js to ensure proper loading feat(TP6.js): enhance spin simulation with input validation and reporting functionality style(static/style.css): improve overall styling and layout consistency across pages
This commit is contained in:
parent
719d3fd94d
commit
a8b24deb12
75
CV.html
Normal file
75
CV.html
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<title>CV</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" href="static/style.css" />
|
||||||
|
<script src="static/js/utils.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="links">
|
||||||
|
<a href="/" class="header_button">Home Page</a>
|
||||||
|
<a href="projects.html" class="header_button">Projets</a>
|
||||||
|
<a href="about.html" class="header_button">A propos de moi</a>
|
||||||
|
<a href="surprise.html" class="header_button">Surprise :)</a>
|
||||||
|
<a href="https://djalim.fr" class="header_button">Blog Perso</a>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
id="display_header_links"
|
||||||
|
onclick="toggle_all_header_links()"
|
||||||
|
>
|
||||||
|
▼
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>SIMAILA Djalim</h1>
|
||||||
|
<h2>Developper, Sys-admin</h2>
|
||||||
|
<br />
|
||||||
|
<h2>Contact</h2>
|
||||||
|
<p>
|
||||||
|
Mail :
|
||||||
|
<a href="mailto:djalim.simaila@etu.univ-amu.fr"
|
||||||
|
>djalim.simaila@etu.univ-amu.fr</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<br />
|
||||||
|
<h2>Formation</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Bac : (2021) Bac General NSI_MATH</li>
|
||||||
|
<li>
|
||||||
|
BUT : (2024) BUT informatique :Conception d’applications
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<br />
|
||||||
|
<h2>Experiences</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
Stage : (2018) DOSI -IUT Digne-les-Bains : Administrateur
|
||||||
|
réseaux et systèmes
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Stage : (2023) INRAE - Le Tholonet : Développement de
|
||||||
|
logiciel d’aide à la recherche
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Stage : (2024) LPL - Aix-en-Provence : Développement
|
||||||
|
d’application mobile d’aide a la lecture
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Freelance : (2024) SyntaxSoft - CEO : Développement de
|
||||||
|
logiciels
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||||
|
JavaScript ♥️
|
||||||
|
</p>
|
||||||
|
<p>©2025</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4
TP3.html
4
TP3.html
@ -24,7 +24,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="main">
|
<main>
|
||||||
<div id="game_selection">
|
<div id="game_selection">
|
||||||
<button type="button" onclick="setup_game_one()">
|
<button type="button" onclick="setup_game_one()">
|
||||||
Game 1 : You guess
|
Game 1 : You guess
|
||||||
@ -66,7 +66,7 @@
|
|||||||
Back to game selection
|
Back to game selection
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
10
TP4.html
10
TP4.html
@ -24,16 +24,20 @@
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="main">
|
<main>
|
||||||
<div id="pokemon_team">
|
<div id="pokemon_team">
|
||||||
<img id="pokemon_frame" alt="" />
|
<img
|
||||||
|
id="pokemon_frame"
|
||||||
|
src="/static/assets/images/pokeball.png"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
<p id="pokemon_name"></p>
|
<p id="pokemon_name"></p>
|
||||||
<p id="pokemon_desc"></p>
|
<p id="pokemon_desc"></p>
|
||||||
<button type="button" onclick="chose_random_pokemon()">
|
<button type="button" onclick="chose_random_pokemon()">
|
||||||
Check out a random pokemon
|
Check out a random pokemon
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
52
TP5.html
52
TP5.html
@ -28,33 +28,35 @@
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<h1>Grocery list</h1>
|
<main>
|
||||||
|
<h1>Grocery list</h1>
|
||||||
|
|
||||||
<form
|
<form
|
||||||
action="javascript:;"
|
action="javascript:;"
|
||||||
onsubmit="addNewItemToList()"
|
onsubmit="addNewItemToList()"
|
||||||
onreset="clear_input()"
|
onreset="clear_input()"
|
||||||
>
|
>
|
||||||
<button id="clear_button" type="reset">
|
<button id="clear_button" type="reset">
|
||||||
<i class="bi bi-eraser"></i>
|
<i class="bi bi-eraser"></i>
|
||||||
</button>
|
</button>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
id="new_item_input"
|
id="new_item_input"
|
||||||
placeholder="A new pair of Jordans"
|
placeholder="A new pair of Jordans"
|
||||||
/>
|
/>
|
||||||
<input type="number" id="new_item_quantity" value="1" min="0" />
|
<input type="number" id="new_item_quantity" value="1" min="0" />
|
||||||
<select id="new_item_unit">
|
<select id="new_item_unit">
|
||||||
<option value="unit">unit</option>
|
<option value="unit">unit</option>
|
||||||
<option value="L">L</option>
|
<option value="L">L</option>
|
||||||
<option value="KG">KG</option>
|
<option value="KG">KG</option>
|
||||||
</select>
|
</select>
|
||||||
<button type="submit">
|
<button type="submit">
|
||||||
<i class="bi bi-plus"></i>
|
<i class="bi bi-plus"></i>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div id="grocery_list"></div>
|
<div id="grocery_list"></div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
18
TP6.html
18
TP6.html
@ -5,6 +5,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="stylesheet" href="static/style.css" />
|
<link rel="stylesheet" href="static/style.css" />
|
||||||
<script src="static/js/utils.js" defer></script>
|
<script src="static/js/utils.js" defer></script>
|
||||||
|
<script src="static/js/TP6.js" defer></script>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||||
@ -26,7 +27,8 @@
|
|||||||
▼
|
▼
|
||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
<div id="main">
|
|
||||||
|
<main>
|
||||||
<div id="setupGame">
|
<div id="setupGame">
|
||||||
<p>how many spins do you want to simulate</p>
|
<p>how many spins do you want to simulate</p>
|
||||||
<input
|
<input
|
||||||
@ -36,15 +38,20 @@
|
|||||||
min="1"
|
min="1"
|
||||||
value="10000"
|
value="10000"
|
||||||
/>
|
/>
|
||||||
<button type="" onclick="setupGame()">Start Spins</button>
|
<button type="button" onclick="setupGame()">Start Spins</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h2>Current Spin</h2>
|
<h2 id="currentSpin">Current spin</h2>
|
||||||
<h3 id="currentSpin"></h3>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="lastSpins"></div>
|
<div id="lastSpins"></div>
|
||||||
<p id="spinCounter"></p>
|
<p id="spinCounter"></p>
|
||||||
</div>
|
<div id="report">
|
||||||
|
<p id="winrate"></p>
|
||||||
|
<p id="winpercentage"></p>
|
||||||
|
<p id="gains"></p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||||
@ -53,5 +60,4 @@
|
|||||||
<p>©2025</p>
|
<p>©2025</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
<script src="static/js/TP6.js" defer></script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
74
blocs.html
Normal file
74
blocs.html
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<title>Homepage</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" href="static/style.css" />
|
||||||
|
<script src="static/js/utils.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="links">
|
||||||
|
<a href="/" class="header_button">Home Page</a>
|
||||||
|
<a href="projects.html" class="header_button">Projets</a>
|
||||||
|
<a href="about.html" class="header_button">A propos de moi</a>
|
||||||
|
<a href="surprise.html" class="header_button">Surprise :)</a>
|
||||||
|
<a href="https://djalim.fr" class="header_button">Blog Perso</a>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
id="display_header_links"
|
||||||
|
onclick="toggle_all_header_links()"
|
||||||
|
>
|
||||||
|
▼
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 40vh;
|
||||||
|
width: 60vw;
|
||||||
|
gap: 10px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="blue"
|
||||||
|
style="background-color: #00b0f0; flex: 1"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="red-green"
|
||||||
|
style="
|
||||||
|
flex: 2;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="red"
|
||||||
|
style="background-color: #ff0000; flex: 1"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="green"
|
||||||
|
style="background-color: #00b050; flex: 2"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="yellow"
|
||||||
|
style="background-color: #ffff00; flex: 1"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||||
|
JavaScript ♥️
|
||||||
|
</p>
|
||||||
|
<p>©2025</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
103
index.html
103
index.html
@ -4,7 +4,7 @@
|
|||||||
<title>Homepage</title>
|
<title>Homepage</title>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="stylesheet" href="static/style.css" />
|
<link rel="stylesheet" href="static/style.css" />
|
||||||
<script src="static/js/utils.js" defer />
|
<script src="static/js/utils.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -23,53 +23,62 @@
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="title">
|
<main>
|
||||||
<h1>I love commiting war crimes :)</h1>
|
<div class="title">
|
||||||
</div>
|
<h1>I love commiting war crimes :)</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="content">
|
<div class="box horizontal warp-on-small-screen">
|
||||||
<p>
|
<img
|
||||||
Qu'est-ce que le Lorem Ipsum? Le Lorem Ipsum est simplement du
|
src="/static/assets/images/mwa.jpg"
|
||||||
faux texte employé dans la composition et la mise en page avant
|
alt="Moi"
|
||||||
impression. Le Lorem Ipsum est le faux texte standard de
|
width="935"
|
||||||
l'imprimerie depuis les années 1500, quand un imprimeur anonyme
|
height="935"
|
||||||
assembla ensemble des morceaux de texte pour réaliser un livre
|
style="
|
||||||
spécimen de polices de texte. Il n'a pas fait que survivre cinq
|
border-radius: 10px;
|
||||||
siècles, mais s'est aussi adapté à la bureautique informatique,
|
max-width: 320px;
|
||||||
sans que son contenu n'en soit modifié. Il a été popularisé dans
|
max-height: 320px;
|
||||||
les années 1960 grâce à la vente de feuilles Letraset contenant
|
width: auto;
|
||||||
des passages du Lorem Ipsum, et, plus récemment, par son
|
height: auto;
|
||||||
inclusion dans des applications de mise en page de texte, comme
|
"
|
||||||
Aldus PageMaker. Pourquoi l'utiliser? On sait depuis longtemps
|
/>
|
||||||
que travailler avec du texte lisible et contenant du sens est
|
<div>
|
||||||
source de distractions, et empêche de se concentrer sur la mise
|
<p>
|
||||||
en page elle-même. L'avantage du Lorem Ipsum sur un texte
|
Je m'appelle <b>Djalim</b>, j'ai 21 ans et je suis un
|
||||||
générique comme 'Du texte. Du texte. Du texte.' est qu'il
|
developpeur et etudiant en BUT Informatique à Aix en
|
||||||
possède une distribution de lettres plus ou moins normale, et en
|
Provence.
|
||||||
tout cas comparable avec celle du français standard. De
|
</p>
|
||||||
nombreuses suites logicielles de mise en page ou éditeurs de
|
<p>
|
||||||
sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et
|
Je suis passioné d'Informatique, je sais que c'est tres
|
||||||
une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux
|
vague mais ça englobe tout ce que j'aime faire :
|
||||||
sites qui n'en sont encore qu'à leur phase de construction.
|
</p>
|
||||||
Plusieurs versions sont apparues avec le temps, parfois par
|
<ul>
|
||||||
accident, souvent intentionnellement (histoire d'y rajouter de
|
<li>
|
||||||
petits clins d'oeil, voire des phrases embarassantes). D'où
|
<p style="display: inline">
|
||||||
vient-il? Contrairement à une opinion répandue, le Lorem Ipsum
|
Créer des logiciels (scripts, applications,
|
||||||
n'est pas simplement du texte aléatoire. Il trouve ses racines
|
jeux, you name it, I do it)
|
||||||
dans une oeuvre de la littérature latine classique datant de 45
|
</p>
|
||||||
av. J.-C., le rendant vieux de 2000 ans. Un professeur du
|
</li>
|
||||||
Hampden-Sydney College, en Virginie, s'est intéressé à un des
|
<li>
|
||||||
mots latins les plus obscurs, consectetur, extrait d'un passage
|
<p style="display: inline">
|
||||||
du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la
|
Créer et configurer des serveurs/workstations
|
||||||
littérature classique, découvrit la source incontestable du
|
Linux (Debian, Ubuntu, Arch, Manjaro, Fedora,
|
||||||
Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33
|
CentOS, etc...)
|
||||||
du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des
|
</p>
|
||||||
Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant
|
</li>
|
||||||
la Renaissance, est un traité sur la théorie de l'éthique. Les
|
<li>
|
||||||
premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit
|
<p style="display: inline">
|
||||||
amet...", proviennent de la section
|
Créer des api et des bases de données
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
Bref, je fais plein de trucs. Je suis aussi passioné par
|
||||||
|
les mangas, les jeux vidéos et les animes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -23,33 +23,44 @@
|
|||||||
</button>
|
</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div id="title">
|
<main>
|
||||||
<h1>Mes projets</h1>
|
<div class="title">
|
||||||
</div>
|
<h1>Mes TPS</h1>
|
||||||
|
|
||||||
<div id="content">
|
|
||||||
<div class="project_box">
|
|
||||||
<img
|
|
||||||
class="project_box_thumbnail"
|
|
||||||
src="static/assets/images/Da_fookin_owl-1.png"
|
|
||||||
alt="placeholder"
|
|
||||||
/>
|
|
||||||
<p class="project_box_summary">
|
|
||||||
Le Lorem Ipsum est simplement du faux texte employé dans la
|
|
||||||
composition et la mise en page avant impression. Le Lorem
|
|
||||||
Ipsum est le faux texte standard de l'imprimerie depuis les
|
|
||||||
années 1500, quand un imprimeur anonyme assembla ensemble
|
|
||||||
des morceaux de texte pour réaliser un livre spécimen de
|
|
||||||
polices de texte. Il n'a pas fait que survivre cinq siècles,
|
|
||||||
mais s'est aussi adapté à la bureautique informatique, sans
|
|
||||||
que son contenu n'en soit modifié. Il a été popularisé dans
|
|
||||||
les années 1960 grâce à la vente de feuilles Letraset
|
|
||||||
contenant des passages du Lorem Ipsum, et, plus récemment,
|
|
||||||
par son inclusion dans des applications de mise en page de
|
|
||||||
texte, comme Aldus PageMaker
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<a href="/TP3.html" class="box project">
|
||||||
|
<h2>TP3</h2>
|
||||||
|
<p>Lorem Ipsum</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/TP4.html" class="box project">
|
||||||
|
<h2>TP4</h2>
|
||||||
|
<p>Lorem Ipsum</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/TP5.html" class="box project">
|
||||||
|
<h2>TP5</h2>
|
||||||
|
<p>Lorem Ipsum</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/TP6.html" class="box project">
|
||||||
|
<h2>TP6</h2>
|
||||||
|
<p>Lorem Ipsum</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/blocs.html" class="box project">
|
||||||
|
<h2>Blocs flexbox</h2>
|
||||||
|
<p>Lorem Ipsum</p>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div id="title">
|
||||||
|
<h1>Mes projets</h1>
|
||||||
|
</div>
|
||||||
|
<a href="/TP6.html" class="box project">
|
||||||
|
<h2>TP6</h2>
|
||||||
|
<p>Lorem Ipsum</p>
|
||||||
|
</a>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
BIN
static/assets/images/mwa.jpg
Normal file
BIN
static/assets/images/mwa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
BIN
static/assets/images/pokeball.png
Normal file
BIN
static/assets/images/pokeball.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@ -119,11 +119,14 @@ function qualifyingPreprocess() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function setupGame() {
|
function setupGame() {
|
||||||
|
let numberOfSpins = document.getElementById("maxSpinInput").value;
|
||||||
|
if (numberOfSpins > 1000000) numberOfSpins = 1000000;
|
||||||
|
if (numberOfSpins < 1) numberOfSpins = 1;
|
||||||
spinArray = generate_random_array(
|
spinArray = generate_random_array(
|
||||||
document.getElementById("maxSpinInput").value,
|
document.getElementById("maxSpinInput").value,
|
||||||
);
|
);
|
||||||
document.getElementById("setupGame").classList.add("hidden");
|
document.getElementById("setupGame").classList.add("hidden");
|
||||||
spinInterval = setInterval(() => processSpin(), 500);
|
spinInterval = setInterval(() => processSpin(), 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function processSpin() {
|
function processSpin() {
|
||||||
@ -153,11 +156,13 @@ function processSpin() {
|
|||||||
currentSpin += 1;
|
currentSpin += 1;
|
||||||
if (currentSpin == spinArray.length) {
|
if (currentSpin == spinArray.length) {
|
||||||
clearInterval(spinInterval);
|
clearInterval(spinInterval);
|
||||||
|
showReport();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showCurrentSpin() {
|
function showCurrentSpin() {
|
||||||
document.getElementById("currentSpin").textContent = spinArray[currentSpin];
|
document.getElementById("currentSpin").textContent =
|
||||||
|
"Current Spin :" + spinArray[currentSpin];
|
||||||
document.getElementById("lastSpins").replaceChildren();
|
document.getElementById("lastSpins").replaceChildren();
|
||||||
spinArray.slice(lowerBound(), currentSpin).forEach((number) => {
|
spinArray.slice(lowerBound(), currentSpin).forEach((number) => {
|
||||||
let numberDiv = document.createElement("div");
|
let numberDiv = document.createElement("div");
|
||||||
@ -168,3 +173,17 @@ function showCurrentSpin() {
|
|||||||
document.getElementById("spinCounter").textContent =
|
document.getElementById("spinCounter").textContent =
|
||||||
"" + currentSpin + "/" + spinArray.length;
|
"" + currentSpin + "/" + spinArray.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showReport() {
|
||||||
|
let numberOfQualifying = winingNumbers.length + losingNumbers.length;
|
||||||
|
let winrate = winingNumbers.length / numberOfQualifying;
|
||||||
|
let winpercentage = winrate * 100;
|
||||||
|
let gains = -9 * losingNumbers.length;
|
||||||
|
winingNumbers.forEach((number) => {
|
||||||
|
gains += number[1];
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("winrate").textContent = winrate;
|
||||||
|
document.getElementById("winpercentage").textContent = winpercentage;
|
||||||
|
document.getElementById("gains").textContent = gains;
|
||||||
|
}
|
||||||
|
|||||||
@ -5,25 +5,57 @@
|
|||||||
|
|
||||||
* {
|
* {
|
||||||
font-family: JetBrainsMono;
|
font-family: JetBrainsMono;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
--color-text: #f8f8f2;
|
--color-text: #f8f8f2;
|
||||||
--color-background: #282a36;
|
--color-background: #282a36;
|
||||||
--color-current-line: #44475a;
|
--color-current-line: #44475a;
|
||||||
--color-purple: #bd93f9;
|
--color-purple: #bd93f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
ul {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
& > li {
|
||||||
|
padding-left: 20px;
|
||||||
|
&::marker {
|
||||||
|
content: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
content: "—";
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
background-color: var(--color-background);
|
background-color: var(--color-background);
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
& > :not(header, main, footer) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: var(--color-current-line);
|
background-color: var(--color-current-line);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
|
margin: 1rem 1rem 20px 1rem;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
& > .links {
|
& > .links {
|
||||||
@ -69,14 +101,20 @@ header {
|
|||||||
background-color: var(--color-purple);
|
background-color: var(--color-purple);
|
||||||
text-decoration: none !important;
|
text-decoration: none !important;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.06);
|
||||||
|
background-color: var(--color-purple);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_button:hover {
|
main {
|
||||||
background-color: var(--color-purple);
|
display: flex;
|
||||||
}
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
#title {
|
flex-direction: column;
|
||||||
padding: 1rem;
|
max-width: 80%;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
@ -86,16 +124,31 @@ footer {
|
|||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
background-color: var(--color-current-line);
|
background-color: var(--color-current-line);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 4px 20px;
|
padding: 12px;
|
||||||
margin-top: 20px;
|
margin: 20px 1rem 1rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
.box {
|
||||||
|
background-color: var(--color-current-line);
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
gap: 1rem;
|
||||||
|
&.horizontal {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
&:is(a) {
|
||||||
|
transition: transform 0.3s ease-out;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.06);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 739px) {
|
||||||
|
.box.horizontal.warp-on-small-screen {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#pokemon_team {
|
#pokemon_team {
|
||||||
@ -123,14 +176,6 @@ button:hover {
|
|||||||
background-color: var(--color-purple);
|
background-color: var(--color-purple);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content {
|
|
||||||
background-color: var(--color-current-line);
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 20px;
|
|
||||||
margin-left: 10rem;
|
|
||||||
margin-right: 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project_box {
|
.project_box {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -184,7 +229,7 @@ select {
|
|||||||
.spinNumber {
|
.spinNumber {
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
background-color: var(--color-purple);
|
border: 1px solid var(--color-purple);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -193,3 +238,7 @@ select {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#maxSpinInput {
|
||||||
|
width: 7rem;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user