| <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Pinterest Clone</title></head> | |
| <body> | |
| <div class="min-h-screen flex items-center justify-center"> | |
| <div class="container mx-auto p-4"> | |
| <div class="box-border p-4 bg-base-200 rounded-lg"> | |
| <div class="text-lg font-bold text-gray-700">Pinterest Clone</div> | |
| <div class="mt-2"> | |
| <p class="text-gray-500">This is a working clone of Pinterest that allows anonymous posting without needing authentication or registration.</p> | |
| </div> | |
| <form action="/api/pin" method="POST" class="my-4"> | |
| <label class="text-gray-700 block">Title</label> | |
| <input type="text" class="border-gray-300 rounded-full p-2 mt-2" name="title" /> | |
| <label class="text-gray-700 block">Description</label> | |
| <textarea class="border-gray-300 rounded-lg p-2 mt-2" rows="4" name="description"></textarea> | |
| <input type="submit" class="p-2 pl-4 pr-4 bg-primary-500 text-white rounded-lg mt-4" value="Create Pin" /> | |
| </form> | |
| <div class="mt-4"> | |
| <h2 class="text-lg font-bold text-gray-700">Pins</h2> | |
| <div class="mt-2 grid gap-2"> | |
| <div class="inline-block bg-gray-100 rounded-lg p-2 mt-2"> | |
| <div class="text-lg font-bold text-gray-700"><a href="#">My Pin #1</a></div> | |
| <div class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> | |
| </div> | |
| <div class="inline-block bg-gray-100 rounded-lg p-2 mt-2"> | |
| <div class="text-lg font-bold text-gray-700"><a href="#">My Pin #2</a></div> | |
| <div class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> | |
| </div> | |
| <div class="inline-block bg-gray-100 rounded-lg p-2 mt-2"> | |
| <div class="text-lg font-bold text-gray-700"><a href="#">My Pin #3</a></div> | |
| <div class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body></html> |