347 lines
24 KiB
HTML
347 lines
24 KiB
HTML
<!-- === FILE: app/templates/dashboard.html === -->
|
|
{% extends "base.html" %}
|
|
|
|
{% block title %}Dashboard - Cloud Drive{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
|
<!-- Top Section with Stats Cards -->
|
|
<div class="mb-10">
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-8">
|
|
<div>
|
|
<h1 class="text-4xl font-bold text-white mb-3 bg-gradient-to-r from-white to-[#94a3b8] bg-clip-text text-transparent">
|
|
Hello, {{ user.name }} 👋
|
|
</h1>
|
|
<p class="text-[#64748b] text-lg">Manage your files in the cloud</p>
|
|
</div>
|
|
<button id="open-upload-modal" class="bg-gradient-to-r from-[#6366f1] to-[#8b5cf6] hover:from-[#4f46e5] hover:to-[#7c3aed] text-white font-semibold px-8 py-4 rounded-xl transition-all duration-300 shadow-xl shadow-[#6366f1]/20 hover:shadow-2xl hover:shadow-[#6366f1]/30 transform hover:scale-105 flex items-center space-x-3 group">
|
|
<svg class="w-6 h-6 group-hover:rotate-180 transition-transform duration-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"/>
|
|
</svg>
|
|
<span>Upload File</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="bg-gradient-to-br from-[#1a1d27] to-[#0f1117] rounded-2xl p-6 border border-[#2a2d3e] hover:border-[#6366f1] transition-all duration-300 shadow-lg hover:shadow-[#6366f1]/10">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="p-3 bg-[#6366f1]/10 rounded-xl">
|
|
<svg class="w-8 h-8 text-[#6366f1]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-3xl font-bold text-white">{{ files|length }}</p>
|
|
<p class="text-[#64748b] text-sm">Total Files</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-[#1a1d27] to-[#0f1117] rounded-2xl p-6 border border-[#2a2d3e] hover:border-[#8b5cf6] transition-all duration-300 shadow-lg hover:shadow-[#8b5cf6]/10">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="p-3 bg-[#8b5cf6]/10 rounded-xl">
|
|
<svg class="w-8 h-8 text-[#8b5cf6]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-3xl font-bold text-white">∞</p>
|
|
<p class="text-[#64748b] text-sm">Storage Available</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-[#1a1d27] to-[#0f1117] rounded-2xl p-6 border border-[#2a2d3e] hover:border-[#22c55e] transition-all duration-300 shadow-lg hover:shadow-[#22c55e]/10">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="p-3 bg-[#22c55e]/10 rounded-xl">
|
|
<svg class="w-8 h-8 text-[#22c55e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<p class="text-3xl font-bold text-white">100%</p>
|
|
<p class="text-[#64748b] text-sm">Secure Storage</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Files Grid -->
|
|
{% if files %}
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-white mb-6 flex items-center">
|
|
<svg class="w-6 h-6 mr-3 text-[#6366f1]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
|
|
</svg>
|
|
Your Files
|
|
</h2>
|
|
</div>
|
|
|
|
<div id="files-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{% for file in files %}
|
|
<div class="file-card group bg-gradient-to-br from-[#1a1d27] to-[#14161f] rounded-2xl p-6 border border-[#2a2d3e] hover:border-[#6366f1] transition-all duration-300 transform hover:scale-105 hover:shadow-2xl hover:shadow-[#6366f1]/20 cursor-pointer" data-file-id="{{ file.id }}">
|
|
<!-- File Icon and Name -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center justify-center w-16 h-16 mb-4 rounded-2xl bg-gradient-to-br {% if file.category == 'image' %}from-[#ec4899] to-[#f43f5e]{% elif file.category == 'pdf' %}from-[#ef4444] to-[#dc2626]{% elif file.category == 'video' %}from-[#8b5cf6] to-[#7c3aed]{% elif file.category == 'audio' %}from-[#6366f1] to-[#4f46e5]{% elif file.category == 'archive' %}from-[#f59e0b] to-[#d97706]{% elif file.category == 'document' %}from-[#3b82f6] to-[#2563eb]{% else %}from-[#64748b] to-[#475569]{% endif %} shadow-lg group-hover:shadow-xl transition-all duration-300">
|
|
<span class="text-4xl">
|
|
{% if file.category == 'image' %}🖼️
|
|
{% elif file.category == 'pdf' %}📄
|
|
{% elif file.category == 'video' %}🎬
|
|
{% elif file.category == 'audio' %}🎵
|
|
{% elif file.category == 'archive' %}📦
|
|
{% elif file.category == 'document' %}📝
|
|
{% else %}📎
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-white font-semibold text-lg mb-2 truncate group-hover:text-[#6366f1] transition-colors" title="{{ file.original_name }}">
|
|
{{ file.original_name }}
|
|
</p>
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-[#64748b]">{{ file.size_formatted }}</span>
|
|
<span class="text-[#475569]">{{ file.date_formatted }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="space-y-2">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<a href="{{ url_for('files.download', file_id=file.id) }}" class="action-btn flex items-center justify-center bg-[#6366f1] hover:bg-[#4f46e5] text-white text-sm font-medium px-3 py-2.5 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
|
|
</svg>
|
|
Download
|
|
</a>
|
|
<button onclick="shareFile({{ file.id }})" class="action-btn flex items-center justify-center bg-[#22c55e] hover:bg-[#16a34a] text-white text-sm font-medium px-3 py-2.5 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
|
|
</svg>
|
|
Share
|
|
</button>
|
|
</div>
|
|
<div class="grid {% if file.category in ['image', 'pdf'] %}grid-cols-2{% else %}grid-cols-1{% endif %} gap-2">
|
|
{% if file.category in ['image', 'pdf'] %}
|
|
<button onclick="previewFile({{ file.id }})" class="action-btn flex items-center justify-center bg-[#8b5cf6] hover:bg-[#7c3aed] text-white text-sm font-medium px-3 py-2.5 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
Preview
|
|
</button>
|
|
{% endif %}
|
|
<button onclick="confirmDelete({{ file.id }}, '{{ file.original_name|replace("'", "\\'") }}')" class="action-btn flex items-center justify-center bg-[#ef4444] hover:bg-[#dc2626] text-white text-sm font-medium px-3 py-2.5 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
|
</svg>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<!-- Empty State -->
|
|
<div class="text-center py-20">
|
|
<div class="mb-8 relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-32 h-32 bg-[#6366f1] opacity-20 rounded-full blur-3xl animate-pulse"></div>
|
|
</div>
|
|
<svg class="w-32 h-32 mx-auto text-[#475569] relative z-10" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z"/>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-3xl font-bold text-white mb-3">No files yet</h2>
|
|
<p class="text-[#64748b] text-lg mb-8 max-w-md mx-auto">Start uploading your files to the cloud. Your data is encrypted and secure.</p>
|
|
<button onclick="document.getElementById('open-upload-modal').click()" class="bg-gradient-to-r from-[#6366f1] to-[#8b5cf6] hover:from-[#4f46e5] hover:to-[#7c3aed] text-white font-semibold px-8 py-4 rounded-xl transition-all duration-300 shadow-xl shadow-[#6366f1]/20 hover:shadow-2xl hover:shadow-[#6366f1]/30 transform hover:scale-105 inline-flex items-center space-x-2">
|
|
<svg class="w-6 h-6" 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"/>
|
|
</svg>
|
|
<span>Upload Your First File</span>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Upload Modal -->
|
|
<div id="upload-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md hidden items-center justify-center z-50 p-4">
|
|
<div class="bg-gradient-to-br from-[#1a1d27] via-[#1a1d27] to-[#0f1117] rounded-3xl p-8 max-w-lg w-full mx-4 border border-[#2a2d3e] shadow-2xl transform transition-all duration-300">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-3xl font-bold text-white flex items-center">
|
|
<svg class="w-8 h-8 mr-3 text-[#6366f1]" 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"/>
|
|
</svg>
|
|
Upload File
|
|
</h2>
|
|
<button id="close-upload-modal" class="text-[#64748b] hover:text-white transition-colors">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Drop Zone -->
|
|
<div id="drop-zone" class="border-2 border-dashed border-[#2a2d3e] hover:border-[#6366f1] rounded-2xl p-12 text-center cursor-pointer transition-all duration-300 mb-6 bg-[#0f1117]/50 hover:bg-[#6366f1]/5 group">
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div class="w-24 h-24 bg-[#6366f1] opacity-0 group-hover:opacity-20 rounded-full blur-2xl transition-opacity duration-300"></div>
|
|
</div>
|
|
<svg class="w-16 h-16 mx-auto text-[#64748b] group-hover:text-[#6366f1] mb-4 relative z-10 transition-all duration-300 group-hover:scale-110" 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"/>
|
|
</svg>
|
|
</div>
|
|
<p class="text-white font-semibold text-lg mb-2">Drag & drop file here</p>
|
|
<p class="text-[#64748b] mb-3">or click to browse</p>
|
|
<p class="text-[#475569] text-sm">Maximum file size: 100MB</p>
|
|
<input type="file" id="file-input" class="hidden">
|
|
</div>
|
|
|
|
<!-- Selected File Display -->
|
|
<div id="selected-file" class="hidden mb-6 p-4 bg-[#6366f1]/10 border border-[#6366f1]/30 rounded-xl">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="p-2 bg-[#6366f1] rounded-lg">
|
|
<svg class="w-5 h-5 text-white" 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"/>
|
|
</svg>
|
|
</div>
|
|
<p class="text-white font-medium flex-1 truncate" id="selected-file-name"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div id="progress-container" class="hidden mb-6">
|
|
<div class="w-full bg-[#2a2d3e] rounded-full h-3 overflow-hidden shadow-inner">
|
|
<div id="progress-bar" class="bg-gradient-to-r from-[#6366f1] to-[#8b5cf6] h-3 rounded-full transition-all duration-300 shadow-lg" style="width: 0%"></div>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-3">
|
|
<p class="text-[#64748b] text-sm" id="progress-text">Uploading...</p>
|
|
<p class="text-[#6366f1] text-sm font-semibold" id="progress-percent">0%</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div id="upload-error" class="hidden mb-6 p-4 bg-[#ef4444]/10 border border-[#ef4444] rounded-xl">
|
|
<div class="flex items-start space-x-3">
|
|
<svg class="w-5 h-5 text-[#ef4444] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<p class="text-[#ef4444] text-sm flex-1" id="upload-error-text"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex space-x-3">
|
|
<button id="upload-btn" class="flex-1 bg-gradient-to-r from-[#6366f1] to-[#8b5cf6] hover:from-[#4f46e5] hover:to-[#7c3aed] text-white font-semibold py-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-lg flex items-center justify-center space-x-2" disabled>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
|
|
</svg>
|
|
<span>Upload</span>
|
|
</button>
|
|
<button id="cancel-upload" class="flex-1 bg-[#2a2d3e] hover:bg-[#3a3d4e] text-white font-semibold py-4 rounded-xl transition-all duration-300">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Share Modal -->
|
|
<div id="share-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md hidden items-center justify-center z-50 p-4">
|
|
<div class="bg-gradient-to-br from-[#1a1d27] via-[#1a1d27] to-[#0f1117] rounded-3xl p-8 max-w-md w-full mx-4 border border-[#2a2d3e] shadow-2xl transform transition-all duration-300">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-3xl font-bold text-white flex items-center">
|
|
<svg class="w-8 h-8 mr-3 text-[#22c55e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
|
|
</svg>
|
|
Share File
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="text-[#64748b] text-sm font-medium mb-2 block">Share Link</label>
|
|
<div class="relative">
|
|
<input type="text" id="share-url" readonly class="w-full bg-[#0f1117] border border-[#2a2d3e] text-white px-4 py-4 pr-12 rounded-xl focus:outline-none focus:border-[#22c55e] transition-colors font-mono text-sm">
|
|
<button onclick="document.getElementById('copy-link-btn').click()" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 hover:bg-[#2a2d3e] rounded-lg transition-colors">
|
|
<svg class="w-5 h-5 text-[#64748b] hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2 mb-6 p-4 bg-[#22c55e]/10 border border-[#22c55e]/30 rounded-xl">
|
|
<svg class="w-5 h-5 text-[#22c55e] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<p class="text-[#22c55e] text-sm">Valid for 7 days</p>
|
|
</div>
|
|
|
|
<div id="copy-feedback" class="hidden mb-6 p-4 bg-[#22c55e]/10 border border-[#22c55e] rounded-xl">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-[#22c55e]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<p class="text-[#22c55e] text-sm font-medium">Link copied to clipboard!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-3">
|
|
<button id="copy-link-btn" class="flex-1 bg-gradient-to-r from-[#22c55e] to-[#16a34a] hover:from-[#16a34a] hover:to-[#15803d] text-white font-semibold py-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
</svg>
|
|
<span>Copy Link</span>
|
|
</button>
|
|
<button id="close-share-modal" class="flex-1 bg-[#2a2d3e] hover:bg-[#3a3d4e] text-white font-semibold py-4 rounded-xl transition-all duration-300">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirm Modal -->
|
|
<div id="delete-modal" class="fixed inset-0 bg-black/80 backdrop-blur-md hidden items-center justify-center z-50 p-4">
|
|
<div class="bg-gradient-to-br from-[#1a1d27] via-[#1a1d27] to-[#0f1117] rounded-3xl p-8 max-w-md w-full mx-4 border border-[#2a2d3e] shadow-2xl transform transition-all duration-300">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-3xl font-bold text-white flex items-center">
|
|
<svg class="w-8 h-8 mr-3 text-[#ef4444]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
Delete File
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="mb-6 p-4 bg-[#ef4444]/10 border border-[#ef4444]/30 rounded-xl">
|
|
<p class="text-[#94a3b8] leading-relaxed">
|
|
Are you sure you want to delete <span id="delete-file-name" class="text-white font-semibold"></span>?
|
|
</p>
|
|
<p class="text-[#ef4444] text-sm mt-2 flex items-center">
|
|
<svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
|
</svg>
|
|
This action cannot be undone.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex space-x-3">
|
|
<button id="confirm-delete-btn" class="flex-1 bg-gradient-to-r from-[#ef4444] to-[#dc2626] hover:from-[#dc2626] hover:to-[#b91c1c] text-white font-semibold py-4 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
|
</svg>
|
|
<span>Delete Forever</span>
|
|
</button>
|
|
<button id="cancel-delete" class="flex-1 bg-[#2a2d3e] hover:bg-[#3a3d4e] text-white font-semibold py-4 rounded-xl transition-all duration-300">
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
|
|
{% endblock %}
|