Skip to content

Commit

Permalink
made the page more sleek
Browse files Browse the repository at this point in the history
  • Loading branch information
@KeshariPiyush24
KeshariPiyush24 committed Oct 31, 2024
1 parent 76d0d19 commit 731301f
Show file tree
Hide file tree
Showing 2 changed files with 276 additions and 51 deletions.
170 changes: 168 additions & 2 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,11 @@ body {
}

.complete-body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 20px;
width: 100%;
max-width: 600px;
}
Expand Down Expand Up @@ -265,4 +266,169 @@ p {
font-size: 0.7em;
padding: 8px 12px;
}
}

/* Add these new styles to your existing CSS */

.card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 15px 25px;
margin-bottom: 20px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.card:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 1);
}

.card::after {
content: '→';
position: absolute;
right: 20px;
font-size: 1.5em;
opacity: 0.5;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.card:hover::after {
transform: translateX(5px);
opacity: 1;
}

.modal {
border: none;
border-radius: 20px;
padding: 0;
max-width: 90%;
width: 450px;
background: white;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
animation: modalPopIn 0.3s ease;
}

@keyframes modalPopIn {
from {
transform: translate(-50%, -45%);
opacity: 0;
}

to {
transform: translate(-50%, -50%);
opacity: 1;
}
}

.modal::backdrop {
background: rgba(0, 0, 0, 0.6);
animation: backdropFadeIn 0.2s ease;
}

.modal-content {
padding: 30px;
text-align: center;
}

.close-button {
display: none;
}

.card .section-title {
margin: 0;
font-size: 1.3em;
padding-right: 30px;
}

.complete-body {
gap: 0;
padding: 20px;
}

.container.welcome-section {
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.98);
}

@media (max-width: 768px) {
.card {
padding: 15px 25px;
margin: 0 0 20px 0;
}

.modal {
width: 95%;
max-height: 90vh;
overflow-y: auto;
}
}

/* Add these new styles and modify existing ones */

