mirror of
https://github.com/rudy3333/eversync.git
synced 2025-07-01 16:46:02 +00:00
185 lines
No EOL
5.6 KiB
HTML
185 lines
No EOL
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Eversync</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
{% load static %}
|
|
<link rel="icon" href="{% static 'favicon.ico' %}">
|
|
<link rel="stylesheet" href="{% static 'index-style.css' %}" ">
|
|
<link rel="stylesheet" href="{% static 'register-style.css' %}">
|
|
{% block scripts %}
|
|
{% include "sentry_replay.html" %}
|
|
{% endblock %}
|
|
<style>
|
|
.embed-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
padding: 20px;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.embed-card {
|
|
border: none;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.embed-card h3 {
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.webpage-embed img {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 300px;
|
|
object-fit: contain;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.embed-card iframe,
|
|
.embed-card embed,
|
|
.embed-card video {
|
|
width: 100%;
|
|
height: 315px;
|
|
max-width: 90%;
|
|
text-align: center;
|
|
margin: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.dark .embed-card {
|
|
background-color: #242526;
|
|
color: #e4e6eb;
|
|
box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.dark .embed-card h3 {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.dark .register-button {
|
|
background-color: #3cb14a !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.dark .register-button:hover {
|
|
background-color: #37a045 !important;
|
|
}
|
|
|
|
.dark button[type="submit"] {
|
|
background-color: #b13c33 !important;
|
|
}
|
|
|
|
.dark .header {
|
|
background-color: #242526 !important;
|
|
}
|
|
|
|
.dark .logo {
|
|
color: #e4e6eb !important;
|
|
}
|
|
|
|
.dark .nav-links button,
|
|
.dark .dropdown-toggle {
|
|
color: #e4e6eb !important;
|
|
}
|
|
|
|
.dark .dropdown-menu {
|
|
background-color: #3a3b3c;
|
|
border-color: #555;
|
|
}
|
|
|
|
.dark body {
|
|
background-color: #18191a;
|
|
color: #e4e6eb;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<div class="header-content">
|
|
<a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
|
|
<a href="/" class="logo" >eversync</a>
|
|
<div class="nav-links" style="position: relative;">
|
|
<div class="dropdown">
|
|
<button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
|
|
Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
|
|
</button>
|
|
<div class="dropdown-menu" style="display: none; position: absolute; right: 0; background-color: #333; border: 1px solid #444; border-radius: 4px; padding: 10px; width: 184px;">
|
|
|
|
<form action="{% url 'manage' %}" method="post" style="margin: 0;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Manage Account</button>
|
|
</form>
|
|
|
|
<form action="{% url 'logoutz' %}" method="post" style="margin: 0;">
|
|
{% csrf_token %}
|
|
<button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
|
|
</form>
|
|
<button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: center;">
|
|
<a href="{% url 'add_embed' %}" class="register-button" style="margin-top: 10px; width: 200px; text-align: center; text-decoration: none; ">Add new embed</a>
|
|
</div>
|
|
|
|
|
|
<div class="embed-grid">
|
|
{% for embed in embeds %}
|
|
<div class="embed-card">
|
|
<h3>{{ embed.title }}</h3>
|
|
<form action="{% url 'delete_embed' embed.id %}" method="post" style="margin-bottom: 10px;">
|
|
{% csrf_token %}
|
|
<button type="submit" style="background-color: #e74c3c; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer;">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
<div>{{ embed.embed_html|safe }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const toggle = document.querySelector('.dropdown-toggle');
|
|
const menu = document.querySelector('.dropdown-menu');
|
|
toggle.addEventListener('click', function () {
|
|
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
|
|
});
|
|
});
|
|
|
|
const toggle = document.getElementById("themeToggle");
|
|
const root = document.documentElement;
|
|
|
|
if (localStorage.getItem("theme") === "dark") {
|
|
root.classList.add("dark");
|
|
}
|
|
|
|
toggle.addEventListener("click", () => {
|
|
root.classList.toggle("dark");
|
|
if (root.classList.contains("dark")) {
|
|
localStorage.setItem("theme", "dark");
|
|
} else {
|
|
localStorage.setItem("theme", "light");
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |