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

Added Cursor Trail Effect Matching to the Website Design Theme #1560

Merged
merged 35 commits into from
Aug 8, 2024
Merged

Added Cursor Trail Effect Matching to the Website Design Theme #1560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
aefdaca
Added Cursor Trail Effect contact_GSSoC_contributed.html
RadhikaMalpani1702 Aug 3, 2024
0de9d77
Update add-address.html
RadhikaMalpani1702 Aug 3, 2024
50fe151
Update aman.html
RadhikaMalpani1702 Aug 3, 2024
68fd906
Update book-table.html
RadhikaMalpani1702 Aug 3, 2024
2e12723
Update cart.html
RadhikaMalpani1702 Aug 3, 2024
a6f4a13
Update cateringservices.html
RadhikaMalpani1702 Aug 3, 2024
de8acc7
Update contact.html
RadhikaMalpani1702 Aug 3, 2024
93a9807
Update contact_GSSoC_contriburted.html
RadhikaMalpani1702 Aug 3, 2024
30b7981
Update contributor.html
RadhikaMalpani1702 Aug 3, 2024
f949505
Update dish-detailes.html
RadhikaMalpani1702 Aug 3, 2024
dabd3d4
Update donation-form.html
RadhikaMalpani1702 Aug 3, 2024
a889303
Update feedback.html
RadhikaMalpani1702 Aug 3, 2024
10c6d7e
Update FeedbackPage.html
RadhikaMalpani1702 Aug 3, 2024
a8a8d33
Update foodcatering.html
RadhikaMalpani1702 Aug 3, 2024
9590bd9
Update frosa.html
RadhikaMalpani1702 Aug 3, 2024
5f87fc2
Update Licensing.html
RadhikaMalpani1702 Aug 3, 2024
2eafd66
Update login.html
RadhikaMalpani1702 Aug 3, 2024
60c0383
Update menu.html
RadhikaMalpani1702 Aug 3, 2024
2f097c8
Update nutrition.html
RadhikaMalpani1702 Aug 3, 2024
4332ab3
Update offers.html
RadhikaMalpani1702 Aug 3, 2024
41fe433
Update culinary-experience.html
RadhikaMalpani1702 Aug 3, 2024
4166f67
Update special-event.html
RadhikaMalpani1702 Aug 3, 2024
00414e2
Update privacy.html
RadhikaMalpani1702 Aug 3, 2024
c125d6f
Update food-discount.html
RadhikaMalpani1702 Aug 3, 2024
a248a8b
Update limited-time-products.html
RadhikaMalpani1702 Aug 3, 2024
030bb55
Update membership-benifits.html
RadhikaMalpani1702 Aug 3, 2024
e95072c
Update ordertracking.html
RadhikaMalpani1702 Aug 3, 2024
5d01019
Update RateUs.html
RadhikaMalpani1702 Aug 3, 2024
f061f2c
Update services.html
RadhikaMalpani1702 Aug 3, 2024
46fcb3e
Update shray.html
RadhikaMalpani1702 Aug 3, 2024
b7954d2
Update signup.html
RadhikaMalpani1702 Aug 3, 2024
38db79e
Update subscription.html
RadhikaMalpani1702 Aug 3, 2024
744fc86
Update terms.html
RadhikaMalpani1702 Aug 3, 2024
bbd8359
Update index.html
RadhikaMalpani1702 Aug 3, 2024
76c26d1
Merge branch 'main' into main
RadhikaMalpani1702 Aug 7, 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
103 changes: 103 additions & 0 deletions Html-files/FeedbackPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,112 @@
background-color: #b80d0d;
z-index: 9999;
}

.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(255, 0, 0, 0.466), rgba(255, 52, 52, 0.5));
transition: transform 0.1s, left 0.1s, top 0.1s;
box-shadow: 0 0 20px #faff64,
0 0 60px #f52323,
0 0 100px #ff0000;
animation: colors 1s infinite;
transform: translate(-50%, -50%);
}

.circle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}

@media (max-width: 724px) {
.circle-container{
display: none;
}
}
</style>
</head>
<body>

<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.25;
y += (nextCircle.y - y) * 0.25;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
});
</script>

<!-- Progress bar -->
<div id="progressBar"></div>
<script>
Expand Down
103 changes: 103 additions & 0 deletions Html-files/Licensing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,37 @@
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="../Css-files/scroll-top-button.css" />
<style>

.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(255, 0, 0, 0.466), rgba(255, 52, 52, 0.5));
transition: transform 0.1s, left 0.1s, top 0.1s;
box-shadow: 0 0 20px #faff64,
0 0 60px #f52323,
0 0 100px #ff0000;
animation: colors 1s infinite;
transform: translate(-50%, -50%);
}

.circle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}

@media (max-width: 724px) {
.circle-container{
display: none;
}
}
.legal-pages {
text-decoration: none;
color: white;
Expand All @@ -68,6 +99,78 @@
</style>
</head>
<body>

<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.25;
y += (nextCircle.y - y) * 0.25;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
});
</script>

<!-- Progress bar -->
<div id="progressBar"></div>
<script>
Expand Down
141 changes: 115 additions & 26 deletions Html-files/RateUs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,35 +18,49 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<style>
#progressBar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 8px;
background-color: #b80d0d;
z-index: 9999;
}

.emoji {
font-size: 2rem;
cursor: pointer;
}
<style> #progressBar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 8px;
background-color: #b80d0d;
z-index: 9999;
}

.emoji.selected {
animation: shine 1s ease-in-out infinite alternate;
}
.circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(255, 0, 0, 0.466), rgba(255, 52, 52, 0.5));
transition: transform 0.1s, left 0.1s, top 0.1s;
box-shadow: 0 0 20px #faff64,
0 0 60px #f52323,
0 0 100px #ff0000;
animation: colors 1s infinite;
transform: translate(-50%, -50%);
}

.circle-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}

@media (max-width: 724px) {
.circle-container{
display: none;
}
}
</style>

@keyframes shine {
from {
text-shadow: 0 0 10px gold;
}
to {
text-shadow: 0 0 20px gold;
}
}
</style>

</head>
<body>
Expand Down Expand Up @@ -218,5 +232,80 @@ <h2 class="rateus-heading">Rate Us</h2>
</script>
<script src="https://kit.fontawesome.com/a076d05399.js"></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.25;
y += (nextCircle.y - y) * 0.25;
});

requestAnimationFrame(animateCircles);
}

animateCircles();
});
</script>




</body>
</html>
Loading
Loading