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

transfer

Browse Source
This commit is contained in:
kalips003
2026-03-27 20:17:21 +01:00
parent 13f93fb332
commit 8b907d5a86
6 changed files with 189 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Transcendence/srcs/frontend/src/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

Transcendence/srcs/frontend/src/index.html
+18 -32
View File
@@ -1,32 +1,18 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Transcendence.io</title>
<link rel="stylesheet" href="index.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" />
</head>
<body>
<h1 class="title">Transcendence.io</h1>
<nav class="menu" aria-label="Menu principal">
<button class="menu__item" data-action="login" aria-label="Login">Login</button>
<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
<button class="menu__item" data-action="logout" aria-label="Logout">Logout</button>
</nav>
<nav class="game" aria-label="Game">
<button class="game__item" data-action="new_game" aria-label="Start new game"
onclick="window.location.href='game/game.html'">Start new game</button>
<button class="game__item" data-action="tetris" aria-label="Tetris"
onclick="window.location.href='tetris/tetris.html'">Tetris</button>
</nav>
<script type="module" src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div>
<span>play</span>
<div style="display: inline-block;">title</div>
<span>login</span>
</div>
<div class="inherit"></div>
</body>
</html>
Transcendence/srcs/frontend/src/index.js
+19
View File
@@ -0,0 +1,19 @@
let a = document.createElement('div');
document.body.append(a);
a.textContent = "abc";
a.style.color = "red";
a.style.border = "2px solid black";
a.style.margin = "10px 20px 30px 40px";
a.style.backgroundColor = "green";
for (let i = 0; i <= 10; i++) {
let b = document.createElement('span');
a.append(b);
b.style.color = "blue";
b.textContent = "hallow-" + i;
}
Transcendence/srcs/frontend/src/index2.html
+32
View File
@@ -0,0 +1,32 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Transcendence.io</title>
<link rel="stylesheet" href="index.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" />
</head>
<body>
<h1 class="title">Transcendence.io</h1>
<nav class="menu" aria-label="Menu principal">
<button class="menu__item" data-action="login" aria-label="Login">Login</button>
<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
<button class="menu__item" data-action="logout" aria-label="Logout">Logout</button>
</nav>
<nav class="game" aria-label="Game">
<button class="game__item" data-action="new_game" aria-label="Start new game"
onclick="window.location.href='game/game.html'">Start new game</button>
<button class="game__item" data-action="tetris" aria-label="Tetris"
onclick="window.location.href='tetris/tetris.html'">Tetris</button>
</nav>
<script type="module" src="app.js"></script>
</body>
</html>
Transcendence/srcs/frontend/src/notes.js
+115
View File
@@ -0,0 +1,115 @@
// SIZE
box.style.width = "200px";
box.style.height = "100px";
box.style.minWidth = "100px";
box.style.maxWidth = "500px";
// POSITION
box.style.position = "absolute";
box.style.top = "50px";
box.style.left = "100px";
box.style.right = "20px";
box.style.bottom = "10px";
box.style.zIndex = "10";
// SPACING
box.style.margin = "10px";
box.style.padding = "20px";
box.style.marginTop = "10px";
box.style.paddingLeft = "5px";
// BACKGROUND & COLORS
box.style.background = "red";
box.style.backgroundColor = "blue";
box.style.color = "white";
// BORDER
box.style.border = "2px solid black";
box.style.borderRadius = "10px";
// TEXT
box.style.fontSize = "20px";
box.style.fontWeight = "bold";
box.style.textAlign = "center";
// DISPLAY & VISIBILITY
box.style.display = "block";
box.style.visibility = "visible";
box.style.opacity = "0.5";
// TRANSFORM
box.style.transform = "translateX(100px)";
box.style.transform = "translate(50px, 20px)";
box.style.transform = "scale(1.5)";
box.style.transform = "rotate(45deg)";
box.style.transform = "translateX(100px) scale(2)";
// ANIMATION & TRANSITION
box.style.transition = "all 0.3s ease";
box.style.animation = "move 2s linear";
// INTERACTION
box.style.cursor = "pointer";
box.style.pointerEvents = "none";
// /////////////////////////////////////////////////////>
// /////////////////////////////////////////////////////>
// CONTENT
el.textContent = "Hello"; // plain text
el.innerHTML = "<b>Hello</b>"; // HTML content
el.innerText = "Hello"; // like textContent but respects line breaks
// ATTRIBUTES
el.id = "myDiv"; // element ID
el.className = "box highlight"; // full class string
el.classList.add("active"); // add a class
el.classList.remove("hidden"); // remove a class
el.classList.toggle("open"); // toggle a class
el.title = "Tooltip text"; // title attribute
el.value = "42"; // input value
el.src = "image.png"; // img, video, audio src
el.href = "https://example.com"; // anchor href
el.alt = "alternative text"; // img alt
// DOM STRUCTURE
el.appendChild(child); // add child
el.append(child1, child2); // add multiple children
el.prepend(child); // add at start
el.remove(); // remove self
el.replaceWith(newEl); // replace element
el.cloneNode(true); // copy element (deep if true)
// DATA & CUSTOM
el.dataset.id = "123"; // data-id attribute
el.dataset.name = "box1"; // data-name attribute
// EVENTS
el.onclick = () => {}; // direct event assignment
el.onmouseover = () => {};
el.addEventListener("click", () => {}); // preferred
el.removeEventListener("click", handler);
// VISIBILITY & FOCUS
el.hidden = true; // hides element
el.focus(); // focus element
el.blur(); // remove focus
el.tabIndex = 0; // make element focusable
// DIMENSIONS & POSITION (read-only or get)
el.clientWidth;
el.clientHeight;
el.offsetWidth;
el.offsetHeight;
el.offsetTop;
el.offsetLeft;
el.scrollWidth;
el.scrollHeight;
el.scrollTop;
el.scrollLeft;
// OTHER
el.checked = true; // checkbox / radio
el.selected = true; // option element
el.disabled = true; // input/button
el.readOnly = true; // input/textarea
el.name = "username"; // input / form element
el.type = "text"; // input type
Transcendence/srcs/frontend/src/style.css
+5
View File
@@ -0,0 +1,5 @@
.inherit {
border: 5px solid black;
}