list_notes.tmpl 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!DOCTYPE html>
  2. <html lang="ro">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Notițe</title>
  6. <script src="https://cdn.tailwindcss.com"></script>
  7. </head>
  8. <body class="bg-[#0b0d12] text-white font-sans min-h-screen">
  9. <div class="max-w-5xl mx-auto px-6 py-10">
  10. <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-10">
  11. <div>
  12. <h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white">
  13. Lista notițelor
  14. </h1>
  15. <p class="text-gray-400 mt-2 text-sm md:text-base">
  16. Explorează folderele și deschide sau editează notițele.
  17. </p>
  18. </div>
  19. <a href="/index.html"
  20. class="inline-flex items-center justify-center rounded-xl border border-[#313846] bg-[#171b22] px-4 py-3 text-sm font-semibold text-gray-200 transition hover:bg-[#20252f] hover:text-white">
  21. Notă nouă
  22. </a>
  23. </div>
  24. <div class="rounded-2xl border border-[#262c36] bg-[#11151b] p-6 md:p-8 shadow-2xl">
  25. {{template "folder" .}}
  26. </div>
  27. </div>
  28. </body>
  29. </html>
  30. {{define "folder"}}
  31. <div class="ml-0 md:ml-4 mb-6">
  32. <div class="rounded-2xl border border-[#2a3140] bg-[#151922] overflow-hidden shadow-lg">
  33. <div class="px-5 py-4 border-b border-[#252b37] bg-[#181d27]">
  34. <h2 class="text-lg md:text-xl font-bold text-[#b899ff] break-words flex items-center gap-2">
  35. 📁 {{.Nume}}
  36. </h2>
  37. </div>
  38. <div class="p-4 md:p-5">
  39. {{if .Fisiere}}
  40. <div class="space-y-3 mb-4">
  41. {{range .Fisiere}}
  42. <div
  43. class="flex items-center justify-between rounded-xl border border-[#323949] bg-[#1a1f29] px-4 py-3 transition hover:border-[#7b58ad] hover:bg-[#202634]">
  44. <a href="/notes/?note={{.Path}}"
  45. class="flex items-center gap-3 text-gray-200 hover:text-white font-medium">
  46. 📄 {{.Nume}}
  47. </a>
  48. <a href="/edit/?note={{.Path}}"
  49. class="text-xs px-3 py-1 rounded-lg bg-[#2a2f3a] text-gray-300 hover:bg-[#7b58ad] hover:text-white transition">
  50. Edit
  51. </a>
  52. </div>
  53. {{end}}
  54. </div>
  55. {{end}}
  56. {{if .Subfoldere}}
  57. <div class="mt-4 space-y-4 border-l border-[#2b3140] pl-4">
  58. {{range .Subfoldere}}
  59. {{template "folder" .}}
  60. {{end}}
  61. </div>
  62. {{end}}
  63. </div>
  64. </div>
  65. </div>
  66. {{end}}