| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Protected Note | Notepad App</title>
|
|
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
| <style>
|
| .error-effect { animation: shake 0.5s; }
|
| @keyframes shake {
|
| 0%, 100% { transform: translateX(0); }
|
| 20%, 60% { transform: translateX(-10px); }
|
| 40%, 80% { transform: translateX(10px); }
|
| }
|
| </style>
|
| </head>
|
| <body class="bg-white min-h-screen">
|
| <div class="container mx-auto px-4 py-8 sm:py-12">
|
| <div class="max-w-md mx-auto bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-8 {% if error_effect %}error-effect{% endif %}">
|
| <h1 class="text-xl font-bold text-center text-black mb-4">Enter Password</h1>
|
| {% if error %}
|
| <p class="text-red-500 text-center mb-4">{{ error }}</p>
|
| {% endif %}
|
| <form action="/{{ slug }}/verify" method="post" class="space-y-6">
|
| <div>
|
| <label for="password" class="block text-sm font-medium text-black mb-2">Password</label>
|
| <input type="password" id="password" name="password" class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-black focus:border-black text-base" placeholder="Password" required>
|
| </div>
|
| <div class="mt-8">
|
| <button type="submit" class="w-full flex justify-center py-3 px-4 border border-gray-800 rounded-lg shadow-sm text-base font-medium text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200">Unlock Note</button>
|
| </div>
|
| </form>
|
| </div>
|
| </div>
|
| </body>
|
| </html>
|
|
|
