Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DRY - Don't Repeat yourself implemented #679

Merged
merged 6 commits into from
Aug 3, 2024
Merged

DRY - Don't Repeat yourself implemented #679

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9799ac9
Added global js
hars-21 Aug 2, 2024
818f64d
Removing Loader, Cursor
hars-21 Aug 3, 2024
0080f4e
Fixing Loader and cursor
hars-21 Aug 3, 2024
f6a5d5d
scroll to top js added
hars-21 Aug 3, 2024
a44c4b4
Added global.css
hars-21 Aug 3, 2024
70e2961
Removes redundant css
hars-21 Aug 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
267 changes: 107 additions & 160 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles/mainstyle.css" />
<link rel="stylesheet" href="./styles/default.style.css" />
<link rel="stylesheet" href="/styles/global.css" />
<link rel="stylesheet" href="./styles/index.style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<!-- <script defer src="./js/edge.js"></script> -->
<!-- <script defer src="./js/box.js"></script> -->
<!-- <script defer src="./js/board.js"></script> -->
<!-- <script defer src="./js/game.js"></script> -->
<script defer src="./js/validation.js"></script>
<!-- JavaScript files -->
<script defer src="./js/index.js"></script>
Expand All @@ -29,9 +26,7 @@
</head>

<body>
<div id="loader">
<div class="spinner"></div>
</div>
<script src="/js/global.js"></script>

<audio id="background-music" autoplay loop>
<source src="./assets/sounds/bgMusic.mp3" type="audio/mpeg" />
Expand All @@ -58,75 +53,108 @@
</nav>
<button class="sticky-button" onclick="openForm()">Feedback</button>
<div class="feed-bg">
<div id="formContainer" class="form-container">
<div class="form-content">
<div class="sub">
<h5>We'd Love Your Feedback!</h5>
<span class="close-button" onclick="closeForm()">&times;</span>
</div>
<div class="wrapper">
<input type="radio" name="rate" id="star-1" />
<input type="radio" name="rate" id="star-2" />
<input type="radio" name="rate" id="star-3" />
<input type="radio" name="rate" id="star-4" />
<input type="radio" name="rate" id="star-5" />
<div class="content">
<div class="outer">
<div class="emojis">
<li class="slideImg">
<img src="./assets/images/emojis/emoji-1-bg.png" alt="emoji" />
</li>
<li>
<img src="./assets/images/emojis/emoji-2-bg.png" alt="emoji" />
</li>
<li>
<img src="./assets/images/emojis/emoji-3.png" alt="emoji" />
</li>
<li>
<img src="./assets/images/emojis/emoji-4-bg.png" alt="emoji" />
</li>
<li>
<img src="./assets/images/emojis/emoji-5-bg.png" alt="emoji" />
</li>
<div id="formContainer" class="form-container">
<div class="form-content">
<div class="sub">
<h5>We'd Love Your Feedback!</h5>
<span class="close-button" onclick="closeForm()">&times;</span>
</div>
<div class="wrapper">
<input type="radio" name="rate" id="star-1" />
<input type="radio" name="rate" id="star-2" />
<input type="radio" name="rate" id="star-3" />
<input type="radio" name="rate" id="star-4" />
<input type="radio" name="rate" id="star-5" />
<div class="content">
<div class="outer">
<div class="emojis">
<li class="slideImg">
<img
src="./assets/images/emojis/emoji-1-bg.png"
alt="emoji"
/>
</li>
<li>
<img
src="./assets/images/emojis/emoji-2-bg.png"
alt="emoji"
/>
</li>
<li>
<img
src="./assets/images/emojis/emoji-3.png"
alt="emoji"
/>
</li>
<li>
<img
src="./assets/images/emojis/emoji-4-bg.png"
alt="emoji"
/>
</li>
<li>
<img
src="./assets/images/emojis/emoji-5-bg.png"
alt="emoji"
/>
</li>
</div>
</div>
<div class="stars">
<label for="star-1" class="star-1 fas fa-star"></label>
<label for="star-2" class="star-2 fas fa-star"></label>
<label for="star-3" class="star-3 fas fa-star"></label>
<label for="star-4" class="star-4 fas fa-star"></label>
<label for="star-5" class="star-5 fas fa-star"></label>
</div>
</div>
<div class="stars">
<label for="star-1" class="star-1 fas fa-star"></label>
<label for="star-2" class="star-2 fas fa-star"></label>
<label for="star-3" class="star-3 fas fa-star"></label>
<label for="star-4" class="star-4 fas fa-star"></label>
<label for="star-5" class="star-5 fas fa-star"></label>
<div class="footer">
<span class="text"></span>
<span class="numb"></span>
</div>
</div>
<div class="footer">
<span class="text"></span>
<span class="numb"></span>
</div>
</div>

<form id="feedbackForm">
<div class="form-group-1">
<div class="form-group">
<label for="firstName">Name</label>
<input type="text" required id="firstName" name="firstName" placeholder="Enter Name">
</div>
<div class="form-group ">
<label for="email">Email</label>
<input type="email" required id="email" name="email" placeholder="Enter Email">
</div>
<form id="feedbackForm">
<div class="form-group-1">
<div class="form-group">
<label for="firstName">Name</label>
<input
type="text"
required
id="firstName"
name="firstName"
placeholder="Enter Name"
/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
required
id="email"
name="email"
placeholder="Enter Email"
/>
</div>
</div>
<div class="form-group">
<label for="feedback">Describe your feedback</label>
<textarea
id="feedback"
required
name="feedback"
rows="4"
placeholder="Tell us how we can improve ..."
></textarea>
</div>
<div class="submitbtn">
<input type="submit" value="Submit" class="buttons" />
<input type="reset" value="Reset" class="buttons" />
</div>
</form>
</div>
<div class="form-group">
<label for="feedback">Describe your feedback</label>
<textarea id="feedback" required name="feedback" rows="4" placeholder="Tell us how we can improve ..."></textarea>
</div>
<div class="submitbtn">
<input type="submit" value="Submit" class="buttons">
<input type="reset" value="Reset" class="buttons">
</div>
</form>
</div>
</div>
</div>
<div id="thankYouPopup" class="popup hidden">
<div class="popup-content">
<span class="close-button" onclick="closeThankYouPopup()"
Expand Down Expand Up @@ -201,21 +229,27 @@ <h3>Thank You!</h3>
<div class="form">
<!-- <h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1> -->
<h1 class="heading">▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂</h1>
<h3 class="instructions-heading" style="text-decoration: underline;">Instructions</h3>
<h3 class="instructions-heading" style="text-decoration: underline">
Instructions
</h3>
<p class="instructions">
1. 🧩 Select the number of rows, columns, and players. <br />
2. 🏆 The player who has the maximum number of boxes on the board is the winner. <br />
3. 🔄 Players will switch after every turn. But the player who fills the last box will get one extra chance consecutively. 🎉 <br />
2. 🏆 The player who has the maximum number of boxes on the board is
the winner. <br />
3. 🔄 Players will switch after every turn. But the player who fills
the last box will get one extra chance consecutively. 🎉 <br />
</p>

<a href="./pages/howtoplay.html" class="button"
>Read Detailed Instructions</a
>
</div>
<div class="form">
<div class="right-background">
<div class="form-item">
<label for="theme-select" style="text-decoration: underline;">Select Theme:</label>
<label for="theme-select" style="text-decoration: underline"
>Select Theme:</label
>
<select id="theme-select">
<option value="1">Default</option>
<option value="2">Theme 1</option>
Expand Down Expand Up @@ -337,98 +371,11 @@ <h3 class="instructions-heading" style="text-decoration: underline;">Instruction
});
</script>

<div class="circle-container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
coords.x = e.pageX;
coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = `${x - 12}px`;
circle.style.top = `${y - 12}px`;
circle.style.transform = `scale(${
(circles.length - index) / circles.length
})`;

const nextCircle = circles[index + 1] || circles[0];
circle.x = x;
circle.y = y;

x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
});
</script>
<script
src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js"
async
></script>
</body>

<script src="https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js"></script>

<!-- Loader.js -->
<script>
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
const loader = document.getElementById("loader");
if (loader) {
loader.style.display = "none";
} else {
console.error("Element with ID 'loader' not found.");
}
}, 500);
});

</script>
</html>
65 changes: 65 additions & 0 deletions js/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
document.addEventListener("DOMContentLoaded", function () {
// Render Loader
const loader = document.createElement("div");
loader.id = "loader";
loader.innerHTML = `<div class="spinner"></div>`;
document.body.appendChild(loader);

// Loader.js-->
setTimeout(() => {
const loader = document.getElementById("loader");
if (loader) {
loader.style.display = "none";
} else {
console.error("Element with ID 'loader' not found.");
}
}, 500);

//Render Cursor effect
const circleContainer = document.createElement("div");
circleContainer.className = "circle-container";
for (let i = 0; i < 30; i++) {
let circle = document.createElement("div");
circle.className = "circle";
circleContainer.appendChild(circle);
}
document.body.appendChild(circleContainer);

// Cursor.js -->
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle) {
circle.x = 0;
circle.y = 0;
});

window.addEventListener("mousemove", function (e) {
coords.x = e.pageX;
coords.y = e.pageY - window.scrollY;
});

function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
circle.style.left = `${x - 12}px`;
circle.style.top = `${y - 12}px`;
circle.style.transform = `scale(${
(circles.length - index) / circles.length
})`;

const nextCircle = circles[index + 1] || circles[0];
circle.x = x;
circle.y = y;

x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
});
Loading
Loading