Auto commit: 2025-12-01T15:31:04.651Z

This commit is contained in:
Flatlogic Bot 2025-12-01 15:31:04 +00:00
parent 6e682bf171
commit 7f63bcb39c
14 changed files with 109 additions and 352 deletions

View File

@ -1,334 +1,26 @@
/* Cozy Lodge Theme */
body {
background-color: #F6FBFF; /* Frosty White */
font-family: 'Nunito Sans', sans-serif;
color: #212529;
font-family: sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
padding: 2rem 0;
.hero-section {
background-color: #f8f9fa;
color: #333;
}
/* Navigation */
.navbar {
background-color: #FFFFFF;
border-bottom: 1px solid #E9F1F8;
padding: 1rem 0;
.feature {
background-color: #f8f9fa;
border-radius: 10px;
transition: transform .2s;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-brand {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: #0B233F;
text-decoration: none;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav-links li a {
text-decoration: none;
color: #212529;
padding: 0.5rem 1rem;
transition: color 0.3s ease;
}
.nav-links li a:hover {
color: #FF7A4D;
}
/* Hero Section */
.hero {
background-image: url('https://images.pexels.com/photos/912110/pexels-photo-912110.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
background-size: cover;
background-position: center;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero-content {
background: rgba(11, 35, 63, 0.6); /* Deep Navy with transparency */
padding: 2rem 4rem;
border-radius: .5rem;
text-align: center;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 4rem;
}
.lead {
font-size: 1.25rem;
}
.btn-primary {
background-color: #FF7A4D; /* Warm Ember */
border-color: #FF7A4D;
color: white;
font-weight: bold;
padding: 0.75rem 1.5rem;
transition: background-color 0.3s ease;
text-decoration: none;
border-radius: .25rem;
border: none;
cursor: pointer;
}
.btn-primary:hover {
background-color: #E86A3C;
border-color: #E86A3C;
}
/* Featured Experiences */
.featured-experiences {
text-align: center;
padding: 4rem 0;
}
.featured-experiences h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
margin-bottom: 2rem;
}
.experience-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.experience-card {
background-color: #FFFFFF;
border: 1px solid #E9F1F8; /* Snow Grey */
border-radius: .5rem;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.experience-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.experience-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.experience-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin: 1rem;
}
.experience-card p {
margin: 0 1rem 1rem;
}
/* Experience Detail */
.experience-detail img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: .5rem;
margin-bottom: 2rem;
}
.experience-detail h1 {
font-family: 'Playfair Display', serif;
font-size: 3rem;
margin-bottom: 1rem;
}
.experience-detail p {
line-height: 1.6;
margin-bottom: 1.5rem;
}
.experience-detail h2 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.experience-detail ul {
list-style: disc;
margin-left: 1.5rem;
}
/* Gallery */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
.gallery-card {
overflow: hidden;
border-radius: .5rem;
}
.gallery-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-card:hover img {
.feature:hover {
transform: scale(1.05);
}
.upload-section {
text-align: center;
padding: 4rem 0;
.gallery-section img {
border-radius: 10px;
}
.upload-section h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
margin-bottom: 1rem;
}
/* Forms */
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: .5rem;
font-weight: bold;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: .75rem;
border: 1px solid #E9F1F8;
border-radius: .25rem;
}
/* Footer */
footer {
background-color: #0B233F;
color: #F6FBFF;
text-align: center;
padding: 2rem 0;
margin-top: 4rem;
}
/* Chat Widget */
.chat-icon {
position: fixed;
bottom: 2rem;
right: 2rem;
background-color: #0B233F; /* Deep Navy */
color: #F6FBFF; /* Frosty White */
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.chat-icon:hover {
transform: scale(1.1);
}
.chat-window {
display: none; /* Hidden by default */
position: fixed;
bottom: 7rem;
right: 2rem;
width: 350px;
max-width: 90%;
background-color: #FFFFFF;
border-radius: .5rem;
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
flex-direction: column;
overflow: hidden;
}
.chat-window.show {
display: flex;
}
.chat-header {
background-color: #0B233F; /* Deep Navy */
color: #F6FBFF; /* Frosty White */
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header h5 {
margin: 0;
font-family: 'Playfair Display', serif;
}
.chat-body {
padding: 1rem;
overflow-y: auto;
height: 300px;
}
.message-container {
/* The messages will be prepended here by JS */
}
.message {
padding: 0.5rem 1rem;
border-radius: 1rem;
margin-bottom: 0.5rem;
max-width: 80%;
/* Use float for alignment */
}
.message.received {
background-color: #E9F1F8; /* Snow Grey */
float: left;
clear: both;
}
.message.sent {
background-color: #FF7A4D; /* Warm Ember */
color: white;
float: right;
clear: both;
}
.chat-input {
display: flex;
padding: 1rem;
border-top: 1px solid #E9F1F8; /* Snow Grey */
.contact-section {
background-color: #f8f9fa;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

View File

@ -1,4 +1,4 @@
<footer>
<footer>
<div class="container">
<p>&copy; <?php echo date("Y"); ?> Winter Wonderland. All Rights Reserved.</p>
</div>

View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Winter Wonderland</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
</head>
<body>
<header>

121
index.php
View File

@ -1,34 +1,99 @@
<?php include 'header.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
</head>
<body>
<div class="hero">
<div class="hero-content">
<h1>Your Winter Adventure Awaits</h1>
<p class="lead">Discover unique experiences, plan the perfect trip with our AI assistant, and create unforgettable memories.</p>
<a href="#" class="btn btn-primary">Plan My Trip with AI</a>
</div>
</div>
<!-- Hero Section -->
<header class="hero-section text-center text-white bg-dark py-5">
<div class="container">
<h1 class="display-4">Welcome to our Website</h1>
<p class="lead">A brief and catchy tagline about your service or product.</p>
<a href="#" class="btn btn-primary btn-lg">Get Started</a>
</div>
</header>
<div class="container">
<section class="featured-experiences">
<h2>Featured Experiences</h2>
<div class="experience-grid">
<div class="experience-card">
<img src="https://images.pexels.com/photos/1576788/pexels-photo-1576788.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Experience 1">
<h3>Ski Lessons</h3>
<p>Learn to ski with our expert instructors.</p>
</div>
<div class="experience-card">
<img src="https://images.pexels.com/photos/714258/pexels-photo-714258.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Experience 2">
<h3>Snowboarding</h3>
<p>Hit the slopes on a snowboard.</p>
</div>
<div class="experience-card">
<img src="https://images.pexels.com/photos/1632790/pexels-photo-1632790.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Experience 3">
<h3>Ice Skating</h3>
<p>Enjoy a magical ice skating experience.</p>
<!-- Features Section -->
<section class="features-section py-5">
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<div class="feature p-4">
<h3>Feature One</h3>
<p>Description of feature one.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature p-4">
<h3>Feature Two</h3>
<p>Description of feature two.</p>
</div>
</div>
<div class="col-md-4">
<div class="feature p-4">
<h3>Feature Three</h3>
<p>Description of feature three.</p>
</div>
</div>
</div>
</div>
</section>
</div>
<?php include 'footer.php'; ?>
<!-- Gallery Section -->
<section class="gallery-section bg-light py-5">
<div class="container">
<h2 class="text-center mb-4">Gallery</h2>
<div class="row">
<div class="col-md-4 mb-4">
<img src="https://via.placeholder.com/400" class="img-fluid" alt="Gallery Image">
</div>
<div class="col-md-4 mb-4">
<img src="https://via.placeholder.com/400" class="img-fluid" alt="Gallery Image">
</div>
<div class="col-md-4 mb-4">
<img src="https://via.placeholder.com/400" class="img-fluid" alt="Gallery Image">
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section py-5">
<div class="container">
<h2 class="text-center mb-4">Contact Us</h2>
<div class="row">
<div class="col-md-6 mx-auto">
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</section>
<footer class="text-center py-4 bg-dark text-white">
<div class="container">
<p>&copy; 2025 Your Company. All Rights Reserved.</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>