Master/Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

^^._, work in progress, small changes

Browse Source
This commit is contained in:
kalips003
2026-03-30 22:33:13 +02:00
parent 384363c8dd
commit b9c4c817f8
7 changed files with 224 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Transcendence/srcs/frontend/src/index.css
+44 -1
View File
@@ -43,8 +43,13 @@ body {
.container-1 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 5px;
position: relative;
min-height: 200px;
}
/* ///////////////////////////////////////////////////////// */
@@ -75,17 +80,55 @@ body {
color: black;
}
/* ///////////////////////////////////////////////////////// */
.button-trans {
/* SIZE */
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 200px;
/* TEXT */
font-family: "Roboto";
font-size: 62px;
letter-spacing: -10px;
display: flex;
align-items: center;
justify-content: center;
/* Background */
background-image: url("./assets/background.png");
background-position: center;
background-repeat: no-repeat;
background-size: 150%;
/* Borders */
border-radius: 20px;
border-radius: 20px;
border: 5px solid transparent; /* keep space for the shadow */
background-clip: padding-box;
/* metallic effect */
box-shadow:
0 0 0 5px #c0c0c0 inset, /* inner shine */
0 0 0 2px rgba(255,255,255,0.3) inset; /* subtle highlight */
/* OTHER */
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.button-trans:hover {
transform: translateX(-50%) scale(1.02);
box-shadow:
0 0 20px 5px #fff inset,
0 0 20px 5px rgba(255,255,255,0.3) inset;
}
/* ///////////////////////////////////////////////////////// */
.button-test {
margin-right: auto;
margin-left: 20px;
}
/* ///////////////////////////////////////////////////////// */
Transcendence/srcs/frontend/src/index.html
+4 -5
View File
@@ -7,9 +7,8 @@
<div id="header-1" class="container-1"
style="">
<div id="button-test" class="button-1 button-test">place-1</div>
<div id="button-trans" class="button-1 button-trans">place-2</div>
<div></div>
<div id="button-test" class="button-1 button-test multicolor" onclick="window.location.href = 'test/index.html';">TEST</div>
<div id="button-trans" class="button-trans multicolor">TRANSCENDENCE</div>
</div>
<img id="wiskas" style="margin: auto; display: block;" src="webcat/web_cat_img/wiskas-the-third.jpg">
@@ -29,9 +28,9 @@
</section>
<section style="display: flex;">
<button style="margin-left: 50px;" class="button1" onclick="window.location.href = 'webcat/biblio.html';">
<button style="margin-right: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/biblio.html';">
Latest News</button><br>
<button style="margin-left: 50px;" class="button1" onclick="window.location.href = 'webcat/staff/staff.html';">
<button style="margin-left: 50px;" class="button-1 multicolor" onclick="window.location.href = 'webcat/staff/staff.html';">
meet the staff</button><br>
</section>
Transcendence/srcs/frontend/src/index.js
+29 -6
View File
@@ -1,4 +1,5 @@
import { updateElement } from "./test/tools.js";
import { colorizeText } from "./tools.js";
// //////////////////////////////////////////]
let div2 = document.createElement('div')
@@ -15,12 +16,7 @@ button2.textContent = 'tetris'
button2.addEventListener('click', () => {
window.location.href = './tetris/tetris.html';
})
let button3 = document.createElement('button')
div2.append(button3)
button3.textContent = 'transcendance'
button3.addEventListener('click', () => {
window.location.href = './trans/index2.html';
})
let button4 = document.createElement('button')
div2.append(button4)
button4.textContent = 'test'
@@ -29,3 +25,30 @@ button4.addEventListener('click', () => {
})
let img = document.getElementById('wiskas');
img.before(div2)
// apply multicolor to .multicolor
colorizeText();
/* ///////////////////////////////////////////////////////// */
// make transcendence button move via: .button-trans
function updateButtonTranscendence(move) {
const btn = document.querySelector('.button-trans');
btn.addEventListener('mousemove', e => {
const rect = btn.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width - 0.5) * move;
const y = ((e.clientY - rect.top) / rect.height - 0.5) * move;
btn.style.backgroundPosition = `calc(50% + ${x}px) calc(50% + ${y}px)`;
});
btn.addEventListener('mouseleave', () => {
btn.style.backgroundPosition = 'center';
});
btn.addEventListener('click', () => {
window.location.href = './trans/index2.html';
});
}
/* ///////////////////////////////////////////////////////// */
updateButtonTranscendence(100);
Transcendence/srcs/frontend/src/tools.js
+32
View File
@@ -0,0 +1,32 @@
// render in color the text of all .multicolor
export function colorizeText() {
const elements = document.querySelectorAll(".multicolor");
const colorizeText = (el) => {
const text = el.textContent;
el.innerHTML = "";
const baseHue = Math.random() * 360;
// 🎲 random step = makes rainbow "scrambled"
const step = (Math.random() * 60) + 10; // 10 → 70
// 🎲 random direction (left or right rainbow)
const direction = Math.random() < 0.5 ? 1 : -1;
[...text].forEach((char, i) => {
const span = document.createElement("span");
span.textContent = char;
const hue = baseHue + (i * step * direction);
span.style.color = `hsl(${hue}, 90%, 60%)`;
span.style.textShadow = `1px 1px 0 rgba(0,0,0,0.3)`;
el.appendChild(span);
});
};
elements.forEach(colorizeText);
}
Transcendence/srcs/frontend/src/trans/index2.html
+7
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Transcendence</title>
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
@@ -29,6 +30,12 @@
onclick="window.location.href='../wiscat/wiscat.html'">Wiscat</button>
</nav>
<div class="container-gamelinks">
<button class="game-button link-game" onclick="window.location.href='../game2/game.html';">Skkrrribl.io</button>
<button class="game-button link-tetris" onclick="window.location.href='../tetris/tetris.html';">Tetris</button>
<button class="game-button link-wiscat" onclick="window.location.href='../wiscat/wiscat.html';">Wiscat</button>
</div>
<script type="module" src="app.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>
Transcendence/srcs/frontend/src/trans/script.js
+57
View File
@@ -0,0 +1,57 @@
const container = document.querySelector('.container-gamelinks');
const buttons = document.querySelectorAll('.game-button');
function initButtons() {
const rect = container.getBoundingClientRect();
buttons.forEach(btn => {
// Ensure size is known
const bw = btn.offsetWidth;
const bh = btn.offsetHeight;
// Random start position INSIDE container
btn.x = Math.random() * (rect.width - bw);
btn.y = Math.random() * (rect.height - bh);
// Better velocity (avoid super slow)
btn.vx = (Math.random() * 2 + 1) * (Math.random() < 0.5 ? -1 : 1);
btn.vy = (Math.random() * 2 + 1) * (Math.random() < 0.5 ? -1 : 1);
btn.style.left = btn.x + 'px';
btn.style.top = btn.y + 'px';
});
}
function animateButtons() {
const rect = container.getBoundingClientRect();
buttons.forEach(btn => {
btn.x += btn.vx;
btn.y += btn.vy;
const bw = btn.offsetWidth;
const bh = btn.offsetHeight;
// Bounce inside container
if (btn.x <= 0 || btn.x + bw >= rect.width) {
btn.vx *= -1;
btn.x = Math.max(0, Math.min(btn.x, rect.width - bw)); // clamp
}
if (btn.y <= 0 || btn.y + bh >= rect.height) {
btn.vy *= -1;
btn.y = Math.max(0, Math.min(btn.y, rect.height - bh)); // clamp
}
btn.style.left = btn.x + 'px';
btn.style.top = btn.y + 'px';
});
requestAnimationFrame(animateButtons);
}
// 🔥 IMPORTANT: wait for layout to be ready
window.addEventListener('load', () => {
initButtons();
animateButtons();
});
Transcendence/srcs/frontend/src/trans/style.css
+51
View File
@@ -0,0 +1,51 @@
html {
height: 100%;
}
body {
height: 100%;
}
.link-button {
}
.link-game {
}
.link-tetris {
}
.link-wiscat {
}
.container-gamelinks {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.game-button {
position: absolute; /* allow movement */
padding: 15px 30px;
font-size: 20px;
font-family: "Roboto";
border-radius: 15px;
border: 4px solid #c0c0c0;
background-color: #111;
color: white;
cursor: pointer;
/* metallic shine effect */
box-shadow: inset 0 0 8px rgba(255,255,255,0.4), 0 0 5px rgba(255,255,255,0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.game-button:hover {
transform: scale(1.1);
box-shadow: inset 0 0 12px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.3);
}