From 994b5bc5bf701977c7aa05de76ae941552ee311b Mon Sep 17 00:00:00 2001 From: Nathan Woodburn Date: Thu, 20 Nov 2025 23:31:51 +1100 Subject: [PATCH 1/6] feat: Add theming from gemini --- templates/404.html | 3 + templates/assets/css/404.css | 41 ++- templates/assets/css/index.css | 457 ++++++++++++++++++++++----------- templates/index.html | 9 +- 4 files changed, 343 insertions(+), 167 deletions(-) diff --git a/templates/404.html b/templates/404.html index acea536..0452c0b 100644 --- a/templates/404.html +++ b/templates/404.html @@ -6,6 +6,9 @@ Nathan.Woodburn/ + + + diff --git a/templates/assets/css/404.css b/templates/assets/css/404.css index 9635f9c..1001d2c 100644 --- a/templates/assets/css/404.css +++ b/templates/assets/css/404.css @@ -1,20 +1,45 @@ +:root { + --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); + --bg-color: #0f172a; + --text-primary: #f8fafc; + --accent-color: #8b5cf6; +} + body { - background-color: #000000; - color: #ffffff; -} -h1 { - font-size: 50px; + background-color: var(--bg-color); + background-image: + radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%), + radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%); + color: var(--text-primary); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; - padding: 0; + min-height: 100vh; + display: flex; + flex-direction: column; } + +h1 { + font-size: 3rem; + margin: 0 0 1rem 0; + background: var(--primary-gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + .centre { - margin-top: 10%; + margin: auto; text-align: center; + padding: 2rem; } + a { - color: #ffffff; + color: var(--accent-color); text-decoration: none; + transition: color 0.2s ease; } + a:hover { + color: #a78bfa; text-decoration: underline; } \ No newline at end of file diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css index d46628f..41286bf 100644 --- a/templates/assets/css/index.css +++ b/templates/assets/css/index.css @@ -1,3 +1,15 @@ +:root { + --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%); + --bg-color: #0f172a; + --card-bg: rgba(30, 41, 59, 0.7); + --card-border: rgba(148, 163, 184, 0.1); + --text-primary: #f8fafc; + --text-secondary: #94a3b8; + --accent-color: #8b5cf6; + --success-color: #10b981; + --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); +} + * { margin: 0; padding: 0; @@ -5,9 +17,12 @@ } body { - background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); - color: #e0e0e0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + background-color: var(--bg-color); + background-image: + radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%), + radial-gradient(at 100% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%); + color: var(--text-primary); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; min-height: 100vh; } @@ -20,24 +35,53 @@ body { /* Header */ header { - background: linear-gradient(135deg, #8b2f0a 0%, #6b3d0a 100%); - padding: 2rem 0; - text-align: center; - box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3); - margin: 0 0 2rem 0; + background: rgba(15, 23, 42, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + padding: 1.5rem 0; + position: sticky; + top: 0; + z-index: 100; + border-bottom: 1px solid var(--card-border); + margin-bottom: 2rem; +} + +header .container { + display: flex; + align-items: center; + justify-content: space-between; +} + +.brand { + display: flex; + align-items: center; + gap: 1rem; } header h1 { - font-size: 3rem; + font-size: 1.8rem; + font-weight: 700; + background: var(--primary-gradient); + -webkit-background-clip: text; + background-clip: text; + color: transparent; margin: 0; - color: #ffffff; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); + display: flex; + align-items: center; + gap: 0.5rem; } .subtitle { - color: rgba(255, 255, 255, 0.9); - font-size: 1.2rem; - margin-top: 0.5rem; + color: var(--text-secondary); + font-size: 0.9rem; + font-weight: 500; + display: none; /* Hidden on mobile, shown on desktop */ +} + +@media (min-width: 768px) { + .subtitle { + display: block; + } } /* Main Content */ @@ -47,24 +91,38 @@ main { /* Cards */ .card { - background: rgba(30, 30, 30, 0.8); - border-radius: 12px; + background: var(--card-bg); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 16px; padding: 2rem; margin-bottom: 2rem; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - border: 1px solid rgba(255, 107, 53, 0.2); + box-shadow: var(--glass-shadow); + border: 1px solid var(--card-border); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.card:hover { + border-color: rgba(139, 92, 246, 0.3); } .card h2 { - color: #ff6b35; + color: var(--text-primary); margin-bottom: 1.5rem; - font-size: 1.8rem; + font-size: 1.5rem; + font-weight: 600; + display: flex; + align-items: center; + gap: 0.5rem; } .card h3 { - color: #f7931e; + color: var(--text-secondary); margin-bottom: 1rem; - font-size: 1.3rem; + font-size: 1.1rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; } /* Status Section */ @@ -77,25 +135,30 @@ main { .status-card { padding: 1.5rem; + display: flex; + flex-direction: column; + height: 100%; } .status-content { - color: #b0b0b0; - font-size: 0.9rem; + color: var(--text-primary); + font-size: 1.1rem; + font-weight: 500; + margin-top: auto; } /* Info Grid */ .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 0.75rem; + gap: 1rem; } .info-item { - padding: 0.5rem; - background: rgba(20, 20, 20, 0.5); - border-radius: 6px; - border: 1px solid rgba(255, 107, 53, 0.15); + padding: 1rem; + background: rgba(15, 23, 42, 0.4); + border-radius: 12px; + border: 1px solid var(--card-border); } .info-item.no-border { @@ -109,86 +172,120 @@ main { } .info-item strong { - color: #ff6b35; - display: inline-block; - min-width: 100px; + color: var(--text-secondary); + display: block; + font-size: 0.8rem; + margin-bottom: 0.25rem; + text-transform: uppercase; + letter-spacing: 0.05em; } .mono { - font-family: 'Courier New', monospace; - font-size: 0.85rem; + font-family: 'JetBrains Mono', 'Fira Code', monospace; + font-size: 0.9rem; word-break: break-all; + color: var(--text-primary); } .view-all-btn { - display: inline-block; - padding: 0.5rem 1rem; - background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.6rem 1.2rem; + background: var(--primary-gradient); color: #ffffff !important; text-decoration: none !important; - border-radius: 6px; + border-radius: 8px; font-weight: 600; + font-size: 0.9rem; transition: all 0.3s ease; + border: none; + cursor: pointer; } .view-all-btn:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); + box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); } /* Mempool Transaction List */ .mempool-txs-container { - margin-top: 1rem; + margin-top: 1.5rem; } .mempool-header { padding: 0.75rem; - background: rgba(255, 107, 53, 0.1); - border-radius: 6px; - margin-bottom: 0.75rem; - color: #ff6b35; + background: rgba(139, 92, 246, 0.1); + border-radius: 8px; + margin-bottom: 1rem; + color: var(--accent-color); + font-weight: 600; + font-size: 0.9rem; } .tx-list { max-height: 400px; overflow-y: auto; + padding-right: 0.5rem; +} + +/* Custom Scrollbar */ +.tx-list::-webkit-scrollbar { + width: 6px; +} + +.tx-list::-webkit-scrollbar-track { + background: rgba(15, 23, 42, 0.3); + border-radius: 3px; +} + +.tx-list::-webkit-scrollbar-thumb { + background: rgba(148, 163, 184, 0.3); + border-radius: 3px; } .tx-item { display: flex; align-items: center; - gap: 0.75rem; - padding: 0.5rem; - background: rgba(20, 20, 20, 0.5); - border: 1px solid rgba(255, 107, 53, 0.15); - border-radius: 6px; - margin-bottom: 0.5rem; + gap: 1rem; + padding: 0.75rem; + background: rgba(15, 23, 42, 0.4); + border: 1px solid var(--card-border); + border-radius: 8px; + margin-bottom: 0.75rem; + transition: border-color 0.2s ease; +} + +.tx-item:hover { + border-color: rgba(139, 92, 246, 0.3); } .tx-hash { flex: 1; - font-size: 0.8rem; - color: #b0b0b0; + font-family: 'JetBrains Mono', monospace; + font-size: 0.85rem; + color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .tx-view-btn { padding: 0.4rem 0.8rem; - background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); - color: #ffffff; - border: none; - border-radius: 4px; + background: rgba(139, 92, 246, 0.1); + color: var(--accent-color); + border: 1px solid rgba(139, 92, 246, 0.2); + border-radius: 6px; cursor: pointer; - font-size: 0.85rem; + font-size: 0.8rem; font-weight: 600; - transition: all 0.3s ease; + transition: all 0.2s ease; flex-shrink: 0; } .tx-view-btn:hover { - transform: translateY(-1px); - box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4); + background: var(--accent-color); + color: white; } /* Transaction Modal */ @@ -198,23 +295,39 @@ main { left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.8); + background: rgba(15, 23, 42, 0.9); + backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; +} + +.tx-modal.active { + opacity: 1; + pointer-events: auto; } .tx-modal-content { - background: rgba(30, 30, 30, 0.95); - border-radius: 12px; + background: #1e293b; + border-radius: 16px; max-width: 900px; width: 100%; - max-height: 80vh; - border: 1px solid rgba(255, 107, 53, 0.3); + max-height: 85vh; + border: 1px solid var(--card-border); display: flex; flex-direction: column; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + transform: translateY(20px); + transition: transform 0.3s ease; +} + +.tx-modal.active .tx-modal-content { + transform: translateY(0); } .tx-modal-header { @@ -222,33 +335,30 @@ main { justify-content: space-between; align-items: center; padding: 1.5rem; - border-bottom: 1px solid rgba(255, 107, 53, 0.2); + border-bottom: 1px solid var(--card-border); } .tx-modal-header h3 { margin: 0; - color: #ff6b35; + color: var(--text-primary); + font-size: 1.2rem; } .tx-modal-close { - background: none; + background: transparent; border: none; - color: #e0e0e0; - font-size: 2rem; + color: var(--text-secondary); + font-size: 1.5rem; cursor: pointer; - padding: 0; - width: 2rem; - height: 2rem; - display: flex; - align-items: center; - justify-content: center; - border-radius: 4px; - transition: all 0.3s ease; + padding: 0.5rem; + border-radius: 8px; + transition: all 0.2s ease; + line-height: 1; } .tx-modal-close:hover { - background: rgba(255, 107, 53, 0.2); - color: #ff6b35; + background: rgba(255, 255, 255, 0.1); + color: var(--text-primary); } .tx-modal-body { @@ -258,8 +368,8 @@ main { } .tx-modal-body pre { - color: #b0b0b0; - font-family: 'Courier New', monospace; + color: var(--text-secondary); + font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; white-space: pre-wrap; word-wrap: break-word; @@ -268,70 +378,78 @@ main { /* Transaction Details */ .tx-details { - color: #e0e0e0; + color: var(--text-primary); } .tx-section { - margin-bottom: 1.5rem; + margin-bottom: 2rem; } .tx-section h4 { - color: #ff6b35; + color: var(--accent-color); margin-bottom: 1rem; - font-size: 1.1rem; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 0.05em; } .tx-io-list { display: flex; flex-direction: column; - gap: 0.75rem; + gap: 1rem; } .tx-io-item { - background: rgba(20, 20, 20, 0.5); - border: 1px solid rgba(255, 107, 53, 0.15); - border-radius: 6px; - padding: 0.75rem; + background: rgba(15, 23, 42, 0.4); + border: 1px solid var(--card-border); + border-radius: 8px; + padding: 1rem; } .tx-io-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 0.5rem; + margin-bottom: 0.75rem; } .tx-io-index { - color: #ff6b35; - font-weight: 600; - font-size: 0.9rem; + color: var(--text-secondary); + font-size: 0.85rem; + background: rgba(255, 255, 255, 0.05); + padding: 0.2rem 0.5rem; + border-radius: 4px; } .tx-io-value { - color: #f7931e; + color: var(--success-color); font-weight: 600; font-size: 1rem; + font-family: 'JetBrains Mono', monospace; } .tx-io-address { - color: #b0b0b0; - font-family: 'Courier New', monospace; - font-size: 0.85rem; + color: var(--text-primary); + font-family: 'JetBrains Mono', monospace; + font-size: 0.9rem; margin-bottom: 0.5rem; word-break: break-all; } .tx-io-hash { - color: #808080; - font-size: 0.75rem; + color: var(--text-secondary); + font-size: 0.8rem; word-break: break-all; + font-family: 'JetBrains Mono', monospace; } .tx-covenant { - color: #ff6b35; + color: var(--accent-color); font-size: 0.85rem; - margin-top: 0.5rem; - font-style: italic; + margin-top: 0.75rem; + padding-top: 0.75rem; + border-top: 1px solid var(--card-border); + font-family: 'JetBrains Mono', monospace; } /* Tabs */ @@ -340,38 +458,50 @@ main { gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; + background: rgba(15, 23, 42, 0.4); + padding: 0.5rem; + border-radius: 12px; + border: 1px solid var(--card-border); } .tab-btn { - background: rgba(50, 50, 50, 0.5); - color: #e0e0e0; - border: 1px solid rgba(255, 107, 53, 0.3); - padding: 0.75rem 1.5rem; + flex: 1; + background: transparent; + color: var(--text-secondary); + border: none; + padding: 0.75rem 1rem; border-radius: 8px; cursor: pointer; - font-size: 1rem; - transition: all 0.3s ease; + font-size: 0.95rem; + font-weight: 500; + transition: all 0.2s ease; } .tab-btn:hover { - background: rgba(255, 107, 53, 0.2); - border-color: #ff6b35; + color: var(--text-primary); + background: rgba(255, 255, 255, 0.05); } .tab-btn.active { - background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); + background: var(--primary-gradient); color: #ffffff; - border-color: #ff6b35; + box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); } .tab-content { display: none; + animation: fadeIn 0.3s ease; } .tab-content.active { display: block; } +@keyframes fadeIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: translateY(0); } +} + /* Search Box */ .search-box { display: flex; @@ -383,39 +513,42 @@ main { .search-box input { flex: 1; min-width: 200px; - padding: 0.75rem 1rem; - background: rgba(20, 20, 20, 0.8); - border: 1px solid rgba(255, 107, 53, 0.3); - border-radius: 8px; - color: #e0e0e0; + padding: 0.8rem 1.2rem; + background: rgba(15, 23, 42, 0.6); + border: 1px solid var(--card-border); + border-radius: 10px; + color: var(--text-primary); font-size: 1rem; + transition: all 0.2s ease; } .search-box input:focus { outline: none; - border-color: #ff6b35; - box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2); + border-color: var(--accent-color); + box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); + background: rgba(15, 23, 42, 0.8); } .search-box input::placeholder { - color: rgba(224, 224, 224, 0.5); + color: var(--text-secondary); } .search-box button { - padding: 0.75rem 1.5rem; - background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); + padding: 0.8rem 1.5rem; + background: var(--primary-gradient); color: #ffffff; border: none; - border-radius: 8px; + border-radius: 10px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease; + white-space: nowrap; } .search-box button:hover { transform: translateY(-2px); - box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); + box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4); } .search-box button:active { @@ -423,30 +556,32 @@ main { } .secondary-btn { - padding: 0.75rem 1.5rem; - background: rgba(50, 50, 50, 0.8); - color: #ff6b35; - border: 1px solid #ff6b35; - border-radius: 8px; + padding: 0.8rem 1.5rem; + background: transparent; + color: var(--text-primary); + border: 1px solid var(--card-border); + border-radius: 10px; cursor: pointer; font-size: 1rem; font-weight: 600; - transition: all 0.3s ease; + transition: all 0.2s ease; } .secondary-btn:hover { - background: rgba(255, 107, 53, 0.2); + background: rgba(255, 255, 255, 0.05); + border-color: var(--text-secondary); } /* Result Box */ .result-box { - background: rgba(10, 10, 10, 0.8); - border: 1px solid rgba(255, 107, 53, 0.2); - border-radius: 8px; - padding: 1rem; + background: rgba(15, 23, 42, 0.4); + border: 1px solid var(--card-border); + border-radius: 12px; + padding: 1.5rem; min-height: 100px; max-height: 600px; overflow-y: auto; + margin-top: 1rem; } .result-box:empty { @@ -454,16 +589,20 @@ main { } .result-box pre { - color: #b0b0b0; - font-family: 'Courier New', monospace; + color: var(--text-secondary); + font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; white-space: pre-wrap; word-wrap: break-word; } .result-box .error { - color: #ff4444; + color: #ef4444; font-weight: 600; + background: rgba(239, 68, 68, 0.1); + padding: 1rem; + border-radius: 8px; + border: 1px solid rgba(239, 68, 68, 0.2); } /* Scrollbar */ @@ -472,58 +611,55 @@ main { } .result-box::-webkit-scrollbar-track { - background: rgba(20, 20, 20, 0.5); + background: rgba(15, 23, 42, 0.3); border-radius: 4px; } .result-box::-webkit-scrollbar-thumb { - background: rgba(255, 107, 53, 0.5); + background: rgba(148, 163, 184, 0.3); border-radius: 4px; } .result-box::-webkit-scrollbar-thumb:hover { - background: rgba(255, 107, 53, 0.7); + background: rgba(148, 163, 184, 0.5); } /* Footer */ footer { - background: rgba(20, 20, 20, 0.8); + background: rgba(15, 23, 42, 0.8); + backdrop-filter: blur(12px); padding: 2rem 0; text-align: center; - margin-top: 3rem; - border-top: 1px solid rgba(255, 107, 53, 0.2); + margin-top: 4rem; + border-top: 1px solid var(--card-border); } footer p { - color: rgba(224, 224, 224, 0.7); + color: var(--text-secondary); margin: 0.5rem 0; } .timestamp { - font-size: 0.9rem; - color: rgba(224, 224, 224, 0.5); + font-size: 0.85rem; + opacity: 0.7; } /* Links */ a { - color: #ff6b35; + color: var(--accent-color); text-decoration: none; - transition: color 0.3s ease; + transition: color 0.2s ease; } a:hover { - color: #f7931e; + color: #a78bfa; text-decoration: underline; } /* Responsive Design */ @media (max-width: 768px) { header h1 { - font-size: 2rem; - } - - .subtitle { - font-size: 1rem; + font-size: 1.5rem; } .card { @@ -542,6 +678,11 @@ a:hover { .status-section { grid-template-columns: 1fr; } + + .tab-btn { + padding: 0.5rem; + font-size: 0.85rem; + } } /* Loading Animation */ @@ -557,4 +698,6 @@ a:hover { .status-content:empty::after { content: 'Loading...'; animation: pulse 1.5s ease-in-out infinite; + color: var(--text-secondary); + font-style: italic; } diff --git a/templates/index.html b/templates/index.html index a894a70..7591308 100644 --- a/templates/index.html +++ b/templates/index.html @@ -7,6 +7,9 @@ Fire Explorer + + + @@ -30,8 +33,10 @@
-

