mirror of
https://github.com/ION606/static-site-hosting.git
synced 2026-05-14 22:16:54 +00:00
initial commit
This commit is contained in:
@@ -0,0 +1,3 @@
|
|||||||
|
.venv
|
||||||
|
instance
|
||||||
|
sites
|
||||||
@@ -0,0 +1,312 @@
|
|||||||
|
from flask import (
|
||||||
|
Flask,
|
||||||
|
render_template,
|
||||||
|
request,
|
||||||
|
redirect,
|
||||||
|
url_for,
|
||||||
|
send_from_directory,
|
||||||
|
flash,
|
||||||
|
abort,
|
||||||
|
)
|
||||||
|
from flask_sqlalchemy import SQLAlchemy
|
||||||
|
from flask_login import (
|
||||||
|
LoginManager,
|
||||||
|
UserMixin,
|
||||||
|
login_user,
|
||||||
|
logout_user,
|
||||||
|
login_required,
|
||||||
|
current_user,
|
||||||
|
)
|
||||||
|
from flask_apscheduler import APScheduler
|
||||||
|
from werkzeug.security import generate_password_hash, check_password_hash
|
||||||
|
from werkzeug.exceptions import NotFound
|
||||||
|
import os
|
||||||
|
import shutil
|
||||||
|
from datetime import datetime, timedelta
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
app.config["SECRET_KEY"] = "your-secret-key"
|
||||||
|
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///db.sqlite"
|
||||||
|
app.config["UPLOAD_FOLDER"] = "sites"
|
||||||
|
db = SQLAlchemy(app)
|
||||||
|
|
||||||
|
|
||||||
|
# Models
|
||||||
|
class User(UserMixin, db.Model):
|
||||||
|
id = db.Column(db.Integer, primary_key=True)
|
||||||
|
email = db.Column(db.String(100), unique=True)
|
||||||
|
password_hash = db.Column(db.String(128)) # Renamed for clarity
|
||||||
|
|
||||||
|
def set_password(self, password):
|
||||||
|
self.password_hash = generate_password_hash(password)
|
||||||
|
|
||||||
|
def check_password(self, password):
|
||||||
|
return check_password_hash(self.password_hash, password)
|
||||||
|
|
||||||
|
|
||||||
|
class Site(db.Model):
|
||||||
|
id = db.Column(db.Integer, primary_key=True)
|
||||||
|
user_id = db.Column(db.Integer)
|
||||||
|
name = db.Column(db.String(100))
|
||||||
|
last_accessed = db.Column(db.DateTime)
|
||||||
|
created_at = db.Column(db.DateTime, default=datetime.utcnow)
|
||||||
|
|
||||||
|
|
||||||
|
# Auth setup
|
||||||
|
login_manager = LoginManager()
|
||||||
|
login_manager.init_app(app)
|
||||||
|
login_manager.login_view = "login"
|
||||||
|
|
||||||
|
|
||||||
|
@login_manager.user_loader
|
||||||
|
def load_user(user_id):
|
||||||
|
return User.query.get(int(user_id))
|
||||||
|
|
||||||
|
|
||||||
|
# Scheduler for auto-deletion
|
||||||
|
scheduler = APScheduler()
|
||||||
|
scheduler.init_app(app)
|
||||||
|
|
||||||
|
|
||||||
|
def delete_inactive_sites():
|
||||||
|
with app.app_context():
|
||||||
|
cutoff = datetime.utcnow() - timedelta(days=30)
|
||||||
|
sites = Site.query.filter(Site.last_accessed < cutoff).all()
|
||||||
|
for site in sites:
|
||||||
|
site_dir = os.path.join(
|
||||||
|
app.config["UPLOAD_FOLDER"], str(site.user_id), str(site.id)
|
||||||
|
)
|
||||||
|
if os.path.exists(site_dir):
|
||||||
|
shutil.rmtree(site_dir)
|
||||||
|
db.session.delete(site)
|
||||||
|
db.session.commit()
|
||||||
|
|
||||||
|
|
||||||
|
if not scheduler.running:
|
||||||
|
scheduler.start()
|
||||||
|
scheduler.add_job(
|
||||||
|
id="delete_job", func=delete_inactive_sites, trigger="interval", days=1
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
# Routes
|
||||||
|
@app.route("/login", methods=["GET", "POST"])
|
||||||
|
def login():
|
||||||
|
if request.method == "POST":
|
||||||
|
email = request.form.get("email")
|
||||||
|
password = request.form.get("password")
|
||||||
|
user = User.query.filter_by(email=email).first()
|
||||||
|
|
||||||
|
if user and user.check_password(password):
|
||||||
|
login_user(user)
|
||||||
|
return redirect(url_for("dashboard"))
|
||||||
|
flash("Invalid email or password")
|
||||||
|
return render_template("login.html")
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/logout")
|
||||||
|
def logout():
|
||||||
|
logout_user()
|
||||||
|
return redirect(url_for("home"))
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/register", methods=["GET", "POST"])
|
||||||
|
def register():
|
||||||
|
if request.method == "POST":
|
||||||
|
email = request.form.get("email")
|
||||||
|
password = request.form.get("password")
|
||||||
|
|
||||||
|
if User.query.filter_by(email=email).first():
|
||||||
|
flash("Email already exists")
|
||||||
|
return redirect(url_for("register"))
|
||||||
|
|
||||||
|
new_user = User(email=email)
|
||||||
|
new_user.set_password(password)
|
||||||
|
db.session.add(new_user)
|
||||||
|
db.session.commit()
|
||||||
|
|
||||||
|
login_user(new_user)
|
||||||
|
return redirect(url_for("dashboard"))
|
||||||
|
return render_template("register.html")
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/dashboard")
|
||||||
|
@login_required
|
||||||
|
def dashboard():
|
||||||
|
sites = Site.query.filter_by(user_id=current_user.id).all()
|
||||||
|
return render_template("dashboard.html", sites=sites)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/upload", methods=["POST"])
|
||||||
|
@login_required
|
||||||
|
def upload_site():
|
||||||
|
site_name = request.form.get("name")
|
||||||
|
if not site_name:
|
||||||
|
flash("Site name is required", "error")
|
||||||
|
return redirect(url_for("dashboard"))
|
||||||
|
|
||||||
|
# Check if index.html is included
|
||||||
|
files = request.files.getlist("files")
|
||||||
|
if not any(file.filename == "index.html" for file in files):
|
||||||
|
flash("You must include an index.html file", "error")
|
||||||
|
return redirect(url_for("dashboard"))
|
||||||
|
|
||||||
|
# Create site directory
|
||||||
|
site = Site(user_id=current_user.id, name=site_name)
|
||||||
|
db.session.add(site)
|
||||||
|
db.session.commit()
|
||||||
|
|
||||||
|
site_dir = os.path.join(
|
||||||
|
app.config["UPLOAD_FOLDER"], str(current_user.id), str(site.id)
|
||||||
|
)
|
||||||
|
os.makedirs(site_dir, exist_ok=True)
|
||||||
|
|
||||||
|
# Save uploaded files
|
||||||
|
for file in files:
|
||||||
|
if file.filename == "":
|
||||||
|
continue
|
||||||
|
file.save(os.path.join(site_dir, file.filename))
|
||||||
|
|
||||||
|
flash("Site created successfully!", "success")
|
||||||
|
return redirect(url_for("dashboard"))
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/edit/<int:site_id>", methods=["GET", "POST"])
|
||||||
|
@login_required
|
||||||
|
def edit_site(site_id):
|
||||||
|
site = Site.query.get_or_404(site_id)
|
||||||
|
if site.user_id != current_user.id:
|
||||||
|
return "Unauthorized", 403
|
||||||
|
|
||||||
|
site_dir = os.path.join(
|
||||||
|
app.config["UPLOAD_FOLDER"], str(current_user.id), str(site.id)
|
||||||
|
)
|
||||||
|
|
||||||
|
if request.method == "POST":
|
||||||
|
site.name = request.form.get("name", site.name)
|
||||||
|
db.session.commit()
|
||||||
|
|
||||||
|
for filename, content in request.form.items():
|
||||||
|
if filename.endswith((".html", ".css", ".js")):
|
||||||
|
filepath = os.path.join(site_dir, filename)
|
||||||
|
with open(filepath, "w") as f:
|
||||||
|
f.write(content)
|
||||||
|
|
||||||
|
return redirect(url_for("dashboard"))
|
||||||
|
|
||||||
|
files = {}
|
||||||
|
for file in os.listdir(site_dir):
|
||||||
|
with open(os.path.join(site_dir, file), "r") as f:
|
||||||
|
files[file] = f.read()
|
||||||
|
|
||||||
|
return render_template("edit.html", site=site, files=files)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/delete/<int:site_id>", methods=["POST"])
|
||||||
|
@login_required
|
||||||
|
def delete_site(site_id):
|
||||||
|
site = Site.query.get_or_404(site_id)
|
||||||
|
if site.user_id != current_user.id:
|
||||||
|
return "Unauthorized", 403
|
||||||
|
|
||||||
|
site_dir = os.path.join(
|
||||||
|
app.config["UPLOAD_FOLDER"], str(current_user.id), str(site.id)
|
||||||
|
)
|
||||||
|
if os.path.exists(site_dir):
|
||||||
|
shutil.rmtree(site_dir)
|
||||||
|
|
||||||
|
db.session.delete(site)
|
||||||
|
db.session.commit()
|
||||||
|
return redirect(url_for("dashboard"))
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/delete_file/<int:site_id>/<filename>", methods=["POST"])
|
||||||
|
@login_required
|
||||||
|
def delete_file(site_id, filename):
|
||||||
|
# Get the site and verify ownership
|
||||||
|
site = Site.query.get_or_404(site_id)
|
||||||
|
if site.user_id != current_user.id:
|
||||||
|
return "Unauthorized", 403
|
||||||
|
|
||||||
|
# Build the file path
|
||||||
|
site_dir = os.path.join(
|
||||||
|
app.config["UPLOAD_FOLDER"], str(current_user.id), str(site.id)
|
||||||
|
)
|
||||||
|
file_path = os.path.join(site_dir, filename)
|
||||||
|
|
||||||
|
# Delete the file if it exists
|
||||||
|
if os.path.exists(file_path):
|
||||||
|
os.remove(file_path)
|
||||||
|
flash(f"File '{filename}' deleted successfully!", "success")
|
||||||
|
else:
|
||||||
|
flash(f"File '{filename}' not found!", "error")
|
||||||
|
|
||||||
|
return redirect(url_for("dashboard"))
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/site/<int:user_id>/<int:site_id>")
|
||||||
|
def redirect_to_slash(user_id, site_id):
|
||||||
|
"""Redirect URLs without trailing slash to the slash version"""
|
||||||
|
return redirect(
|
||||||
|
url_for(
|
||||||
|
"serve_site_content",
|
||||||
|
user_id=user_id,
|
||||||
|
site_id=site_id,
|
||||||
|
filename="index.html",
|
||||||
|
),
|
||||||
|
code=301,
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/site/<int:user_id>/<int:site_id>/", defaults={"filename": "index.html"})
|
||||||
|
@app.route("/site/<int:user_id>/<int:site_id>/<path:filename>")
|
||||||
|
def serve_site_content(user_id, site_id, filename):
|
||||||
|
# Update last accessed time
|
||||||
|
site = Site.query.get_or_404(site_id)
|
||||||
|
site.last_accessed = datetime.utcnow()
|
||||||
|
db.session.commit()
|
||||||
|
|
||||||
|
# Get site directory
|
||||||
|
site_dir = os.path.join(app.config["UPLOAD_FOLDER"], str(user_id), str(site_id))
|
||||||
|
|
||||||
|
# Security check
|
||||||
|
if '..' in filename or filename.startswith('/') or not os.path.exists(site_dir):
|
||||||
|
abort(404)
|
||||||
|
|
||||||
|
try:
|
||||||
|
# First try to serve requested file
|
||||||
|
return send_from_directory(site_dir, filename)
|
||||||
|
except NotFound:
|
||||||
|
# Handle extensionless URLs and SPA-style routing
|
||||||
|
if "." not in filename:
|
||||||
|
# Try with .html extension
|
||||||
|
try:
|
||||||
|
return send_from_directory(site_dir, f"{filename}.html")
|
||||||
|
except NotFound:
|
||||||
|
# Fallback to index.html for client-side routing
|
||||||
|
return send_from_directory(site_dir, "index.html")
|
||||||
|
abort(404)
|
||||||
|
|
||||||
|
|
||||||
|
def list_files(directory):
|
||||||
|
try:
|
||||||
|
return os.listdir(directory)
|
||||||
|
except FileNotFoundError:
|
||||||
|
return []
|
||||||
|
|
||||||
|
|
||||||
|
@app.context_processor
|
||||||
|
def inject_utilities():
|
||||||
|
return dict(list_files=list_files)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/")
|
||||||
|
def home():
|
||||||
|
return render_template("home.html")
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
os.makedirs(app.config["UPLOAD_FOLDER"], exist_ok=True)
|
||||||
|
with app.app_context():
|
||||||
|
db.create_all()
|
||||||
|
app.run(debug=True)
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
function formatOption(option) {
|
||||||
|
if (!option.id) {
|
||||||
|
return option.text;
|
||||||
|
}
|
||||||
|
const $option = $(`
|
||||||
|
<div class="custom-option">
|
||||||
|
<span class="option-text">${option.text}</span>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
return $option;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const storedTheme = localStorage.getItem('editortheme');
|
||||||
|
|
||||||
|
// for each textarea (one per file) replace with Ace Editor
|
||||||
|
const editors = Array.from(document.querySelectorAll('textarea')).map((textarea) => {
|
||||||
|
const language = textarea.dataset.language,
|
||||||
|
themeStyle = document.querySelector('#theme-style'),
|
||||||
|
isDark = themeStyle.href.includes('dark-styles.css'),
|
||||||
|
aceTheme = isDark ? "ace/theme/twilight" : "ace/theme/chrome",
|
||||||
|
editorContainer = document.createElement('div');
|
||||||
|
|
||||||
|
editorContainer.style.width = "100%";
|
||||||
|
editorContainer.style.height = "400px";
|
||||||
|
|
||||||
|
// insert the container after the textarea
|
||||||
|
textarea.parentNode.insertBefore(editorContainer, textarea.nextSibling);
|
||||||
|
// hide the original textarea
|
||||||
|
textarea.style.display = "none";
|
||||||
|
|
||||||
|
const editor = ace.edit(editorContainer);
|
||||||
|
editor.setTheme(storedTheme || aceTheme);
|
||||||
|
|
||||||
|
let aceMode = "ace/mode/html"; // default fallback
|
||||||
|
if (language === "css") {
|
||||||
|
aceMode = "ace/mode/css";
|
||||||
|
} else if (language === "javascript") {
|
||||||
|
aceMode = "ace/mode/javascript";
|
||||||
|
} else if (language === "htmlmixed") {
|
||||||
|
aceMode = "ace/mode/html";
|
||||||
|
}
|
||||||
|
editor.session.setMode(aceMode);
|
||||||
|
|
||||||
|
// set initial content from the textarea and add options
|
||||||
|
editor.session.setValue(textarea.value.trim());
|
||||||
|
editor.setOptions({
|
||||||
|
fontSize: "14px",
|
||||||
|
tabSize: 4,
|
||||||
|
useSoftTabs: true,
|
||||||
|
wrap: true,
|
||||||
|
showPrintMargin: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// update the hidden textarea whenever the Ace content changes
|
||||||
|
editor.session.on('change', () => {
|
||||||
|
textarea.value = editor.getValue();
|
||||||
|
});
|
||||||
|
|
||||||
|
return editor;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Retrieve the list of available themes
|
||||||
|
const ThemeList = ace.require("ace/ext/themelist"),
|
||||||
|
themes = ThemeList.themes,
|
||||||
|
themeSelector = document.querySelector('#theme-selector');
|
||||||
|
|
||||||
|
themes.forEach(function (theme) {
|
||||||
|
var option = document.createElement('option');
|
||||||
|
option.value = theme.theme;
|
||||||
|
option.textContent = theme.caption;
|
||||||
|
themeSelector.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
if (storedTheme) themeSelector.value = storedTheme;
|
||||||
|
|
||||||
|
// Initialize Select2 on the theme selector
|
||||||
|
$(themeSelector).select2({
|
||||||
|
templateResult: formatOption,
|
||||||
|
placeholder: 'Select a theme',
|
||||||
|
allowClear: true
|
||||||
|
}).on('change', function (_) {
|
||||||
|
localStorage.setItem('editortheme', themeSelector.value)
|
||||||
|
editors.forEach(editor => editor.setTheme(themeSelector.value));
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,302 @@
|
|||||||
|
:root {
|
||||||
|
/* Light mode variables */
|
||||||
|
--bg-color: #f0f2f5;
|
||||||
|
--text-color: #333;
|
||||||
|
--card-bg: #ffffff;
|
||||||
|
--border-color: #ddd;
|
||||||
|
--hover-bg: #f5f5f5;
|
||||||
|
--accent-color: #1abc9c;
|
||||||
|
--danger-color: #e74c3c;
|
||||||
|
--success-color: #155724;
|
||||||
|
--error-color: #721c24;
|
||||||
|
--nav-bg: #2c3e50;
|
||||||
|
--nav-text: #ffffff;
|
||||||
|
--input-bg: #ffffff;
|
||||||
|
--input-text: #333;
|
||||||
|
--input-border: #ccc;
|
||||||
|
--file-icon-brightness: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
/* Dark mode variables */
|
||||||
|
--bg-color: #121212;
|
||||||
|
--text-color: #e0e0e0;
|
||||||
|
--card-bg: #1f1f1f;
|
||||||
|
--border-color: #333;
|
||||||
|
--hover-bg: #2d2d2d;
|
||||||
|
--accent-color: #1abc9c;
|
||||||
|
--danger-color: #c0392b;
|
||||||
|
--success-color: #d4edda;
|
||||||
|
--error-color: #f8d7da;
|
||||||
|
--nav-bg: #1f1f1f;
|
||||||
|
--nav-text: #e0e0e0;
|
||||||
|
--input-bg: #1f1f1f;
|
||||||
|
--input-text: #e0e0e0;
|
||||||
|
--input-border: #444;
|
||||||
|
--file-icon-brightness: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* General Styles */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
padding: 20px;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Bar */
|
||||||
|
.navbar {
|
||||||
|
background-color: var(--nav-bg);
|
||||||
|
color: var(--nav-text);
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a {
|
||||||
|
color: var(--nav-text);
|
||||||
|
text-decoration: none;
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover {
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms and Inputs */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="file"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: var(--input-bg);
|
||||||
|
color: var(--input-text);
|
||||||
|
border: 1px solid var(--input-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 5px rgba(26, 188, 156, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
button,
|
||||||
|
.btn {
|
||||||
|
padding: 10px 18px;
|
||||||
|
margin: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover,
|
||||||
|
.btn:hover {
|
||||||
|
background-color: #16a085;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background-color: var(--danger-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover {
|
||||||
|
filter: brightness(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* File Upload and Preview */
|
||||||
|
.file-upload-container {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-upload-button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: filter 0.3s;
|
||||||
|
border: none;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-upload-button:hover {
|
||||||
|
filter: brightness(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-preview {
|
||||||
|
margin-top: 15px;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-card {
|
||||||
|
position: relative;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
text-align: center;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto 10px;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
filter: brightness(var(--file-icon-brightness));
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.html {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23e34f26' d='M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.css {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%232649ad' d='M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.9l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-119.3-.3-2.2-24.7L237.6 138H0l22.8-31.3L64.1 64H320l-6.9 48z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-icon.js {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23f7df1e' d='M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM243.8 381.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-name {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
word-break: break-word;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-close {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
right: 5px;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #999;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-close:hover {
|
||||||
|
color: var(--danger-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Site Cards */
|
||||||
|
.site-card {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 15px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-card:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Theme Toggle */
|
||||||
|
#theme-toggle {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
color: var(--text-color);
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
padding: 8px 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-toggle:hover {
|
||||||
|
background-color: var(--hover-bg);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-label {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 150px !important;
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-label:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.file-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Static Site Host - {% block title %}{% endblock %}</title>
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" id="theme-style">
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const themeToggle = document.querySelector('#theme-toggle');
|
||||||
|
const body = document.body;
|
||||||
|
|
||||||
|
// Get saved theme from localStorage
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||||
|
body.setAttribute('data-theme', savedTheme);
|
||||||
|
|
||||||
|
if (!savedTheme) localStorage.setItem('theme', savedTheme);
|
||||||
|
|
||||||
|
// Set initial button text
|
||||||
|
themeToggle.textContent = savedTheme === 'dark' ? 'Light Mode' : 'Dark Mode';
|
||||||
|
|
||||||
|
themeToggle.addEventListener('click', () => {
|
||||||
|
const isDark = body.getAttribute('data-theme') === 'dark';
|
||||||
|
body.setAttribute('data-theme', isDark ? 'light' : 'dark');
|
||||||
|
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||||
|
themeToggle.textContent = isDark ? 'Dark Mode' : 'Light Mode';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="container">
|
||||||
|
<a href="{{ url_for('home') }}">Home</a>
|
||||||
|
{% if current_user.is_authenticated %}
|
||||||
|
<a href="{{ url_for('dashboard') }}">Dashboard</a>
|
||||||
|
<a href="{{ url_for('logout') }}">Logout</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="{{ url_for('login') }}">Login</a>
|
||||||
|
<a href="{{ url_for('register') }}">Register</a>
|
||||||
|
{% endif %}
|
||||||
|
<button id="theme-toggle" class="btn">Toggle Dark Mode</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||||
|
{% if messages %}
|
||||||
|
{% for category, message in messages %}
|
||||||
|
<div class="flash-message flash-{{ category }}">
|
||||||
|
{{ message }}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% endwith %}
|
||||||
|
|
||||||
|
{% block content %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Dashboard{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h2>Your Sites</h2>
|
||||||
|
|
||||||
|
<h3>Create New Site</h3>
|
||||||
|
<form method="POST" action="{{ url_for('upload_site') }}" enctype="multipart/form-data">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Site Name:</label>
|
||||||
|
<input type="text" name="name" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group" onclick="document.querySelector('#file-input').click()">
|
||||||
|
<label class="upload-label">
|
||||||
|
Upload Files
|
||||||
|
<input type="file" name="files" style="display: none;" id="file-input" multiple accept=".html,.css,.js" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- File Preview Section -->
|
||||||
|
<div id="file-preview" class="file-preview">
|
||||||
|
<h5>Selected Files:</h5>
|
||||||
|
<div id="file-grid" class="file-grid"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn" style="margin-top: 20px;">Create Site</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 30px;"></div>
|
||||||
|
|
||||||
|
<h1>My Sites</h1>
|
||||||
|
|
||||||
|
<div class="sites-list">
|
||||||
|
{% for site in sites %}
|
||||||
|
<div class="site-card">
|
||||||
|
<h4>{{ site.name }}</h4>
|
||||||
|
<p>Created: {{ site.created_at.strftime('%Y-%m-%d') }}</p>
|
||||||
|
|
||||||
|
<!-- Display uploaded files -->
|
||||||
|
<div class="uploaded-files">
|
||||||
|
<h5>Uploaded Files:</h5>
|
||||||
|
<div class="file-grid">
|
||||||
|
{% set site_dir = 'sites/' + current_user.id|string + '/' + site.id|string %}
|
||||||
|
{% for file in list_files(site_dir) %}
|
||||||
|
<div class="file-card">
|
||||||
|
<div
|
||||||
|
class="file-icon {{ 'html' if file.endswith('.html') else 'css' if file.endswith('.css') else 'js' }}">
|
||||||
|
</div>
|
||||||
|
<span class="file-name">{{ file }}</span>
|
||||||
|
<form method="POST" action="{{ url_for('delete_file', site_id=site.id, filename=file) }}"
|
||||||
|
style="display: inline;">
|
||||||
|
<button type="submit" class="file-close">×</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Site Actions -->
|
||||||
|
<div class="site-actions">
|
||||||
|
<a href="{{ url_for('edit_site', site_id=site.id) }}" class="btn">Edit</a>
|
||||||
|
<a href="{{ url_for('serve_site_content', user_id=current_user.id, site_id=site.id) }}" class="btn"
|
||||||
|
target="_blank">View Site</a>
|
||||||
|
<form method="POST" action="{{ url_for('delete_site', site_id=site.id) }}" style="display: inline;">
|
||||||
|
<button type="submit" class="btn btn-danger">Delete Site</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- for File Management -->
|
||||||
|
<script>
|
||||||
|
const fileInput = document.querySelector('#file-input');
|
||||||
|
const fileGrid = document.querySelector('#file-grid');
|
||||||
|
|
||||||
|
function getFileIconClass(filename) {
|
||||||
|
if (filename.endsWith('.html')) return 'html';
|
||||||
|
if (filename.endsWith('.css')) return 'css';
|
||||||
|
if (filename.endsWith('.js')) return 'js';
|
||||||
|
return 'generic';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateFilePreview() {
|
||||||
|
fileGrid.innerHTML = '';
|
||||||
|
const files = Array.from(fileInput.files);
|
||||||
|
|
||||||
|
files.forEach((file, index) => {
|
||||||
|
const fileCard = document.createElement('div');
|
||||||
|
fileCard.className = 'file-card';
|
||||||
|
|
||||||
|
fileCard.innerHTML = `
|
||||||
|
<div class="file-icon ${getFileIconClass(file.name)}"></div>
|
||||||
|
<span class="file-name">${file.name}</span>
|
||||||
|
<button type="button" class="file-close" onclick="removeFile(${index})">×</button>
|
||||||
|
`;
|
||||||
|
|
||||||
|
fileGrid.appendChild(fileCard);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeFile(index) {
|
||||||
|
const files = Array.from(fileInput.files);
|
||||||
|
files.splice(index, 1);
|
||||||
|
|
||||||
|
const newFileList = new DataTransfer();
|
||||||
|
files.forEach(file => newFileList.items.add(file));
|
||||||
|
fileInput.files = newFileList.files;
|
||||||
|
|
||||||
|
updateFilePreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', updateFilePreview);
|
||||||
|
fileInput.addEventListener('change', () => {
|
||||||
|
document.querySelector('#file-preview').style.display = fileInput.files.length ? 'block' : 'non'
|
||||||
|
updateFilePreview();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Edit Site{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h2>Edit {{ site.name }}</h2>
|
||||||
|
<a href="{{ url_for('serve_site_content', user_id=current_user.id, site_id=site.id) }}" class="btn" target="_blank">View
|
||||||
|
Site</a>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 30px;"></div>
|
||||||
|
|
||||||
|
<label for="theme-selector">Select Theme:</label>
|
||||||
|
<select id="theme-selector" style="width: 200px;">
|
||||||
|
<!-- Theme options will be populated here -->
|
||||||
|
</select>
|
||||||
|
|
||||||
|
|
||||||
|
<form method="POST">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Site Name:</label>
|
||||||
|
<input type="text" name="name" value="{{ site.name }}">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% for filename, content in files.items() %}
|
||||||
|
<div class="form-group">
|
||||||
|
<label>{{ filename }}:</label>
|
||||||
|
<textarea name="{{ filename }}" rows="20"
|
||||||
|
data-language="{% if filename.endswith('.css') %}css{% elif filename.endswith('.js') %}javascript{% else %}htmlmixed{% endif %}">{{ content|trim }}</textarea>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<button type="submit">Save Changes</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Ace Editor -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ext-themelist.js"></script>
|
||||||
|
|
||||||
|
<!-- Select2 -->
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
|
||||||
|
<script src="{{ url_for('static', filename='editor.js') }}"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Style for the Select2 dropdown */
|
||||||
|
.select2-container {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ensure the editor has a defined height */
|
||||||
|
#editor {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 500px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Home{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h1>Welcome to Static Site Host</h1>
|
||||||
|
<p>Upload and manage your static websites easily!</p>
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Login{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h2>Login</h2>
|
||||||
|
<form method="POST" action="{{ url_for('login') }}">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Email:</label>
|
||||||
|
<input type="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password:</label>
|
||||||
|
<input type="password" name="password" required>
|
||||||
|
</div>
|
||||||
|
<button type="submit">Login</button>
|
||||||
|
</form>
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Register{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<h2>Register</h2>
|
||||||
|
<form method="POST" action="{{ url_for('register') }}">
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Email:</label>
|
||||||
|
<input type="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>Password:</label>
|
||||||
|
<input type="password" name="password" required>
|
||||||
|
</div>
|
||||||
|
<button type="submit">Register</button>
|
||||||
|
</form>
|
||||||
|
{% endblock %}
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>About Page</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>About Us</h1>
|
||||||
|
<nav>
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="about.html">About</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>This is the about page. Learn more about us here!</p>
|
||||||
|
<button id="click-me">Click Me</button>
|
||||||
|
</main>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Home Page</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Welcome to My Site</h1>
|
||||||
|
<nav>
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="about.html">About</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<p>This is the home page. Check out the <a href="about.html">About page</a>!</p>
|
||||||
|
<button id="click-me">Click Me</button>
|
||||||
|
</main>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const button = document.querySelector('#click-me');
|
||||||
|
if (button) {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
alert('Button clicked!');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
+222
@@ -0,0 +1,222 @@
|
|||||||
|
/* General Styles */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
background-color: #0c1522;
|
||||||
|
color: #cccccc;
|
||||||
|
padding: 20px;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation Bar */
|
||||||
|
.navbar {
|
||||||
|
background-color: #325270;
|
||||||
|
color: white;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar a:hover {
|
||||||
|
color: #1abc9c;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flash Messages */
|
||||||
|
.flash-message {
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-weight: bold;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flash-success {
|
||||||
|
background-color: #d4edda;
|
||||||
|
color: #155724;
|
||||||
|
border: 1px solid #c3e6cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flash-error {
|
||||||
|
background-color: #f8d7da;
|
||||||
|
color: #721c24;
|
||||||
|
border: 1px solid #f5c6cb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms */
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
border-color: #1abc9c;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 5px rgba(26, 188, 156, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
button,
|
||||||
|
.btn {
|
||||||
|
padding: 10px 18px;
|
||||||
|
margin: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
background-color: #1abc9c;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
background-color: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger:hover {
|
||||||
|
background-color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover,
|
||||||
|
.btn:hover {
|
||||||
|
background-color: #16a085;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Site Cards */
|
||||||
|
.site-card {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-card:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-card h4 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-card p {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Uploaded Files List */
|
||||||
|
.uploaded-files {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploaded-files h5 {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploaded-files ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploaded-files li {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #777;
|
||||||
|
padding: 5px 0;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploaded-files li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Site Actions */
|
||||||
|
.site-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Headings */
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark Mode Toggle */
|
||||||
|
#theme-toggle {
|
||||||
|
margin-left: auto;
|
||||||
|
background-color: #34495e;
|
||||||
|
color: white;
|
||||||
|
border: 1px solid #2c3e50;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#theme-toggle:hover {
|
||||||
|
background-color: #2c3e50;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user