Upload 5 files

templates/admin/add_blog.html

@@ -0,0 +1,178 @@
+{% extends "base.html" %}
+
+{% block title %}Add Blog{% endblock %}
+
+{% block content %}
+<div class="add-blog-container">
+    <div class="form-box">
+        <h2 class="glitch" data-text="ADD NEW BLOG">ADD NEW BLOG</h2>
+        <div class="warning-box">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span>CLASSIFIED INFORMATION</span>
+        </div>
+        <form method="POST" action="{{ url_for('admin.add_blog') }}" class="blog-form">
+            <div class="form-group">
+                <label for="title">
+                    <i class="fas fa-heading"></i> TITLE
+                </label>
+                <input type="text" class="form-control" id="title" name="title" required>
+            </div>
+            
+            <div class="form-group">
+                <label for="content">
+                    <i class="fas fa-file-alt"></i> CONTENT
+                </label>
+                <textarea class="form-control" id="content" name="content" rows="8" required></textarea>
+            </div>
+            
+            <div class="form-group">
+                <label for="image_url">
+                    <i class="fas fa-image"></i> IMAGE URL
+                </label>
+                <input type="url" class="form-control" id="image_url" name="image_url">
+            </div>
+            
+            <div class="button-group">
+                <button type="submit" class="btn btn-danger">
+                    <i class="fas fa-plus me-2"></i>PUBLISH BLOG
+                </button>
+                <a href="{{ url_for('admin.index') }}" class="btn btn-outline-danger">
+                    <i class="fas fa-times me-2"></i>CANCEL
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<style>
+.add-blog-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 80vh;
+    padding: 2rem;
+}
+
+.form-box {
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid var(--accent);
+    padding: 2rem;
+    border-radius: 4px;
+    width: 100%;
+    max-width: 800px;
+    position: relative;
+    overflow: hidden;
+}
+
+.form-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, transparent, var(--accent), transparent);
+    animation: scan 2s linear infinite;
+}
+
+@keyframes scan {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.form-box h2 {
+    text-align: center;
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+    margin-bottom: 2rem;
+}
+
+.warning-box {
+    background: rgba(255, 0, 0, 0.1);
+    border: 1px solid var(--accent);
+    padding: 1rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.warning-box i {
+    margin-right: 0.5rem;
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text);
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.form-control {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--accent);
+    color: var(--text);
+    padding: 0.75rem;
+    width: 100%;
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.form-control:focus {
+    outline: none;
+    box-shadow: 0 0 5px var(--accent);
+    border-color: var(--accent);
+    background: rgba(0, 0, 0, 0.7);
+}
+
+textarea.form-control {
+    resize: vertical;
+    min-height: 200px;
+}
+
+.button-group {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.btn {
+    flex: 1;
+    padding: 0.75rem;
+    font-family: 'Share Tech Mono', monospace;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+}
+
+.btn-danger {
+    background: var(--accent);
+    border: none;
+}
+
+.btn-outline-danger {
+    background: transparent;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
+}
+
+.btn-outline-danger:hover {
+    background: rgba(255, 0, 0, 0.1);
+}
+</style>
+{% endblock %}

templates/admin/add_gang.html

@@ -0,0 +1,199 @@
+{% extends "base.html" %}
+
+{% block title %}Add Gang{% endblock %}
+
+{% block content %}
+<div class="add-gang-container">
+    <div class="form-box">
+        <h2 class="glitch" data-text="ADD NEW GANG">ADD NEW GANG</h2>
+        <div class="warning-box">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span>CLASSIFIED INFORMATION</span>
+        </div>
+        <form method="POST" action="{{ url_for('admin.add_gang') }}" class="gang-form">
+            <div class="form-group">
+                <label for="name">
+                    <i class="fas fa-users"></i> GANG NAME
+                </label>
+                <input type="text" class="form-control" id="name" name="name" required>
+            </div>
+            
+            <div class="form-group">
+                <label for="description">
+                    <i class="fas fa-file-alt"></i> DESCRIPTION
+                </label>
+                <textarea class="form-control" id="description" name="description" rows="4" required></textarea>
+            </div>
+            
+            <div class="form-group">
+                <label for="known_members">
+                    <i class="fas fa-user-secret"></i> KNOWN MEMBERS
+                </label>
+                <textarea class="form-control" id="known_members" name="known_members" rows="4" placeholder="Enter each member's name on a new line"></textarea>
+            </div>
+
+            <div class="form-group">
+                <label for="territory">
+                    <i class="fas fa-map-marker-alt"></i> TERRITORY
+                </label>
+                <textarea class="form-control" id="territory" name="territory" rows="3" placeholder="Enter each territory on a new line"></textarea>
+            </div>
+
+            <div class="form-group">
+                <label for="known_activities">
+                    <i class="fas fa-exclamation-circle"></i> KNOWN ACTIVITIES
+                </label>
+                <textarea class="form-control" id="known_activities" name="known_activities" rows="4" placeholder="Enter each activity on a new line"></textarea>
+            </div>
+            
+            <div class="form-group">
+                <label for="image_url">
+                    <i class="fas fa-image"></i> IMAGE URL
+                </label>
+                <input type="url" class="form-control" id="image_url" name="image_url">
+            </div>
+            
+            <div class="button-group">
+                <button type="submit" class="btn btn-danger">
+                    <i class="fas fa-plus me-2"></i>ADD GANG
+                </button>
+                <a href="{{ url_for('admin.index') }}" class="btn btn-outline-danger">
+                    <i class="fas fa-times me-2"></i>CANCEL
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<style>
+.add-gang-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 80vh;
+    padding: 2rem;
+}
+
+.form-box {
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid var(--accent);
+    padding: 2rem;
+    border-radius: 4px;
+    width: 100%;
+    max-width: 800px;
+    position: relative;
+    overflow: hidden;
+}
+
+.form-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, transparent, var(--accent), transparent);
+    animation: scan 2s linear infinite;
+}
+
+@keyframes scan {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.form-box h2 {
+    text-align: center;
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+    margin-bottom: 2rem;
+}
+
+.warning-box {
+    background: rgba(255, 0, 0, 0.1);
+    border: 1px solid var(--accent);
+    padding: 1rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.warning-box i {
+    margin-right: 0.5rem;
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text);
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.form-control {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--accent);
+    color: var(--text);
+    padding: 0.75rem;
+    width: 100%;
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.form-control:focus {
+    outline: none;
+    box-shadow: 0 0 5px var(--accent);
+    border-color: var(--accent);
+    background: rgba(0, 0, 0, 0.7);
+}
+
+textarea.form-control {
+    resize: vertical;
+    min-height: 100px;
+}
+
+.button-group {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.btn {
+    flex: 1;
+    padding: 0.75rem;
+    font-family: 'Share Tech Mono', monospace;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+}
+
+.btn-danger {
+    background: var(--accent);
+    border: none;
+}
+
+.btn-outline-danger {
+    background: transparent;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
+}
+
+.btn-outline-danger:hover {
+    background: rgba(255, 0, 0, 0.1);
+}
+</style>
+{% endblock %}

templates/admin/edit_blog.html

@@ -0,0 +1,178 @@
+{% extends "base.html" %}
+
+{% block title %}Edit Blog{% endblock %}
+
+{% block content %}
+<div class="edit-blog-container">
+    <div class="form-box">
+        <h2 class="glitch" data-text="EDIT BLOG">EDIT BLOG</h2>
+        <div class="warning-box">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span>CLASSIFIED INFORMATION</span>
+        </div>
+        <form method="POST" action="{{ url_for('admin.edit_blog', blog_id=blog.id) }}" class="blog-form">
+            <div class="form-group">
+                <label for="title">
+                    <i class="fas fa-heading"></i> TITLE
+                </label>
+                <input type="text" class="form-control" id="title" name="title" value="{{ blog.title }}" required>
+            </div>
+            
+            <div class="form-group">
+                <label for="content">
+                    <i class="fas fa-file-alt"></i> CONTENT
+                </label>
+                <textarea class="form-control" id="content" name="content" rows="8" required>{{ blog.content }}</textarea>
+            </div>
+            
+            <div class="form-group">
+                <label for="image_url">
+                    <i class="fas fa-image"></i> IMAGE URL
+                </label>
+                <input type="url" class="form-control" id="image_url" name="image_url" value="{{ blog.image_url or '' }}">
+            </div>
+            
+            <div class="button-group">
+                <button type="submit" class="btn btn-danger">
+                    <i class="fas fa-save me-2"></i>SAVE CHANGES
+                </button>
+                <a href="{{ url_for('admin.index') }}" class="btn btn-outline-danger">
+                    <i class="fas fa-times me-2"></i>CANCEL
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<style>
+.edit-blog-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 80vh;
+    padding: 2rem;
+}
+
+.form-box {
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid var(--accent);
+    padding: 2rem;
+    border-radius: 4px;
+    width: 100%;
+    max-width: 800px;
+    position: relative;
+    overflow: hidden;
+}
+
+.form-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, transparent, var(--accent), transparent);
+    animation: scan 2s linear infinite;
+}
+
+@keyframes scan {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.form-box h2 {
+    text-align: center;
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+    margin-bottom: 2rem;
+}
+
+.warning-box {
+    background: rgba(255, 0, 0, 0.1);
+    border: 1px solid var(--accent);
+    padding: 1rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.warning-box i {
+    margin-right: 0.5rem;
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text);
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.form-control {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--accent);
+    color: var(--text);
+    padding: 0.75rem;
+    width: 100%;
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.form-control:focus {
+    outline: none;
+    box-shadow: 0 0 5px var(--accent);
+    border-color: var(--accent);
+    background: rgba(0, 0, 0, 0.7);
+}
+
+textarea.form-control {
+    resize: vertical;
+    min-height: 200px;
+}
+
+.button-group {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.btn {
+    flex: 1;
+    padding: 0.75rem;
+    font-family: 'Share Tech Mono', monospace;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+}
+
+.btn-danger {
+    background: var(--accent);
+    border: none;
+}
+
+.btn-outline-danger {
+    background: transparent;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
+}
+
+.btn-outline-danger:hover {
+    background: rgba(255, 0, 0, 0.1);
+}
+</style>
+{% endblock %}

templates/admin/edit_gang.html

@@ -0,0 +1,199 @@
+{% extends "base.html" %}
+
+{% block title %}Edit Gang{% endblock %}
+
+{% block content %}
+<div class="edit-gang-container">
+    <div class="form-box">
+        <h2 class="glitch" data-text="EDIT GANG">EDIT GANG</h2>
+        <div class="warning-box">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span>CLASSIFIED INFORMATION</span>
+        </div>
+        <form method="POST" action="{{ url_for('admin.edit_gang', gang_id=gang.id) }}" class="gang-form">
+            <div class="form-group">
+                <label for="name">
+                    <i class="fas fa-users"></i> GANG NAME
+                </label>
+                <input type="text" class="form-control" id="name" name="name" value="{{ gang.name }}" required>
+            </div>
+            
+            <div class="form-group">
+                <label for="description">
+                    <i class="fas fa-file-alt"></i> DESCRIPTION
+                </label>
+                <textarea class="form-control" id="description" name="description" rows="4" required>{{ gang.description }}</textarea>
+            </div>
+            
+            <div class="form-group">
+                <label for="status">
+                    <i class="fas fa-info-circle"></i> STATUS
+                </label>
+                <select class="form-control" id="status" name="status">
+                    <option value="Active" {% if gang.status == 'Active' %}selected{% endif %}>Active</option>
+                    <option value="Inactive" {% if gang.status == 'Inactive' %}selected{% endif %}>Inactive</option>
+                    <option value="Unknown" {% if gang.status == 'Unknown' %}selected{% endif %}>Unknown</option>
+                </select>
+            </div>
+            
+            <div class="form-group">
+                <label for="location">
+                    <i class="fas fa-map-marker-alt"></i> LOCATION
+                </label>
+                <input type="text" class="form-control" id="location" name="location" value="{{ gang.location or '' }}">
+            </div>
+            
+            <div class="form-group">
+                <label for="image_url">
+                    <i class="fas fa-image"></i> IMAGE URL
+                </label>
+                <input type="url" class="form-control" id="image_url" name="image_url" value="{{ gang.image_url or '' }}">
+            </div>
+            
+            <div class="button-group">
+                <button type="submit" class="btn btn-danger">
+                    <i class="fas fa-save me-2"></i>SAVE CHANGES
+                </button>
+                <a href="{{ url_for('admin.index') }}" class="btn btn-outline-danger">
+                    <i class="fas fa-times me-2"></i>CANCEL
+                </a>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<style>
+.edit-gang-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    min-height: 80vh;
+    padding: 2rem;
+}
+
+.form-box {
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid var(--accent);
+    padding: 2rem;
+    border-radius: 4px;
+    width: 100%;
+    max-width: 600px;
+    position: relative;
+    overflow: hidden;
+}
+
+.form-box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, transparent, var(--accent), transparent);
+    animation: scan 2s linear infinite;
+}
+
+@keyframes scan {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.form-box h2 {
+    text-align: center;
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+    margin-bottom: 2rem;
+}
+
+.warning-box {
+    background: rgba(255, 0, 0, 0.1);
+    border: 1px solid var(--accent);
+    padding: 1rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.warning-box i {
+    margin-right: 0.5rem;
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: var(--text);
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.form-control {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid var(--accent);
+    color: var(--text);
+    padding: 0.75rem;
+    width: 100%;
+    font-family: 'Share Tech Mono', monospace;
+}
+
+.form-control:focus {
+    outline: none;
+    box-shadow: 0 0 5px var(--accent);
+    border-color: var(--accent);
+    background: rgba(0, 0, 0, 0.7);
+}
+
+select.form-control {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ff0000' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 1rem center;
+    padding-right: 2.5rem;
+}
+
+.button-group {
+    display: flex;
+    gap: 1rem;
+    margin-top: 2rem;
+}
+
+.btn {
+    flex: 1;
+    padding: 0.75rem;
+    font-family: 'Share Tech Mono', monospace;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+}
+
+.btn-danger {
+    background: var(--accent);
+    border: none;
+}
+
+.btn-outline-danger {
+    background: transparent;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
+}
+
+.btn-outline-danger:hover {
+    background: rgba(255, 0, 0, 0.1);
+}
+</style>
+{% endblock %}

templates/admin/index.html

@@ -0,0 +1,268 @@
+{% extends "base.html" %}
+
+{% block title %}Admin Dashboard{% endblock %}
+
+{% block content %}
+<div class="admin-dashboard">
+    <section class="gangs-section">
+        <div class="section-header">
+            <h2 class="glitch" data-text="GANGS">GANGS</h2>
+            <a href="{{ url_for('admin.add_gang') }}" class="btn btn-danger">
+                <i class="fas fa-plus"></i> ADD GANG
+            </a>
+        </div>
+
+        <div class="data-grid">
+            {% for gang in gangs %}
+            <div class="data-card">
+                <div class="card-header">
+                    {% if gang.image_url %}
+                    <div class="card-image">
+                        <img src="{{ gang.image_url }}" alt="{{ gang.name }}">
+                    </div>
+                    {% endif %}
+                    <h3>{{ gang.name }}</h3>
+                </div>
+                <div class="card-body">
+                    <p class="description">{{ gang.description[:150] }}...</p>
+                    <div class="details">
+                        <div class="detail-item">
+                            <i class="fas fa-users"></i>
+                            <span>{{ gang.known_members|length }} Members</span>
+                        </div>
+                        <div class="detail-item">
+                            <i class="fas fa-map-marker-alt"></i>
+                            <span>{{ gang.territory|length }} Territories</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <a href="{{ url_for('admin.edit_gang', gang_id=gang.id) }}" class="btn btn-sm btn-outline-danger">
+                        <i class="fas fa-edit"></i> EDIT
+                    </a>
+                    <form action="{{ url_for('admin.delete_gang', gang_id=gang.id) }}" method="POST" class="d-inline">
+                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to delete this gang?')">
+                            <i class="fas fa-trash"></i> DELETE
+                        </button>
+                    </form>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+
+    <section class="blogs-section">
+        <div class="section-header">
+            <h2 class="glitch" data-text="BLOGS">BLOGS</h2>
+            <a href="{{ url_for('admin.add_blog') }}" class="btn btn-danger">
+                <i class="fas fa-plus"></i> ADD BLOG
+            </a>
+        </div>
+
+        <div class="data-grid">
+            {% for blog in blogs %}
+            <div class="data-card">
+                <div class="card-header">
+                    {% if blog.image_url %}
+                    <div class="card-image">
+                        <img src="{{ blog.image_url }}" alt="{{ blog.title }}">
+                    </div>
+                    {% endif %}
+                    <h3>{{ blog.title }}</h3>
+                </div>
+                <div class="card-body">
+                    <p class="description">{{ blog.content[:150] }}...</p>
+                    <div class="meta">
+                        <span class="date">
+                            <i class="fas fa-calendar"></i>
+                            {{ blog.created_at.split('T')[0] }}
+                        </span>
+                    </div>
+                </div>
+                <div class="card-footer">
+                    <a href="{{ url_for('admin.edit_blog', blog_id=blog.id) }}" class="btn btn-sm btn-outline-danger">
+                        <i class="fas fa-edit"></i> EDIT
+                    </a>
+                    <form action="{{ url_for('admin.delete_blog', blog_id=blog.id) }}" method="POST" class="d-inline">
+                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to delete this blog?')">
+                            <i class="fas fa-trash"></i> DELETE
+                        </button>
+                    </form>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<style>
+.admin-dashboard {
+    padding: 2rem;
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.section-header h2 {
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+    margin: 0;
+}
+
+.data-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+.data-card {
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid var(--accent);
+    position: relative;
+    overflow: hidden;
+}
+
+.data-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(to right, transparent, var(--accent), transparent);
+    animation: scan 2s linear infinite;
+}
+
+@keyframes scan {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+.card-header {
+    padding: 1rem;
+    border-bottom: 1px solid var(--accent);
+}
+
+.card-image {
+    width: 100%;
+    height: 150px;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    border: 1px solid var(--accent);
+}
+
+.card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.card-image:hover img {
+    transform: scale(1.05);
+}
+
+.card-header h3 {
+    color: var(--accent);
+    font-family: 'Share Tech Mono', monospace;
+    margin: 0;
+    font-size: 1.2rem;
+}
+
+.card-body {
+    padding: 1rem;
+}
+
+.description {
+    color: var(--text);
+    margin-bottom: 1rem;
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.details {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.detail-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text);
+    font-size: 0.9rem;
+}
+
+.detail-item i {
+    color: var(--accent);
+}
+
+.meta {
+    color: var(--text);
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.meta i {
+    margin-right: 0.5rem;
+    color: var(--accent);
+}
+
+.card-footer {
+    padding: 1rem;
+    border-top: 1px solid var(--accent);
+    display: flex;
+    gap: 1rem;
+}
+
+.btn {
+    font-family: 'Share Tech Mono', monospace;
+    letter-spacing: 1px;
+    transition: all 0.3s ease;
+}
+
+.btn-danger {
+    background: var(--accent);
+    border: none;
+    padding: 0.5rem 1rem;
+}
+
+.btn-outline-danger {
+    background: transparent;
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    padding: 0.5rem 1rem;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
+}
+
+.btn-outline-danger:hover {
+    background: rgba(255, 0, 0, 0.1);
+}
+
+.btn i {
+    margin-right: 0.5rem;
+}
+
+@media (max-width: 768px) {
+    .admin-dashboard {
+        padding: 1rem;
+    }
+
+    .data-grid {
+        grid-template-columns: 1fr;
+    }
+}
+</style>
+{% endblock %}