Fire Icon Fire Explorer

-

Handshake Blockchain Explorer

+
+

Fire Icon Fire Explorer

+ Handshake Blockchain Explorer +
-- 2.49.1 From adfa0fd4a075cbc23490f07ed53cdec6c21708bb Mon Sep 17 00:00:00 2001 From: Nathan Woodburn Date: Thu, 20 Nov 2025 23:37:48 +1100 Subject: [PATCH 2/6] feat: Add animations --- templates/assets/css/index.css | 65 +++++++++++++++++++++++++++++++--- templates/index.html | 26 +++++++------- 2 files changed, 73 insertions(+), 18 deletions(-) diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css index 41286bf..45aa7a4 100644 --- a/templates/assets/css/index.css +++ b/templates/assets/css/index.css @@ -100,6 +100,8 @@ main { box-shadow: var(--glass-shadow); border: 1px solid var(--card-border); transition: transform 0.2s ease, box-shadow 0.2s ease; + animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; + opacity: 0; /* Start hidden for animation */ } .card:hover { @@ -254,6 +256,7 @@ main { border-radius: 8px; margin-bottom: 0.75rem; transition: border-color 0.2s ease; + animation: staggerFade 0.4s ease forwards; } .tx-item:hover { @@ -474,18 +477,21 @@ main { cursor: pointer; font-size: 0.95rem; font-weight: 500; - transition: all 0.2s ease; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; } .tab-btn:hover { color: var(--text-primary); - background: rgba(255, 255, 255, 0.05); + background: rgba(255, 255, 255, 0.08); } .tab-btn.active { background: var(--primary-gradient); color: #ffffff; - box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); + box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); + transform: translateY(-1px); } .tab-content { @@ -525,8 +531,8 @@ main { .search-box input:focus { outline: none; border-color: var(--accent-color); - box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2); - background: rgba(15, 23, 42, 0.8); + box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15), 0 0 20px rgba(139, 92, 246, 0.2); + background: rgba(15, 23, 42, 0.9); } .search-box input::placeholder { @@ -701,3 +707,52 @@ a:hover { color: var(--text-secondary); font-style: italic; } + +/* New Animations */ +@keyframes slideUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes staggerFade { + from { + opacity: 0; + transform: translateX(-10px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +/* Apply animations */ +.card { + animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; + opacity: 0; /* Start hidden for animation */ +} + +.search-section .card { + animation-delay: 0.1s; +} + +.status-section .card:nth-child(1) { + animation-delay: 0.2s; +} + +.status-section .card:nth-child(2) { + animation-delay: 0.3s; +} + +.additional-section .card { + animation-delay: 0.4s; +} + +.tx-item { + animation: staggerFade 0.4s ease forwards; +} diff --git a/templates/index.html b/templates/index.html index 7591308..3831188 100644 --- a/templates/index.html +++ b/templates/index.html @@ -41,19 +41,6 @@
- -
-
-

Chain Info

-
Loading...
-
-
-

Mempool

-
Loading...
-
-
-
-
@@ -111,6 +98,19 @@
+ +
+
+

Chain Info

+
Loading...
+
+
+

Mempool

+
Loading...
+
+
+
+
-- 2.49.1 From 513a3ebd5785fbf11bd1e79827caee73160e47c9 Mon Sep 17 00:00:00 2001 From: Nathan Woodburn Date: Thu, 20 Nov 2025 23:43:53 +1100 Subject: [PATCH 3/6] feat: Remove coin index and fix mempool lookups --- templates/index.html | 47 +++++++++----------------------------------- 1 file changed, 9 insertions(+), 38 deletions(-) diff --git a/templates/index.html b/templates/index.html index 3831188..d738afa 100644 --- a/templates/index.html +++ b/templates/index.html @@ -110,19 +110,6 @@
- - -
-
-

Coin Lookup

- -
-
-