Gitlab@Informatics

Skip to content
Snippets Groups Projects
Commit 227c48cc authored by 65160388's avatar 65160388
Browse files

เพิ่มไฟล์

parent 3bda7b66
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 @ 227c48cc
<%- 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 @ 227c48cc
<%- 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 @ 227c48cc
<%- 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