mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
0d0a707019
Introduces a responsive theme toggle button with styles for desktop and mobile views in `theme-toggle.css`. Updates `BitcoinProgressBar.js` to support dynamic theme changes and adds a new `updateTheme` method. Enhances `main.js` for theme management based on user preferences in `localStorage`. Modifies `base.html` and other HTML files to include the theme toggle button and necessary scripts. Introduces `theme.js` for managing theme constants and applying the DeepSea theme.
96 lines
3.7 KiB
HTML
96 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}NOTIFICATIONS - BTC-OS MINING DASHBOARD v 0.3{% endblock %}
|
|
|
|
{% block css %}
|
|
<link rel="stylesheet" href="/static/css/notifications.css">
|
|
<link rel="stylesheet" href="/static/css/theme-toggle.css">
|
|
{% endblock %}
|
|
|
|
{% block header %}NOTIFICATION CENTER v 0.1{% endblock %}
|
|
|
|
{% block notifications_active %}active{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Notification Controls -->
|
|
<div class="row mb-2">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">NOTIFICATION CONTROLS</div>
|
|
<div class="card-body">
|
|
<div class="notification-controls">
|
|
<div class="filter-buttons">
|
|
<button class="filter-button active" data-filter="all">All</button>
|
|
<button class="filter-button" data-filter="hashrate">Hashrate</button>
|
|
<button class="filter-button" data-filter="block">Blocks</button>
|
|
<button class="filter-button" data-filter="worker">Workers</button>
|
|
<button class="filter-button" data-filter="earnings">Earnings</button>
|
|
<button class="filter-button" data-filter="system">System</button>
|
|
</div>
|
|
<div class="notification-actions">
|
|
<button id="mark-all-read" class="action-button">Mark All as Read</button>
|
|
<button id="clear-read" class="action-button">Clear Read Notifications</button>
|
|
<button id="clear-all" class="action-button danger">Clear All</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifications List -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span>NOTIFICATIONS</span>
|
|
<span id="unread-badge" class="unread-badge">0</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="notifications-container">
|
|
<!-- Notifications will be populated here by JavaScript -->
|
|
<div class="loading-message">Loading notifications<span class="terminal-cursor"></span></div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="pagination-controls">
|
|
<button id="load-more" class="load-more-button">LOAD MORE</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State Template (hidden) -->
|
|
<div id="empty-template" style="display:none;">
|
|
<div class="empty-state">
|
|
<i class="fas fa-bell-slash"></i>
|
|
<p>No notifications to display</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Template (hidden) -->
|
|
<div id="notification-template" style="display:none;">
|
|
<div class="notification-item" data-id="">
|
|
<div class="notification-icon">
|
|
<i class="fas"></i>
|
|
</div>
|
|
<div class="notification-content">
|
|
<div class="notification-message"></div>
|
|
<div class="notification-meta">
|
|
<span class="notification-time"></span>
|
|
<span class="notification-category"></span>
|
|
</div>
|
|
</div>
|
|
<div class="notification-actions">
|
|
<button class="mark-read-button"><i class="fas fa-check"></i></button>
|
|
<button class="delete-button"><i class="fas fa-trash"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascript %}
|
|
<script src="/static/js/notifications.js"></script>
|
|
{% endblock %}
|