From 402e321396b8d3e9b89d87cce00dfbfee910a2d9 Mon Sep 17 00:00:00 2001 From: Nathan Woodburn Date: Mon, 28 Jul 2025 11:36:51 +1000 Subject: [PATCH] feat: Update styling and home page --- alerts.py | 2 +- server.py | 1 - templates/account.html | 193 ++++++++++-------- templates/assets/css/account.css | 276 ++++++++++++++++++++++++++ templates/assets/css/index.css | 328 ++++++++++++++++++++----------- templates/index.html | 68 ++++++- 6 files changed, 662 insertions(+), 206 deletions(-) create mode 100644 templates/assets/css/account.css diff --git a/alerts.py b/alerts.py index 16cb4e0..66dad05 100644 --- a/alerts.py +++ b/alerts.py @@ -63,7 +63,7 @@ NOTIFICATION_TYPES = [ "description": "Send a telegram notification.", "links": [ { - "label": "Link your Telegram account", + "label": "Link your Telegram", "url": "/telegram/link" } ] diff --git a/server.py b/server.py index 924449a..355789d 100644 --- a/server.py +++ b/server.py @@ -340,7 +340,6 @@ def api_add_notification(token: str): domains.add_notification(domain, notification) return jsonify({"message": "Notification added successfully", "notification": notification}), 201 - # endregion # region Error Catching diff --git a/templates/account.html b/templates/account.html index 97455cb..2e41555 100644 --- a/templates/account.html +++ b/templates/account.html @@ -4,9 +4,10 @@ - FireAlerts + FireAlerts - Account + @@ -16,97 +17,117 @@ -
- Logged in as {{user.username}} - Logout -
- -

FireAlerts

- -
-

Your Alerts

-
- - - {% if notifications %} -
- {% for notification in notifications %} -
-

Domain: {{notification.domain}}

-

Type: {{notification.notification.type.replace('_', ' ').title()}}

-

Blocks before expiry: {{notification.notification.blocks}}

- {% for notificationType in NOTIFICATION_TYPES %} - {% if notificationType.type == notification.notification.type %} - {% for field in notificationType.fields %} -

{{field.label}}: {{notification.notification[field.name]}}

- {% endfor %} - {% endif %} - {% endfor %} - - - Delete -
- {% endfor %} -
- {% else %} -
-

You have no notifications set up yet.

-

Use the forms below to add new notifications.

-
- - {% endif %} - -
-

Setup your alerts below:

-
- - {% for notificationType in NOTIFICATION_TYPES %} -
-

{{notificationType.description}}

-
- -
- - +
+ - -
- - - -

Note: 144 blocks is approximately 1 day, 1008 blocks is approximately 1 week, and 4320 - blocks is approximately 1 month.

-
+
+
+

Your Active Alerts

+ + {% if notifications %} +
+ {% for notification in notifications %} +
+
+

{{notification.domain}}

+ {{notification.notification.type.replace('_', ' ').title()}} +
+ +
+
+ Alert Threshold: + {{notification.notification.blocks}} blocks +
+ + {% for notificationType in NOTIFICATION_TYPES %} + {% if notificationType.type == notification.notification.type %} + {% for field in notificationType.fields %} + {% if field.name != 'username' %} +
+ {{field.label}}: + {{notification.notification[field.name]}} +
+ {% endif %} + {% endfor %} + {% endif %} + {% endfor %} +
+ +
+ Delete +
+
+ {% endfor %} +
+ {% else %} +
+
📭
+

No alerts configured

+

You haven't set up any domain expiry alerts yet. Use the forms below to add your first notification.

+
+ {% endif %} +
- +
+

Add New Alert

+

Set up notifications to be alerted before your Handshake domains expire.

+ +
+ {% for notificationType in NOTIFICATION_TYPES %} +
+
+

{{notificationType.description}}

+
+ + +
+
+ + +
- {% if notificationType.links %} - {% for link in notificationType.links %} - {{link.label}} - {% endfor %} - {% endif %} - + {% for field in notificationType.fields %} + {% if field.type == 'username' %} + + {% else %} +
+ + +
+ {% endif %} + {% endfor %} + +
+ + + 💡 Tip: 144 blocks ≈ 1 day, 1008 blocks ≈ 1 week, 4320 blocks ≈ 1 month +
+
+ +
+ + + {% if notificationType.links %} + {% for link in notificationType.links %} + {{link.label}} + {% endfor %} + {% endif %} +
+ +
+ {% endfor %} +
+
+
- {% endfor %} \ No newline at end of file diff --git a/templates/assets/css/account.css b/templates/assets/css/account.css new file mode 100644 index 0000000..623613b --- /dev/null +++ b/templates/assets/css/account.css @@ -0,0 +1,276 @@ +.account-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px 0; + border-bottom: 1px solid rgba(255,255,255,0.1); + margin-bottom: 40px; +} + +.account-header .logo a { + color: white; + text-decoration: none; + font-size: 2rem; + font-weight: bold; + text-shadow: 0 2px 4px rgba(0,0,0,0.3); +} + +.user-info { + display: flex; + align-items: center; + gap: 20px; +} + +.user { + color: white; + font-weight: 500; + opacity: 0.9; +} + +.alerts-section, .add-alerts-section { + margin-bottom: 60px; +} + +.alerts-section h2, .add-alerts-section h2 { + color: white; + font-size: 2.5rem; + margin-bottom: 20px; + text-align: center; +} + +.section-description { + color: rgba(255,255,255,0.8); + text-align: center; + font-size: 1.1rem; + margin-bottom: 40px; +} + +.notifications-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); + gap: 20px; + margin-bottom: 40px; +} + +.notification-card { + background: rgba(30, 30, 46, 0.9); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 12px; + padding: 24px; + box-shadow: 0 4px 15px rgba(0,0,0,0.3); + transition: transform 0.3s ease; +} + +.notification-card:hover { + transform: translateY(-2px); + background: rgba(40, 40, 56, 0.9); +} + +.notification-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 1px solid rgba(255,255,255,0.1); +} + +.notification-header h3 { + color: white; + margin: 0; + font-size: 1.3rem; +} + +.notification-type { + background: #667eea; + color: white; + padding: 4px 12px; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; +} + +.notification-details { + margin-bottom: 20px; +} + +.detail-item { + display: flex; + justify-content: space-between; + margin-bottom: 8px; +} + +.detail-item .label { + color: #b0b0b0; + font-weight: 500; +} + +.detail-item .value { + color: white; + font-weight: 600; + word-break: break-all; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 200px; +} + +.notification-actions { + text-align: right; +} + +.delete-button { + background: #ff6b6b !important; + color: white !important; + padding: 8px 16px !important; + font-size: 0.9rem !important; +} + +.delete-button:hover { + background: #ff5252 !important; +} + +.empty-state { + text-align: center; + background: rgba(255,255,255,0.1); + border-radius: 20px; + padding: 60px 40px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,0.2); +} + +.empty-icon { + font-size: 4rem; + margin-bottom: 20px; +} + +.empty-state h3 { + color: white; + font-size: 1.8rem; + margin-bottom: 15px; +} + +.empty-state p { + color: rgba(255,255,255,0.8); + font-size: 1.1rem; +} + +.notification-forms { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + gap: 30px; +} + +.notification-form-card { + background: rgba(30, 30, 46, 0.9); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 16px; + padding: 30px; + box-shadow: 0 6px 20px rgba(0,0,0,0.3); +} + +.form-header h3 { + color: white; + margin-bottom: 20px; + font-size: 1.4rem; +} + +.notification-form { + display: flex; + flex-direction: column; +} + +.form-grid { + display: grid; + gap: 20px; + margin-bottom: 25px; +} + +.form-group { + display: flex; + flex-direction: column; +} + +.form-group label { + color: #e0e0e0; + font-weight: 600; + margin-bottom: 8px; + font-size: 0.95rem; +} + +.form-group input { + padding: 12px 16px; + border: 2px solid rgba(255,255,255,0.2); + border-radius: 8px; + font-size: 1rem; + transition: border-color 0.3s ease; + background: rgba(45, 45, 65, 0.8); + color: white; +} + +.form-group input:focus { + outline: none; + border-color: #667eea; + background: rgba(55, 55, 75, 0.9); +} + +.form-group input::placeholder { + color: #888; +} + +.form-note { + color: #b0b0b0; + font-size: 0.85rem; + margin-top: 5px; + line-height: 1.4; +} + +.form-actions { + display: flex; + gap: 15px; + align-items: center; + flex-wrap: wrap; +} + +.form-actions .button { + flex: 1; + min-width: 180px; + text-align: center; + padding: 12px 20px; + font-size: 1rem; +} + +@media (max-width: 768px) { + .account-header { + flex-direction: column; + gap: 20px; + text-align: center; + } + + .notifications-grid { + grid-template-columns: 1fr; + } + + .notification-forms { + grid-template-columns: 1fr; + } + + .form-actions { + flex-direction: column; + } + + .form-actions .button { + width: 100%; + min-width: auto; + } + + .alerts-section h2, .add-alerts-section h2 { + font-size: 2rem; + } +} + +@media (max-width: 480px) { + .notification-form-card { + padding: 20px; + } +} diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css index 4e6c96c..d466030 100644 --- a/templates/assets/css/index.css +++ b/templates/assets/css/index.css @@ -1,136 +1,238 @@ -body { - background-color: #000000; - color: #ffffff; -} -h1 { - font-size: 50px; +* { margin: 0; padding: 0; -} -.centre { - margin-top: 10%; - text-align: center; -} -a { - color: #ffffff; - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -.button { - display: inline-block; - padding: 10px 20px; - background-color: #ffffff; - color: #000000; - border-radius: 5px; - transition: background-color 0.3s ease; -} -.right { - float: right; -} -span.user { - font-weight: bold; - color: #ffffff; - margin-inline-end: 5px; -} - -.notification-form { - background-color: #1a1a1a; - border: 1px solid #333333; - border-radius: 8px; - padding: 20px; - margin: 20px auto; - max-width: 500px; -} - -.notification-form h3 { - margin-top: 0; - margin-bottom: 15px; - color: #ffffff; -} - -.form-group { - margin-bottom: 15px; -} - -.form-group label { - display: block; - margin-bottom: 5px; - font-weight: bold; - color: #ffffff; -} - -.form-group input { - width: 100%; - padding: 10px; - background-color: #333333; - border: 1px solid #555555; - border-radius: 4px; - color: #ffffff; - font-size: 14px; box-sizing: border-box; } -.form-group input:focus { - outline: none; - border-color: #ffffff; - background-color: #444444; +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + line-height: 1.6; + color: #e0e0e0; + background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); + min-height: 100vh; } -.notifications-list { - max-width: 800px; - margin: 30px auto; +.container { + max-width: 1200px; + margin: 0 auto; padding: 0 20px; } -.notifications-list h2 { - color: #ffffff; +header { + padding: 20px 0; text-align: center; +} + +.logo { + font-size: 2rem; + font-weight: bold; + color: white; + text-shadow: 0 2px 4px rgba(0,0,0,0.5); +} + +main { + padding: 40px 0; +} + +.hero { + text-align: center; + color: white; + margin-bottom: 80px; +} + +.hero h1 { + font-size: 3.5rem; + font-weight: 700; + margin-bottom: 20px; + text-shadow: 0 2px 4px rgba(0,0,0,0.5); +} + +.subtitle { + font-size: 1.25rem; + margin-bottom: 40px; + opacity: 0.9; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.cta-section { + display: flex; + gap: 20px; + justify-content: center; + flex-wrap: wrap; +} + +.button { + display: inline-block; + padding: 15px 30px; + text-decoration: none; + border-radius: 8px; + font-weight: 600; + font-size: 1.1rem; + transition: all 0.3s ease; + border: 2px solid transparent; +} + +.button.primary { + background: #ff6b6b; + color: white; + box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); +} + +.button.primary:hover { + background: #ff5252; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6); +} + +.button.secondary { + background: transparent; + color: white; + border-color: rgba(255,255,255,0.5); +} + +.button.secondary:hover { + background: rgba(255,255,255,0.1); + border-color: white; + transform: translateY(-2px); +} + +.features { + background: rgba(30, 30, 46, 0.8); + border: 1px solid rgba(255,255,255,0.1); + border-radius: 20px; + padding: 60px 40px; + margin-bottom: 60px; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); + backdrop-filter: blur(10px); +} + +.features h2 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 50px; + color: white; +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; +} + +.feature-card { + text-align: center; + padding: 30px 20px; + border-radius: 12px; + background: rgba(45, 45, 65, 0.6); + border: 1px solid rgba(255,255,255,0.1); + transition: transform 0.3s ease, background 0.3s ease; +} + +.feature-card:hover { + transform: translateY(-5px); + background: rgba(55, 55, 75, 0.8); +} + +.feature-icon { + font-size: 3rem; margin-bottom: 20px; } -.notification-item { - background-color: #1a1a1a; - border: 1px solid #333333; - border-radius: 8px; - padding: 15px; +.feature-card h3 { + font-size: 1.5rem; + margin-bottom: 15px; + color: white; +} + +.feature-card p { + color: #b0b0b0; + line-height: 1.6; +} + +.how-it-works { + background: rgba(255,255,255,0.05); + border-radius: 20px; + padding: 60px 40px; + backdrop-filter: blur(10px); + border: 1px solid rgba(255,255,255,0.1); +} + +.how-it-works h2 { + text-align: center; + font-size: 2.5rem; + margin-bottom: 50px; + color: white; +} + +.steps { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 40px; +} + +.step { + text-align: center; + color: white; +} + +.step-number { + width: 60px; + height: 60px; + background: #ff6b6b; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: bold; + margin: 0 auto 20px; + box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4); +} + +.step h3 { + font-size: 1.5rem; margin-bottom: 15px; } -.notification-item h4 { - margin-top: 0; - margin-bottom: 10px; - color: #ffffff; - font-size: 18px; +.step p { + opacity: 0.9; + line-height: 1.6; + color: #b0b0b0; } -.notification-item p { - margin: 5px 0; - color: #cccccc; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.notification-item p strong { - color: #ffffff; -} - -.no-notifications { +footer { text-align: center; - max-width: 500px; - margin: 30px auto; - color: #cccccc; + padding: 40px 0; + color: rgba(255,255,255,0.6); + border-top: 1px solid rgba(255,255,255,0.1); } -/* Specific handling for long URLs and IDs */ -.notification-item p:contains("URL"), -.notification-item p:contains("ID") { - font-family: monospace; - font-size: 12px; -} - -.hidden { - display: none; +@media (max-width: 768px) { + .hero h1 { + font-size: 2.5rem; + } + + .subtitle { + font-size: 1.1rem; + } + + .features, .how-it-works { + padding: 40px 20px; + } + + .features h2, .how-it-works h2 { + font-size: 2rem; + } + + .cta-section { + flex-direction: column; + align-items: center; + } + + .button { + width: 100%; + max-width: 300px; + } } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index dcf78ba..6f78213 100644 --- a/templates/index.html +++ b/templates/index.html @@ -16,11 +16,69 @@ -
-
-

FireAlerts

-

Get alerted before your Handshake domains expire.

- Account +
+
+ +
+ +
+
+

Never Lose Your Handshake Domains

+

Get timely notifications before your domains expire. Support for Discord webhooks, email, and Telegram alerts.

+ +
+ Get Started +
+
+ +
+

Why Choose FireAlerts?

+
+
+
🔔
+

Multiple Alert Types

+

Choose from Discord webhooks, email notifications, or Telegram messages.

+
+
+
⏰
+

Customizable Timing

+

Set alerts for any number of blocks before your domain expires.

+
+
+
🆓
+

Free Service

+

Keep track of all your Handshake domains at no cost.

+
+
+
+ +
+

How It Works

+
+
+
1
+

Sign In

+

Use your existing account to access FireAlerts

+
+
+
2
+

Add Domains

+

Set up alerts for your Handshake domains

+
+
+
3
+

Get Notified

+

Receive timely alerts before expiration

+
+
+
+
+ +