index.html 4.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html lang="ro">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="icon" type="image/webp" href="/favicon.webp">
  7. <title>MyNotes</title>
  8. <script src="https://cdn.tailwindcss.com"></script>
  9. </head>
  10. <body class="bg-[#0b0d12] text-white font-sans">
  11. <div class="min-h-screen flex items-center justify-center p-6">
  12. <div class="w-full max-w-2xl">
  13. <!-- header -->
  14. <div class="mb-6 flex items-center justify-between">
  15. <div>
  16. <h1 class="text-3xl font-bold tracking-tight text-white">MyNotes</h1>
  17. <p class="text-sm text-gray-400 mt-1">Creează și organizează notițe în foldere locale</p>
  18. </div>
  19. <a href="/list_notes"
  20. 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">
  21. Vezi notițele
  22. </a>
  23. </div>
  24. <!-- card principal -->
  25. <div class="rounded-2xl border border-[#2a2f3a] bg-[#13161d] shadow-2xl overflow-hidden">
  26. <!-- top bar -->
  27. <div class="border-b border-[#2a2f3a] bg-[#161a22] px-6 py-4 flex items-center justify-between">
  28. <div>
  29. <h2 class="text-xl font-bold text-[#b191ff]">Notă Nouă</h2>
  30. <p class="text-sm text-gray-400 mt-1">Salvare în arhiva locală</p>
  31. </div>
  32. <div class="flex items-center gap-2 text-xs text-gray-400">
  33. <span class="h-2 w-2 rounded-full bg-green-500"></span>
  34. Ready
  35. </div>
  36. </div>
  37. <!-- form -->
  38. <div class="p-6">
  39. <form class="space-y-6" method="POST" action="api/save_note">
  40. <div>
  41. <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
  42. Folder
  43. </label>
  44. <input type="text" name="director" placeholder="ex: scoala/istorie"
  45. 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">
  46. <p class="mt-2 text-xs text-gray-500">Alege folderul în care va fi salvată notița.</p>
  47. </div>
  48. <div>
  49. <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
  50. Titlu Fișier
  51. </label>
  52. <input type="text" name="titlu" placeholder="ex: Plan de idei 2026"
  53. 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">
  54. </div>
  55. <div>
  56. <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
  57. Conținut Notiță
  58. </label>
  59. <textarea rows="10" name="notita" placeholder="Începe să scrii..."
  60. 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>
  61. </div>
  62. <div class="flex flex-col sm:flex-row gap-3">
  63. <button type="submit"
  64. 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">
  65. Creează Notă
  66. </button>
  67. <a href="/list_notes"
  68. 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">
  69. Deschide lista notițelor
  70. </a>
  71. </div>
  72. </form>
  73. </div>
  74. <!-- footer -->
  75. <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">
  76. <span>Status: Ready</span>
  77. <span class="flex items-center gap-2">
  78. <span class="w-2 h-2 rounded-full bg-green-500"></span>
  79. Linked
  80. </span>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </body>
  86. </html>