Skip to content

Commit

Permalink
Merge branch 'main' into donate-dark-mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@saumyayadav25
saumyayadav25 authored Oct 26, 2024
2 parents f6796a4 + 551263a commit 6ec9967
Show file tree
Hide file tree
Showing 8 changed files with 822 additions and 401 deletions.
Empty file removed SwapReads/assets/images/ctc2.png
View file
Empty file.
19 changes: 13 additions & 6 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1450,16 +1450,18 @@ body.dark-mode .chapter-card:hover {
flex-wrap: wrap;
gap: 20px;
justify-content: space-around;
margin-left: -90px;
margin-left: -110px;
}

@media (max-width: 768px) {
.pricing-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 20px; /* Space between the cards */
justify-content: space-around;

}
}

.pricing-card {
box-shadow: rgba(53, 31, 31, 0.5) 0px 5px 10px 0px inset;
Expand Down Expand Up @@ -1525,9 +1527,10 @@ body.dark-mode .pricing-card button {
color: var(--charcoal);
font-weight: var(--fw-700);
margin-block-start: 10px;
padding-left: 25%;
padding-right: 25%;
text-align: center;
}


.pricing-card .price:hover {
color: rgb(255, 195, 0);
}
Expand Down Expand Up @@ -1558,14 +1561,17 @@ body.dark-mode .pricing-card button {
@media (max-width: 768px) {
.pricing-card {
flex-basis: 45%; /* Adjust for smaller screens */
min-height: 200px;
min-height: 100px;
max-width: 300px;

}
}

@media (max-width: 480px) {
.pricing-card {
flex-basis: 100%; /* Single column layout for small screens */
min-height: 180px;

}
}

Expand Down Expand Up @@ -4333,7 +4339,8 @@ body.dark-mode .h3 {
max-width: 800px;
}
.pricing-card {
min-height: 70rem !important;
min-height: 55rem !important;
max-width: 400px;
}
.container01 {
max-width: 800px;
Expand Down
121 changes: 100 additions & 21 deletions assets/html/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,27 +55,48 @@
</head>

<body>
<!-- Circles -->
<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>
<!-- Circles -->
<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 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>
<style>
.action {
position: fixed;
Expand Down Expand Up @@ -1839,6 +1860,64 @@ <h1>Privacy Notice</h1>


<!-- Your other scripts here -->

<script>

// Coordinates for the cursor
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

// Colors for the circles
const colors = [
"#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
"#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
"#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
"#680060", "#60005f", "#48005f", "#3d005e"
];

// Assign colors and initial position to each circle
circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

// Update the coordinates when the mouse moves
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});

// Animation function to move the circles
function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
// Update the position and scale of each circle
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;

circle.x = x;
circle.y = y;

// Get the next circle in the sequence
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.15;
y += (nextCircle.y - y) * 0.15;
});

// Repeat the animation
requestAnimationFrame(animateCircles);
}

// Start the animation
animateCircles();

</script>


</body>

</html>
127 changes: 125 additions & 2 deletions assets/html/event.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -320,9 +320,75 @@
</head>

<body>



<style>

/* Circle styles */
.circle {
height: 24px;
width: 24px;
border-radius: 50%;
background-color: black;
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
transition: transform 0.1s ease-out;
}
</style>
</head>


<body>

<!-- Circles -->
<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 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>
<header>
<a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
<img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px -10px;">
<a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
<img src="../images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px -10px;">
</a>
<div class="hamburger">
<div></div>
Expand Down Expand Up @@ -485,6 +551,63 @@ <h3 id="monthAndYear"></h3>
});
generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
</script>

<script>

// Coordinates for the cursor
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

// Colors for the circles
const colors = [
"#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
"#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
"#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
"#680060", "#60005f", "#48005f", "#3d005e"
];

// Assign colors and initial position to each circle
circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

// Update the coordinates when the mouse moves
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});

// Animation function to move the circles
function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {
// Update the position and scale of each circle
circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;

circle.x = x;
circle.y = y;

// Get the next circle in the sequence
const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.15;
y += (nextCircle.y - y) * 0.15;
});

// Repeat the animation
requestAnimationFrame(animateCircles);
}

// Start the animation
animateCircles();

</script>

</body>

</html>
Loading

0 comments on commit 6ec9967

Please sign in to comment.