add button action and game page
This commit is contained in:
florian
parent
14a5ea1d41
commit
a703706e02
32
public/games.html
Normal file
32
public/games.html
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>The land of the penguin</title>
|
||||||
|
<link rel="stylesheet" href="styles/common.css">
|
||||||
|
<link rel="stylesheet" href="styles/games.css">
|
||||||
|
<script src="scripts/common.js" defer></script>
|
||||||
|
<script src="scripts/games.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body id="body" class="body">
|
||||||
|
<header class="blur">
|
||||||
|
<a href="index.html" class="header-link">
|
||||||
|
The land of the penguin
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="card-container">
|
||||||
|
<div class="card blur" id="tetris-card">
|
||||||
|
<img src="imgs/tetris.png" alt="Penguin on the web" class="card-image" draggable="false">
|
||||||
|
<h2>Tetris on the web.</h2>
|
||||||
|
<p>The best Tetris you've ever seen.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="blur">
|
||||||
|
<p>© 2025 The land of the penguin</p>
|
||||||
|
<p>Contact us at: florian@thepenguinontheweb.tech</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/imgs/games.png
Normal file
BIN
public/imgs/games.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
public/imgs/tetris.png
Normal file
BIN
public/imgs/tetris.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@ -11,29 +11,27 @@
|
|||||||
</head>
|
</head>
|
||||||
<body id="body" class="body">
|
<body id="body" class="body">
|
||||||
<header class="blur">
|
<header class="blur">
|
||||||
The land of the penguin
|
<a href="index.html" class="header-link">
|
||||||
|
The land of the penguin
|
||||||
|
</a>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<div class="card-container">
|
<div class="card-container">
|
||||||
<div class="card blur" id="vps-card">
|
<div class="card blur" id="vps-card">
|
||||||
<img src="imgs/penguin.png" alt="Penguin on the web" class="card-image">
|
<img src="imgs/penguin.png" alt="Penguin on the web" class="card-image" draggable="false">
|
||||||
<h2>The penguin on the web</h2>
|
<h2>The penguin on the web</h2>
|
||||||
<p>My Virtual private server ( vps )</p>
|
<p>My Virtual private server ( vps )</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card blur">
|
<div class="card blur" id="games-card">
|
||||||
<h2>Card 2</h2>
|
<img src ="imgs/games.png" alt="The wonderful games" class="card-image" draggable="false">
|
||||||
<p>This is the second card.</p>
|
<h2>Games</h2>
|
||||||
</div>
|
<p>My wonderful games.</p>
|
||||||
<div class="card blur">
|
|
||||||
<h2>Card 3</h2>
|
|
||||||
<p>This is the third card.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="blur">
|
<footer class="blur">
|
||||||
<p>All rights reserved.</p>
|
|
||||||
<p>© 2025 The land of the penguin</p>
|
<p>© 2025 The land of the penguin</p>
|
||||||
<p>Contact us at</p>
|
<p>Contact us at: florian@thepenguinontheweb.tech</p>
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
5
public/scripts/games.js
Normal file
5
public/scripts/games.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
const tetrisCard = document.getElementById('tetris-card');
|
||||||
|
|
||||||
|
tetrisCard.addEventListener('click', () => {
|
||||||
|
window.location.href = 'https://games.penggames.systems';
|
||||||
|
});
|
||||||
@ -1,12 +1,13 @@
|
|||||||
const body = document.querySelector("body");
|
const body = document.querySelector("body");
|
||||||
const vpsCard = document.getElementById("vps-card");
|
const vpsCard = document.getElementById("vps-card");
|
||||||
|
const gamesCard = document.getElementById("games-card");
|
||||||
|
|
||||||
body.addEventListener('scroll', () =>
|
body.addEventListener('scroll', () =>
|
||||||
{
|
{
|
||||||
const scrollTop = window.scrollY;
|
const scrollTop = window.scrollY;
|
||||||
const scrollHeight = document.documentElement.scrollHeight;
|
const scrollHeight = document.documentElement.scrollHeight;
|
||||||
const clientHeight = document.documentElement.clientHeight;
|
const clientHeight = document.documentElement.clientHeight;
|
||||||
|
|
||||||
if (scrollTop + clientHeight >= scrollHeight) {
|
if (scrollTop + clientHeight >= scrollHeight) {
|
||||||
console.log("Reached the bottom of the page");
|
console.log("Reached the bottom of the page");
|
||||||
}
|
}
|
||||||
@ -17,4 +18,10 @@ vpsCard.addEventListener('click', () =>
|
|||||||
{
|
{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
gamesCard.addEventListener('click', () =>
|
||||||
|
{
|
||||||
|
window.location.href = "/games.html";
|
||||||
|
}
|
||||||
);
|
);
|
||||||
@ -1,6 +1,16 @@
|
|||||||
html, body {
|
html, body {
|
||||||
height: 100%; /* Fait en sorte que html et body prennent toute la hauteur */
|
height: 100%;
|
||||||
|
width: 100%; /* Fait en sorte que html et body prennent toute la hauteur */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; /* Affichage en colonne */
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none; /* Enlève le soulignement des liens */
|
||||||
|
color: inherit; /* Hérite de la couleur du parent */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
@ -22,15 +32,21 @@ html, body {
|
|||||||
header {
|
header {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
|
min-height: 90px;
|
||||||
|
width: calc(100% - 80px);
|
||||||
color: rgb(201, 156, 207);
|
color: rgb(201, 156, 207);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
background: #433147d8;
|
background: #433147d8;
|
||||||
|
margin:20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-ms-border-radius: 10px;
|
||||||
|
-o-border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blur::before {
|
.blur::before {
|
||||||
@ -52,6 +68,9 @@ header {
|
|||||||
footer {
|
footer {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
height: 90px;
|
height: 90px;
|
||||||
|
min-height: 90px;
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
|
||||||
|
|
||||||
color: rgb(201, 156, 207);
|
color: rgb(201, 156, 207);
|
||||||
|
|
||||||
@ -62,6 +81,19 @@ footer {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
background: #433147d8;
|
background: #433147d8;
|
||||||
|
|
||||||
|
margin:20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
-webkit-border-radius: 10px;
|
||||||
|
-moz-border-radius: 10px;
|
||||||
|
-ms-border-radius: 10px;
|
||||||
|
-o-border-radius: 10px;
|
||||||
|
|
||||||
|
font-size: 0.875rem;
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@ -69,9 +101,8 @@ main {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-grow: 1;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-container {
|
.card-container {
|
||||||
@ -85,6 +116,12 @@ main {
|
|||||||
gap: 20px; /* Espace entre les cartes */
|
gap: 20px; /* Espace entre les cartes */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.card-container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|||||||
0
public/styles/games.css
Normal file
0
public/styles/games.css
Normal file
Loading…
x
Reference in New Issue
Block a user