From fa295ca431c271a36c0201319e65638e811264fd Mon Sep 17 00:00:00 2001
From: Atiwit Pattanapukdee <65160394@go.buu.ac.th>
Date: Mon, 17 Mar 2025 20:53:20 +0700
Subject: [PATCH] Project Round 3
---
public/css/styles.css | 266 ++++++++++++++++++++++--------------------
views/index.ejs | 11 +-
2 files changed, 147 insertions(+), 130 deletions(-)
diff --git a/public/css/styles.css b/public/css/styles.css
index d747ec3..4a00cac 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,140 +1,148 @@
-/* General Body */
+/* Reset styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
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;
- }
-
+ font-family: 'Arial', sans-serif;
+ background-color: #f4f7f6;
+ color: #333;
+ line-height: 1.6;
+}
+
+header {
+ background-color: #4CAF50;
+ color: white;
+ padding: 20px 0;
+ text-align: center;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+header h1 {
+ font-size: 2.5rem;
+ margin-bottom: 10px;
+}
+
+nav {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ margin-top: 15px;
+}
+
+nav a {
+ color: white;
+ text-decoration: none;
+ font-size: 1.1rem;
+ padding: 8px 16px;
+ transition: background-color 0.3s ease;
+}
+
+nav a:hover {
+ background-color: #45a049;
+ border-radius: 5px;
+}
+
+section {
+ max-width: 1200px;
+ margin: 30px auto;
+ padding: 20px;
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+section h2 {
+ font-size: 2rem;
+ color: #333;
+ margin-bottom: 20px;
+ text-align: center;
+}
+
+ul {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: 20px;
+ list-style: none;
+}
+
+ul li {
+ background-color: #f9f9f9;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+ul li:hover {
+ transform: translateY(-10px);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+}
+
+ul li a {
+ font-size: 1.2rem;
+ color: #333;
+ text-decoration: none;
+ font-weight: bold;
+ display: block;
+ margin-bottom: 10px;
+}
+
+ul li span {
+ font-size: 1rem;
+ color: #4CAF50;
+}
+
+.btn-create, .btn-edit {
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: #008CBA;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ margin-top: 20px;
+ font-size: 1rem;
+ transition: background-color 0.3s ease;
+}
+
+.btn-create:hover, .btn-edit:hover {
+ background-color: #007bb5;
+}
+
+footer {
+ background-color: #333;
+ color: white;
+ text-align: center;
+ padding: 20px 0;
+ margin-top: 40px;
+}
+
+footer p {
+ font-size: 1rem;
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
header h1 {
- font-size: 3rem;
- margin: 0;
- }
-
- nav a {
- color: white;
- margin: 0 15px;
- text-decoration: none;
- font-size: 1.1rem;
- }
-
- nav a:hover {
- text-decoration: underline;
- }
-
- /* Tour Cards */
- .tour-list {
- padding: 20px;
- }
-
- .tour-card {
- background-color: white;
- border-radius: 10px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- margin: 20px;
- overflow: hidden;
- }
-
- .tour-card img {
- width: 100%;
- height: 200px;
- object-fit: cover;
- }
-
- .tour-card-info {
- padding: 15px;
- }
-
- .tour-card-info h3 {
- font-size: 1.5rem;
- color: #333;
- }
-
- .tour-card-info p {
- font-size: 1rem;
- color: #666;
- }
-
- .price {
- font-size: 1.2rem;
- font-weight: bold;
- color: #004d7a;
- margin-top: 10px;
- }
-
- /* Footer */
- footer {
- background-color: #333;
- color: white;
- text-align: center;
- padding: 15px;
- position: fixed;
- bottom: 0;
- width: 100%;
+ font-size: 2rem;
}
-/* login */
-/* Login Form */
-.login-form-container {
- width: 100%;
- max-width: 400px;
- margin: 50px auto;
- padding: 20px;
- background-color: #fff;
- border-radius: 10px;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
- }
-
- .login-form {
- display: flex;
+ nav {
flex-direction: column;
}
-
- .form-group {
- margin-bottom: 15px;
- }
-
- label {
+
+ nav a {
font-size: 1rem;
- color: #333;
- }
-
- input[type="text"],
- input[type="password"] {
padding: 10px;
- margin-top: 5px;
- font-size: 1rem;
- border: 1px solid #ccc;
- border-radius: 5px;
}
-
- button {
- background-color: #004d7a;
- color: white;
- padding: 12px;
- border: none;
- border-radius: 5px;
- font-size: 1rem;
- cursor: pointer;
- }
-
- button:hover {
- background-color: #f0a500;
+
+ section {
+ margin: 20px;
}
-
- .error-message {
- color: red;
- font-size: 0.9rem;
- margin-top: 10px;
- text-align: center;
+
+ ul {
+ grid-template-columns: 1fr;
}
-
\ No newline at end of file
+}
diff --git a/views/index.ejs b/views/index.ejs
index 2962118..ee6135a 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -24,11 +24,20 @@
</header>
<section>
- <h2>Available Tours</h2>
+
+ <!-- แสดงปุ่ม "Create Tour" สำหรับผู้ใช้ที่เข้าสู่ระบบแล้ว -->
+ <% if (session.userId) { %>
+ <a href="/tour/create" class="btn-create">Create Tour</a>
+ <% } %>
+
<ul>
<% tours.forEach(tour => { %>
<li>
<a href="/tour/<%= tour.id %>"><%= tour.name %></a> - <%= tour.price %> THB
+
+ <% if (session.userId) { %> <!-- ตรวจสอบว่าเป็นผู้ใช้ที่ล็อกอินแล้วหรือไม่ -->
+ <a href="/tour/edit/<%= tour.id %>" class="btn-edit">Edit</a> <!-- ปุ่มสำหรับแก้ไขทัวร์ -->
+ <% } %>
</li>
<% }) %>
</ul>
--
GitLab