Gitlab@Informatics

Skip to content
Snippets Groups Projects
Commit 1ba04e13 authored by 65160388's avatar 65160388
Browse files

Merge branch 'master' into 'main' 

เพิ่มไฟล์

See merge request !6
parents 1675b917 227c48cc
No related branches found
No related tags found
1 merge request!6เพิ่มไฟล์
Show whitespace changes
Inline Side-by-side
views/project-create.ejs
+ 40
− 6
View file @ 1ba04e13
<%- 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>
views/project-edit.ejs
+ 68
− 9
View file @ 1ba04e13
<%- 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>
views/project-view.ejs
+ 89
− 20
View file @ 1ba04e13
<%- 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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment