geoshapoh
/
hokoritemp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HokoriTemp</title>

<!-- SVG Favicon -->
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">

<link rel="stylesheet" href="/static/css/styles.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
    (function() {
        const savedTheme = localStorage.getItem('theme') || 'light';
        if (savedTheme === 'dark') {
            document.documentElement.classList.add('dark');
        }
    })();
    tailwind.config = {
        darkMode: 'class',
        theme: {
            extend: {
                animation: {
                    'fade-in': 'fadeIn 0.3s ease-in-out',
                    'slide-up': 'slideUp 0.3s ease-out',
                    'pulse-slow': 'pulse 2s infinite'
                }
            }
        }
    }
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen transition-colors duration-300">
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- Header with Theme Toggle -->
    <div class="flex justify-between items-center mb-8">
        <div class="text-center flex-1">
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">HokoriTemp</h1>
            <p class="text-gray-600 dark:text-gray-400">Temporarily upload files with automatic expiration</p>
        </div>
        
        <!-- Theme Toggle Button -->
        <button id="themeToggle" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors ml-4">
            <!-- Sun Icon (Light Mode) -->
            <svg id="sunIcon" class="w-5 h-5 text-gray-800 dark:text-gray-200 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
            </svg>
            <!-- Moon Icon (Dark Mode) -->
            <svg id="moonIcon" class="w-5 h-5 text-gray-800 dark:text-gray-200 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
            </svg>
        </button>
    </div>

    <!-- Upload Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8 transition-colors duration-300">
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Upload New File</h2>
        
        <!-- File Upload Form -->
        <form id="uploadForm" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Select File
                </label>
                
                <!-- Compact File Input -->
                <div class="space-y-3">
                    <!-- File Selection Area -->
                    <div class="flex items-center justify-center w-full">
                        <label for="file-upload" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors">
                            <div class="flex flex-col items-center justify-center pt-3 pb-3">
                                <svg class="w-8 h-8 mb-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                                </svg>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    <span class="font-semibold">Click to upload</span> or drag and drop
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Max {{ max_file_size }}MB</p>
                            </div>
                            <input id="file-upload" type="file" class="hidden" accept="*/*" />
                        </label>
                    </div>
                    
                    <!-- Selected File Info -->
                    <div id="file-info" class="hidden bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <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>
                                </svg>
                                <div>
                                    <p id="file-name" class="text-sm font-medium text-blue-900 dark:text-blue-100"></p>
                                    <p id="file-size" class="text-xs text-blue-700 dark:text-blue-300"></p>
                                </div>
                            </div>
                            <button type="button" id="clear-file" class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 text-sm font-medium">
                                Remove
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <label for="duration" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    File Duration
                </label>
                <select id="duration" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    <option value="1">1 Hour</option>
                    <option value="6">6 Hours</option>
                    <option value="24" selected>24 Hours</option>
                    <option value="72">3 Days</option>
                    <option value="168">1 Week</option>
                </select>
            </div>

            <button type="submit" id="uploadBtn" class="w-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">
                <span id="uploadBtnText">Upload File</span>
            </button>
        </form>

        <!-- Upload Progress -->
        <div id="uploadProgress" class="mt-4 hidden">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm text-gray-600 dark:text-gray-400">Uploading...</span>
                <span id="progressPercent" class="text-sm text-gray-600 dark:text-gray-400">0%</span>
            </div>
            <div class="bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                <div id="progressBar" class="bg-blue-600 dark:bg-blue-500 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
            <div class="flex items-center justify-between mt-1">
                <span id="uploadSpeed" class="text-xs text-gray-500 dark:text-gray-400"></span>
                <span id="timeRemaining" class="text-xs text-gray-500 dark:text-gray-400"></span>
            </div>
        </div>
    </div>

    <!-- Files List Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Your Files</h2>
            <button id="refreshBtn" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-sm font-medium">
                Refresh
            </button>
        </div>
        
        <div id="filesList" class="space-y-3">
            <!-- Files will be loaded here -->
        </div>
        
        <div id="noFiles" class="text-center py-8 text-gray-500 dark:text-gray-400">
            <svg class="w-12 h-12 mx-auto mb-3 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <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>
            </svg>
            <p>No files uploaded yet</p>
        </div>
    </div>
</div>

<!-- Toast Notification -->
<div id="toast" class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 z-50">
    <p id="toastMessage"></p>
</div>
<!-- Tooltip personalizado -->
<!-- El tooltip se genera dinámicamente por JS -->
<script src="/static/js/main.js"></script>

<!-- Modal de confirmación de eliminación -->
<div id="deleteModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-40 hidden">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 w-full max-w-sm animate-fade-in">
    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Delete file?</h3>
    <p class="text-gray-600 dark:text-gray-300 mb-6">Are you sure you want to delete this file? This action cannot be undone.</p>
    <div class="flex justify-end gap-3">
      <button id="cancelDeleteBtn" class="px-4 py-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Cancel</button>
      <button id="confirmDeleteBtn" class="px-4 py-2 rounded-md bg-red-600 text-white hover:bg-red-700 transition-colors">Delete</button>
    </div>
  </div>
</div>
<script>
    window.maxFileSizeMB = {{ max_file_size }};
</script>
</body>
</html>