diff --git a/public/css/style.css b/public/css/style.css
index 8966abdd7716bba2def9c18891428773d3bbf059..b295d0d4ef4e510abd6ca5f0369415d8fb3a25fa 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,40 +1,47 @@
-/* Header */
-header {
- background-color: #004d7a; /* สีฟ้าของท้องฟ้า */
- color: #ffffff;
- padding: 20px 0;
+/* General Body */
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Header */
+ header {
+ background-color: #004d7a;
+ color: white;
+ padding: 20px;
text-align: center;
}
header h1 {
font-size: 3rem;
- font-family: 'Arial', sans-serif;
margin: 0;
}
- nav {
- margin-top: 20px;
- }
-
nav a {
- color: #ffffff;
+ color: white;
margin: 0 15px;
- font-size: 1.2rem;
text-decoration: none;
+ font-size: 1.1rem;
}
nav a:hover {
- border-bottom: 2px solid #f0a500;
+ text-decoration: underline;
+ }
+
+ /* Tour Cards */
+ .tour-list {
+ padding: 20px;
}
-
-/* Tour Cards */
-.tour-card {
- background-color: #f9f9f9;
+
+ .tour-card {
+ background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- overflow: hidden;
margin: 20px;
- width: 300px;
+ overflow: hidden;
}
.tour-card img {
@@ -43,97 +50,35 @@ header {
object-fit: cover;
}
- .tour-card .content {
+ .tour-card-info {
padding: 15px;
}
- .tour-card .content h3 {
+ .tour-card-info h3 {
font-size: 1.5rem;
- margin-bottom: 10px;
color: #333;
}
- .tour-card .content p {
- color: #777;
+ .tour-card-info p {
font-size: 1rem;
- line-height: 1.5;
+ color: #666;
}
- .tour-card .price {
- margin-top: 15px;
+ .price {
font-size: 1.2rem;
- color: #004d7a;
font-weight: bold;
+ color: #004d7a;
+ margin-top: 10px;
}
-/* Booking Form */
-.booking-form {
- background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- padding: 30px;
- width: 400px;
- margin: 0 auto;
-}
-
-.booking-form h2 {
- text-align: center;
- font-size: 2rem;
- color: #004d7a;
-}
-
-.booking-form input, .booking-form select {
- width: 100%;
- padding: 12px;
- margin: 10px 0;
- border: 1px solid #ccc;
- border-radius: 5px;
- font-size: 1rem;
-}
-
-.booking-form input[type="submit"] {
- background-color: #f0a500;
- color: #fff;
- border: none;
- cursor: pointer;
- font-size: 1.2rem;
-}
-
-.booking-form input[type="submit"]:hover {
- background-color: #004d7a;
-}
-/* Footer */
-footer {
+
+ /* Footer */
+ footer {
background-color: #333;
- color: #fff;
+ color: white;
text-align: center;
- padding: 20px 0;
- }
-
- footer p {
- font-size: 1rem;
- }
-
- footer a {
- color: #f0a500;
- text-decoration: none;
- }
-
- footer a:hover {
- text-decoration: underline;
- }
-/* Responsive */
-@media (max-width: 768px) {
- header h1 {
- font-size: 2rem;
- }
-
- .tour-card {
- width: 100%;
- }
-
- .booking-form {
- width: 100%;
- padding: 20px;
- }
+ padding: 15px;
+ position: fixed;
+ bottom: 0;
+ width: 100%;
}
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index 8d6645d6d30b19a8b1a83eb015615faec3ff55b3..a2221bf79667e392d1e43694f89dda99792e473d 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -7,11 +7,39 @@
<title>Tour Website</title>
</head>
<body>
- <h1>Welcome to our Tour Website</h1>
- <ul>
- <% tours.forEach(tour => { %>
- <li><a href="/tour/<%= tour.id %>"><%= tour.name %></a> - <%= tour.price %> THB</li>
- <% }) %>
- </ul>
+ <header>
+ <h1>Welcome to Our Tour Website</h1>
+ <nav>
+ <a href="/">Home</a>
+ <a href="/about">About</a>
+ <a href="/contact">Contact</a>
+ </nav>
+ </header>
+
+ <section class="tour-list">
+ <h2>Available Tours</h2>
+ <ul>
+ <% tours.forEach(tour => { %>
+ <li class="tour-card">
+ <a href="/tour/<%= tour.id %>">
+ <div class="tour-card-img">
+ <img src="<%= tour.imageUrl %>" alt="<%= tour.name %>">
+ </div>
+ <div class="tour-card-info">
+ <h3><%= tour.name %></h3>
+ <p><%= tour.description %></p>
+ <div class="price">
+ <span><%= tour.price %> THB</span>
+ </div>
+ </div>
+ </a>
+ </li>
+ <% }) %>
+ </ul>
+ </section>
+
+ <footer>
+ <p>© 2025 Tour Website. All Rights Reserved.</p>
+ </footer>
</body>
</html>