diff --git a/views/dashboard.ejs b/views/dashboard.ejs index f3c0659110a4ff20efc1d53b3394c0cac1b00406..abafe865759bc4c6f39e5e0d097b74753135ddcd 100644 --- a/views/dashboard.ejs +++ b/views/dashboard.ejs @@ -1,49 +1,56 @@ -<!-- แสดง Header จาก partial/header.ejs --> -<%- include('partials/header') %> - -<!-- Container หลักของหน้าสมัครสมาชิก --> -<div class="container my-5" style="max-width: 450px;"> - <h2 class="text-center mb-4" style="color: #000000; font-weight: bold;">Register</h2> - - <!-- ถ้ามี error (จาก server) ให้แสดงข้อความแจ้งเตือนในกล่องสีแดง --> - <% if (error) { %> - <div class="alert alert-danger text-center" role="alert" style="font-size: 16px;"> - <%= error %> - </div> - <% } %> - - <!-- ฟอร์มสมัครสมาชิก ส่งข้อมูลผ่าน POST ไปยัง /register --> - <form action="/register" method="POST" class="shadow p-4 rounded-lg" style="background-color: #F4F7FA;"> - - <!-- ช่องกรอก Username --> - <div class="form-group"> - <label for="username" style="font-weight: bold;">Username:</label> - <input type="text" class="form-control" name="username" id="username" placeholder="Enter Username" required> - </div> - - <!-- ช่องกรอก Email --> - <div class="form-group"> - <label for="email" style="font-weight: bold;">Email:</label> - <input type="email" class="form-control" name="email" id="email" placeholder="Enter Email" required> - </div> - - <!-- ช่องกรอก Password --> - <div class="form-group"> - <label for="password" style="font-weight: bold;">Password:</label> - <input type="password" class="form-control" name="password" id="password" placeholder="Enter Password" required> - </div> - - <!-- ปุ่มกดสมัครสมาชิก --> - <button type="submit" class="btn btn-primary btn-block" style="border-radius: 30px; padding: 12px; background-color: #000000; border-color: #000000;"> - Register - </button> - </form> - - <!-- ลิงก์ไปหน้า Login หากผู้ใช้มีบัญชีอยู่แล้ว --> - <p class="text-center mt-3"> - Already have an account? <a href="/login" style="color: #000000; font-weight: bold;">Login here</a> - </p> +<%- include('partials/header', { username: username }) %> + +<!-- Background color --> +<div class="container my-5" style="background-color: #a86dcff5; color: #333; border-radius: 0px; padding: 30px;"> + <!-- Header with Title --> + <div class="d-flex justify-content-between align-items-center mb-4"> + <h2 class="mb-0" style="color: #000000; font-size: 30px; font-weight: 600;">THREAD TOPIC</h2> + <a href="/thread/create" class="btn" style="background-color: #000000; color: #fff; font-weight: 600; border-radius: 20px; padding: 10px 20px;"> + Create New Thread Topic + </a> + </div> + + <!-- List Group of Topics --> + <div class="list-group"> + <% threads.forEach(thread => { %> + <!-- Topic Item --> + <div class="list-group-item mb-4" style="background-color: #FFF; color: #333; border: none; border-radius: 0px; padding: 20px;"> + <div class="d-flex justify-content-between"> + <!-- Thread Title --> + <h5 class="mb-1" style="font-size: 20px; font-weight: 700;"> + <a href="/thread/<%= thread.id %>" style="color: #000000; text-decoration: none;"> + <%= thread.thread_name %> + </a> + </h5> + <!-- Thread Owner --> + <small style="color: #999; font-size: 16px;"> + <span style="color: black; font-weight: bold;">Owner: <%= thread.ownerName %> </span> + </small> + </div> + + <!-- Short Description --> + <p class="mb-3" style="font-size: 15px; line-height: 1.5;"> + <%= thread.description.length > 100 + ? thread.description.substring(0, 100) + '...' + : thread.description + %> + </p> + + <!-- Action Buttons (View/Edit/Delete) --> + <div class="mt-3"> + <a href="/thread/<%= thread.id %>" class="btn btn-sm btn-outline-info" style="border-radius: 20px;">View</a> + <% if (thread.user_id === userId) { %> + <a href="/thread/edit/<%= thread.id %>" class="btn btn-sm btn-outline-warning" style="border-radius: 20px;">Edit</a> + <a href="/thread/delete/<%= thread.id %>" + class="btn btn-sm btn-outline-danger" style="border-radius: 20px;" + onclick="return confirm('Are you sure you want to delete this thread?');"> + Delete + </a> + <% } %> + </div> + </div> + <% }) %> + </div> </div> -<!-- แสดง Footer จาก partial/footer.ejs --> <%- include('partials/footer') %>