diff --git a/views/project-create.ejs b/views/project-create.ejs
index 2d20b7116e807c9cfaa24cf1fe12625015fbc6dd..13625111472672c9b38325cf1613658640408423 100644
--- a/views/project-create.ejs
+++ b/views/project-create.ejs
@@ -1,19 +1,19 @@
<%- include('partials/header', { username: username }) %>
-<div class="container my-5" style="max-width: 600px;">
- <h2 class="text-center mb-4" style="color: #EE4D2D;">Create Project</h2>
- <div class="card shadow-sm">
+<div class="container my-5 custom-container">
+ <h2 class="text-center mb-4 custom-title">Create Project</h2>
+ <div class="card shadow-sm custom-card">
<div class="card-body">
<form action="/project/create" method="POST">
<div class="form-group">
- <label for="project_name" style="color: #333;">Project Name:</label>
+ <label for="project_name" class="custom-label">Project Name:</label>
<input type="text" class="form-control" name="project_name" id="project_name" required>
</div>
<div class="form-group">
- <label for="description" style="color: #333;">Description:</label>
+ <label for="description" class="custom-label">Description:</label>
<textarea class="form-control" name="description" id="description" rows="5"></textarea>
</div>
- <button type="submit" class="btn btn-block" style="background-color: #EE4D2D; color: #fff; border: none;">
+ <button type="submit" class="btn btn-block custom-submit-btn">
Create
</button>
</form>
@@ -22,3 +22,37 @@
</div>
<%- include('partials/footer') %>
+
+<style>
+ /* Custom styling for Create Project page */
+ .custom-container {
+ max-width: 600px;
+ background-color: #ffffff;
+ border-radius: 8px;
+ padding: 30px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+ .custom-title {
+ color: #EE4D2D;
+ font-weight: 600;
+ font-size: 2rem;
+ }
+ .custom-card {
+ border: none;
+ border-radius: 8px;
+ }
+ .custom-label {
+ font-weight: 600;
+ color: #333;
+ }
+ .custom-submit-btn {
+ background-color: #EE4D2D;
+ color: #fff;
+ border: none;
+ border-radius: 20px;
+ transition: background-color 0.3s;
+ }
+ .custom-submit-btn:hover {
+ background-color: #d84315;
+ }
+</style>
diff --git a/views/project-edit.ejs b/views/project-edit.ejs
index b9f593054cf9cfb26c653e462384b160cf89aad7..f17c8e317c291701e8a05b750a164d8aba1c183a 100644
--- a/views/project-edit.ejs
+++ b/views/project-edit.ejs
@@ -1,20 +1,20 @@
<%- include('partials/header', { username: username }) %>
-<div class="container my-5" style="max-width: 600px;">
- <h2 class="text-center mb-4" style="color: #EE4D2D;">Edit Project</h2>
- <div class="card shadow-sm">
+<div class="container my-5 edit-project-container">
+ <h2 class="text-center mb-4 edit-project-title">Edit Project</h2>
+ <div class="card shadow-lg edit-project-card">
<div class="card-body">
<form action="/project/edit/<%= project.id %>" method="POST">
<div class="form-group">
- <label for="project_name" style="color: #333;">Project Name:</label>
- <input type="text" class="form-control" name="project_name" id="project_name" value="<%= project.project_name %>" required>
+ <label for="project_name" class="edit-label">Project Name</label>
+ <input type="text" class="form-control edit-input" name="project_name" id="project_name" value="<%= project.project_name %>" required>
</div>
<div class="form-group">
- <label for="description" style="color: #333;">Description:</label>
- <textarea class="form-control" name="description" id="description" rows="5"><%= project.description %></textarea>
+ <label for="description" class="edit-label">Description</label>
+ <textarea class="form-control edit-input" name="description" id="description" rows="6"><%= project.description %></textarea>
</div>
- <button type="submit" class="btn btn-block" style="background-color: #EE4D2D; color: #fff; border: none;">
- Update
+ <button type="submit" class="btn btn-block edit-submit-btn">
+ Update Project
</button>
</form>
</div>
@@ -22,3 +22,62 @@
</div>
<%- include('partials/footer') %>
+
+<style>
+ /* พื้นหลังและฟอนต์หลัก */
+ body {
+ background: #f4f4f4;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
+ /* Container สำหรับหน้า Edit Project */
+ .edit-project-container {
+ max-width: 600px;
+ background: #ffffff;
+ border-radius: 10px;
+ padding: 40px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ }
+ /* หัวข้อหน้า */
+ .edit-project-title {
+ color: #EE4D2D;
+ font-size: 2.2rem;
+ font-weight: 700;
+ }
+ /* Card styling */
+ .edit-project-card {
+ border: none;
+ border-radius: 10px;
+ overflow: hidden;
+ }
+ /* Label ในฟอร์ม */
+ .edit-label {
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 5px;
+ }
+ /* Input fields ในฟอร์ม */
+ .edit-input {
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ padding: 12px;
+ transition: border-color 0.3s ease;
+ }
+ .edit-input:focus {
+ border-color: #EE4D2D;
+ box-shadow: 0 0 5px rgba(238, 77, 45, 0.3);
+ }
+ /* Submit button */
+ .edit-submit-btn {
+ background-color: #EE4D2D;
+ color: #fff;
+ border: none;
+ border-radius: 50px;
+ padding: 12px;
+ font-size: 1.1rem;
+ font-weight: 600;
+ transition: background-color 0.3s ease;
+ }
+ .edit-submit-btn:hover {
+ background-color: #d84315;
+ }
+</style>
diff --git a/views/project-view.ejs b/views/project-view.ejs
index d15494427713d81215024dd1a0ad9e9caecac41b..1655e76cdda2cbc901fda826943dba81208db03c 100644
--- a/views/project-view.ejs
+++ b/views/project-view.ejs
@@ -1,49 +1,49 @@
<%- include('partials/header', { username: username }) %>
-<div class="container my-5" style="max-width: 600px;">
- <h2 class="text-center mb-4" style="color: #EE4D2D;">Topic</h2>
- <div class="card shadow-sm">
+<div class="container my-5 custom-container">
+ <h2 class="text-center mb-4 custom-title">Topic</h2>
+ <div class="card shadow-sm custom-card">
<div class="card-body">
- <h5 class="card-title" style="color: #EE4D2D; font-size: 1.8rem;">
+ <h5 class="card-title custom-card-title">
<%= project.project_name %>
</h5>
- <p class="card-text">
+ <p class="card-text custom-text">
<strong>Description:</strong> <%= project.description %>
</p>
- <p class="card-text">
+ <p class="card-text custom-text">
<strong>Owner:</strong> <%= project.ownerName %>
</p>
<!-- ปุ่ม Edit/Delete เฉพาะเจ้าของ -->
<% if (project.user_id === userId) { %>
- <a href="/project/edit/<%= project.id %>" class="btn btn-sm btn-outline-warning">Edit</a>
- <a href="/project/delete/<%= project.id %>" class="btn btn-sm btn-outline-danger"
+ <a href="/project/edit/<%= project.id %>" class="btn btn-sm btn-outline-warning custom-btn">Edit</a>
+ <a href="/project/delete/<%= project.id %>" class="btn btn-sm btn-outline-danger custom-btn"
onclick="return confirm('Are you sure you want to delete this project?');">
Delete
</a>
<% } %>
- <div class="d-flex justify-content-end mt-2">
- <a href="/dashboard" class="btn btn-sm btn-outline-info">Back to Dashboard</a>
+ <div class="d-flex justify-content-end mt-3">
+ <a href="/dashboard" class="btn btn-sm btn-outline-info custom-btn">Back to Dashboard</a>
</div>
</div>
</div>
<!-- แสดง Comments -->
<div class="mt-4">
- <h4 style="color: #EE4D2D;">Comments</h4>
+ <h4 class="custom-comments-title">Comments</h4>
<% if (comments && comments.length > 0) { %>
- <ul class="list-group">
+ <ul class="list-group custom-list-group">
<% comments.forEach(c => { %>
- <li class="list-group-item mb-2" style="border-radius: 5px;">
+ <li class="list-group-item custom-list-item">
<strong><%= c.commentUser %>:</strong> <%= c.comment %>
- <span class="text-muted" style="font-size: 0.8em;">
+ <span class="text-muted custom-comment-meta">
(Comment ID: <%= c.id %>)
</span>
<% if (c.user_id === userId) { %>
<!-- ปุ่มลบคอมเมนต์เฉพาะเจ้าของ -->
<a href="/comment/delete/<%= c.id %>"
- class="btn btn-sm btn-outline-danger float-right"
+ class="btn btn-sm btn-outline-danger float-right custom-btn"
onclick="return confirm('Delete this comment?');">
Delete
</a>
@@ -52,22 +52,91 @@
<% }) %>
</ul>
<% } else { %>
- <p>No comments yet.</p>
+ <p class="custom-text">No comments yet.</p>
<% } %>
</div>
<!-- ฟอร์มเพิ่ม Comment -->
- <div class="card mt-3">
+ <div class="card mt-4 custom-card">
<div class="card-body">
<form action="/project/<%= project.id %>/comment" method="POST">
<div class="form-group">
- <label for="comment">Add Comment:</label>
- <textarea class="form-control" name="comment" id="comment" rows="2" required></textarea>
+ <label for="comment" class="custom-label">Add Comment:</label>
+ <textarea class="form-control" name="comment" id="comment" rows="3" required></textarea>
</div>
- <button type="submit" class="btn" style="background-color: #EE4D2D; color: #fff;">Comment</button>
+ <button type="submit" class="btn custom-submit-btn">Comment</button>
</form>
</div>
</div>
</div>
<%- include('partials/footer') %>
+
+<!-- Inline CSS สำหรับการตกแต่งเพิ่มเติม -->
+<style>
+ body {
+ background-color: #f7f7f7;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
+ .custom-container {
+ max-width: 600px;
+ background-color: #ffffff;
+ border-radius: 8px;
+ padding: 30px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+ .custom-title {
+ color: #EE4D2D;
+ font-weight: 600;
+ font-size: 2rem;
+ }
+ .custom-card {
+ border: none;
+ border-radius: 8px;
+ }
+ .custom-card-title {
+ color: #EE4D2D;
+ font-size: 1.8rem;
+ font-weight: 600;
+ }
+ .custom-text {
+ color: #555;
+ font-size: 1rem;
+ }
+ .custom-btn {
+ border-radius: 20px;
+ margin-right: 5px;
+ }
+ .custom-list-group {
+ margin-top: 15px;
+ }
+ .custom-list-item {
+ background-color: #f9f9f9;
+ border: 1px solid #e0e0e0;
+ border-radius: 5px;
+ padding: 10px;
+ margin-bottom: 10px;
+ }
+ .custom-comment-meta {
+ font-size: 0.8em;
+ margin-left: 10px;
+ }
+ .custom-comments-title {
+ color: #EE4D2D;
+ font-weight: 600;
+ margin-bottom: 15px;
+ }
+ .custom-label {
+ font-weight: 600;
+ color: #333;
+ }
+ .custom-submit-btn {
+ background-color: #EE4D2D;
+ color: #fff;
+ border: none;
+ border-radius: 20px;
+ }
+ .custom-submit-btn:hover {
+ background-color: #d84315;
+ }
+</style>