| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- <!DOCTYPE html>
- <html lang="ro">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>MyNotes</title>
- <script src="https://cdn.tailwindcss.com"></script>
- </head>
- <body class="bg-[#0b0d12] text-white font-sans">
- <div class="min-h-screen flex items-center justify-center p-6">
- <div class="w-full max-w-2xl">
- <!-- header -->
- <div class="mb-6 flex items-center justify-between">
- <div>
- <h1 class="text-3xl font-bold tracking-tight text-white">MyNotes</h1>
- <p class="text-sm text-gray-400 mt-1">Creează și organizează notițe în foldere locale</p>
- </div>
- <a href="/list_notes"
- class="inline-flex items-center gap-2 rounded-lg border border-[#3a3f4b] bg-[#171a21] px-4 py-2 text-sm font-semibold text-gray-200 transition hover:bg-[#20242d] hover:text-white">
- Vezi notițele
- </a>
- </div>
- <!-- card principal -->
- <div class="rounded-2xl border border-[#2a2f3a] bg-[#13161d] shadow-2xl overflow-hidden">
- <!-- top bar -->
- <div class="border-b border-[#2a2f3a] bg-[#161a22] px-6 py-4 flex items-center justify-between">
- <div>
- <h2 class="text-xl font-bold text-[#b191ff]">Notă Nouă</h2>
- <p class="text-sm text-gray-400 mt-1">Salvare în arhiva locală</p>
- </div>
- <div class="flex items-center gap-2 text-xs text-gray-400">
- <span class="h-2 w-2 rounded-full bg-green-500"></span>
- Ready
- </div>
- </div>
- <!-- form -->
- <div class="p-6">
- <form class="space-y-6" method="POST" action="api/save_note">
- <div>
- <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
- Folder
- </label>
- <input type="text" name="director" placeholder="ex: scoala/istorie"
- class="w-full rounded-xl border border-[#323847] bg-[#1a1f29] px-4 py-3 text-sm text-gray-200 outline-none transition placeholder:text-gray-500 focus:border-[#8d6bdb] focus:ring-2 focus:ring-[#8d6bdb]/30">
- <p class="mt-2 text-xs text-gray-500">Alege folderul în care va fi salvată notița.</p>
- </div>
- <div>
- <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
- Titlu Fișier
- </label>
- <input type="text" name="titlu" placeholder="ex: Plan de idei 2026"
- class="w-full rounded-xl border border-[#323847] bg-[#1a1f29] px-4 py-3 text-sm text-gray-200 outline-none transition placeholder:text-gray-500 focus:border-[#8d6bdb] focus:ring-2 focus:ring-[#8d6bdb]/30">
- </div>
- <div>
- <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
- Conținut Notiță
- </label>
- <textarea rows="10" name="notita" placeholder="Începe să scrii..."
- class="w-full rounded-xl border border-[#323847] bg-[#1a1f29] px-4 py-3 text-sm text-gray-200 outline-none transition placeholder:text-gray-500 focus:border-[#8d6bdb] focus:ring-2 focus:ring-[#8d6bdb]/30 resize-none"></textarea>
- </div>
- <div class="flex flex-col sm:flex-row gap-3">
- <button type="submit"
- class="flex-1 rounded-xl bg-[#7b58ad] px-5 py-3 text-sm font-bold text-white transition hover:bg-[#9974d0] shadow-lg shadow-purple-900/20">
- Creează Notă
- </button>
- <a href="/list_notes"
- class="flex-1 rounded-xl border border-[#3a3f4b] bg-[#171a21] px-5 py-3 text-center text-sm font-semibold text-gray-200 transition hover:bg-[#20242d] hover:text-white">
- Deschide lista notițelor
- </a>
- </div>
- </form>
- </div>
- <!-- footer -->
- <div class="border-t border-[#2a2f3a] bg-[#12151b] px-6 py-4 flex justify-between items-center text-[11px] uppercase tracking-widest text-gray-500">
- <span>Status: Ready</span>
- <span class="flex items-center gap-2">
- <span class="w-2 h-2 rounded-full bg-green-500"></span>
- Linked
- </span>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
|