137 lines
8.3 KiB
HTML
137 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{% block title %}Cipher Shield{% endblock %}</title>
|
|
{% if project_description %}
|
|
<meta name="description" content="{{ project_description }}">
|
|
<meta property="og:description" content="{{ project_description }}">
|
|
<meta property="twitter:description" content="{{ project_description }}">
|
|
{% endif %}
|
|
{% if project_image_url %}
|
|
<meta property="og:image" content="{{ project_image_url }}">
|
|
<meta property="twitter:image" content="{{ project_image_url }}">
|
|
{% endif %}
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
{% load static %}
|
|
<link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
|
|
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
|
|
<nav class="bg-white dark:bg-gray-800 shadow-md">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="{% url 'landing_page' %}" class="font-bold text-xl">Cipher Shield</a>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<a href="{% url 'post_list' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Blog</a>
|
|
<div class="relative inline-block text-left">
|
|
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="options-menu" aria-haspopup="true" aria-expanded="false">
|
|
Tools
|
|
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
|
<div class="py-1" role="none">
|
|
<a href="{% url 'image_generator' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Image Generator</a>
|
|
<a href="{% url 'ad_generator' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Ad Generator</a>
|
|
<a href="{% url 'ai_chat' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">AI Chat</a>
|
|
<a href="{% url 'graphics_editor' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Graphics Editor</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 ml-2">
|
|
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.272a1 1 0 01-1.393 1.138l-.053-.057a5 5 0 00-6.19-6.19l-.057-.053a1 1 0 011.138-1.393l.057.053a7.001 7.001 0 018.825 8.825l.053.057z"></path></svg>
|
|
</button>
|
|
{% if user.is_authenticated %}
|
|
<a href="{% url 'logout' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Logout</a>
|
|
<a href="{% url 'post_create' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Create Post</a>
|
|
{% else %}
|
|
<a href="{% url 'login' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700">Login</a>
|
|
<a href="{% url 'signup' %}" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-white bg-blue-500 hover:bg-blue-600">Sign Up</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main class="container mx-auto mt-4 px-4">
|
|
<div class="flex flex-col lg:flex-row gap-4">
|
|
<aside class="lg:w-1/4">
|
|
<div class="glass-card p-4 h-full">
|
|
<h2 class="text-xl font-semibold mb-4">Navigation</h2>
|
|
<ul>
|
|
<li class="mb-2"><a href="{% url 'ai_chat' %}" class="hover:text-blue-500">AI Chat</a></li>
|
|
<li class="mb-2"><a href="{% url 'image_generator' %}" class="hover:text-blue-500">Image Generator</a></li>
|
|
<li class="mb-2"><a href="{% url 'ad_generator' %}" class="hover:text-blue-500">Ad Generator</a></li>
|
|
<li class="mb-2"><a href="{% url 'graphics_editor' %}" class="hover:text-blue-500">Graphics Editor</a></li>
|
|
<li class="mb-2"><a href="{% url 'post_list' %}" class="hover:text-blue-500">Blog</a></li>
|
|
{% if user.is_authenticated %}
|
|
<li class="mb-2"><a href="{% url 'post_create' %}" class="hover:text-blue-500">Create Post</a></li>
|
|
<li class="mb-2"><a href="{% url 'logout' %}" class="hover:text-blue-500">Logout</a></li>
|
|
{% else %}
|
|
<li class="mb-2"><a href="{% url 'login' %}" class="hover:text-blue-500">Login</a></li>
|
|
<li class="mb-2"><a href="{% url 'signup' %}" class="hover:text-blue-500">Sign Up</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
<section class="lg:w-3/4">
|
|
{% block content %}{% endblock %}
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const menuButton = document.getElementById('options-menu');
|
|
const menu = document.querySelector('[aria-labelledby="options-menu"]');
|
|
|
|
menuButton.addEventListener('click', function() {
|
|
const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
|
|
menuButton.setAttribute('aria-expanded', !isExpanded);
|
|
menu.classList.toggle('hidden');
|
|
});
|
|
|
|
// Theme toggle logic
|
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
|
const lightIcon = document.getElementById('theme-toggle-light-icon');
|
|
const darkIcon = document.getElementById('theme-toggle-dark-icon');
|
|
const htmlElement = document.documentElement;
|
|
|
|
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
|
if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
htmlElement.classList.add('dark');
|
|
darkIcon.classList.remove('hidden');
|
|
lightIcon.classList.add('hidden');
|
|
} else {
|
|
htmlElement.classList.remove('dark');
|
|
lightIcon.classList.remove('hidden');
|
|
darkIcon.classList.add('hidden');
|
|
}
|
|
|
|
themeToggleBtn.addEventListener('click', function() {
|
|
if (htmlElement.classList.contains('dark')) {
|
|
htmlElement.classList.remove('dark');
|
|
localStorage.setItem('theme', 'light');
|
|
lightIcon.classList.remove('hidden');
|
|
darkIcon.classList.add('hidden');
|
|
} else {
|
|
htmlElement.classList.add('dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
darkIcon.classList.remove('hidden');
|
|
lightIcon.classList.add('hidden');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|