274 lines
No EOL
11 KiB
HTML
274 lines
No EOL
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="{{ theme_preference or 'system' }}">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Flask Files{% endblock %}</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
|
|
<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') }}">
|
|
<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 -->
|
|
|
|
{% block extra_js %}{% endblock %}
|
|
</head>
|
|
|
|
<body>
|
|
{% if current_user.is_authenticated %}
|
|
<!-- Global drop zone overlay - hidden by default -->
|
|
<div id="global-dropzone" class="global-dropzone">
|
|
<div class="dropzone-content">
|
|
<div class="dropzone-icon">
|
|
<i class="fas fa-cloud-upload-alt fa-3x"></i>
|
|
</div>
|
|
<h3>Drop Files to Upload</h3>
|
|
<p>Files will be instantly uploaded to current folder</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Global upload progress toast -->
|
|
<div id="upload-toast" class="upload-toast">
|
|
<div class="upload-toast-header">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<span>Uploading Files</span>
|
|
<button id="upload-toast-close" class="upload-toast-close">×</button>
|
|
</div>
|
|
<div class="upload-toast-body">
|
|
<div class="upload-toast-progress-info">
|
|
<span id="upload-toast-file">Processing...</span>
|
|
<span id="upload-toast-percentage">0%</span>
|
|
</div>
|
|
<div class="upload-toast-progress-bar-container">
|
|
<div id="upload-toast-progress-bar" class="upload-toast-progress-bar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="sidebar">
|
|
<a href="{{ url_for('dashboard.index') }}" class="sidebar-brand">
|
|
<i class="fas fa-folder-open"></i>
|
|
Flask Files
|
|
</a>
|
|
|
|
<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 -->
|
|
<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">×</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
{% block content %}{% endblock %}
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<span>© {{ current_year }} Flask Files. All rights reserved.</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</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">
|
|
<div class="upload-modal">
|
|
<div class="upload-header">
|
|
<h3><i class="fas fa-cloud-upload-alt"></i> Upload Files</h3>
|
|
<button class="close-upload" id="close-upload-btn">×</button>
|
|
</div>
|
|
|
|
<div class="upload-body">
|
|
<div class="upload-dropzone" id="dropzone">
|
|
<i class="fas fa-cloud-upload-alt upload-icon"></i>
|
|
<p>Drag & drop files or folders here</p>
|
|
<p>or</p>
|
|
<div class="upload-buttons">
|
|
<label class="btn primary">
|
|
<i class="fas fa-file"></i> Select Files
|
|
<input type="file" id="file-upload" multiple style="display: none">
|
|
</label>
|
|
<label class="btn">
|
|
<i class="fas fa-folder"></i> Select Folder
|
|
<input type="file" id="folder-upload" webkitdirectory directory multiple
|
|
style="display: none">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-list" id="upload-list">
|
|
<h4>Upload Queue</h4>
|
|
<div class="upload-items" id="upload-items"></div>
|
|
</div>
|
|
|
|
<div class="upload-progress-overall">
|
|
<div class="progress-label">
|
|
<span>Overall Progress</span>
|
|
<span id="upload-percentage">0%</span>
|
|
</div>
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar" id="total-progress-bar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-footer">
|
|
<button class="btn" id="cancel-upload-btn">Cancel</button>
|
|
<button class="btn primary" id="start-upload-btn">Start Upload</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Common JS file with shared functions -->
|
|
<script src="{{ url_for('static', filename='js/common.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/theme.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/context-menu.js') }}"></script>
|
|
|
|
{% if current_user.is_authenticated %}
|
|
<script src="{{ url_for('static', filename='js/quick-upload.js') }}"></script>
|
|
{% endif %}
|
|
|
|
<!-- JavaScript -->
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- 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> |