websites/Flask-Files
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more commits..

Browse source
This commit is contained in:
pika 2025-03-23 03:53:45 +01:00
parent 6dda02141e
commit 7823be6481
20 changed files with 1835 additions and 631 deletions
Download patch file Download diff file Expand all files Collapse all files

236
app/templates/base.html
View file

@ -17,18 +17,11 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
<!-- Classless CSS Framework -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/digitallytailored/classless@latest/classless.min.css"> -->
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/modal.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/mobile-menu.css') }}">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Classless CSS Framework -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/digitallytailored/classless@latest/classless.min.css"> -->
{% block extra_css %}{% endblock %}
<!-- JavaScript -->
@ -68,98 +61,112 @@
</div>
{% endif %}
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="{{ url_for('dashboard.index') }}">
<i class="fas fa-folder-open mr-2"></i>
Flask Files
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Sidebar Navigation -->
<aside class="sidebar">
<a href="{{ url_for('dashboard.index') }}" class="sidebar-brand">
<i class="fas fa-folder-open"></i>
Flask Files
</a>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ml-auto">
{% if current_user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('dashboard.index') }}">
<i class="fas fa-tachometer-alt mr-1"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('files.browser') }}">
<i class="fas fa-folder mr-1"></i> My Files
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('files.upload') }}">
<i class="fas fa-upload mr-1"></i> Upload
</a>
</li>
{% if current_user.is_admin %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('admin.index') }}">
<i class="fas fa-cog mr-1"></i> Admin
</a>
</li>
{% endif %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
<i class="fas fa-user-circle mr-1"></i> {{ current_user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ url_for('auth.profile') }}">
<i class="fas fa-id-card mr-2"></i> Profile
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ url_for('auth.logout') }}">
<i class="fas fa-sign-out-alt mr-2"></i> Logout
</a>
</div>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('auth.login') }}">
<i class="fas fa-sign-in-alt mr-1"></i> Login
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('auth.register') }}">
<i class="fas fa-user-plus mr-1"></i> Register
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- Flash Messages -->
<div class="container mt-4">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category if category != 'message' else 'info' }} alert-dismissible fade show">
{{ message }}
<button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
<ul class="sidebar-nav">
{% if current_user.is_authenticated %}
<li class="sidebar-nav-item">
<a href="{{ url_for('dashboard.index') }}"
class="sidebar-nav-link {{ 'active' if request.endpoint == 'dashboard.index' else '' }}">
<i class="fas fa-tachometer-alt"></i>
Dashboard
</a>
</li>
<li class="sidebar-nav-item">
<a href="{{ url_for('files.browser') }}"
class="sidebar-nav-link {{ 'active' if request.endpoint == 'files.browser' else '' }}">
<i class="fas fa-folder"></i>
My Files
</a>
</li>
<li class="sidebar-nav-item">
<a href="{{ url_for('files.upload') }}"
class="sidebar-nav-link {{ 'active' if request.endpoint == 'files.upload' else '' }}">
<i class="fas fa-upload"></i>
Upload
</a>
</li>
{% if current_user.is_admin %}
<li class="sidebar-nav-item">
<a href="{{ url_for('admin.index') }}"
class="sidebar-nav-link {{ 'active' if request.endpoint.startswith('admin.') else '' }}">
<i class="fas fa-cog"></i>
Admin
</a>
</li>
{% endif %}
<li class="sidebar-nav-item">
<a href="{{ url_for('auth.logout') }}" class="sidebar-nav-link">
<i class="fas fa-sign-out-alt"></i>
Logout
</a>
</li>
{% else %}
<li class="sidebar-nav-item">
<a href="{{ url_for('auth.login') }}"
class="sidebar-nav-link {{ 'active' if request.endpoint == 'auth.login' else '' }}">
<i class="fas fa-sign-in-alt"></i>
Login
</a>
</li>
<li class="sidebar-nav-item">
<a href="{{ url_for('auth.register') }}"
class="sidebar-nav-link {{ 'active' if request.endpoint == 'auth.register' else '' }}">
<i class="fas fa-user-plus"></i>
Register
</a>
</li>
{% endif %}
</ul>
</aside>
<!-- Main Content -->
<main role="main" class="container mt-3">
{% block content %}{% endblock %}
</main>
<div class="main-wrapper">
<div class="main-content">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="flash-messages">
{% for category, message in messages %}
<div class="flash-message {{ category }}">
<div class="flash-icon">
{% if category == 'success' %}
<i class="fas fa-check-circle"></i>
{% elif category == 'danger' or category == 'error' %}
<i class="fas fa-exclamation-circle"></i>
{% elif category == 'warning' %}
<i class="fas fa-exclamation-triangle"></i>
{% else %}
<i class="fas fa-info-circle"></i>
{% endif %}
</div>
<div class="flash-content">{{ message }}</div>
<button class="flash-close">&times;</button>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<!-- Footer -->
<footer class="footer mt-auto py-3 bg-light">
<div class="container text-center">
<span class="text-muted">&copy; 2023 Flask Files. All rights reserved.</span>
{% block content %}{% endblock %}
<!-- Footer -->
<footer class="footer">
<div class="container">
<span>&copy; {{ current_year }} Flask Files. All rights reserved.</span>
</div>
</footer>
</div>
</footer>
</div>
<!-- Include mobile menu for authenticated users -->
{% if current_user.is_authenticated %}
{% include 'components/mobile_menu.html' %}
{% endif %}
<!-- Add this right before the closing </body> tag -->
<div id="upload-overlay" class="upload-overlay">
@ -226,7 +233,42 @@
<!-- Custom JavaScript -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<!-- Add our new script files -->
<script src="{{ url_for('static', filename='js/modal.js') }}"></script>
<script src="{{ url_for('static', filename='js/browser.js') }}"></script>
<script src="{{ url_for('static', filename='js/context-menu.js') }}"></script>
<!-- Mobile menu script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const mobileFab = document.getElementById('mobile-fab');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileFab && mobileMenu) {
mobileFab.addEventListener('click', function () {
this.classList.toggle('active');
mobileMenu.classList.toggle('active');
});
// Add delay for each menu item to create staggered animation
const menuItems = document.querySelectorAll('.mobile-menu-item');
menuItems.forEach((item, index) => {
item.style.transitionDelay = `${index * 0.05}s`;
});
}
});
</script>
{% block scripts %}{% endblock %}
<script>
// Close flash messages
document.querySelectorAll('.flash-close').forEach(btn => {
btn.addEventListener('click', function () {
this.closest('.flash-message').remove();
});
});
</script>
</body>
</html>

