aditya/AWS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code from github to self hosted with git tea in AWS

Browse Source
This commit is contained in:
ADITYANAIR01
2026-03-20 12:01:02 +05:30
commit cf79af8f65
349 changed files with 4761 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
mini-dropbox/CODE/app/templates/base.html Normal file
View File

@@ -0,0 +1,97 @@
<!-- === FILE: app/templates/base.html === -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Cloud Drive{% endblock %}</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
body {
font-family: 'DM Sans', sans-serif;
background-color: #0f1117;
color: #f1f5f9;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Space Grotesk', sans-serif;
}
</style>
</head>
<body class="min-h-screen">
<!-- Navbar -->
{% if session.user %}
<nav class="bg-[#1a1d27] border-b border-[#2a2d3e]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Left: Logo and Brand -->
<div class="flex items-center space-x-3">
<svg class="w-8 h-8 text-[#6366f1]" 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>
<span class="text-xl font-bold text-white">Cloud Drive</span>
</div>
<!-- Right: User info and logout -->
<div class="flex items-center space-x-4">
<img src="{{ session.user.profile_picture }}" alt="{{ session.user.name }}" class="w-8 h-8 rounded-full border-2 border-[#6366f1]">
<span class="text-sm text-[#94a3b8]">{{ session.user.name }}</span>
<a href="{{ url_for('auth.logout') }}" class="text-sm text-[#ef4444] hover:text-[#dc2626] transition-colors">
Sign out
</a>
</div>
</div>
</div>
</nav>
{% endif %}
<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div id="flash-messages" class="fixed top-4 right-4 z-50 space-y-2">
{% for category, message in messages %}
<div class="flash-message px-6 py-3 rounded-lg shadow-lg {% if category == 'success' %}bg-[#22c55e]{% elif category == 'error' %}bg-[#ef4444]{% else %}bg-[#6366f1]{% endif %} text-white">
{{ message }}
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<!-- Main Content -->
<main>
{% block content %}{% endblock %}
</main>
<!-- JavaScript -->
<script>
// Auto-dismiss flash messages after 4 seconds
document.addEventListener('DOMContentLoaded', function() {
const flashMessages = document.querySelectorAll('.flash-message');
flashMessages.forEach(function(message) {
setTimeout(function() {
message.style.opacity = '0';
message.style.transform = 'translateX(100%)';
message.style.transition = 'all 0.3s ease-out';
setTimeout(function() {
message.remove();
}, 300);
}, 4000);
});
});
</script>
{% block scripts %}{% endblock %}
</body>
</html>

346
mini-dropbox/CODE/app/templates/dashboard.html Normal file
View File

@@ -0,0 +1,346 @@
<!-- === 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 %}

80
mini-dropbox/CODE/app/templates/login.html Normal file
View File

@@ -0,0 +1,80 @@
<!-- === FILE: app/templates/login.html === -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloud Drive - Sign In</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'DM Sans', sans-serif;
background: linear-gradient(135deg, #0f1117 0%, #1a1d27 100%);
color: #f1f5f9;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Space Grotesk', sans-serif;
}
.glow {
box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<div class="max-w-md w-full">
<!-- Card -->
<div class="bg-[#1a1d27] rounded-2xl p-8 shadow-2xl border border-[#2a2d3e] glow">
<!-- Logo and Title -->
<div class="text-center mb-8">
<div class="flex justify-center mb-4">
<svg class="w-16 h-16 text-[#6366f1]" 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>
<h1 class="text-3xl font-bold text-white mb-2">Cloud Drive</h1>
<p class="text-[#94a3b8] text-sm">Your personal file storage, powered by AWS</p>
</div>
<!-- Sign in with Google Button -->
<a href="{{ url_for('auth.login') }}" class="block w-full">
<button class="w-full bg-white hover:bg-gray-100 text-gray-800 font-medium py-3 px-4 rounded-lg flex items-center justify-center space-x-3 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
<!-- Google Logo SVG -->
<svg class="w-5 h-5" viewBox="0 0 24 24">
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
</svg>
<span>Sign in with Google</span>
</button>
</a>
<!-- Footer -->
<div class="mt-8 text-center">
<div class="flex items-center justify-center space-x-4 text-sm text-[#94a3b8]">
<span>🔒 Secure</span>
<span>•</span>
<span>🔐 Private</span>
<span>•</span>
<span>⚡ Fast</span>
</div>
</div>
</div>
<!-- Additional info -->
<div class="mt-6 text-center text-sm text-[#94a3b8]">
<p>Powered by AWS S3, RDS, and CloudFront</p>
</div>
</div>
</body>
</html>