feat(html): update HTML files to include lang attribute and improve structure for better accessibility and SEO
All checks were successful
DEPLOY / deploy (push) Successful in 7s
All checks were successful
DEPLOY / deploy (push) Successful in 7s
feat(js): modify spin interval duration in TP6.js for smoother simulation and enhance user experience fix(js): rename showLastSpins function to showCurrentSpin for clarity and update its functionality to display current spin count style(css): add styles for spin numbers and last spins display to improve visual presentation and user interface
This commit is contained in:
parent
e159cecd2f
commit
719d3fd94d
138
TP3.html
138
TP3.html
@ -1,67 +1,79 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<meta name="Acceuil" />
|
||||
<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>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>TP3</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="static/style.css" />
|
||||
<script src="static/js/utils.js" defer></script>
|
||||
<script src="static/js/TP3.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>
|
||||
|
||||
<div id="main">
|
||||
<div id="game_selection">
|
||||
<button type="" onclick="setup_game_one()">
|
||||
Game 1 : You guess
|
||||
</button>
|
||||
<button type="" onclick="setup_game_two()">
|
||||
Game 2 : The computer guesses
|
||||
</button>
|
||||
<div id="main">
|
||||
<div id="game_selection">
|
||||
<button type="button" onclick="setup_game_one()">
|
||||
Game 1 : You guess
|
||||
</button>
|
||||
<button type="button" onclick="setup_game_two()">
|
||||
Game 2 : The computer guesses
|
||||
</button>
|
||||
</div>
|
||||
<div id="game_one" class="hidden">
|
||||
<h3>Which number am i thinking about ? :)</h3>
|
||||
<p id="message1"></p>
|
||||
<form action="javascript:;" onsubmit="process_guess()">
|
||||
<input
|
||||
type="text"
|
||||
id="player_input"
|
||||
placeholder="type here"
|
||||
/>
|
||||
<button type="submit">Try guess</button>
|
||||
</form>
|
||||
<button type="button" onclick="setup_game_one()">
|
||||
Retry game
|
||||
</button>
|
||||
<button type="button" onclick="back()">
|
||||
Back to game selection
|
||||
</button>
|
||||
</div>
|
||||
<div id="game_two" class="hidden">
|
||||
<h3>Which number are you thinking about ? :)</h3>
|
||||
<p id="message2"></p>
|
||||
<button type="button" onclick="lower()"><u>L</u>ower</button>
|
||||
<button type="button" onclick="greater()">
|
||||
<u>G</u>reater
|
||||
</button>
|
||||
<button type="button" onclick="found()"><u>F</u>ound</button>
|
||||
<button type="button" onclick="setup_game_two()">
|
||||
<u>R</u>etry game
|
||||
</button>
|
||||
<button type="button" onclick="back()">
|
||||
Back to game selection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="game_one" class="hidden">
|
||||
<h3>Which number am i thinking about ? :)</h3>
|
||||
<p id="message1"></p>
|
||||
<form action="javascript:;" onsubmit="process_guess()">
|
||||
<input type="text" id="player_input" placeholder="type here" />
|
||||
<button type="submit">Try guess</button>
|
||||
</form>
|
||||
<button type="button" onclick="setup_game_one()">Retry game</button>
|
||||
<button type="button" onclick="back()">
|
||||
Back to game selection
|
||||
</button>
|
||||
</div>
|
||||
<div id="game_two" class="hidden">
|
||||
<h3>Which number are you thinking about ? :)</h3>
|
||||
<p id="message2"></p>
|
||||
<button type="button" onclick="lower()"><u>L</u>ower</button>
|
||||
<button type="button" onclick="greater()"><u>G</u>reater</button>
|
||||
<button type="button" onclick="found()"><u>F</u>ound</button>
|
||||
<button type="button" onclick="setup_game_two()">
|
||||
<u>R</u>etry game
|
||||
</button>
|
||||
<button type="button" onclick="back()">
|
||||
Back to game selection
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<script src="static/js/TP3.js" defer></script>
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
81
TP4.html
81
TP4.html
@ -1,41 +1,46 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<meta name="Acceuil" />
|
||||
<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>
|
||||
|
||||
<div id="main">
|
||||
<div id="pokemon_team">
|
||||
<img id="pokemon_frame" src="" alt="" />
|
||||
<p id="pokemon_name"></p>
|
||||
<p id="pokemon_desc"></p>
|
||||
<button type="button" onclick="chose_random_pokemon()">
|
||||
Check out a random pokemon
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>TP4</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="static/style.css" />
|
||||
<script src="static/js/utils.js" defer></script>
|
||||
<script src="static/js/TP4.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>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
<script src="static/js/TP4.js" defer></script>
|
||||
</body>
|
||||
<div id="main">
|
||||
<div id="pokemon_team">
|
||||
<img id="pokemon_frame" alt="" />
|
||||
<p id="pokemon_name"></p>
|
||||
<p id="pokemon_desc"></p>
|
||||
<button type="button" onclick="chose_random_pokemon()">
|
||||
Check out a random pokemon
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
121
TP5.html
121
TP5.html
@ -1,62 +1,67 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<meta name="Acceuil" />
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="static/style.css" />
|
||||
<script src="static/js/utils.js" defer></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
</head>
|
||||
<body onload="restoreList()">
|
||||
<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>
|
||||
|
||||
<h1>Grocery list</h1>
|
||||
|
||||
<form
|
||||
action="javascript:;"
|
||||
onsubmit="addNewItemToList()"
|
||||
onreset="clear_input()"
|
||||
>
|
||||
<button id="clear_button" type="reset">
|
||||
<i class="bi bi-eraser"></i>
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
id="new_item_input"
|
||||
placeholder="A new pair of Jordans"
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>TP5</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="static/style.css" />
|
||||
<script src="static/js/utils.js" defer></script>
|
||||
<script src="static/js/TP5.js" defer></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
<input type="number" id="new_item_quantity" value="1" min="0" />
|
||||
<select id="new_item_unit">
|
||||
<option value="unit">unit</option>
|
||||
<option value="L">L</option>
|
||||
<option value="KG">KG</option>
|
||||
</select>
|
||||
<button type="submit">
|
||||
<i class="bi bi-plus"></i>
|
||||
</button>
|
||||
</form>
|
||||
</head>
|
||||
<body onload="restoreList()">
|
||||
<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>
|
||||
|
||||
<div id="grocery_list"></div>
|
||||
<h1>Grocery list</h1>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="static/js/TP5.js" defer></script>
|
||||
<form
|
||||
action="javascript:;"
|
||||
onsubmit="addNewItemToList()"
|
||||
onreset="clear_input()"
|
||||
>
|
||||
<button id="clear_button" type="reset">
|
||||
<i class="bi bi-eraser"></i>
|
||||
</button>
|
||||
<input
|
||||
type="text"
|
||||
id="new_item_input"
|
||||
placeholder="A new pair of Jordans"
|
||||
/>
|
||||
<input type="number" id="new_item_quantity" value="1" min="0" />
|
||||
<select id="new_item_unit">
|
||||
<option value="unit">unit</option>
|
||||
<option value="L">L</option>
|
||||
<option value="KG">KG</option>
|
||||
</select>
|
||||
<button type="submit">
|
||||
<i class="bi bi-plus"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="grocery_list"></div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
102
TP6.html
102
TP6.html
@ -1,49 +1,57 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<meta name="Acceuil" />
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="static/style.css" />
|
||||
<script src="static/js/utils.js" defer></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
</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>
|
||||
<div id="setupGame">
|
||||
<p>how many spins do you want to simulate</p>
|
||||
<input
|
||||
id="maxSpinInput"
|
||||
type="number"
|
||||
max="1000000"
|
||||
min="1"
|
||||
value="10000"
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>TP6</title>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="static/style.css" />
|
||||
<script src="static/js/utils.js" defer></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
<button type="" onclick="setupGame()">Start Spins</button>
|
||||
</div>
|
||||
<div id="currentSpin">
|
||||
<h3>Current Spin</h3>
|
||||
<p></p>
|
||||
</div>
|
||||
<div id="lastSpins"></div>
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="static/js/TP6.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>
|
||||
<div id="main">
|
||||
<div id="setupGame">
|
||||
<p>how many spins do you want to simulate</p>
|
||||
<input
|
||||
id="maxSpinInput"
|
||||
type="number"
|
||||
max="1000000"
|
||||
min="1"
|
||||
value="10000"
|
||||
/>
|
||||
<button type="" onclick="setupGame()">Start Spins</button>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Current Spin</h2>
|
||||
<h3 id="currentSpin"></h3>
|
||||
</div>
|
||||
<div id="lastSpins"></div>
|
||||
<p id="spinCounter"></p>
|
||||
</div>
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
<script src="static/js/TP6.js" defer></script>
|
||||
</html>
|
||||
|
||||
149
index.html
149
index.html
@ -1,75 +1,82 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<meta name="Acceuil" />
|
||||
<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>
|
||||
<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 />
|
||||
</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>
|
||||
|
||||
<div id="title">
|
||||
<h1>I love commiting war crimes :)</h1>
|
||||
</div>
|
||||
<button id="display_header_links" onclick="toggle_all_header_links()">
|
||||
▼
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div id="title">
|
||||
<h1>I love commiting war crimes :)</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<p>
|
||||
Qu'est-ce que le Lorem Ipsum? 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. Pourquoi l'utiliser? On sait depuis longtemps
|
||||
que travailler avec du texte lisible et contenant du sens est
|
||||
source de distractions, et empêche de se concentrer sur la mise
|
||||
en page elle-même. L'avantage du Lorem Ipsum sur un texte
|
||||
générique comme 'Du texte. Du texte. Du texte.' est qu'il
|
||||
possède une distribution de lettres plus ou moins normale, et en
|
||||
tout cas comparable avec celle du français standard. De
|
||||
nombreuses suites logicielles de mise en page ou éditeurs de
|
||||
sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et
|
||||
une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux
|
||||
sites qui n'en sont encore qu'à leur phase de construction.
|
||||
Plusieurs versions sont apparues avec le temps, parfois par
|
||||
accident, souvent intentionnellement (histoire d'y rajouter de
|
||||
petits clins d'oeil, voire des phrases embarassantes). D'où
|
||||
vient-il? Contrairement à une opinion répandue, le Lorem Ipsum
|
||||
n'est pas simplement du texte aléatoire. Il trouve ses racines
|
||||
dans une oeuvre de la littérature latine classique datant de 45
|
||||
av. J.-C., le rendant vieux de 2000 ans. Un professeur du
|
||||
Hampden-Sydney College, en Virginie, s'est intéressé à un des
|
||||
mots latins les plus obscurs, consectetur, extrait d'un passage
|
||||
du Lorem Ipsum, et en étudiant tous les usages de ce mot dans la
|
||||
littérature classique, découvrit la source incontestable du
|
||||
Lorem Ipsum. Il provient en fait des sections 1.10.32 et 1.10.33
|
||||
du "De Finibus Bonorum et Malorum" (Des Suprêmes Biens et des
|
||||
Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire pendant
|
||||
la Renaissance, est un traité sur la théorie de l'éthique. Les
|
||||
premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit
|
||||
amet...", proviennent de la section
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<p>
|
||||
Qu'est-ce que le Lorem Ipsum? 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.
|
||||
Pourquoi l'utiliser? On sait depuis longtemps que travailler avec du
|
||||
texte lisible et contenant du sens est source de distractions, et
|
||||
empêche de se concentrer sur la mise en page elle-même. L'avantage
|
||||
du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du
|
||||
texte.' est qu'il possède une distribution de lettres plus ou moins
|
||||
normale, et en tout cas comparable avec celle du français standard.
|
||||
De nombreuses suites logicielles de mise en page ou éditeurs de
|
||||
sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une
|
||||
recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites
|
||||
qui n'en sont encore qu'à leur phase de construction. Plusieurs
|
||||
versions sont apparues avec le temps, parfois par accident, souvent
|
||||
intentionnellement (histoire d'y rajouter de petits clins d'oeil,
|
||||
voire des phrases embarassantes). D'où vient-il? Contrairement à une
|
||||
opinion répandue, le Lorem Ipsum n'est pas simplement du texte
|
||||
aléatoire. Il trouve ses racines dans une oeuvre de la littérature
|
||||
latine classique datant de 45 av. J.-C., le rendant vieux de 2000
|
||||
ans. Un professeur du Hampden-Sydney College, en Virginie, s'est
|
||||
intéressé à un des mots latins les plus obscurs, consectetur,
|
||||
extrait d'un passage du Lorem Ipsum, et en étudiant tous les usages
|
||||
de ce mot dans la littérature classique, découvrit la source
|
||||
incontestable du Lorem Ipsum. Il provient en fait des sections
|
||||
1.10.32 et 1.10.33 du "De Finibus Bonorum et Malorum" (Des Suprêmes
|
||||
Biens et des Suprêmes Maux) de Cicéron. Cet ouvrage, très populaire
|
||||
pendant la Renaissance, est un traité sur la théorie de l'éthique.
|
||||
Les premières lignes du Lorem Ipsum, "Lorem ipsum dolor sit
|
||||
amet...", proviennent de la section
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
108
projects.html
108
projects.html
@ -1,56 +1,62 @@
|
||||
<!doctype html>
|
||||
<head>
|
||||
<meta name="Acceuil" />
|
||||
<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>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Projects</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>
|
||||
|
||||
<div id="title">
|
||||
<h1>Mes projets</h1>
|
||||
</div>
|
||||
<button id="display_header_links" onclick="toggle_all_header_links()">
|
||||
▼
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div id="title">
|
||||
<h1>Mes projets</h1>
|
||||
</div>
|
||||
<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 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
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
Fait par Djalim Simaila et sa haine de l'HTML, CSS, mais pas du
|
||||
JavaScript ♥️
|
||||
</p>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
<p>©2025</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -123,10 +123,11 @@ function setupGame() {
|
||||
document.getElementById("maxSpinInput").value,
|
||||
);
|
||||
document.getElementById("setupGame").classList.add("hidden");
|
||||
spinInterval = setInterval(() => processSpin(), 100);
|
||||
spinInterval = setInterval(() => processSpin(), 500);
|
||||
}
|
||||
|
||||
function processSpin() {
|
||||
showCurrentSpin();
|
||||
// Check if the number is qualifying
|
||||
qualifyingPreprocess();
|
||||
|
||||
@ -150,10 +151,13 @@ function processSpin() {
|
||||
console.log(winingNumbers);
|
||||
console.log(losingNumbers);
|
||||
currentSpin += 1;
|
||||
showLastSpins();
|
||||
if (currentSpin == spinArray.length) {
|
||||
clearInterval(spinInterval);
|
||||
}
|
||||
}
|
||||
|
||||
function showLastSpins() {
|
||||
function showCurrentSpin() {
|
||||
document.getElementById("currentSpin").textContent = spinArray[currentSpin];
|
||||
document.getElementById("lastSpins").replaceChildren();
|
||||
spinArray.slice(lowerBound(), currentSpin).forEach((number) => {
|
||||
let numberDiv = document.createElement("div");
|
||||
@ -161,4 +165,6 @@ function showLastSpins() {
|
||||
numberDiv.textContent = number;
|
||||
document.getElementById("lastSpins").appendChild(numberDiv);
|
||||
});
|
||||
document.getElementById("spinCounter").textContent =
|
||||
"" + currentSpin + "/" + spinArray.length;
|
||||
}
|
||||
|
||||
@ -180,3 +180,16 @@ select {
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.spinNumber {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
background-color: var(--color-purple);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#lastSpins {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user