24
app/templates/components/mobile_menu.html Normal file
View file

@ -0,0 +1,24 @@
<!-- Mobile Floating Action Button and Menu -->
<div class="mobile-fab" id="mobile-fab">
<i class="fas fa-bars"></i>
</div>
<div class="mobile-menu" id="mobile-menu">
<a href="{{ url_for('dashboard.index') }}" class="mobile-menu-item">
<i class="fas fa-tachometer-alt"></i> Dashboard
</a>
<a href="{{ url_for('files.browser') }}" class="mobile-menu-item">
<i class="fas fa-folder"></i> My Files
</a>
<a href="{{ url_for('files.upload') }}" class="mobile-menu-item">
<i class="fas fa-upload"></i> Upload
</a>
{% if current_user.is_admin %}
<a href="{{ url_for('admin.index') }}" class="mobile-menu-item">
<i class="fas fa-cog"></i> Admin
</a>
{% endif %}
<a href="{{ url_for('auth.logout') }}" class="mobile-menu-item">
<i class="fas fa-sign-out-alt"></i> Logout
</a>
</div>

233
app/templates/dashboard.html
View file

@ -1,233 +0,0 @@
{% extends "base.html" %}
{% block title %}Dashboard - Flask Files{% endblock %}
{% block extra_css %}
<style>
.dashboard {
max-width: 1200px;
margin: 0 auto;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
cursor: pointer;
}
.section-header .toggle-icon {
transition: transform 0.3s ease;
}
.section-header.collapsed .toggle-icon {
transform: rotate(-90deg);
}
.collapsible-section {
margin-bottom: 2rem;
transition: max-height 0.5s ease;
overflow: hidden;
}
.section-content {
transition: opacity 0.3s ease, transform 0.3s ease;
}
.section-content.collapsed {
opacity: 0;
transform: translateY(-10px);
display: none;
}
.quick-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.quick-access {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.quick-action {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: 1rem;
text-align: center;
box-shadow: var(--shadow-sm);
transition: transform 0.2s, box-shadow 0.2s;
}
.quick-action:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.quick-action i {
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
</style>
{% endblock %}
{% block content %}
<section class="dashboard">
<h2>Dashboard</h2>
<div class="quick-stats">
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-folder"></i></div>
<div class="stat-info">
<span class="stat-value">{{ total_folders }}</span>
<span class="stat-label">Folders</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-file"></i></div>
<div class="stat-info">
<span class="stat-value">{{ total_files }}</span>
<span class="stat-label">Files</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-link"></i></div>
<div class="stat-info">
<span class="stat-value">{{ active_shares }}</span>
<span class="stat-label">Active Shares</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon"><i class="fas fa-clock"></i></div>
<div class="stat-info">
<span class="stat-value">{{ recent_activities|default(0) }}</span>
<span class="stat-label">Recent Activities</span>
</div>
</div>
</div>
<div class="quick-access">
<a href="{{ url_for('files.upload') }}" class="quick-action">
<i class="fas fa-cloud-upload-alt"></i>
<div>Upload Files</div>
</a>
<a href="{{ url_for('files.browser') }}" class="quick-action">
<i class="fas fa-folder-open"></i>
<div>Browse Files</div>
</a>
<a href="#" class="quick-action">
<i class="fas fa-share-alt"></i>
<div>Manage Shares</div>
</a>
<a href="{{ url_for('auth.profile') }}" class="quick-action">
<i class="fas fa-user-cog"></i>
<div>Settings</div>
</a>
</div>
<!-- Recent Files Section (Collapsible) -->
<div class="collapsible-section" id="recent-files-section">
<div class="section-header" data-target="recent-files-content">
<h3><i class="fas fa-clock"></i> Recent Files</h3>
<span class="toggle-icon"><i class="fas fa-chevron-down"></i></span>
</div>
<div class="section-content" id="recent-files-content">
{% if recent_files %}
<div class="files-grid grid-view">
{% for file in recent_files %}
<a href="{{ url_for('files.download', file_id=file.id) }}" class="file-item" data-id="{{ file.id }}">
<div class="item-icon">
<i class="fas {{ file_icon(file.mime_type, file.name) }}"></i>
</div>
<div class="item-info">
<div class="item-name">{{ file.name }}</div>
<div class="item-details">
<span class="item-size">{{ format_size(file.size) }}</span>
<span class="item-date">{{ file.updated_at.strftime('%b %d, %Y') }}</span>
</div>
</div>
</a>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
<p>No files uploaded yet. <a href="{{ url_for('files.upload') }}">Upload your first file</a>.</p>
</div>
{% endif %}
</div>
</div>
<!-- Quick Folder View (Collapsible) -->
<div class="collapsible-section" id="folders-section">
<div class="section-header" data-target="folders-content">
<h3><i class="fas fa-folder"></i> My Folders</h3>
<span class="toggle-icon"><i class="fas fa-chevron-down"></i></span>
</div>
<div class="section-content" id="folders-content">
{% if root_folders %}
<div class="files-grid grid-view">
{% for folder in root_folders %}
<a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="folder-item"
data-id="{{ folder.id }}">
<div class="item-icon">
<i class="fas fa-folder"></i>
</div>
<div class="item-info">
<div class="item-name">{{ folder.name }}</div>
<div class="item-details">
<span class="item-count">{{ folder.children.count() }} items</span>
<span class="item-date">{{ folder.created_at.strftime('%b %d, %Y') }}</span>
</div>
</div>
</a>
{% endfor %}
</div>
{% else %}
<div class="empty-state">
<p>No folders created yet. <a href="{{ url_for('files.browser') }}">Create your first folder</a>.</p>
</div>
{% endif %}
</div>
</div>
</section>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
// Set up collapsible sections
const sectionHeaders = document.querySelectorAll('.section-header');
sectionHeaders.forEach(header => {
header.addEventListener('click', function () {
const targetId = this.getAttribute('data-target');
const content = document.getElementById(targetId);
this.classList.toggle('collapsed');
content.classList.toggle('collapsed');
// Store preference in localStorage
localStorage.setItem(`section_${targetId}`, content.classList.contains('collapsed') ? 'closed' : 'open');
});
// Check localStorage for saved preferences
const targetId = header.getAttribute('data-target');
const savedState = localStorage.getItem(`section_${targetId}`);
if (savedState === 'closed') {
header.classList.add('collapsed');
document.getElementById(targetId).classList.add('collapsed');
}
});
});
</script>
{% endblock %}

