-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dad95ed
commit 0f75a04
Showing
1 changed file
with
52 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,73 @@ | ||
|
|
||
|
|
||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Instagram</title> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <title>All Posts</title> | ||
| <link rel="stylesheet" href="/style.css" /> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" | ||
| integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" | ||
| crossorigin="anonymous" referrerpolicy="no-referrer" /> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <style> | ||
| body { | ||
| font-family: 'Poppins', sans-serif; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body class="bg-gray-100"> | ||
|
|
||
| <body class="bg-gray-100 p-6"> | ||
| <h1 class="text-4xl font-bold text-center text-gray-800 mb-6">Instagram - Posts</h1> | ||
| <h1 class="text-4xl text-center font-bold text-blue-600 mt-6">Instagram - Posts</h1> | ||
|
|
||
| <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto"> | ||
| <div class="max-w-4xl mx-auto mt-8 space-y-6"> | ||
| <% for (post of posts) { %> | ||
| <div class="bg-white shadow-md rounded-lg p-6"> | ||
| <div class="mb-4"> | ||
| <h2 class="text-xl font-semibold text-gray-700">@<%= post.username %> | ||
| </h2> | ||
| <h4 class="text-gray-500"> | ||
| <%= post.content %> | ||
| </h4> | ||
| </div> | ||
| <div class="flex justify-between items-center mt-4"> | ||
| <a href="/posts/<%= post.id %>" class="text-blue-500"><i class="fa-solid fa-eye fa-xl"></i></a> | ||
| <a href="/posts/<%= post.id %>/edit" class="text-yellow-500"><i | ||
| class="fa-solid fa-pen-to-square fa-xl"></i></a> | ||
| <form action="/posts/<%= post.id %>?_method=DELETE" method="post" class="inline-block"> | ||
| <button class="text-red-500"><i class="fa-solid fa-trash fa-xl"></i></button> | ||
| </form> | ||
| </div> | ||
| <div class="bg-white p-6 rounded-lg shadow-md flex justify-between items-center"> | ||
| <!-- User content --> | ||
| <div class="space-y-2"> | ||
| <h2 class="text-2xl font-semibold text-gray-800">@<%= post.username %></h2> | ||
| <h4 class="text-gray-600"><%= post.content %></h4> | ||
| </div> | ||
| <% } %> | ||
| <!-- Buttons container --> | ||
| <div class="flex space-x-3"> | ||
| <!-- View button --> | ||
| <a href="/posts/<%= post.id %>" | ||
| class="text-blue-500 hover:text-blue-700 transition-colors duration-300"> | ||
| <i class="fa-solid fa-eye fa-xl"></i> | ||
| </a> | ||
| <!-- Edit button --> | ||
| <a href="/posts/<%= post.id %>/edit" | ||
| class="text-yellow-500 hover:text-yellow-700 transition-colors duration-300"> | ||
| <i class="fa-solid fa-pen-to-square fa-xl"></i> | ||
| </a> | ||
| <!-- Delete button --> | ||
| <form action="/posts/<%= post.id %>?_method=DELETE" method="post"> | ||
| <button class="text-red-500 hover:text-red-700 transition-colors duration-300"> | ||
| <i class="fa-solid fa-trash fa-xl"></i> | ||
| </button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <% } %> | ||
| </div> | ||
|
|
||
| <div class="fixed bottom-6 right-6"> | ||
| <a href="/posts/new" class="bg-green-500 text-white rounded-full p-4 shadow-lg"> | ||
| <i class="fa-regular fa-square-plus fa-2xl"></i> | ||
| <div class="fixed bottom-8 right-8"> | ||
| <a href="/posts/new" | ||
| class="bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition-colors duration-300"> | ||
| <i class="fa-regular fa-square-plus fa-xl"></i> | ||
| </a> | ||
| </div> | ||
| </body> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |