<!DOCTYPE html>

<html lang="en">

<head>
  <title>Site Fain </title>
  <script src="https://cdn.tailwindcss.com"></script>

</head>

<body>
  <div class="min-h-screen bg-[#0f0f0f] flex items-center justify-center p-6 font-sans">

    <div class="w-full max-w-md bg-[#1a1a1a] border border-[#303030] rounded-xl shadow-2xl p-8">

      <div class="mb-8">
        <h2 class="text-[#9974d0] text-2xl font-bold tracking-tight">Notă Nouă</h2>
        <p class="text-gray-500 text-sm mt-1">Salvare în arhiva locală .md</p>
      </div>

      <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 bg-[#202020] border border-[#3e3e3e] text-gray-200 text-sm rounded-lg focus:ring-2 focus:ring-[#7b58ad] focus:border-transparent outline-none p-3 transition-all placeholder:text-gray-600">
        </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 bg-[#202020] border border-[#3e3e3e] text-gray-200 text-sm rounded-lg focus:ring-2 focus:ring-[#7b58ad] focus:border-transparent outline-none p-3 transition-all placeholder:text-gray-600">
        </div>

        <div>
          <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Conținut Notita</label>
          <textarea rows="5" name="notita" placeholder="Începe să scrii..."
            class="w-full bg-[#202020] border border-[#3e3e3e] text-gray-200 text-sm rounded-lg focus:ring-2 focus:ring-[#7b58ad] focus:border-transparent outline-none p-3 transition-all placeholder:text-gray-600 resize-none"></textarea>
        </div>

        <button type="submit"
          class="w-full bg-[#7b58ad] hover:bg-[#9974d0] text-white font-bold py-3 px-4 rounded-lg transition-colors duration-200 shadow-lg shadow-purple-900/20">
          Creează Notă
        </button>
      </form>

      <div
        class="mt-6 pt-6 border-t border-[#303030] flex justify-between items-center text-[10px] text-gray-600 uppercase tracking-widest">
        <span>Status: Ready</span>
        <span class="flex items-center gap-1">
          <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Linked
        </span>
      </div>

    </div>
  </div>

</body>

</html>