diff --git a/Transcendence/srcs/frontend/src/favicon.ico b/Transcendence/srcs/frontend/src/favicon.ico new file mode 100644 index 0000000..0c3679e Binary files /dev/null and b/Transcendence/srcs/frontend/src/favicon.ico differ diff --git a/Transcendence/srcs/frontend/src/index.html b/Transcendence/srcs/frontend/src/index.html index 32f450c..a03a85d 100644 --- a/Transcendence/srcs/frontend/src/index.html +++ b/Transcendence/srcs/frontend/src/index.html @@ -1,32 +1,18 @@ - - - - - - Transcendence.io - - - - - - -

Transcendence.io

- - - - - - - - + + + + + + + + +
+ play +
title
+ login +
+ + +
+ + \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/index.js b/Transcendence/srcs/frontend/src/index.js new file mode 100644 index 0000000..1e75931 --- /dev/null +++ b/Transcendence/srcs/frontend/src/index.js @@ -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; +} \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/index2.html b/Transcendence/srcs/frontend/src/index2.html new file mode 100644 index 0000000..32f450c --- /dev/null +++ b/Transcendence/srcs/frontend/src/index2.html @@ -0,0 +1,32 @@ + + + + + + Transcendence.io + + + + + + +

Transcendence.io

+ + + + + + + + diff --git a/Transcendence/srcs/frontend/src/notes.js b/Transcendence/srcs/frontend/src/notes.js new file mode 100644 index 0000000..8a9a6f8 --- /dev/null +++ b/Transcendence/srcs/frontend/src/notes.js @@ -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 = "Hello"; // 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 \ No newline at end of file diff --git a/Transcendence/srcs/frontend/src/style.css b/Transcendence/srcs/frontend/src/style.css new file mode 100644 index 0000000..dd82617 --- /dev/null +++ b/Transcendence/srcs/frontend/src/style.css @@ -0,0 +1,5 @@ +.inherit { + border: 5px solid black; + + +} \ No newline at end of file