156
app/templates/dashboard/index.html
View file

@ -1,105 +1,81 @@
{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block title %}Dashboard - Flask Files{% endblock %}
{% block content %}
<div class="container">
<h1 class="mb-4">Dashboard</h1>
<h1 class="page-title">Dashboard</h1>
<!-- Storage Summary Cards -->
<div class="row">
<div class="col-md-4 mb-4">
<div class="card border-primary">
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<i class="fas fa-file fa-3x text-primary"></i>
</div>
<div class="col-md-8">
<h5 class="card-title">Files</h5>
<h3>{{ file_count }}</h3>
</div>
</div>
</div>
</div>
<div class="dashboard-cards">
<div class="dashboard-card">
<div class="dashboard-card-icon files">
<i class="fas fa-file"></i>
</div>
<div class="col-md-4 mb-4">
<div class="card border-success">
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<i class="fas fa-folder fa-3x text-success"></i>
</div>
<div class="col-md-8">
<h5 class="card-title">Folders</h5>
<h3>{{ folder_count }}</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-4">
<div class="card border-info">
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<i class="fas fa-hdd fa-3x text-info"></i>
</div>
<div class="col-md-8">
<h5 class="card-title">Storage Used</h5>
<h3>{{ storage_used_formatted }}</h3>
</div>
</div>
</div>
</div>
<div class="dashboard-card-content">
<h3>Files</h3>
<p>{{ file_count }}</p>
</div>
</div>
<!-- Recent Files -->
<div class="card mt-4">
<div class="card-header bg-light">
<h4 class="mb-0">Recent Files</h4>
<div class="dashboard-card">
<div class="dashboard-card-icon folders">
<i class="fas fa-folder"></i>
</div>
<div class="card-body">
{% if recent_files %}
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Uploaded</th>
</tr>
</thead>
<tbody>
{% for file in recent_files %}
<tr>
<td>
<i class="fas {{ file.icon_class }} mr-2"></i>
<a href="{{ url_for('files.download', file_id=file.id) }}">{{ file.name }}</a>
</td>
<td>{{ file.type }}</td>
<td>{{ file.size|filesizeformat }}</td>
<td>{{ file.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<div class="alert alert-info">
You haven't uploaded any files yet.
<a href="{{ url_for('files.upload') }}" class="alert-link">Upload your first file</a>
</div>
{% endif %}
<div class="dashboard-card-content">
<h3>Folders</h3>
<p>{{ folder_count }}</p>
</div>
<div class="card-footer">
<a href="{{ url_for('files.browser') }}" class="btn btn-primary">
<i class="fas fa-folder-open mr-1"></i> Browse Files
</a>
<a href="{{ url_for('files.upload') }}" class="btn btn-success">
<i class="fas fa-upload mr-1"></i> Upload Files
</a>
</div>
<div class="dashboard-card">
<div class="dashboard-card-icon storage">
<i class="fas fa-database"></i>
</div>
<div class="dashboard-card-content">
<h3>Storage Used</h3>
<p>{{ storage_used }}</p>
</div>
</div>
</div>
<div class="recent-files-section">
<div class="recent-files-header">
<h2>Recent Files</h2>
</div>
<div class="recent-files-list">
{% if recent_files %}
{% for file in recent_files %}
<div class="recent-file-item">
<div class="recent-file-icon">
<i class="{{ file.icon_class }}"></i>
</div>
<div class="recent-file-info">
<div class="recent-file-name">{{ file.name }}</div>
<div class="recent-file-meta">
{{ file.size|filesizeformat }} • Uploaded {{ file.created_at.strftime('%Y-%m-%d %H:%M') }}
</div>
</div>
<div class="recent-file-actions">
<a href="{{ url_for('files.download', file_id=file.id) }}" title="Download">
<i class="fas fa-download"></i>
</a>
</div>
</div>
{% endfor %}
{% else %}
<div class="empty-state">
<p>No files uploaded yet.</p>
</div>
{% endif %}
</div>
<div class="action-buttons">
<a href="{{ url_for('files.browser') }}" class="action-btn">
<i class="fas fa-folder-open"></i> Browse Files
</a>
<a href="{{ url_for('files.upload') }}" class="action-btn">
<i class="fas fa-upload"></i> Upload Files
</a>
</div>
</div>
{% endblock %}

173
app/templates/files/browser.html
View file

@ -3,65 +3,69 @@
{% block title %}File Browser - Flask Files{% endblock %}
{% block extra_css %}
<style>
/* Additional page-specific styles if needed */
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='css/context-menu.css') }}">
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/browser.js') }}"></script>
<script src="{{ url_for('static', filename='js/context-menu.js') }}"></script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
{% endblock %}
{% block content %}
<div class="container">
<div class="browser-container">
<div class="browser-header">
<div class="browser-title">
<i class="fas fa-folder-open"></i>
<h2>{% if current_folder %}{{ current_folder.name }}{% else %}My Files{% endif %}</h2>
<div class="browser-container">
<div class="browser-header">
<div class="browser-title">
<i class="fas fa-folder-open"></i>
<h2>{% if current_folder %}{{ current_folder.name }}{% else %}My Files{% endif %}</h2>
</div>
<div class="browser-actions">
<div class="search-container">
<form action="{{ url_for('files.browser') }}" method="get">
<input type="text" name="q" placeholder="Search files..." value="{{ request.args.get('q', '') }}">
<button type="submit" class="search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
<div class="browser-actions">
<div class="search-container">
<form action="{{ url_for('files.browser') }}" method="get">
<input type="text" name="q" placeholder="Search files..."
value="{{ request.args.get('q', '') }}">
<button type="submit" class="search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
<div class="view-toggle">
<button id="grid-view-btn" class="view-btn active" title="Grid View">
<i class="fas fa-th"></i>
</button>
<button id="list-view-btn" class="view-btn" title="List View">
<i class="fas fa-list"></i>
</button>
</div>
<a href="{% if current_folder %}{{ url_for('files.upload', folder_id=current_folder.id) }}{% else %}{{ url_for('files.upload') }}{% endif %}"
class="btn primary">
<i class="fas fa-upload"></i> Upload
</a>
<button id="new-folder-btn" class="btn secondary">
<i class="fas fa-folder-plus"></i> New Folder
<div class="view-toggle">
<button id="grid-view-btn" class="view-btn active" title="Grid View">
<i class="fas fa-th"></i>
</button>
<button id="list-view-btn" class="view-btn" title="List View">
<i class="fas fa-list"></i>
</button>
</div>
</div>
<div class="breadcrumbs">
<a href="{{ url_for('files.browser') }}" class="breadcrumb-item">
<i class="fas fa-home"></i> Home
</a>
{% if breadcrumbs %}
{% for folder in breadcrumbs %}
<span class="breadcrumb-separator">/</span>
<a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="breadcrumb-item">
{{ folder.name }}
</a>
{% endfor %}
{% endif %}
</div>
<!-- File upload button and hidden input -->
<input type="file" id="file-upload" multiple style="display: none">
<button class="btn primary" id="upload-button">
<i class="fas fa-upload"></i> Upload
</button>
<div id="files-container" class="files-container grid-view">
{% include 'files/partials/folder_contents.html' %}
<button id="new-folder-btn" class="btn secondary">
<i class="fas fa-folder-plus"></i> New Folder
</button>
</div>
</div>
<div class="breadcrumbs">
<a href="{{ url_for('files.browser') }}" class="breadcrumb-item">
<i class="fas fa-home"></i> Home
</a>
{% if breadcrumbs %}
{% for folder in breadcrumbs %}
<span class="breadcrumb-separator">/</span>
<a href="{{ url_for('files.browser', folder_id=folder.id) }}" class="breadcrumb-item">
{{ folder.name }}
</a>
{% endfor %}
{% endif %}
</div>
<div id="files-container" class="files-container grid-view">
{% include 'files/partials/folder_contents.html' %}
</div>
</div>
<!-- New Folder Modal -->
@ -88,34 +92,51 @@
</div>
</div>
<!-- Context Menu -->
<div id="context-menu" class="context-menu">
<div class="context-menu-item" data-action="open" data-for="folder">
<i class="fas fa-folder-open"></i> Open
</div>
<div class="context-menu-item" data-action="download" data-for="file">
<i class="fas fa-download"></i> Download
</div>
<div class="context-menu-item" data-action="share" data-for="file">
<i class="fas fa-share-alt"></i> Share
</div>
<div class="context-menu-item" data-action="rename" data-for="all">
<i class="fas fa-pencil-alt"></i> Rename
</div>
<div class="context-menu-item" data-action="delete" data-for="all">
<i class="fas fa-trash"></i> Delete
<!-- Rename Modal -->
<div id="rename-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Rename Item</h3>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<form id="rename-form" action="{{ url_for('files.rename_item') }}" method="post">
<div class="form-group">
<label for="new-name">New Name</label>
<input type="text" id="new-name" name="new_name" required placeholder="Enter new name">
<input type="hidden" id="item-id" name="item_id">
<input type="hidden" id="item-type" name="item_type">
</div>
<div class="form-actions">
<button type="button" class="btn modal-cancel">Cancel</button>
<button type="submit" class="btn primary">Rename</button>
</div>
</form>
</div>
</div>
</div>
{% block extra_js %}
<script>
// Add folder entrance animation
document.addEventListener('DOMContentLoaded', function () {
const filesContainer = document.getElementById('files-container');
if (filesContainer) {
filesContainer.classList.add('folder-enter-active');
}
});
</script>
{% endblock %}
<!-- Delete Modal -->
<div id="delete-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Delete Item</h3>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
<form id="delete-form" action="{{ url_for('files.delete_item', item_id='placeholder') }}" method="post">
<input type="hidden" id="delete-item-id" name="item_id">
<input type="hidden" id="delete-item-type" name="item_type">
<div class="form-actions">
<button type="button" class="btn modal-cancel">Cancel</button>
<button type="submit" class="btn danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
<!-- Context Menu -->
<div id="context-menu" class="context-menu"></div>
{% endblock %}