Gitlab@Informatics

Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found
Select Git revision
  • main
1 result

Target

Select target project
  • 65160388/project-melon
1 result
Select Git revision
  • main
1 result
Show changes

Commits on Source 2

<%- 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>
<%- 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>
<%- 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>