diff --git a/After-Win.jpg b/After-Win.jpg new file mode 100644 index 00000000..ead11565 Binary files /dev/null and b/After-Win.jpg differ diff --git a/Before-Start.jpg b/Before-Start.jpg new file mode 100644 index 00000000..0cbef2db Binary files /dev/null and b/Before-Start.jpg differ diff --git a/DotBox Tutorial new.mp4 b/DotBox Tutorial new.mp4 new file mode 100644 index 00000000..f374abba Binary files /dev/null and b/DotBox Tutorial new.mp4 differ diff --git a/README.md b/README.md index dd4d0b81..f5e1a5e1 100644 --- a/README.md +++ b/README.md @@ -95,17 +95,19 @@ ## **Screenshots 📸** Before Starting Game -![Screenshot](./assets/images/Screenshot-Before-Start.png) +![alt text](Before-Start.jpg)
After Winning Game -![Screenshot](./assets/images/Screenshot-After-Win.png) +![alt text](After-Win.jpg)
## **Working video 📹** +**Watch this tutorial** to learn how to play Dots & Boxes effectively! + +https://github.com/user-attachments/assets/6bd3d7e5-854d-4460-aef2-90efe3728e22 -https://github.com/GameSphere-MultiPlayer/GameSphere/assets/114330097/293120ab-b1f0-48a8-af15-c05d49c65763
diff --git a/assets/images/After-Win.jpg b/assets/images/After-Win.jpg new file mode 100644 index 00000000..ead11565 Binary files /dev/null and b/assets/images/After-Win.jpg differ diff --git a/assets/images/Before-Start.jpg b/assets/images/Before-Start.jpg new file mode 100644 index 00000000..0cbef2db Binary files /dev/null and b/assets/images/Before-Start.jpg differ diff --git a/assets/images/icon-plus.svg b/assets/images/icon-plus.svg index 850687cc..3f35654f 100644 --- a/assets/images/icon-plus.svg +++ b/assets/images/icon-plus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/images/icon-star.svg b/assets/images/icon-star.svg index 66fb9e70..b56b9aa3 100644 --- a/assets/images/icon-star.svg +++ b/assets/images/icon-star.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/assets/sounds/pop.mp3 b/assets/sounds/pop.mp3 new file mode 100644 index 00000000..202ac055 Binary files /dev/null and b/assets/sounds/pop.mp3 differ diff --git a/assets/testimonial-Favi.png b/assets/testimonial-Favi.png new file mode 100644 index 00000000..a4b0dc00 Binary files /dev/null and b/assets/testimonial-Favi.png differ diff --git a/assets/videos/DotBox Tutorial new.mp4 b/assets/videos/DotBox Tutorial new.mp4 new file mode 100644 index 00000000..f374abba Binary files /dev/null and b/assets/videos/DotBox Tutorial new.mp4 differ diff --git a/index.html b/index.html index a5c76fb8..33c28171 100644 --- a/index.html +++ b/index.html @@ -1,239 +1,184 @@ - - - - - - - - - - - - - - - - - Dots & Boxes Game - - - + + + + + + + + + + + + + + + + + Dots & Boxes Game + - -
- -
- - - -
-
-
-
-
We'd Love Your Feedback!
- × -
-
- - - - - -
-
-
-
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
  • - emoji -
    • -
    -
    -
    - - - - - + + + + +
    + +
    + + + +
    +
    +
    +
    +
    We'd Love Your Feedback!
    + × +
    +
    + + + + + +
    +
    +
    +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • +
  • + emoji +
    • -
    - - +
    + + + + +
    +
    + + +
    +
    -
    -
    -
    - - -
    -
    - - -
    -
    + +
    - - + +
    -
    - - +
    + +
    - -
    +
    +
    + + +
    +
    + + +
    +
    - + -
    - -

    ▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂

    -

    - Instructions -

    -

    - 1. 🧩 Select the number of rows, columns, and players.
    - 2. 🏆 The player who has the maximum number of boxes on the board is - the winner.
    - 3. 🔄 Players will switch after every turn. But the player who fills - the last box will get one extra chance consecutively. 🎉
    -

    +
    + +

    ▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂

    +

    + Instructions +

    +

    + 1. 🧩 Select the number of rows, columns, and players.
    + 2. 🏆 The player who has the maximum number of boxes on the board is + the winner.
    + 3. 🔄 Players will switch after every turn. But the player who fills + the last box will get one extra chance consecutively. 🎉
    +

    - Read Detailed Instructions -
    -
    -
    -
    - - -
    -
    - -
    - - - - -
    + Read Detailed Instructions +
    +
    +
    +
    + + +
    +
    + +
    + + + +
    +
    -
    - - - -
    +
    + + + +
    -
    - - START - - - -
    +
    + + START + + +
    @@ -264,9 +209,32 @@

    + +
    +
    +
    + HowToPlay? + TermsOfService + PrivacyPolicy + Licensing +
    + + Chrome Gaming +
    - - - + + + + - - + \ No newline at end of file diff --git a/js/FAQs.js b/js/FAQs.js index 6f0d355d..63c5c793 100644 --- a/js/FAQs.js +++ b/js/FAQs.js @@ -1,47 +1,14 @@ -function toggle(drop, isExpanded) { - const img = drop.querySelector('img'); - if (isExpanded) { - img.src="../assets/images/icon-minus.svg"; - }else { - img.src="../assets/images/icon-plus.svg"; - } -} - -//Drops and their default expansion values -const drop1 = document.querySelector(".drop1") ; let drop1isExpanded = false ; -const drop2 = document.querySelector(".drop2") ; let drop2isExpanded = false ; -const drop3 = document.querySelector(".drop3") ; let drop3isExpanded = false ; -const drop4 = document.querySelector(".drop4") ; let drop4isExpanded = false ; -const drop5 = document.querySelector(".drop5") ; let drop5isExpanded = false ; -const drop6 = document.querySelector(".drop6") ; let drop6isExpanded = false ; - - -drop1.addEventListener('click', function(){ -drop1isExpanded = !drop1isExpanded; -toggle(drop1, drop1isExpanded); -}); - -drop2.addEventListener('click', function(){ -drop2isExpanded = !drop2isExpanded; -toggle(drop2, drop2isExpanded); -}); - -drop3.addEventListener('click', function(){ -drop3isExpanded = !drop3isExpanded; -toggle(drop3, drop3isExpanded); -}); - -drop4.addEventListener('click', function(){ -drop4isExpanded = !drop4isExpanded; -toggle(drop4, drop4isExpanded); +let drops = document.querySelectorAll(".drop"); + +drops.forEach((drop) => { + drop.addEventListener("click", () => { + const icon = drop.querySelector("img"); + if (drop.classList.contains("open")) { + icon.src = "../assets/images/icon-plus.svg"; + drop.classList.remove("open"); + } else { + icon.src = "../assets/images/icon-minus.svg"; + drop.classList.add("open"); + } + }); }); - -drop5.addEventListener('click', function(){ -drop5isExpanded = !drop5isExpanded; -toggle(drop5, drop5isExpanded); -}); - -drop6.addEventListener('click', function(){ -drop6isExpanded = !drop6isExpanded; -toggle(drop6, drop6isExpanded); -}); \ No newline at end of file diff --git a/js/contributors.js b/js/contributors.js deleted file mode 100644 index 9ceba3e3..00000000 --- a/js/contributors.js +++ /dev/null @@ -1,29 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { - const contributorsContainer = document.getElementById("contributors"); - - async function fetchContributors() { - try { - const response = await fetch( - "https://api.github.com/repos/ChromeGaming/Dot-Box/contributors" - ); - const contributors = await response.json(); - - contributors.forEach((contributor) => { - const contributorCard = document.createElement("a"); - contributorCard.href = contributor.html_url; - contributorCard.target = "_blank"; - contributorCard.className = "contributor-card"; - contributorCard.innerHTML = ` - ${contributor.login} -

    ${contributor.login}

    -

    Contributions: ${contributor.contributions}

    -`; - contributorsContainer.appendChild(contributorCard); - }); - } catch (error) { - console.error("Error fetching contributors:", error); - } - } - - fetchContributors(); -}); diff --git a/js/game.js b/js/game.js index cfa63679..832f1d17 100644 --- a/js/game.js +++ b/js/game.js @@ -4,7 +4,6 @@ class Game { constructor(playersInfo) { if (Game.instance == null) Game.instance = this; - this.playersUI = document.querySelector(".players"); this.playerNameUI = document.querySelector(".player-turn .name"); this.playerTurnBgUI = document.querySelector(".player-turn .bg"); @@ -56,13 +55,13 @@ class Game { `; menu.appendChild(timerContainer); this.timerDisplay = document.getElementById("timer"); - // this.stateIcon = document.getElementById("state").children[0]; + this.stateIcon = document.getElementById("state").children[0]; } // Start or restart the timer startTimer() { - // this.stateIcon.classList.add("fa-pause"); - // this.stateIcon.classList.remove("fa-play"); + this.stateIcon.classList.add("fa-pause"); + this.stateIcon.classList.remove("fa-play"); this.timerDisplay.style.color = "#333"; clearInterval(this.timer); this.timeLeft = 30; @@ -97,9 +96,6 @@ class Game { this.removeEventListener("boxFill"); clearInterval(this.timer); // Stop the timer - let winSound = new Audio("../assets/sounds/win.mp3"); - winSound.play(); - // Determine winner or draw const winner = this.determineWinner(this.players); @@ -113,9 +109,33 @@ class Game { this.playerTurnBgUI.classList.add("win"); this.playerTurnBgUI.style.background = winner.color; } + + // Storing winner data for leaderboard + const playerData = JSON.parse(localStorage.getItem("playerData")); + const player = playerData.find((player) => player.name === winner.name); + const playerIndex = playerData.indexOf(player); + playerData[playerIndex].score = winner.filledBoxes; + playerData[playerIndex].winner = true; + localStorage.setItem("winnerData", JSON.stringify(playerData)); + + // Winning Sound effect + let winSound = new Audio("../assets/sounds/win.mp3"); + winSound.play(); // Open the win overlay document.getElementById("win-overlay").style.height = "100%"; + + for (let i = 0; i < 10; i++) { + setTimeout(() => { + const pop = new Audio("../assets/sounds/pop.mp3"); + pop.play(); + confetti({ + particleCount: 200, + spread: 100, + origin: { y: 0.6 }, + }); + }, i * 1000); + } } determineWinner(players) { @@ -142,7 +162,6 @@ class Game { // If a box is filled, increment players' score with the number of boxes filled by him/her and update UI onBoxFill() { this.currentPlayer.filledBoxes++; - this.updatePlayerScoreUI(); this.updateScoreboard(); if (this.isTimerStarted) { this.startTimer(); // Restart timer when a move is made @@ -161,32 +180,15 @@ class Game { // Add players to UI addPlayersUI() { - const scoreboardContainer = document.querySelector(".scoreboard-container"); - scoreboardContainer.style.visibility = "visible"; - const scoreboard = document.querySelector(".scoreboard"); scoreboard.innerHTML = ""; // Clear existing content this.players.forEach((player, index) => { - const div = document.createElement("div"); - div.classList.add("player"); - // Maintain filled boxes. - const b = document.createElement("b"); - b.classList.add("filled-boxes"); - b.textContent = player.filledBoxes; - b.style.background = player.color; - this.players[index]["filledBoxesUI"] = b; - - // Maintain player name. - const span = document.createElement("span"); - span.textContent = player.name; - - div.appendChild(b); - div.appendChild(span); - - // Adding score and name to the element - this.playersUI.appendChild(div); + const scoreUI = document.createElement("span"); + scoreUI.textContent = player.filledBoxes; + scoreUI.classList.add("player-score"); + this.players[index]["score"] = scoreUI; // Maintain player avatar in the scoreboard const avatarSrc = player.avatarID; @@ -197,18 +199,14 @@ class Game { scoreDiv.innerHTML = ` ${player.name} - 0 `; + scoreDiv.style.backgroundColor = player.color; scoreboard.appendChild(scoreDiv); + scoreDiv.appendChild(scoreUI); }); } - // Update player score UI used while switching player - updatePlayerScoreUI() { - this.currentPlayer.filledBoxesUI.innerText = this.currentPlayer.filledBoxes; - } - // Update player name UI used while switching player updatePlayerNameUI() { this.playerNameUI.innerText = this.currentPlayer.name; @@ -216,12 +214,7 @@ class Game { } updateScoreboard() { - this.players.forEach((player, index) => { - const scoreElement = document.getElementById(`player${index + 1}-score`); - if (scoreElement) { - scoreElement.textContent = player.filledBoxes; - } - }); + this.currentPlayer.score.innerText = this.currentPlayer.filledBoxes; } makeScoreboardDraggable() { @@ -317,15 +310,18 @@ class Game { if (confirm("Are you sure you want to surrender?")) { this.players.splice(this.currentPlayerIndex, 1); + document + .querySelector(`.player${this.currentPlayerIndex + 1}-score`) + .classList.add("defeated"); + if (this.currentPlayerIndex >= this.players.length) { this.currentPlayerIndex = 0; } this.currentPlayer = this.players[this.currentPlayerIndex]; - this.addPlayersUI(); + this.updateScoreboard(); this.updatePlayerNameUI(); - this.updatePlayerScoreUI(); if (this.players.length == 1) { this.invokeEvent("playerWin"); @@ -368,16 +364,19 @@ function renderPlayerInputs(count) { "magenta", "orange", ]; + for (let i = 1; i <= count; i++) { const div = document.createElement("div"); div.classList.add("player-input"); div.innerHTML = ` +
    - avatar + avatar
    +
    ${colors @@ -506,7 +505,7 @@ for (let i = 1; i <= 20; i++) { const profile = document.createElement("button"); profile.classList.add("selectAvatar"); profile.innerHTML = ` - Avatar${i} + Avatar${i} `; options.appendChild(profile); } @@ -533,7 +532,6 @@ const scoreboard = document.querySelector(".scoreboard-container"); function tourGuide() { const tourSteps = document.querySelectorAll(".tour-step"); let currentStep = 0; - scoreboard.style.display = "block"; const showStep = (index) => { tourSteps.forEach((step, i) => { @@ -587,7 +585,11 @@ function tourGuide() { // Settings Button document.getElementById("setting-btn").addEventListener("click", () => { - menu.classList.toggle("menu-open"); + menu.style.display = "block"; +}); + +document.getElementById("close-menu").addEventListener("click", () => { + menu.style.display = "none"; }); // Surrender Button @@ -601,6 +603,9 @@ const help = document.getElementById("help"); help.addEventListener("click", () => { tourGuide(); stateChange("pause"); + if (window.innerWidth < 768) { + menu.style.display = "none"; + } }); // Restart Game diff --git a/js/leaderboard.js b/js/leaderboard.js new file mode 100644 index 00000000..6e3f2ee9 --- /dev/null +++ b/js/leaderboard.js @@ -0,0 +1,69 @@ +// Random Data +const entries = [ + { name: "Alice", score: 356, avatar: "/assets/avatars/1.png" }, + { name: "Bob", score: 258, avatar: "/assets/avatars/2.png" }, + { name: "Charlie", score: 312, avatar: "/assets/avatars/17.png" }, + { name: "David", score: 167, avatar: "/assets/avatars/4.png" }, + { name: "Eve", score: 481, avatar: "/assets/avatars/9.png" }, + { name: "Frank", score: 573, avatar: "/assets/avatars/8.png" }, + { name: "Grace", score: 345, avatar: "/assets/avatars/7.png" }, + { name: "Heidi", score: 254, avatar: "/assets/avatars/6.png" }, + { name: "Ivan", score: 491, avatar: "/assets/avatars/5.png" }, + { name: "Judy", score: 587, avatar: "/assets/avatars/10.png" }, + { name: "Jassi", score: 342, avatar: "/assets/avatars/18.png" }, + { name: "Kevin", score: 456, avatar: "/assets/avatars/11.png" }, + { name: "Michael", score: 398, avatar: "/assets/avatars/13.png" }, + { name: "Nancy", score: 359, avatar: "/assets/avatars/14.png" }, + { name: "Oliver", score: 275, avatar: "/assets/avatars/15.png" }, + { name: "Peggy", score: 493, avatar: "/assets/avatars/16.png" }, + { name: "Quincy", score: 567, avatar: "/assets/avatars/3.png" }, + { name: "Robert", score: 321, avatar: "/assets/avatars/12.png" }, + { name: "Tom", score: 512, avatar: "/assets/avatars/19.png" }, + { name: "Victor", score: 512, avatar: "/assets/avatars/20.png" }, +]; + +// Data after game ends +try { + const winnerData = JSON.parse(localStorage.getItem("winnerData")); + const winner = winnerData.find((player) => player.winner === true); + const winnerEntry = { + name: winner.name, + avatar: winner.avatarID, + score: winner.score * 20 + 100, + }; + entries.push(winnerEntry); +} catch (e) { + console.log("No winner data found"); +} + +// Sort entries by score +entries.sort((a, b) => b.score - a.score); + +// Max Limit -> 25 entries +entries.splice(25); + +const ranking = document.getElementById("ranking"); + +entries.forEach((entry, index) => { + const template = document.createElement("div"); + template.classList.add("entry"); + template.innerHTML = ` +
    ${index + 1}
    +
    + avatar + ${entry.name}
    +
    ${entry.score}
    + `; + + ranking.appendChild(template); + + if (index == 0) { + template.id = "gold"; + } + if (index == 1) { + template.id = "silver"; + } + if (index == 2) { + template.id = "bronze"; + } +}); diff --git a/js/validation.js b/js/validation.js index 8bb25d4b..44dae075 100644 --- a/js/validation.js +++ b/js/validation.js @@ -1,6 +1,4 @@ document.addEventListener("DOMContentLoaded", () => { - const rowsInput = document.getElementById("rows"); - const columnsInput = document.getElementById("columns"); const playersInput = document.getElementById("players-count"); const startBtn = document.querySelector(".start-btn"); const validationMessage = document.getElementById("validation-message"); @@ -19,21 +17,19 @@ document.addEventListener("DOMContentLoaded", () => { }; const validateAllInputs = () => { - const invalidRows = !validateInput(rowsInput, 5, 30); - const invalidColumns = !validateInput(columnsInput, 5, 30); const invalidPlayers = !validateInput(playersInput, 2, 6); - if (invalidRows || invalidColumns || invalidPlayers) { + if (invalidPlayers) { startBtn.disabled = true; + startBtn.classList.add("disabled"); showValidationMessage(true); } else { startBtn.disabled = false; + startBtn.classList.remove("disabled"); showValidationMessage(false); } }; - rowsInput.addEventListener("input", validateAllInputs); - columnsInput.addEventListener("input", validateAllInputs); playersInput.addEventListener("input", validateAllInputs); startBtn.addEventListener("click", (event) => { @@ -43,5 +39,6 @@ document.addEventListener("DOMContentLoaded", () => { }); // Initial validation + validateAllInputs(); }); diff --git a/pages/FAQs.html b/pages/FAQs.html index 959f341e..51603962 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -3,13 +3,27 @@ - - - + + + + + + + + + - FAQs @@ -17,26 +31,22 @@ -
    - -
    + -
    + -
    -

    +

    Frequently Asked Questions!

    - + How do I win the game?

    @@ -82,7 +93,7 @@

    - + How do I set up the game? @@ -96,7 +107,7 @@

    - + What happens if I complete a box? @@ -110,7 +121,7 @@

    - + When does the game end?

    @@ -123,7 +134,7 @@

    - + Is there a strategy involved in playing this game? @@ -137,7 +148,7 @@

    - + What if I need help or have more questions about gameplay? @@ -153,10 +164,10 @@

    - HowToPlay? - TermsOfService - PrivacyPolicy - Licensing + HowToPlay? + TermsOfService + PrivacyPolicy + Licensing

    Created with ❤️ by diff --git a/pages/about.html b/pages/about.html index 19fd105b..3115f2cb 100644 --- a/pages/about.html +++ b/pages/about.html @@ -26,6 +26,10 @@ href="../assets/favicon.ico" type="image/x-icon" /> + @@ -45,135 +49,166 @@ --> -

    -
    - -
    -

    🕹️ About Us 🕹️

    -
    -

    - Dot-Box is a game presented by ChromeGaming where players take turns - drawing lines between dots to create boxes. The player who completes the - most boxes wins. It's a simple yet strategic game enjoyed by people of all - ages. -

    + + + + +
    +
    +

    Dot-Box - The Strategy Game🎮

    +

    + Dot-Box is a game where players take turns drawing lines between dots + to create boxes.
    + The player who completes the most boxes wins ⚔️ +

    + Star us ᯓ★ +
    +
    -
    -

    -
    +
    +
    +

    🕹️ About Dot-Box⚡

    +

    + Dive into the origins, gameplay, and exciting features of Dot-Box🎯. +

    +
    +
    +
    + +

    History and Origin

    -
    -

    History and Origin📓:

    -
    -
      -
    • - Dot and Boxes, also known as Dots and Boxes, is a classic - pencil-and-paper game from the late 19th century. -
      • -
    • - French mathematician Édouard Lucas first described it in the - 1880s. -
      • -
    • - Lucas, known for his work on the Fibonacci sequence and the Tower - of Hanoi puzzle, introduced the game in his book "Récréations - Mathématiques" (Mathematical Recreations), where it quickly - captivated puzzle enthusiasts and gamers. -
      • -
    -
    -
    +
    +
      +
    • + Dot and Boxes is a classic + pencil-and-paper game from the late 19th century. +
      • +
      +
    • + First described by French mathematician + Édouard Lucas in the 1880s. +
      • +
      +
    • + Introduced in + "Récréations Mathématiques" (Mathematical + Recreations). +
      • +
    +
    +
    +
    +
    +
    + +

    Functionalities

    -
    -

    Functionalities🕹️

    -
    -
      -
    • Multiplayer game: Challenge your friends or family!
      • -
    • - Strategic Line Selection: Think ahead to maximize your boxes. -
      • -
    • - Box Completion Bonus: Earn an extra turn by completing a box. -
      • -
    • - Adjustable Board Size: Customize the game for any difficulty. -
      • -
    • Turn Switching: Players take turns to keep things fair.
      • -
    -
    -
    +
    +
      +
    • + Multiplayer game: Challenge friends or + family! +
      • +
      +
    • + Strategic Line Selection: Think ahead to + maximize your boxes. +
      • +
      +
    • + Box Completion Bonus: Earn an extra turn + by completing a box. +
      • +
      +
    • + Adjustable Board Size: Customize for any difficulty. +
      • +
      +
    • + Turn Switching: Players take turns to + keep things fair. +
      • +
      +
      +
    +
    +
    +
    +
    +
    + +

    How to Play

    -
    -

    How to Play🎮

    -
    -
      -
    • - Objective: Capture more boxes than your opponent by drawing lines - between adjacent dots. -
      • -
    • Setup: Choose your grid size and start connecting the dots.
      • -
    • - Rules: Take turns drawing lines. Complete a box to score a point - and get an extra turn. The player with the most boxes wins. -
      • -
    • - Scoring: Each box is worth one point. The game ends when all boxes - are claimed. -
      • -
    +
    +
      +
    • + Objective:Capture more boxes than your + opponent by drawing lines between adjacent dots. +
      • +
      +
    • + Setup: Choose grid size and start + connecting dots. +
      • +
      +
    • + Rules: Take turns drawing lines. Complete + a box to score a point and get an extra turn. +
      • +
      +
    • + Scoring: Each box is worth one point. The + game ends when all boxes are claimed. +
      • +
      +
    +
    +
    +
    +
    - HowToPlay? - TermsOfService - PrivacyPolicy - Licensing + HowToPlay? + TermsOfService + PrivacyPolicy + Licensing

    Created with ❤️ by @@ -196,5 +231,45 @@

    How to Play🎮

    >
    + + + diff --git a/pages/contributors.html b/pages/contributors.html index e0f0f661..c95bbab8 100644 --- a/pages/contributors.html +++ b/pages/contributors.html @@ -1,119 +1,141 @@ - - - - - - - - + + + + + + + + + - Contributors - + Contributors + + + + - - - +
    + +
    + +
    +
    +

    + Our Contributors +

    +
    +
    + + + +
    +
    +
    - + - -

    + prevBtn.addEventListener('click', () => { + if (currentPage > 1) { + currentPage--; + updateContributors(); + } + }); -
    -
    -

    - Our Contributors -

    -
    -
    -
    + nextBtn.addEventListener('click', () => { + if ((currentPage - 1) * perPage < totalContributors.length) { + currentPage++; + updateContributors(); + } + }); -
    -
    - HowToPlay? - TermsOfService - PrivacyPolicy - Licensing -
    -

    - Created with ❤️ by - Chrome Gaming -

    - -
    - - + fetchContributors(); + }); + + diff --git a/pages/game.html b/pages/game.html index 62eac3ad..0557df4b 100644 --- a/pages/game.html +++ b/pages/game.html @@ -1,99 +1,72 @@ - - - - - - - - - - - - - - - - - - - - - - Dots & Boxes Game - - - - - - - -
    -
    -
    - -
    -
    - - - - - - - Back - -
    -
    -
    -
    -

    Select Avatar

    -
    -
    - - + + + + + + + + + + + + + + + + + + + + + + Dots & Boxes Game + + + + + + + +
    +
    +
    +
    -
    - - -
    - -
    -
    - PlayerX's turn +
    + + + + + + + + Back +
    - - -
    -
    -
    -
    +
    + +
    +

    Select Avatar

    +
    +
    + +
    +
    +
    -
    + +
    + + +
    + +
    +
    PlayerX's turn
    +
    + + +
    +
    +
    Settings
    +
    +

    Scoreboard

    - - - + + +
    + +
    + Go Back to Home + Play Again + See Leaderboard
    - - -
    -
    -
    -

    Game Tour

    -

    - Welcome to the Dot-box game presented by Chrome Gaming!

    - Dot-Box is a game where players take turns drawing lines between - dots to create boxes. The player who completes the most boxes wins. - It's a simple yet strategic game enjoyed by people of all ages. - Click the "Next" button to start the tour. -

    -
    - - -
    +
    + + +
    +
    +
    +

    Game Tour

    +

    + Welcome to the Dot-box game presented by Chrome Gaming!

    + Dot-Box is a game where players take turns drawing lines between + dots to create boxes. The player who completes the most boxes wins. + It's a simple yet strategic game enjoyed by people of all ages. + Click the "Next" button to start the tour. +

    +
    + +
    +
    -
    -

    Step 1

    -

    - This is Game Board! This is where the game is displayed, Play here - by connecting the lines. -

    -
    - - - -
    +
    +

    Step 1

    +

    + This is Game Board! This is where the game is displayed, Play here + by connecting the lines. +

    +
    + + +
    +
    -
    -

    Step 2

    -

    - Here's where the player's score is displayed, Keep track of your - score as you play the game -

    -
    - - - -
    +
    +

    Step 2

    +

    + Here's where the player's score is displayed, Keep track of your + score as you play the game +

    +
    + + +
    +
    -
    -

    Step 3

    -

    Here you can see the player's turn indicator.

    -
    - - - -
    +
    +

    Step 3

    +

    Here you can see the player's turn indicator.

    +
    + + +
    +
    -
    -

    Step 4

    -

    - This is the live draggable scoreboard. Hold and move to your desired - place -

    -
    - - - -
    +
    +

    Step 4

    +

    + This is the live draggable scoreboard. Hold and move to your desired + place +

    +
    + + +
    +
    -
    -

    Step 5

    -

    - This is the home button. Click to go back to the homepage. Besides - it there is a 30s timer for each player turn, you have to make a - move before time gets up! -

    -
    - - - -
    +
    +

    Step 5

    +

    + This is the home button. Click to go back to the homepage. Besides + it there is a 30s timer for each player turn, you have to make a + move before time gets up! +

    +
    + + +
    +
    -
    -

    Step 6

    -

    - This is the sound toggle button. Click to mute/unmute the sound. - Besides it there is a reset/restart button. -

    -
    - - - -
    +
    +

    Step 6

    +

    + This is the sound toggle button. Click to mute/unmute the sound. + Besides it there is a reset/restart button. +

    +
    + + +
    +
    -
    -

    Step 7

    -

    Now you are ready to start the game. Have fun!

    -
    - - -
    +
    +

    Step 7

    +

    Now you are ready to start the game. Have fun!

    +
    + +
    - - +
    + + + + \ No newline at end of file diff --git a/pages/howtoplay.html b/pages/howtoplay.html index 5d719ff1..ce491cc8 100644 --- a/pages/howtoplay.html +++ b/pages/howtoplay.html @@ -4,9 +4,28 @@ How to Play - Dot Box + + + + + + + + + + @@ -14,55 +33,61 @@ + +
    -
    - -
    -
    -
    + + + + +

    ▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂

    @@ -124,16 +149,17 @@

    How to Play? ⚔️

    - Here is a demo :- + Here is a demo:

    +

    Tutorial Video

    +

    + Watch this tutorial to learn how to play Dots & Boxes effectively! +

  • Scoring: 🏆
    - Each completed box is worth one point.
    @@ -160,10 +186,11 @@

    them from completing boxes whenever possible.

    • - - +
    + +
    + + + +
    +
    +

    Leaderboard

    +
    + +
    + Home +
    +
    + + + + diff --git a/pages/licensing.html b/pages/licensing.html index edd9ea8d..b1af9da5 100644 --- a/pages/licensing.html +++ b/pages/licensing.html @@ -3,11 +3,13 @@ - Licensing - Chrome Gaming - + + + + @@ -15,20 +17,11 @@ -
    -
    - -
    + +

    Licensing

    diff --git a/pages/privacypolicy.html b/pages/privacypolicy.html index 434c1e14..fb8fc936 100644 --- a/pages/privacypolicy.html +++ b/pages/privacypolicy.html @@ -6,27 +6,21 @@ Privacy Policy - Dot Box - + + + + -
    -
    - -
    + +

    Privacy Policy

    @@ -141,7 +135,9 @@

    Contact Us

    contact us:

    -

    By email: dotbox@gmail.com

    +

    + By email: dotbox@gmail.com +

    diff --git a/pages/termsofservice.html b/pages/termsofservice.html index 38dffc79..a16484e3 100644 --- a/pages/termsofservice.html +++ b/pages/termsofservice.html @@ -6,7 +6,10 @@ Terms Of Service - Dot Box - + + + + @@ -14,20 +17,11 @@ -
    -
    - -
    + +

    Terms Of Services

    @@ -103,7 +97,8 @@

    Changes to These Terms

    Contact Information

    If you have any questions about these Terms and Conditions, please - contact us at dotbox@mail.com. + contact us at: + dotbox@gmail.com

    diff --git a/pages/testimonials.html b/pages/testimonials.html new file mode 100644 index 00000000..8458f91b --- /dev/null +++ b/pages/testimonials.html @@ -0,0 +1,187 @@ + + + + + + Testimonials - Dot-Box + + + + + + +
    +
    +

    What Players Say About Dot-Box?

    +

    Discover what our passionate community of gamers has to say about Dot-Box,
    From casual gamers to competitive strategists, players of all levels are raving about their experiences.

    +
    +
    + +
    +
    + Profile 1 +
    +
    +

    Jess K

    +

    Gamer Enthusiast

    +

    "Dot-Box is an incredibly strategic game. The multiplayer aspect really makes it engaging and fun! I've played so many rounds with my friends, and each time it feels like a new experience. The simplicity of the game belies the complex decisions you need to make, and that's what makes it so rewarding. Every win feels well-earned!" +

    +
    + + + + + +
    +
    +
    + +
    +
    + Profile 2 +
    +
    +

    Ryan L

    +

    Competitive Player

    +

    "I've always been a fan of competitive games, and Dot-Box takes the cake! The fast-paced nature of the game combined with the need to think ahead makes every match an intense battle of wits. The game’s design is elegant and addictive, making it perfect for both short and long gaming sessions. Dot-Box is not just a game—it's a challenge!"

    +
    + + + + + +
    +
    +
    + +
    +
    + Profile 3 +
    +
    +

    David Miller

    +

    Puzzle Lover

    +

    "It's amazing how such a simple concept can provide endless hours of entertainment. I love how each game can turn on a single decision, making it crucial to stay sharp and think several moves ahead. It’s like chess, but faster and more accessible. A must-play for any strategy lover!"

    +
    + + + + + +
    +
    +
    + +
    +
    + Profile 4 +
    +
    +

    Sophie M

    +

    Esports Aspirant

    +

    "I’ve played countless multiplayer games, but few have the perfect blend of strategy and simplicity that Dot-Box offers. The thrill of outsmarting your friends and pulling off a victory from the brink of defeat is unmatched."

    +
    + + + + + +
    +
    +
    + +
    +
    + Profile 5 +
    +
    +

    Nilu Sona

    +

    Game Enthusiast

    +

    "The game’s design is so clever that it constantly keeps you guessing and adapting. Whether you're setting traps for your opponent or trying to outmaneuver their tactics, there’s always a sense of accomplishment when your plan comes together. It’s one of those games that makes you think, 'Just one more round!' over and over again."

    +
    + + + + + +
    +
    +
    + +
    +
    + Profile 6 +
    +
    +

    Jack C

    +

    Board Game Buff

    +

    "As someone who loves exploring new games, Dot-Box has been a fantastic discovery. It's simple on the surface but offers layers of depth the more you play. The game’s pacing is perfect for both quick matches and longer sessions, making it versatile for different moods."

    +
    + + + + + +
    +
    +
    +
    +
    + + + + + + + diff --git a/styles/FAQs.css b/styles/FAQs.css index 58369fe3..3c9d1861 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -1,41 +1,40 @@ /* General Body Styles */ body { - background: linear-gradient( - 135deg, - #f7b42c, - #fc575e - ); /* Gradient background from orange to pink */ + background: transparent; margin: 0; padding: 0; font-family: "WorkSans-Regular", Arial, sans-serif; - display: flex; - justify-content: center; - padding-top: 10px; - overflow: auto !important; +} + +#myVideo { + position: fixed; + right: 0; + bottom: 0; + min-width: 100%; + min-height: 100%; + z-index: -1; } /* FAQ Container Styles */ .faqcontainer { - background-color: white; + background-color: rgb(11, 19, 48); border-radius: 10px; padding: 20px; - max-width: 600px; - width: 90%; - box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5); - margin: 100px auto 20px; - flex: 1; - z-index: 0; + box-shadow: 15px 15px 20px rgb(0, 0, 0, 0.5); + width: 60%; + margin: 6rem auto; } /* Heading Styles */ -h1 { +#faq-head { font-family: "WorkSans-Bold", Arial, sans-serif; display: flex; + justify-content: center; align-items: center; -} - -h1:hover { - text-shadow: #ca2cff !important; + padding: 1rem; + margin-bottom: 1rem; + text-shadow: #3e196e 2px 2px 5px; + background-color: #fff; } /* FAQ Image Styles */ @@ -52,7 +51,7 @@ h1:hover { background: linear-gradient( 135deg, #f7f7f7, - #eaeaea + #bababa ); /* Subtle gradient for questions */ transition: background-color 0.3s, transform 0.3s, text-shadow 0.3s; /* Added text-shadow transition */ border-radius: 8px; @@ -61,58 +60,114 @@ h1:hover { /* Hover Effect */ .question:hover { background: linear-gradient( - 135deg, - #ffbff2, - #d34eff + 15deg, + #cc3f47, + #de6f3d, + #f09f33, + #de6f3d, + #cc3f47 ); /* Bright gradient on hover */ transform: scale(1.05); /* Slight zoom effect */ border-radius: 12px; /* Slight rounding for emphasis */ - text-shadow: 2px 2px 5px rgba(255, 114, 79, 0.844); /* Text shadow effect on hover */ + text-shadow: #fff 3px 3px 5px; /* Text shadow effect on hover */ } /* Summary Styles */ -.question summary { +.drop { cursor: pointer; - padding: 7px; + display: flex; + align-items: center; + padding: 0.5rem 1rem; transition: color 0.3s; outline: none; /* Remove default focus outline */ } -.question summary:hover { +.drop:hover { color: #333; /* Darker text on hover */ } -.question summary img { - float: right; +.drop img { transition: transform 0.3s; } -.question summary:hover img { +.drop:hover img { transform: rotate(90deg); /* Rotate icon on hover */ } /* Answer Styles */ .question p { font-family: "WorkSans-Regular", Arial, sans-serif; - font-size: 1.0625rem; /* 17px */ - color: #555; /* Slightly darker text */ - background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */ + font-size: 1.25rem; + line-height: 1.2; + color: #555; + background: rgba(255, 255, 255, 0.5); + padding: 10px; + border-radius: 5px; + transition: all 2s ease-in; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Light shadow for depth */ +} + +.question:hover p { + background: #ffdfdf; + text-shadow: #0000003e 0px 3px 3px; +} + +.author { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(to right, #00093c, #2d0b00); + color: #fff; + padding: 15px; + position: fixed; + bottom: 0; + z-index: 100; +} + +.fotbar { + display: flex; + gap: -22px; +} + +.fotbar a { + color: white; + text-decoration: none; padding: 10px; border-radius: 5px; - transition: background-color 300ms ease-in-out, color 300ms ease-in-out; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */ + font-size: 18px; + background-color: transparent; } -/* Remove bottom-background video styles */ -.bottom-background { - display: none; +.author p { + color: white; + padding: 10px; + margin-right: 10px; + font-size: 20px; + font-weight: 600; +} + +.social-icons { + display: flex; + gap: 10px; + margin-right: 20px; +} + +.author a { + color: white !important; +} + +.social-icons a { + color: white; + text-decoration: none; + font-size: 20px; } /* Mobile Styles */ @media (max-width: 768px) { .faqcontainer { - width: 95%; - padding: 15px; + width: 80%; + padding: 1rem; } h1 { @@ -137,6 +192,10 @@ h1:hover { .back-to-home img { width: 18px; } + + .author { + position: relative !important; + } } @media (max-width: 480px) { @@ -169,115 +228,10 @@ h1:hover { } } -.attribution { - font-size: 11px; - text-align: center; -} - -.attribution a { - color: hsl(228, 45%, 44%); -} - -html, -body { - height: 100%; - margin: 0; - overflow: auto !important; - /* Allow scrolling */ - height: 105%; -} - -body { - background-color: #e7b537; - display: flex; - flex-direction: column; - font-family: "WorkSans-Regular", Arial, sans-serif; -} - -@media screen and (max-width: 450px) { - .contributor-card { - max-width: 90%; - } - - .navbar { - flex-direction: column; - padding: 5px !important; - } - - .faqcontainer { - background-color: white; - border-radius: 20px; - padding: 20px; - max-width: 600px; - width: 90%; - box-shadow: 10px 10px 15px rgba(101, 99, 99, 0.5); - margin: 100px auto 20px; - /* Increased margin-top to avoid content being hidden under navbar */ - flex: 1; - z-index: 0; - /* Ensure it's below the fixed elements */ - margin-top: 54px; - } - - .author { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(to right, #00093c, #2d0b00); - color: #fff; - padding: 0px; - position: fixed; - bottom: 0; - z-index: 1000; - height: 67px; - flex-shrink: 0; - box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); - /* Added shadow for better visibility */ - } - - .author .fotbar { - display: flex; - gap: -22px; - } - - .author .fotbar a { - color: white; - text-decoration: none; - padding: 10px; - border-radius: 5px; - font-size: 18px; - background-color: transparent; - } - - .author p { - color: white; - padding: 10px; - margin-right: -550px; - font-size: 20px; - font-weight: 600; - } - - .author .social-icons { - display: flex; - gap: 10px; - margin-right: 20px; - } - - .author a { - color: white !important; - } - - .author .social-icons a { - color: white; - text-decoration: none; - font-size: 20px; - } -} - @media screen and (max-width: 1190px) { .author a { font-size: small; + color: white; } } @@ -293,11 +247,7 @@ body { @media screen and (max-width: 550px) { .author { - display: none !important; - } - - .navbar { - display: none !important; + padding: 10px; } .author p { @@ -307,19 +257,10 @@ body { .author .fotbar a { font-size: 12px; + color: white; } .author .social-icons a { font-size: 15px; } - - .faqcontainer { - margin-top: 49px; - } -} - -@media (max-width: 768px) { - .author { - position: relative !important; - } } diff --git a/styles/about.css b/styles/about.css index 42d3bbdd..60637ec4 100644 --- a/styles/about.css +++ b/styles/about.css @@ -1,175 +1,150 @@ -html, -body { - margin: 0; - padding: 0; - height: 100%; - background-color: #e7b537; - scroll-behavior: smooth; -} +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); -body { - display: flex; - flex-direction: column; +body, html { + margin: 0; + padding: 0; + font-family: 'Arial', sans-serif; + background-color: #0a0c27; + color: #fff; + text-align: center; } -main { - flex: 1; - padding: 20px; - display: flex; - align-items: center; - justify-content: center; +/* Hero section styles */ +.header { + padding: 50px 20px; + position: relative; + overflow: hidden; } -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); -html, -body { - margin: 0; - padding: 0; - height: 100%; - background-color: #e7b537; - scroll-behavior: smooth; +.hero { + max-width: 870px; + margin: 0px auto; + } -body { - display: flex; - flex-direction: column; +.main-heading { + font-size: 3rem; + margin-bottom: 20px; + color: rgb(245, 153, 5); + margin-top: 370px; + text-shadow: 1px 1px 2px rgb(255, 98, 0), 0 0 1em rgba(47, 219, 253, 0.618), 0 0 0.2em rgba(47, 219, 253, 0.382); } -.about-header { - font-family: "Anton", sans-serif; - background-color: transparent; - color: #0e0e0e; - padding: 15px; - text-shadow: 2px 2px 10px white; - text-align: center; - font-size: 2.5rem; - transition: background-color 0.3s ease; +.intro-text { + font-size: 1.2rem; + margin-bottom: 20px; } -.about-header:hover { - background-color: #e59253; +.cta-button { + background-color: #007BFF; + color: #fff; + padding: 10px 15px; + border-radius: 15px; + text-decoration: none; + font-size: 1.2rem; + transition: background-color 0.2s ease-in, transform 0.2s ease; } -h1 { - margin: 0; +.cta-button:hover { + background-color: #0764c7; + color: rgb(255, 255, 170); + transform: translateY(2px) !important; } -main { - padding: 20px; - flex: 1; - display: flex; - align-items: center; +/* About section styles */ +.about-section { + background-color: #0a0c27; } -p { - color: #333; - line-height: 1.6; - text-align: justify; - max-width: 750px; - margin: 0 auto; - font-size: 16px; -} - -.functionalities, -.how-to-play { - flex: 1 1 320px; - max-width: 320px; - height: 350px; - margin: 10px; - color: #ffffff; - font-family: "Poppins", sans-serif; - background: linear-gradient(135deg, #5f4c9b, #3540e3); - border-radius: 10px; - padding: 0px 204px; - box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5); - transition: all 0.3s ease; - overflow: hidden; - position: relative; - cursor: pointer; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 352px; -} - -.functionalities h2, -.how-to-play h2 { - font-size: 24px; - margin-bottom: 10px; - font-family: "Poppins", sans-serif; - font-weight: 700; - text-align: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - transition: all 0.3s ease; -} - -.functionalities .content, -.how-to-play .content { - opacity: 0; - transition: opacity 0.3s ease; - font-weight: 500; - position: absolute; - top: 60px; - left: 0; - right: 0; - bottom: 0; - padding: 20px; +.about-content { + max-width: 1400px; + margin: 200px auto; } -.functionalities::after, -.how-to-play::after { - content: "(Hover here to know more)"; - position: absolute; - bottom: 20px; - left: 0; - right: 0; - text-align: center; - opacity: 0.7; - transition: opacity 0.3s ease; + +.section-heading { + font-size: 2.8rem; + margin-bottom: 30px; + text-shadow: 1px 1px 2px rgb(255, 98, 0), 0 0 1em rgba(47, 219, 253, 0.618), 0 0 0.2em rgba(47, 219, 253, 0.382); + } -.functionalities:hover::after, -.how-to-play:hover::after { - opacity: 0; +.section-subtext { + font-size: 1.2rem; + margin-bottom: 40px; + color: #bbb; } -.functionalities:hover h2, -.how-to-play:hover h2 { - top: 10px; - transform: translateX(-50%); +.cards-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; } -.functionalities:hover .content, -.how-to-play:hover .content { - opacity: 1; + +.about-card { + background-color: #101239; + border-radius: 10px; + padding: 20px; + width:25%; + min-width: 160px; + height: 370px; + margin: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + color: #fff; + position: relative; + transition: all 0.3s ease-in-out; + overflow: hidden; } -ul { +ul li { list-style: none; - padding-left: 0; - margin: 0; - margin-right: 29px; - margin-left: 33px; - margin-top: -40px; } -li { - margin-bottom: 8px; - line-height: 1.6; +.about-card:hover { + transform: scale(1.05) translateY(2px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + background-color: #007bff82; + +} + +.about-card:hover .card-title, .about-card:hover .card-icon { + text-shadow: 1px 1px 2px rgba(0, 26, 255, 0.564), 0 0 1em rgba(34, 93, 255, 0.91), 0 0 0.2em rgba(47, 47, 253, 0.63); + +} + +.about-card:hover strong { + text-shadow: rgb(3, 172, 194) 1px 0 10px; } -.functionalities ul, -.how-to-play p { - color: #ffffff; - font-size: 14px; +.card-content { + position: relative; + z-index: 1; } +.card-icon { + font-size: 2rem; + margin-bottom: 10px; + color: #39a2d3; + transition: all 0.3s ease-in; +} + +.card-title { + font-size: 1.6rem; + margin-bottom: 12px; + color: orange; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + transition: all 0.3s ease-in; +} + +.card-description { + font-size: 1.2rem; + color: #ccc; +} + + + .author { width: 100%; display: flex; diff --git a/styles/contributors.css b/styles/contributors.css index b0ed826e..c380189a 100644 --- a/styles/contributors.css +++ b/styles/contributors.css @@ -175,6 +175,26 @@ body { box-shadow: 0 4px 9px rgb(51, 235, 255); } +.pagination-btns { + margin: 50px 0px; + width: 100%; + display: flex; + justify-content: center; + } + + .pagination-btns button.btn { + border-radius: 5px; + outline: none; + margin: 5px 10px; + border: 1px solid rgb(146, 110, 110); + width: 50px; + height: 50px; + } + + .pagination-btns button.btn, .pagination-btns button.btn i.bi { + font-size: 2rem; + } + .text-lg { font-size: 1.125rem; } diff --git a/styles/game.style.css b/styles/game.style.css index 05cd4d2a..72058ac9 100644 --- a/styles/game.style.css +++ b/styles/game.style.css @@ -5,15 +5,12 @@ body { height: 100vh; display: grid; place-items: center; - max-height: 100vh; } .board { background: #fcfcfc; display: grid; width: 60vh; - max-height: 60vh; - margin-top: 154px; } @media screen and (max-width: 720px) { @@ -140,20 +137,6 @@ body { z-index: 10; } -.players { - position: absolute; - z-index: 10; - font-size: 1rem; - top: 0; - left: 0; - width: 100%; - padding: 0.4rem; - display: flex; - justify-content: center; - gap: 1.2rem; - margin-top: 50px; -} - .player .filled-boxes { display: inline-block; text-align: center; @@ -169,27 +152,19 @@ body { .player span { font-size: 0.8rem; } - - .players { - gap: 0.5rem; - } } .player-turn { font-size: 1rem; - position: absolute; - top: 52px; - left: 0; width: 100%; display: flex; justify-content: center; color: rgba(0, 0, 0, 0.864); - padding-top: 10px; } .player-turn .bg { background: #999; - padding: 0.5rem 1rem; + padding: 0.75rem 1.25rem; width: 100%; min-width: 100px; max-width: 200px; @@ -262,9 +237,11 @@ body { .overlay { overflow-y: auto; } + .overlay a { font-size: 20px; } + .overlay .closebtn { font-size: 40px; top: 15px; @@ -288,6 +265,7 @@ body { position: absolute; width: 90%; height: 90%; + margin: 0 auto; background: rgba(231, 181, 55, 0.979); border-radius: 10px; z-index: 999; @@ -324,7 +302,7 @@ body { } .player-input { - width: 40%; + width: 45%; margin-bottom: 1rem; display: grid; grid-template-areas: @@ -339,18 +317,21 @@ body { font-size: 1rem; font-weight: bold; grid-area: head; + padding: 15px; + border-radius: 10px; } .playerNames { font-size: 0.875rem; width: 100%; - padding: 0.5rem 1rem; + padding: 0.7rem 1rem; border: 1px solid #d1d5db; border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); transition: all 0.3s ease-in-out; background-color: #f3f4f6; grid-area: main; + margin-top: 15px; } .playerNames:focus { @@ -660,15 +641,19 @@ body { opacity: 1; } +/* Layout */ + +#layout { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; +} + /* Menu */ #menu { - height: fit-content; - position: absolute; - top: 0; - bottom: 0; - left: 0; - margin: auto 0; padding: 2rem 2.5rem; background: #222; color: #fff; @@ -676,7 +661,6 @@ body { border-bottom-right-radius: 25px; border-top-right-radius: 25px; z-index: 99; - transition: all 1s ease; } .menu-header { @@ -786,21 +770,20 @@ body { display: none; background-color: #222; color: #fff; - font-size: 1.75rem; - padding: 0.75rem; - border-bottom-right-radius: 25px; - border-top-right-radius: 25px; - position: absolute; - top: 45%; - right: -15%; + font-size: 1.25rem; + padding: 0.5rem 0.5rem; + opacity: 0.9; + transition: all 1s ease; } -#setting-btn:hover i { - animation: rotate 2s infinite; +#setting-btn:hover { + transform: scale(1.2); + opacity: 1; } -.menu-open { - transform: translateX(-100%); +#close-menu { + display: none; + font-size: 1.5rem; } /* Timer */ @@ -821,51 +804,54 @@ body { color: #333; } -/* Score board */ .game-wrapper { - position: relative; display: flex; + flex-direction: column; justify-content: center; - align-items: flex-start; - padding: 20px; + align-items: center; + gap: 4rem; + padding: 1.5rem; } .game-container { display: flex; justify-content: center; align-items: center; + flex-direction: column; + gap: 1.75rem; width: 100%; } +/* Score board */ .scoreboard-container { - position: absolute; - right: 5%; - top: 20%; background-color: rgba(255, 255, 255, 0.9); border-radius: 15px; - padding: 20px; + padding: 1.25rem; + margin: 1rem 2rem; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); - width: 275px; + width: 17rem; cursor: move; - visibility: hidden; + z-index: 89; } .scoreboard-container h2 { text-align: center; - margin-bottom: 20px; + margin-bottom: 1.25rem; + font-size: 1.5rem; color: #333; + text-shadow: 2px 1px 5px #0000007b; } .scoreboard { display: flex; flex-direction: column; - gap: 15px; + gap: 1rem; } .score { - font-size: 22px; + font-size: 1.3rem; font-weight: bold; - padding: 15px; + padding: 1rem; border-radius: 10px; text-align: center; display: flex; @@ -873,6 +859,16 @@ body { align-items: center; } +.defeated { + background-color: #9c9c9c !important; + color: #3c3c3c !important; + box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.95); +} + +.defeated img { + filter: grayscale(100%); +} + /* Tour */ #tour-overlay { position: fixed; @@ -984,39 +980,46 @@ body { /* Responsive styles for tablets and mobile devices */ @media screen and (max-width: 768px) { - .players { - margin-top: 1.5rem; + body { + height: 100%; } - .player-turn { - top: 30px; + #layout { + justify-content: space-evenly; } - .tour-step { - width: 80%; - padding: 15px; + #menu { + display: none; + position: absolute; + border-radius: 25px; + height: fit-content; + margin: auto 0; + padding: 1.5rem; } - .circle-container { - display: none; + #setting-btn { + display: block; } - /* Score board */ - .game-wrapper { - margin-top: 7rem; + #close-menu { + display: block; } - .game-container { - margin-top: -156px; + .circle-container { + display: none; } + /* Score board */ .scoreboard-container { - position: static; - z-index: 89; - margin: 2rem; + transform: scale(0.8); } /* Tour */ + .tour-step { + width: 80%; + padding: 15px; + } + .tour-step.step-2 { left: 15%; } @@ -1043,10 +1046,6 @@ body { left: 32%; margin-top: -65px; } - - #setting-btn { - display: block; - } } @media screen and (max-width: 1200px) { @@ -1056,16 +1055,22 @@ body { } @media screen and (max-width: 480px) { - .player-turn { - top: 20px; + #layout { + flex-direction: column; } - #game-wrapper { - margin-top: 5rem; + #menu { + top: 5rem; + } + + .game-wrapper { + gap: 3rem; } .scoreboard-container { - margin-top: 1rem; + position: static; + z-index: 89; + margin: 0; } /* Tour */ @@ -1160,7 +1165,6 @@ body { #menu { padding: 1rem 1.5rem; - top: -30%; } .menu-header { @@ -1193,7 +1197,6 @@ body { #setting-btn { font-size: 1.2rem; padding: 0.6rem; - right: -10%; } /* Timer */ diff --git a/styles/global.css b/styles/global.css index 54c6a46d..e5e068d9 100644 --- a/styles/global.css +++ b/styles/global.css @@ -18,12 +18,22 @@ z-index: 9999; } +#myVideo { + position: fixed; + right: 0; + bottom: 0; + min-width: 100%; + min-height: 100%; + z-index: -1; +} + ::-webkit-scrollbar { - width: 8px; + width: 4px; + background: #333; } + ::-webkit-scrollbar-thumb { - background-color: rgba(231, 181, 55, 0.979); - border-radius: 15px; + background-color: #d3ceba; } @media (max-width: 768px) { diff --git a/styles/howtoplay.css b/styles/howtoplay.css index 35beef9d..c736b144 100644 --- a/styles/howtoplay.css +++ b/styles/howtoplay.css @@ -1,6 +1,5 @@ body { font-family: "Comic Sans MS", "Chalkboard SE", "Arial", sans-serif; - background-color: #f2bf6d; color: #fff; margin: 0; padding: 0; @@ -28,10 +27,11 @@ body { justify-content: center; max-width: 900px; margin: 2rem auto; + margin-top: 6rem; padding: 2rem; - background: rgba(52, 152, 219, 0.8); + background-color: rgb(66, 61, 142); border-radius: 20px; - box-shadow: 0 0 30px rgba(241, 196, 15, 0.5); + box-shadow: 5px 5px 30px #000; text-align: left; line-height: 1.6; } @@ -126,43 +126,6 @@ body { } } -.home { - font-family: "Comic Sans MS", "Chalkboard SE", "Arial", sans-serif; - display: inline-block; - cursor: pointer; - margin-top: 2rem; - padding: 12px 5px; - background: #f16b4a; - color: #fff; - text-align: center; - border-radius: 50px; - text-decoration: none; - font-weight: bold; - transition: all 0.3s ease; - text-transform: uppercase; -} - -.home:hover { - background-color: #e74c3c; -} - -.home span { - font-size: 1.5rem; -} - -.tutorial-video { - display: flex; - justify-content: center; - align-items: center; - margin: 2rem 0; - border-radius: 10px; -} - -.tutorial-video video { - width: 80%; - border-radius: 10px; -} - .nav-links { letter-spacing: 2px; display: flex; @@ -194,3 +157,37 @@ button a { font-weight: bold; text-decoration: none; } + +.tutorial-video { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: -1px 5px 15px rgb(0, 13, 255); + background: #33333300; + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */ + margin: 20px 0; +} + +.tutorial-video video { + width: 100%; + max-width: 800px; + border-radius: 15px; + /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */ +} + +.tut-head { + color: #ffffff; + margin-bottom: 15px; + text-shadow: 1px 1px 2px rgb(255, 217, 0), 0 0 1em blue, 0 0 0.2em blue; + text-align: center; +} + +.video-caption { + margin-top: 10px; + font-size: 14px; + color: #ffffff; + text-align: center; + text-shadow: 1px 1px 2px rgb(208, 178, 11), 0 0 1em rgb(238, 255, 0), + 0 0 0.2em rgb(255, 204, 0); +} diff --git a/styles/index.style.css b/styles/index.style.css index 7ea7e0b1..14bcc368 100644 --- a/styles/index.style.css +++ b/styles/index.style.css @@ -111,7 +111,7 @@ input:out-of-range { border: 5px solid red; } -input:out-of-range + .error::after { +input:out-of-range+.error::after { content: "Please enter value between 5 and 30"; font-size: 12px; font-style: italic; @@ -119,7 +119,7 @@ input:out-of-range + .error::after { color: hsl(0, 100%, 40%); } -input:out-of-range + .player::after { +input:out-of-range+.player::after { content: "Please enter value between 2 and 6"; font-size: 12px; font-style: italic; @@ -255,7 +255,7 @@ input:out-of-range + .player::after { opacity: 1; } -.difficulty:hover > :not(.d-type:hover) { +.difficulty:hover> :not(.d-type:hover) { transition: 300ms; filter: blur(1px); transform: scale(0.95, 0.95); @@ -298,82 +298,90 @@ input:out-of-range + .player::after { background-color: grey; } -p,h3,h2{ +p, +h3, +h2 { font-family: 'Press Start 2P', cursive !important; } /* Modal styles */ .modal { -display: none; -position: fixed; -z-index: 1000; -left: 0; -top: 0; -width: 100%; -height: 150%; -overflow: auto; -background-color: rgba(0, 0, 0, 0.4); -backdrop-filter: blur(5px); + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 150%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); + backdrop-filter: blur(5px); } .modal-content { -background-color: white; -margin: 15% auto; -padding: 20px; -border-radius: 10px; -width: 50%; -max-width: 650px; -box-shadow: 0 5px 15px rgba(0,0,0,0.3); -animation: fadeIn 0.5s; + background-color: white; + margin: 15% auto; + padding: 20px; + border-radius: 10px; + width: 50%; + max-width: 650px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + animation: fadeIn 0.5s; } .close { -color: #aaa; -float: right; -font-size: 28px; -font-weight: bold; + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; } .close:hover, .close:focus { -color: black; -text-decoration: none; -cursor: pointer; + color: black; + text-decoration: none; + cursor: pointer; } form { -display: flex; -flex-direction: column; -gap: 15px; + display: flex; + flex-direction: column; + gap: 15px; } .form-group { -display: flex; -flex-direction: column; + display: flex; + flex-direction: column; } .form-group label { -margin-bottom: 5px; -font-weight: bold; -color: white; -text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685); + margin-bottom: 5px; + font-weight: bold; + color: white; + text-shadow: 1px 1px 5px rgba(255, 0, 0, 0.685); } + .form-group-1 { -display: flex; + display: flex; } .submitbtn { -display: flex; -justify-content: space-between; + display: flex; + justify-content: space-between; } @keyframes fadeIn { -from { opacity: 0; } -to { opacity: 1; } + from { + opacity: 0; + } + + to { + opacity: 1; + } } @@ -406,7 +414,7 @@ to { opacity: 1; } animation: formAppear 0.5s ease-out; } -.right-background{ +.right-background { font-family: 'Press Start 2P', cursive; } @@ -414,8 +422,9 @@ to { opacity: 1; } from { opacity: 0; transform: scale(0.8); - + } + to { opacity: 1; transform: scale(1); @@ -434,9 +443,9 @@ to { opacity: 1; } font-size: 27px; color: #fffefe; margin: 0; - font-family:Tahoma, Geneva, Verdana, sans-serif; + font-family: Tahoma, Geneva, Verdana, sans-serif; text-align: center; - text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87),2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81); + text-shadow: 2px 2px 2px rgba(0, 20, 123, 0.87), 2px 2px 4px rgba(157, 0, 255, 0.81), 2px 6px 7px rgba(248, 112, 255, 0.81); } .close-button { @@ -445,8 +454,8 @@ to { opacity: 1; } cursor: pointer; transition: transform 0.3s ease; position: relative; - bottom:16px; - left:6px + bottom: 16px; + left: 6px } .close-button:hover { @@ -458,9 +467,9 @@ to { opacity: 1; } /* border-radius: 15px; */ padding: 15px; /* margin-bottom: 0px; */ - max-width:400px; + max-width: 400px; width: 100%; - + /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */ } @@ -495,19 +504,19 @@ to { opacity: 1; } width: 80%; } -#star-2:checked ~ .content .emojis .slideImg { +#star-2:checked~.content .emojis .slideImg { margin-top: -135px; } -#star-3:checked ~ .content .emojis .slideImg { +#star-3:checked~.content .emojis .slideImg { margin-top: -270px; } -#star-4:checked ~ .content .emojis .slideImg { +#star-4:checked~.content .emojis .slideImg { margin-top: -405px; } -#star-5:checked ~ .content .emojis .slideImg { +#star-5:checked~.content .emojis .slideImg { margin-top: -540px; } @@ -528,36 +537,36 @@ to { opacity: 1; } transform: scale(1.2) rotate(15deg); } -#star-1:hover ~ .content .stars .star-1, -#star-1:checked ~ .content .stars .star-1, -#star-2:hover ~ .content .stars .star-1, -#star-2:hover ~ .content .stars .star-2, -#star-2:checked ~ .content .stars .star-1, -#star-2:checked ~ .content .stars .star-2, -#star-3:hover ~ .content .stars .star-1, -#star-3:hover ~ .content .stars .star-2, -#star-3:hover ~ .content .stars .star-3, -#star-3:checked ~ .content .stars .star-1, -#star-3:checked ~ .content .stars .star-2, -#star-3:checked ~ .content .stars .star-3, -#star-4:hover ~ .content .stars .star-1, -#star-4:hover ~ .content .stars .star-2, -#star-4:hover ~ .content .stars .star-3, -#star-4:hover ~ .content .stars .star-4, -#star-4:checked ~ .content .stars .star-1, -#star-4:checked ~ .content .stars .star-2, -#star-4:checked ~ .content .stars .star-3, -#star-4:checked ~ .content .stars .star-4, -#star-5:hover ~ .content .stars .star-1, -#star-5:hover ~ .content .stars .star-2, -#star-5:hover ~ .content .stars .star-3, -#star-5:hover ~ .content .stars .star-4, -#star-5:hover ~ .content .stars .star-5, -#star-5:checked ~ .content .stars .star-1, -#star-5:checked ~ .content .stars .star-2, -#star-5:checked ~ .content .stars .star-3, -#star-5:checked ~ .content .stars .star-4, -#star-5:checked ~ .content .stars .star-5 { +#star-1:hover~.content .stars .star-1, +#star-1:checked~.content .stars .star-1, +#star-2:hover~.content .stars .star-1, +#star-2:hover~.content .stars .star-2, +#star-2:checked~.content .stars .star-1, +#star-2:checked~.content .stars .star-2, +#star-3:hover~.content .stars .star-1, +#star-3:hover~.content .stars .star-2, +#star-3:hover~.content .stars .star-3, +#star-3:checked~.content .stars .star-1, +#star-3:checked~.content .stars .star-2, +#star-3:checked~.content .stars .star-3, +#star-4:hover~.content .stars .star-1, +#star-4:hover~.content .stars .star-2, +#star-4:hover~.content .stars .star-3, +#star-4:hover~.content .stars .star-4, +#star-4:checked~.content .stars .star-1, +#star-4:checked~.content .stars .star-2, +#star-4:checked~.content .stars .star-3, +#star-4:checked~.content .stars .star-4, +#star-5:hover~.content .stars .star-1, +#star-5:hover~.content .stars .star-2, +#star-5:hover~.content .stars .star-3, +#star-5:hover~.content .stars .star-4, +#star-5:hover~.content .stars .star-5, +#star-5:checked~.content .stars .star-1, +#star-5:checked~.content .stars .star-2, +#star-5:checked~.content .stars .star-3, +#star-5:checked~.content .stars .star-4, +#star-5:checked~.content .stars .star-5 { color: gold; text-shadow: 0 0 5px #ff8800; animation: starPulse 0.5s infinite alternate; @@ -567,6 +576,7 @@ to { opacity: 1; } from { transform: scale(1); } + to { transform: scale(1.1); } @@ -579,6 +589,7 @@ to { opacity: 1; } box-sizing: border-box; } + body { font-family: Arial, sans-serif; } @@ -641,6 +652,13 @@ footer { flex-direction: column; gap: 10px; } + +.footer span { + font-size: 18px; + font-weight: 600; + color: #eeeeee; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + text-shadow: 1px 1px 2px rgb(48, 158, 209), 0 0 1em rgb(7, 0, 109), 0 0 0.4em rgb(7, 0, 109); } input[type="radio"] { @@ -660,6 +678,7 @@ input[type="email"] { font-size: 14px; transition: all 0.3s ease; } + textarea { background-color: #fff; border: 2px solid #0168ce; @@ -678,7 +697,8 @@ input[type="email"]:focus { border-color: #00438e; outline: none; } -.buttons { + +.buttons { /* background: linear-gradient(45deg, #4ecdc4, #45b7aa); */ background: linear-gradient(45deg, #cd4e4e, #fe165f); color: #fff; @@ -690,7 +710,7 @@ input[type="email"]:focus { font-size: 16px; font-weight: bold; transition: all 0.3s ease; - + } .buttons:hover { @@ -741,43 +761,43 @@ input[type="email"]:focus { content: "0 out of 5"; } -#star-1:checked ~ .footer .text::before { +#star-1:checked~.footer .text::before { content: "I just hate it 😣"; } -#star-1:checked ~ .footer .numb::before { +#star-1:checked~.footer .numb::before { content: "1 out of 5"; } -#star-2:checked ~ .footer .text::before { +#star-2:checked~.footer .text::before { content: "I don't like it 😓"; } -#star-2:checked ~ .footer .numb::before { +#star-2:checked~.footer .numb::before { content: "2 out of 5"; } -#star-3:checked ~ .footer .text::before { +#star-3:checked~.footer .text::before { content: "This is awesome 😄"; } -#star-3:checked ~ .footer .numb::before { +#star-3:checked~.footer .numb::before { content: "3 out of 5"; } -#star-4:checked ~ .footer .text::before { +#star-4:checked~.footer .text::before { content: "I just like it 😃"; } -#star-4:checked ~ .footer .numb::before { +#star-4:checked~.footer .numb::before { content: "4 out of 5"; } -#star-5:checked ~ .footer .text::before { +#star-5:checked~.footer .text::before { content: "I just love it ❤️"; } -#star-5:checked ~ .footer .numb::before { +#star-5:checked~.footer .numb::before { content: "5 out of 5"; } @@ -791,7 +811,18 @@ input[type="email"]:focus { @media (max-width: 480px) { .form-content { width: 90%; - max-width: 350px; + max-width: 300px; + max-height: 600px; + } + + .emojis li img { + width: 60%; + height: 60%; + margin-left: 20%; + } + + .stars { + display: flex; } .sub h5 { @@ -811,6 +842,7 @@ input[type="email"]:focus { max-width: 100vw !important; overflow-x: hidden !important; } + .settings { max-width: 100vw !important; } @@ -831,9 +863,20 @@ input[type="email"]:focus { margin-right: 0px !important; } + .footer .text, + .footer .numb { + display: flex; + margin-right: 15px; + font-size: 15px !important; + } + + .form-group textarea { + resize: none; + } + .heading { width: max-content; - font-size: 1.2rem; + font-size: 1.2rem; } button.d-type { @@ -845,7 +888,8 @@ input[type="email"]:focus { width: 100% !important; flex-wrap: wrap !important; } - .button-container button{ + + .button-container button { width: 100% !important; } @@ -853,7 +897,8 @@ input[type="email"]:focus { margin-bottom: 300px !important; } - .author, .author .fotbar { + .author, + .author .fotbar { max-width: 100vw !important; flex-wrap: wrap !important; } @@ -900,19 +945,27 @@ input[type="email"]:focus { gap: 30px; top: 25vh; } + body { overflow: visible !important; } + .settings .form { padding: 1rem 6rem; margin: 4px 13rem; left: 15%; position: relative; } + .settings { top: -33px; } } + #copyright { color: white; } + +.disabled { + opacity: 0.75; +} \ No newline at end of file diff --git a/styles/leaderboard.css b/styles/leaderboard.css new file mode 100644 index 00000000..b4ce3274 --- /dev/null +++ b/styles/leaderboard.css @@ -0,0 +1,137 @@ +body { + font-family: monospace; + margin: 0; + padding: 0; +} + +.container { + width: 50%; + margin: 0.5rem auto; +} + +#leaderboard { + height: 95vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border: 8px solid #3d0c02; + border-radius: 50px; + padding: 0 0.5rem; + background: #733635; +} + +#leaderboard h1 { + font-size: 2rem; + color: #fff; + background-color: #ce2029; + padding: 1rem 1.5rem 0.25rem 1.5rem; + margin: 0; + border-radius: 25px; + border-top-right-radius: 100%; + border-top-left-radius: 100%; + position: relative; + top: 0.5rem; +} + +#leaderboard h1:hover { + background-color: #ff0000; +} + +#ranking { + background-color: #905d5d; + width: 95%; + height: fit-content; + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + padding: 1.25rem 1rem; + border-radius: 50px; + overflow-x: auto; +} + +.entry { + width: 95%; + font-size: 1.5rem; + display: grid; + grid-template-columns: 3rem 2fr 0.5fr; + align-items: center; + gap: 1rem; + padding: 0.25rem 1rem; + border-radius: 25px; + color: #fff; + background-color: #c9a394; + box-shadow: #824950 3px 3px 0px 2px; +} + +.rank { + padding: 0.5rem; + border-radius: 5px; +} + +.name { + display: flex; + align-items: center; + gap: 1.5rem; +} + +.avatar { + width: 50px; + height: 50px; + border-radius: 50%; +} + +#gold { + background-color: #e6a817; + box-shadow: #c19a6b 3px 3px 0px 2px; +} + +#silver { + background-color: #c0c0c0; + box-shadow: #848482 3px 3px 0px 2px; +} + +#bronze { + background-color: #cd7f32; + box-shadow: #7b3f00 3px 3px 0px 2px; +} + +#home-btn { + text-decoration: none; + font-size: 1.6rem; + color: #fff; + background-color: #ce2029; + padding: 0.25rem 2rem 0.5rem 2rem; + margin: 0; + position: relative; + top: -0.5rem; + border-radius: 25px; + border-bottom-left-radius: 100%; + border-bottom-right-radius: 100%; +} + +#home-btn:hover { + background-color: #ff0000; +} + +#home-btn::before { + content: "🏠"; + margin-right: 0.5rem; +} + +@media screen and (max-width: 768px) { + .container { + width: 85%; + } +} + +@media screen and (max-width: 425px) { + .container { + width: 95%; + } +} + +::-webkit-scrollbar { + display: none; +} diff --git a/styles/licensing.css b/styles/licensing.css deleted file mode 100644 index c3fd4639..00000000 --- a/styles/licensing.css +++ /dev/null @@ -1,135 +0,0 @@ -body { - font-family: "Press Start 2P", cursive; - background-color: #ffd700; - margin: 0; - padding: 0; - color: #333; - overflow-x: hidden; -} - -.video-container { - width: 100%; - height: auto; - overflow: hidden; - text-align: center; -} - -.video { - width: 100%; - height: auto; -} - -@media (max-width: 768px) { - .title { - font-size: 1.5em; - } - - .section-title { - font-size: 1.2em; - } - - .section-content { - font-size: 0.9em; - } - - .back-button { - font-size: 14px; - padding: 5px 14px; - } - - .container { - padding: 11px; - max-width: 100vw; - } -} - -.container { - max-width: 80%; - margin: 50px auto; - padding: 20px; - background: linear-gradient(45deg, #ffc400, #ff8c00); - border-radius: 15px; - box-shadow: 0 0 20px #ff6600; - text-align: left; - line-height: 1.6; -} - -.header { - text-align: center; - margin-bottom: 30px; -} - -.title { - color: #d9ff00; - font-size: 48px; - text-shadow: 3px 3px #ffe066; - animation: glow 2s ease-in-out infinite alternate; -} - -@keyframes glow { - from { - text-shadow: 0 0 5px #ff6600, 0 0 10px #ff6600, 0 0 15px #ff6600; - } - to { - text-shadow: 0 0 10px #ff6600, 0 0 20px #ff6600, 0 0 30px #ff6600; - } -} - -.main-content { - text-align: left; -} - -.section { - margin-bottom: 30px; - padding: 20px; - background: rgba(255, 255, 255, 0.3); - border-radius: 10px; - transition: transform 0.3s ease; -} - -.section:hover { - transform: scale(1.03); -} - -.section-title { - color: #ff4500; - font-size: 24px; - margin-bottom: 15px; - text-transform: uppercase; -} - -.section-content, -.list-item { - margin-bottom: 15px; - font-size: 14px; - color: #4d2600; -} - -pre { - background-color: #ffe066; - color: #4d2600; - padding: 15px; - border-radius: 8px; - overflow-x: auto; - font-family: "Courier New", monospace; -} - -@media (max-width: 767px) { - .container { - max-width: 95%; - padding: 15px; - } - - .title { - font-size: 36px; - } - - .section-title { - font-size: 20px; - } - - .back-btn { - padding: 10px 20px; - font-size: 14px; - } -} diff --git a/styles/termsofservice.css b/styles/pages.footer.css similarity index 76% rename from styles/termsofservice.css rename to styles/pages.footer.css index b977d162..d892ff41 100644 --- a/styles/termsofservice.css +++ b/styles/pages.footer.css @@ -2,7 +2,7 @@ body { font-family: "Comic Sans MS", "Chalkboard SE", "Arial", sans-serif; line-height: 1.6; color: #fff; - background: linear-gradient(135deg, #f2bf6d 0%, #eb9e18 50%, #f16b4a 100%); + background: transparent; margin: 0; padding: 0; overflow-x: hidden; @@ -18,9 +18,9 @@ body { max-width: 900px; margin: 2rem auto; padding: 2rem; - background-color: rgba(52, 152, 219, 0.8); + background-color: rgb(66, 61, 142); border-radius: 20px; - box-shadow: 0 0 30px rgba(241, 196, 15, 0.5); + box-shadow: 5px 5px 30px #000; } .title { @@ -71,28 +71,6 @@ body { top: 0.2rem; } -.video-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; - overflow: hidden; -} - -.video { - min-width: 100%; - min-height: 100%; - width: auto; - height: auto; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - opacity: 0.3; -} - @media (max-width: 768px) { .container { margin: 1rem; diff --git a/styles/testimonials.css b/styles/testimonials.css new file mode 100644 index 00000000..7331f3f7 --- /dev/null +++ b/styles/testimonials.css @@ -0,0 +1,196 @@ +body { + background-color: #1c003c; + font-family: 'Arial', sans-serif; + color: white; + margin: 0; + padding: 0; + overflow-x: hidden; +} + +.navbarr { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: rgb(28, 0, 60) !important; + position: fixed; + top: 0px; + left: 0px; + width: 100%; + z-index: 300; +} +.mobile-menu__trigger { + cursor: pointer; + content: ""; + position: absolute; + z-index: 3; + width: 3rem; + height: 3rem; + border-radius: 50%; + top: 0.5rem !important; + left: -5rem; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.testimonials-container { + padding: 60px 20px; + max-width: 1200px; + margin: auto; +} + +.testimonial-header { + text-align: center; + margin-bottom: 60px; + margin-top: 60px; +} + +.testimonial-header h1 { + font-size: 38px; + color: #f0f0f0; + margin-bottom: 20px; + /* text-shadow: 2px 2px 5px #6200ea; */ + text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue; +} + +.testimonial-header p { + font-size: 18px; + color: #fb9c28; + /* text-shadow: 1px 1px 3px #333; */ + text-shadow: 1px 1px 2px rgb(84, 0, 107), 0 0 1em #4ff0ff, 0 0 0.2em #4ff0ff; +} + +.testimonials { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 70px; + opacity: 0; + transform: translateY(50px); + transition: opacity 0.5s ease, transform 0.5s ease; + position: relative; +} + +.testimonial-card { + background-color: #380d6f; + padding: 20px; + border-radius: 10px; + width: calc(38% - 30px); + box-shadow: 0 10px 20px rgba(17, 17, 161, 0.4); + position: relative; + text-align: center; + transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; + animation: float 5s ease-in-out infinite; +} + +.testimonial-card:hover { + transform: scale(1.1); + box-shadow: 0 10px 40px rgba(1, 6, 136, 0.853); + background-color: #460c92d8; + +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50%{ + transform: translateY(-10px); + } +} + +.profile-img { + width: 100px; + height: 100px; + border-radius: 50%; + /* margin: 0 auto 20px auto; */ + margin: auto; + overflow: hidden; + border: 3px solid #6200ea; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + transition: box-shadow 0.3s ease, border 0.4s ease-in-out; +} + +.profile-img img { + width: 100%; + height: 100%; + object-fit: cover; +} +.testimonial-card:hover .profile-img { + box-shadow: 0 4px 15px rgba(25, 255, 224, 0.497); + border: 3px solid #eaea00; + +} + +.testimonial-content { + padding: 10px; +} + +.testimonial-name { + font-size: 20px; + font-weight: bold; + color: #f0f0f0; + margin-bottom: 5px; + text-shadow: 2px 2px 5px #000; + transition: text-shadow 0.3s ease-in; +} +.testimonial-card:hover .testimonial-name { + text-shadow: rgb(0, 225, 255) 1px 0 10px; + +} + +.testimonial-role { + font-size: 16px; + /* color: #ddd; */ + color: #ffbb00; + margin-bottom: 15px; + text-shadow: 1px 1px 3px #333; +} + + + +.testimonial-text { + font-size: 14px; + color: #a5e8ff; + margin-bottom: 20px; + text-shadow: 1px 1px 3px #000; +} + + + + +.rating { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.rating i { + color: #ffbf00; + font-size: 18px; + margin: 0 2px; + text-shadow: 1px 1px 3px #000; + transition: text-shadow 0.3s ease-in; +} + +.testimonial-card:hover .rating i { + /* text-shadow: 0px 1px 3px #1403ff; */ + text-shadow: #FC0 1px 0 10px; +} + + + + +@media (max-width: 768px) { + .testimonial-card { + width: calc(50% - 30px); + } +} + +@media (max-width: 480px) { + .testimonial-card { + width: calc(100% - 20px); + } +} \ No newline at end of file