diff --git a/public/css/styles.css b/public/css/styles.css index e6c2fae06f10666f229cc621bb12b03524acff06..5653bc104d292df6829902a5edfa8cdd22cca791 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -23,6 +23,7 @@ header { nav { display: flex; justify-content: center; + align-items: center; gap: 20px; margin-top: 10px; } @@ -182,7 +183,7 @@ footer { display: flex; align-items: center; width: 100%; - max-width: 400px; + max-width: 500px; border: 2px solid #007BFF; border-radius: 25px; overflow: hidden; @@ -204,7 +205,6 @@ footer { padding: 10px 20px; font-size: 16px; cursor: pointer; - transition: background-color 0.3s ease, transform 0.2s ease; } .search-container button:hover { diff --git a/views/index.ejs b/views/index.ejs index 4c00214f9efb2fe99935e338c468dc5c7241daba..b3204e72ca166f519d67009c878ff56b87f6f4bd 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -12,19 +12,25 @@ <header> <h1>Welcome to JourneyHub</h1> <nav> - <% if (session.userId) { %> - <a href="/create" class="btn-create">Create Tour</a> - <% } %> - <form action="/search" method="GET" class="search-container"> - <input type="text" name="query" placeholder="Search for tours..." required> - <button type="submit">Search</button> - </form> - <% if (session && session.userId) { %> <!-- ตรวจสอบว่า userId อยู่ใน session หรือไม่ --> - <a><%= session.userName %></a> <!-- แสดงชื่อผู้ใช้ --> - <a href="/logout">Logout</a> - <% } else { %> - <a href="/login" class="login-btn">Login</a> <!-- ถ้ายังไม่ได้ login --> - <% } %> + <div class="header"> + <% if (session.userId) { %> + <a href="/create" class="btn-create">Create Tour</a> + <% } %> + + <form action="/search" method="GET" class="search-container"> + <input type="text" name="query" placeholder="Search for tours..." required> + <button type="submit">Search</button> + </form> + + <div class="navbar"> + <% if (session && session.userId) { %> + <a><%= session.userName %></a> + <a href="/logout">Logout</a> + <% } else { %> + <a href="/login" class="login-btn">Login</a> + <% } %> + </div> + </div> </nav> </header>