1
0

myfiles.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>hokoritemp</title>
  7. <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
  8. <script src="https://cdn.tailwindcss.com"></script>
  9. <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
  10. </head>
  11. <body class="bg-gray-50 min-h-screen flex items-center justify-center">
  12. <div class="container mx-auto px-4 py-8 w-full max-w-4xl">
  13. <!-- Main Container -->
  14. <div class="max-w-4xl mx-auto">
  15. <div class="space-y-8">
  16. <!-- Links Container -->
  17. <div class="bg-white rounded-lg shadow-lg p-6">
  18. <h2 class="text-xl font-semibold text-gray-800 mb-4">Mis Enlaces Temporales</h2>
  19. <div id="linksContainer" class="space-y-4">
  20. <!-- Links will be loaded here -->
  21. </div>
  22. <!-- Empty State -->
  23. <div id="emptyState" class="hidden text-center py-12">
  24. <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  25. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
  26. </svg>
  27. <h3 class="mt-2 text-sm font-medium text-gray-900">No hay enlaces guardados</h3>
  28. <p class="mt-1 text-sm text-gray-500">Los enlaces de los archivos que subas aparecerán aquí.</p>
  29. <div class="mt-6">
  30. <a href="/" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
  31. Subir mi primer archivo
  32. </a>
  33. </div>
  34. </div>
  35. <!-- Loading State -->
  36. <div id="loadingState" class="text-center py-12">
  37. <svg class="animate-spin mx-auto h-8 w-8 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  38. <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  39. <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  40. </svg>
  41. <p class="mt-2 text-sm text-gray-500">Cargando enlaces...</p>
  42. </div>
  43. </div>
  44. <!-- Empty State for Result Section -->
  45. <div id="emptyResultSection" class="hidden bg-gray-50 rounded-lg p-8 text-center">
  46. <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  47. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
  48. </svg>
  49. <h3 class="mt-2 text-sm font-medium text-gray-900">Listo para ver enlaces</h3>
  50. <p class="mt-1 text-sm text-gray-500">Tus enlaces aparecerán aquí</p>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. <!-- Modal de Confirmación -->
  56. <div id="confirmModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
  57. <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
  58. <div class="mt-3 text-center">
  59. <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
  60. <svg class="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  61. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
  62. </svg>
  63. </div>
  64. <h3 class="text-lg font-medium text-gray-900 mt-4">Confirmar eliminación</h3>
  65. <div class="mt-2 px-7 py-3">
  66. <p class="text-sm text-gray-500">
  67. ¿Estás seguro de que quieres eliminar este archivo permanentemente? Esta acción no se puede deshacer y el archivo se borrará completamente del servidor.
  68. </p>
  69. </div>
  70. <div class="items-center px-4 py-3">
  71. <button id="confirmDeleteBtn" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md w-24 mr-2 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">
  72. Eliminar
  73. </button>
  74. <button id="cancelDeleteBtn" class="px-4 py-2 bg-gray-500 text-white text-base font-medium rounded-md w-24 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500">
  75. Cancelar
  76. </button>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <!-- Floating Action Button -->
  82. <div class="fixed bottom-6 right-6 z-50">
  83. <a href="/" class="bg-blue-600 text-white w-14 h-14 rounded-full flex items-center justify-center hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-lg transition-all duration-200 hover:scale-110" title="Volver a subir archivos">
  84. <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  85. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
  86. </svg>
  87. </a>
  88. </div>
  89. <script src="{{ url_for('static', filename='view.js') }}"></script>
  90. </body>
  91. </html>