/* Developer info styling */
.dev-info {
width: 100%;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
text-align: center;
padding: 30px;
margin-top: auto;
margin-bottom: 0;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Update complete-body to allow dev-info to stick to bottom */
.complete-body {
min-height: 100vh;
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
width: 100%;
max-width: 600px;
}

/* Update spacing between cards */
.card {
margin-bottom: 20px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
.dev-info {
padding: 20px;
margin-top: 20px;
}

.complete-body {
padding: 15px;
}
}

/* Update modal heading styles to match card headings */
.modal-content h2 {
font-family: 'Playfair Display', serif;
font-size: 1.5em;
margin-bottom: 20px;
color: #c96064;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
font-weight: 700;
}

/* Update mobile styles for modal headings */
@media (max-width: 600px) {
.modal-content h2 {
font-size: 1.3em;
}
}
157 changes: 108 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,57 +22,86 @@ <h1>Welcome to New Rajshree Sweets</h1>
</div>
</div>

<div class="menu-section">
<div class="card menu-section" onclick="toggleDialog('menuDialog')">
<h2 class="section-title">Our Delightful Menu</h2>
<p>Discover our wide array of mouthwatering sweets and delicacies:</p>
<div class="icons">
<a href="https://menu.newrajshreesweets.com" class="button menu-button" target="_blank"
rel="noopener noreferrer">
Explore Menu
</a>
</div>
</div>

<div class="order-section">
<div class="card order-section" onclick="toggleDialog('orderDialog')">
<h2 class="section-title">Order Online</h2>
<p>Savor our sweets from the comfort of your home:</p>
<div class="icons">
<a href="https://www.zomato.com/vi/varanasi/new-rajshree-sweets-nadesar" class="button zomato"
target="_blank" rel="noopener noreferrer">
Zomato
</a>
<a href="https://newrajshreesweets.com/" class="button website" target="_blank"
rel="noopener noreferrer">
Our Website
</a>
</div>
</div>

<div class="social-links">
<div class="card social-links" onclick="toggleDialog('socialDialog')">
<h2 class="section-title">Stay Connected</h2>
<p>Join our sweet community for updates and special offers:</p>
<div class="icons">
<a href="https://wa.me/919792677770?text=Hello%2C%20I'm%20interested%20in%20your%20sweets.%20Can%20you%20provide%20more%20information%3F"
class="button whatsapp" target="_blank" rel="noopener noreferrer">
WhatsApp
</a>
<a href="https://www.facebook.com/profile.php?id=61560995317454" class="button facebook" target="_blank"
rel="noopener noreferrer">
Facebook
</a>
<a href="https://www.instagram.com/newrajshreesweets/" class="button instagram" target="_blank"
rel="noopener noreferrer">
Instagram
</a>
<a href="https://x.com/newrajshree_vns" class="button x" target="_blank" rel="noopener noreferrer">
X
</a>
</div>
</div>

<div class="infos">
<div class="section">
<h3 class="section-title">Share Your Sweet Experience</h3>
<div class="card review-section" onclick="toggleDialog('reviewDialog')">
<h2 class="section-title">Share Your Sweet Experience</h2>
</div>

<div class="dev-info">
<h3 class="section-title">Crafted with Love</h3>
<p>Website and Kiosk lovingly developed by:</p>
<a class="dev" href="https://kesharipiyush24.github.io/" target="_blank" rel="noopener noreferrer">Piyush
Keshari</a>
</div>

<dialog id="menuDialog" class="modal">
<div class="modal-content">
<h2>Our Delightful Menu</h2>
<p>Discover our wide array of mouthwatering sweets and delicacies:</p>
<div class="icons">
<a href="https://menu.newrajshreesweets.com" class="button menu-button" target="_blank"
rel="noopener noreferrer">
Explore Menu
</a>
</div>
</div>
</dialog>

<dialog id="orderDialog" class="modal">
<div class="modal-content">
<h2>Order Online</h2>
<p>Savor our sweets from the comfort of your home:</p>
<div class="icons">
<a href="https://www.zomato.com/vi/varanasi/new-rajshree-sweets-nadesar" class="button zomato"
target="_blank" rel="noopener noreferrer">
Zomato
</a>
<a href="https://newrajshreesweets.com/" class="button website" target="_blank"
rel="noopener noreferrer">
Our Website
</a>
</div>
</div>
</dialog>

<dialog id="socialDialog" class="modal">
<div class="modal-content">
<h2>Stay Connected</h2>
<p>Join our sweet community for updates and special offers:</p>
<div class="icons">
<a href="https://wa.me/919792677770?text=Hello%2C%20I'm%20interested%20in%20your%20sweets.%20Can%20you%20provide%20more%20information%3F"
class="button whatsapp" target="_blank" rel="noopener noreferrer">
WhatsApp
</a>
<a href="https://www.facebook.com/profile.php?id=61560995317454" class="button facebook"
target="_blank" rel="noopener noreferrer">
Facebook
</a>
<a href="https://www.instagram.com/newrajshreesweets/" class="button instagram" target="_blank"
rel="noopener noreferrer">
Instagram
</a>
<a href="https://x.com/newrajshree_vns" class="button x" target="_blank" rel="noopener noreferrer">
X
</a>
</div>
</div>
</dialog>

<dialog id="reviewDialog" class="modal">
<div class="modal-content">
<h2>Share Your Sweet Experience</h2>
<p>Your feedback helps us serve you better. Please leave us a review:</p>
<div class="icons">
<a class="button google" href="https://g.page/r/Ce2YNkMx7_wQEBE/review" target="_blank"
Expand All @@ -81,14 +110,44 @@ <h3 class="section-title">Share Your Sweet Experience</h3>
rel="noopener noreferrer">Justdial Review</a>
</div>
</div>
<div class="section">
<h3 class="section-title">Crafted with Love</h3>
<p>Website and Kiosk lovingly developed by:</p>
<a class="dev" href="https://kesharipiyush24.github.io/" target="_blank"
rel="noopener noreferrer">Piyush Keshari</a>
</div>
</div>
</dialog>
</div>

<script>
function toggleDialog(dialogId) {
const dialog = document.getElementById(dialogId);

if (dialog.open) {
dialog.close();
} else {
dialog.showModal();
}
}

// Add click event listeners to all dialogs once when the page loads
document.addEventListener('DOMContentLoaded', () => {
const dialogs = document.querySelectorAll('dialog');

dialogs.forEach(dialog => {
dialog.addEventListener('click', (e) => {
const dialogDimensions = dialog.getBoundingClientRect();
if (
e.clientX < dialogDimensions.left ||
e.clientX > dialogDimensions.right ||
e.clientY < dialogDimensions.top ||
e.clientY > dialogDimensions.bottom
) {
dialog.close();
}
});

// Prevent clicks inside the modal from closing it
dialog.querySelector('.modal-content').addEventListener('click', (e) => {
e.stopPropagation();
});
});
});
</script>
</body>

</html>

0 comments on commit 731301f

Please sign in to comment.