|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<meta http-equiv="Permissions-Policy" |
|
|
content="accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()"> |
|
|
<title>🚀 Crypto API Hub - Stunning Dashboard</title> |
|
|
<link |
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" |
|
|
rel="stylesheet"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
:root { |
|
|
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
--gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); |
|
|
--gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); |
|
|
--gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); |
|
|
--gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%); |
|
|
--gradient-6: linear-gradient(135deg, #30cfd0 0%, #330867 100%); |
|
|
--gradient-7: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); |
|
|
--gradient-8: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); |
|
|
--gradient-9: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); |
|
|
--gradient-10: linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%); |
|
|
|
|
|
--bg-main: #0a0e27; |
|
|
--bg-card: rgba(255, 255, 255, 0.03); |
|
|
--text-primary: #ffffff; |
|
|
--text-secondary: #a0aec0; |
|
|
--border: rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
|
|
background: var(--bg-main); |
|
|
color: var(--text-primary); |
|
|
line-height: 1.6; |
|
|
overflow-x: hidden; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
|
|
|
body::before { |
|
|
content: ''; |
|
|
position: fixed; |
|
|
inset: 0; |
|
|
background: |
|
|
radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.15) 0%, transparent 50%), |
|
|
radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.15) 0%, transparent 50%), |
|
|
radial-gradient(circle at 50% 50%, rgba(79, 172, 254, 0.1) 0%, transparent 50%); |
|
|
animation: bgPulse 15s ease-in-out infinite; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
@keyframes bgPulse { |
|
|
|
|
|
0%, |
|
|
100% { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
|
|
|
50% { |
|
|
opacity: 0.8; |
|
|
transform: scale(1.05); |
|
|
} |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1600px; |
|
|
margin: 0 auto; |
|
|
padding: 2rem; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.header { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(30px) saturate(180%); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 30px; |
|
|
padding: 2.5rem; |
|
|
margin-bottom: 2rem; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); |
|
|
animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
} |
|
|
|
|
|
@keyframes slideDown { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(-30px); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.header::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 4px; |
|
|
background: var(--gradient-3); |
|
|
} |
|
|
|
|
|
.header-content { |
|
|
display: grid; |
|
|
grid-template-columns: auto 1fr auto; |
|
|
gap: 2rem; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo-section { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
width: 70px; |
|
|
height: 70px; |
|
|
background: var(--gradient-3); |
|
|
border-radius: 20px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 15px 40px rgba(79, 172, 254, 0.5); |
|
|
animation: float 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
|
|
|
0%, |
|
|
100% { |
|
|
transform: translateY(0px); |
|
|
} |
|
|
|
|
|
50% { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
} |
|
|
|
|
|
.logo svg { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
} |
|
|
|
|
|
.brand-text h1 { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
font-size: 2rem; |
|
|
font-weight: 800; |
|
|
background: var(--gradient-3); |
|
|
background-clip: text; |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
margin-bottom: 0.25rem; |
|
|
} |
|
|
|
|
|
.brand-text p { |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.9375rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.stats-row { |
|
|
display: flex; |
|
|
gap: 3rem; |
|
|
} |
|
|
|
|
|
.stat { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: 2.5rem; |
|
|
font-weight: 900; |
|
|
background: var(--gradient-3); |
|
|
background-clip: text; |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
line-height: 1; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 0.75rem; |
|
|
color: var(--text-secondary); |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.1em; |
|
|
font-weight: 700; |
|
|
} |
|
|
|
|
|
.header-actions { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.btn-gradient { |
|
|
padding: 0.875rem 1.75rem; |
|
|
border: none; |
|
|
border-radius: 14px; |
|
|
font-weight: 700; |
|
|
font-size: 0.9375rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.btn-gradient::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: var(--gradient-3); |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.btn-gradient::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
inset: 0; |
|
|
background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s; |
|
|
} |
|
|
|
|
|
.btn-gradient span { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-gradient:hover { |
|
|
transform: translateY(-4px); |
|
|
box-shadow: 0 15px 40px rgba(79, 172, 254, 0.5); |
|
|
} |
|
|
|
|
|
.btn-gradient:hover::before { |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
.btn-gradient:hover::after { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.controls { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(30px) saturate(180%); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 24px; |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 2rem; |
|
|
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; |
|
|
} |
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.search-wrapper { |
|
|
position: relative; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.search-input { |
|
|
width: 100%; |
|
|
padding: 1rem 1.25rem 1rem 3.5rem; |
|
|
background: rgba(255, 255, 255, 0.08); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 16px; |
|
|
color: var(--text-primary); |
|
|
font-size: 1rem; |
|
|
font-weight: 500; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.search-input:focus { |
|
|
outline: none; |
|
|
border-color: #4facfe; |
|
|
background: rgba(255, 255, 255, 0.12); |
|
|
box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.15); |
|
|
} |
|
|
|
|
|
.search-icon { |
|
|
position: absolute; |
|
|
left: 1.25rem; |
|
|
top: 50%; |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
|
|
|
.filter-tabs { |
|
|
display: flex; |
|
|
gap: 0.75rem; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.filter-tab { |
|
|
padding: 0.75rem 1.5rem; |
|
|
border: 1px solid var(--border); |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 12px; |
|
|
color: var(--text-secondary); |
|
|
font-weight: 700; |
|
|
font-size: 0.875rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
} |
|
|
|
|
|
.filter-tab:hover { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-color: #4facfe; |
|
|
color: var(--text-primary); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.filter-tab.active { |
|
|
background: var(--gradient-3); |
|
|
border-color: transparent; |
|
|
color: white; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 24px rgba(79, 172, 254, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.services-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); |
|
|
gap: 1.5rem; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
background: rgba(255, 255, 255, 0.03); |
|
|
backdrop-filter: blur(30px) saturate(180%); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 24px; |
|
|
padding: 2rem; |
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; |
|
|
} |
|
|
|
|
|
.service-card::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 4px; |
|
|
background: var(--card-gradient); |
|
|
transform: scaleX(0); |
|
|
transform-origin: left; |
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); |
|
|
border-color: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.service-card:hover::before { |
|
|
transform: scaleX(1); |
|
|
} |
|
|
|
|
|
.service-card:nth-child(8n+1) { |
|
|
--card-gradient: var(--gradient-1); |
|
|
animation-delay: 0.05s; |
|
|
} |
|
|
|
|
|
.service-card:nth-child(8n+2) { |
|
|
--card-gradient: var(--gradient-2); |
|
|
animation-delay: 0.1s; |
|
|
} |
|
|
|
|
|
.service-card:nth-child(8n+3) { |
|
|
--card-gradient: var(--gradient-3); |
|
|
animation-delay: 0.15s; |
|
|
} |
|
|
|
|
|
.service-card:nth-child(8n+4) { |
|
|
--card-gradient: var(--gradient-4); |
|
|
animation-delay: 0.2s; |
|
|
} |
|
|
|
|
|
.service-card:nth-child(8n+5) { |
|
|
--card-gradient: var(--gradient-5); |
|
|
animation-delay: 0.25s; |
|
|
} |
|
|
|
|
|
.service-card:nth-child(8n+6) { |
|
|
--card-gradient: var(--gradient-6); |
|
|
animation-delay: 0.3s; |
|
|
} |
|
|
|
|
|
.service-card:nth-child(8n+7) { |
|
|
--card-gradient: var(--gradient-7); |
|
|
animation-delay: 0.35s; |
|
|
} |
|
|
|
|
|
.service-card:nth-child(8n+8) { |
|
|
--card-gradient: var(--gradient-8); |
|
|
animation-delay: 0.4s; |
|
|
} |
|
|
|
|
|
.service-header { |
|
|
display: flex; |
|
|
align-items: start; |
|
|
gap: 1.25rem; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.service-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
background: var(--card-gradient); |
|
|
border-radius: 16px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
flex-shrink: 0; |
|
|
box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3); |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.service-card:hover .service-icon { |
|
|
transform: scale(1.1) rotate(5deg); |
|
|
} |
|
|
|
|
|
.service-icon svg { |
|
|
width: 32px; |
|
|
height: 32px; |
|
|
} |
|
|
|
|
|
.service-info { |
|
|
flex: 1; |
|
|
min-width: 0; |
|
|
} |
|
|
|
|
|
.service-name { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
font-size: 1.25rem; |
|
|
font-weight: 800; |
|
|
color: var(--text-primary); |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.service-url { |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
font-size: 0.75rem; |
|
|
color: var(--text-secondary); |
|
|
word-break: break-all; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.service-badges { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
flex-wrap: wrap; |
|
|
margin-bottom: 1.25rem; |
|
|
} |
|
|
|
|
|
.badge { |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 10px; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 800; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 0.375rem; |
|
|
} |
|
|
|
|
|
.badge-category { |
|
|
background: rgba(102, 126, 234, 0.2); |
|
|
color: #a8b7ff; |
|
|
border: 1px solid rgba(102, 126, 234, 0.3); |
|
|
} |
|
|
|
|
|
.badge-endpoints { |
|
|
background: rgba(79, 172, 254, 0.2); |
|
|
color: #7dd3fc; |
|
|
border: 1px solid rgba(79, 172, 254, 0.3); |
|
|
} |
|
|
|
|
|
.badge-key { |
|
|
background: rgba(67, 233, 123, 0.2); |
|
|
color: #86efac; |
|
|
border: 1px solid rgba(67, 233, 123, 0.3); |
|
|
} |
|
|
|
|
|
.endpoints-list { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.endpoint-item { |
|
|
background: rgba(0, 0, 0, 0.4); |
|
|
border: 1px solid rgba(255, 255, 255, 0.08); |
|
|
border-radius: 14px; |
|
|
padding: 1.25rem; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.endpoint-item:hover { |
|
|
border-color: rgba(79, 172, 254, 0.5); |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
transform: translateX(4px); |
|
|
} |
|
|
|
|
|
.endpoint-path { |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
font-size: 0.8125rem; |
|
|
color: #7dd3fc; |
|
|
word-break: break-all; |
|
|
margin-bottom: 1rem; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.endpoint-actions { |
|
|
display: flex; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.btn-sm { |
|
|
padding: 0.625rem 1.25rem; |
|
|
border: 1px solid var(--border); |
|
|
background: rgba(255, 255, 255, 0.08); |
|
|
color: var(--text-primary); |
|
|
border-radius: 10px; |
|
|
font-weight: 700; |
|
|
font-size: 0.8125rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.btn-sm:hover { |
|
|
background: var(--gradient-3); |
|
|
border-color: transparent; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 8px 20px rgba(79, 172, 254, 0.4); |
|
|
} |
|
|
|
|
|
|
|
|
.modal { |
|
|
display: none; |
|
|
position: fixed; |
|
|
inset: 0; |
|
|
background: rgba(0, 0, 0, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
z-index: 1000; |
|
|
padding: 2rem; |
|
|
overflow-y: auto; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.modal.active { |
|
|
display: flex; |
|
|
animation: fadeIn 0.3s ease; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background: rgba(30, 41, 59, 0.95); |
|
|
backdrop-filter: blur(30px); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 28px; |
|
|
max-width: 900px; |
|
|
width: 100%; |
|
|
max-height: 90vh; |
|
|
overflow-y: auto; |
|
|
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); |
|
|
animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
} |
|
|
|
|
|
@keyframes slideUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(30px) scale(0.95); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0) scale(1); |
|
|
} |
|
|
} |
|
|
|
|
|
.modal-header { |
|
|
padding: 2rem; |
|
|
border-bottom: 1px solid var(--border); |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
background: var(--gradient-3); |
|
|
} |
|
|
|
|
|
.modal-header h2 { |
|
|
font-family: 'Space Grotesk', sans-serif; |
|
|
font-size: 1.75rem; |
|
|
font-weight: 800; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.modal-close { |
|
|
width: 44px; |
|
|
height: 44px; |
|
|
border: none; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
border-radius: 12px; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.modal-close:hover { |
|
|
background: rgba(239, 68, 68, 0.8); |
|
|
transform: rotate(90deg) scale(1.1); |
|
|
} |
|
|
|
|
|
.modal-body { |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.form-label { |
|
|
display: block; |
|
|
font-weight: 700; |
|
|
font-size: 0.9375rem; |
|
|
margin-bottom: 0.75rem; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.form-input, |
|
|
.form-textarea { |
|
|
width: 100%; |
|
|
padding: 1rem 1.25rem; |
|
|
background: rgba(0, 0, 0, 0.4); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 14px; |
|
|
color: var(--text-primary); |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
font-size: 0.9375rem; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.form-input:focus, |
|
|
.form-textarea:focus { |
|
|
outline: none; |
|
|
border-color: #4facfe; |
|
|
box-shadow: 0 0 0 4px rgba(79, 172, 254, 0.15); |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
} |
|
|
|
|
|
.form-textarea { |
|
|
min-height: 140px; |
|
|
resize: vertical; |
|
|
} |
|
|
|
|
|
.method-buttons { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.method-btn { |
|
|
padding: 1rem; |
|
|
border: 1px solid var(--border); |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
color: var(--text-secondary); |
|
|
border-radius: 12px; |
|
|
font-weight: 800; |
|
|
font-size: 0.9375rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.method-btn.active { |
|
|
background: var(--gradient-3); |
|
|
border-color: transparent; |
|
|
color: white; |
|
|
box-shadow: 0 8px 20px rgba(79, 172, 254, 0.4); |
|
|
} |
|
|
|
|
|
.response-container { |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 14px; |
|
|
padding: 1.5rem; |
|
|
margin-top: 1.5rem; |
|
|
max-height: 400px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.response-json { |
|
|
font-family: 'JetBrains Mono', monospace; |
|
|
font-size: 0.8125rem; |
|
|
line-height: 1.7; |
|
|
color: #7dd3fc; |
|
|
white-space: pre-wrap; |
|
|
word-break: break-all; |
|
|
} |
|
|
|
|
|
|
|
|
.toast { |
|
|
position: fixed; |
|
|
bottom: 2rem; |
|
|
right: 2rem; |
|
|
background: rgba(30, 41, 59, 0.95); |
|
|
backdrop-filter: blur(30px); |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 16px; |
|
|
padding: 1.25rem 1.75rem; |
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
font-weight: 700; |
|
|
transform: translateX(400px); |
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
z-index: 2000; |
|
|
} |
|
|
|
|
|
.toast.show { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
.toast-icon { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 1024px) { |
|
|
.header-content { |
|
|
grid-template-columns: 1fr; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.stats-row { |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.services-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 12px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--gradient-3); |
|
|
border-radius: 6px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%); |
|
|
} |
|
|
</style> |
|
|
|
|
|
<script src="/static/js/api-config.js"></script> |
|
|
<script> |
|
|
|
|
|
window.apiReady = new Promise((resolve) => { |
|
|
if (window.apiClient) { |
|
|
console.log('✅ API Client ready'); |
|
|
resolve(window.apiClient); |
|
|
} else { |
|
|
console.error('❌ API Client not loaded'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div class="container"> |
|
|
|
|
|
<header class="header"> |
|
|
<div class="header-content"> |
|
|
<div class="logo-section"> |
|
|
<div class="logo"> |
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="white" stroke-width="2" stroke-linecap="round" |
|
|
stroke-linejoin="round" /> |
|
|
<path d="M2 17L12 22L22 17" stroke="white" stroke-width="2" stroke-linecap="round" |
|
|
stroke-linejoin="round" /> |
|
|
<path d="M2 12L12 17L22 12" stroke="white" stroke-width="2" stroke-linecap="round" |
|
|
stroke-linejoin="round" /> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="brand-text"> |
|
|
<h1>Crypto API Hub</h1> |
|
|
<p>Ultimate Resources Dashboard with 74+ Services</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stats-row"> |
|
|
<div class="stat"> |
|
|
<div class="stat-value">74</div> |
|
|
<div class="stat-label">Services</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-value">150+</div> |
|
|
<div class="stat-label">Endpoints</div> |
|
|
</div> |
|
|
<div class="stat"> |
|
|
<div class="stat-value">10</div> |
|
|
<div class="stat-label">API Keys</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="header-actions"> |
|
|
<button class="btn-gradient" onclick="openTester()"> |
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" |
|
|
stroke-width="2"> |
|
|
<polyline points="16 18 22 12 16 6"></polyline> |
|
|
<polyline points="8 6 2 12 8 18"></polyline> |
|
|
</svg> |
|
|
<span>API Tester</span> |
|
|
</button> |
|
|
<button class="btn-gradient" onclick="exportJSON()"> |
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" |
|
|
stroke-width="2"> |
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> |
|
|
<polyline points="7 10 12 15 17 10"></polyline> |
|
|
<line x1="12" y1="15" x2="12" y2="3"></line> |
|
|
</svg> |
|
|
<span>Export</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="controls"> |
|
|
<div class="search-wrapper"> |
|
|
<svg class="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a0aec0" |
|
|
stroke-width="2"> |
|
|
<circle cx="11" cy="11" r="8"></circle> |
|
|
<path d="m21 21-4.35-4.35"></path> |
|
|
</svg> |
|
|
<input type="text" class="search-input" id="searchInput" |
|
|
placeholder="Search services, endpoints, or APIs..." onkeyup="filterServices()"> |
|
|
</div> |
|
|
<div class="filter-tabs"> |
|
|
<button class="filter-tab active" onclick="setFilter('all')">All</button> |
|
|
<button class="filter-tab" onclick="setFilter('explorer')">Explorers</button> |
|
|
<button class="filter-tab" onclick="setFilter('market')">Market</button> |
|
|
<button class="filter-tab" onclick="setFilter('news')">News</button> |
|
|
<button class="filter-tab" onclick="setFilter('sentiment')">Sentiment</button> |
|
|
<button class="filter-tab" onclick="setFilter('analytics')">Analytics</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="services-grid" id="servicesGrid"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="modal" id="testerModal"> |
|
|
<div class="modal-content"> |
|
|
<div class="modal-header"> |
|
|
<h2>API Tester</h2> |
|
|
<button class="modal-close" onclick="closeTester()">×</button> |
|
|
</div> |
|
|
<div class="modal-body"> |
|
|
<div class="form-group"> |
|
|
<label class="form-label">HTTP Method</label> |
|
|
<div class="method-buttons"> |
|
|
<button class="method-btn active" onclick="setMethod('GET', this)">GET</button> |
|
|
<button class="method-btn" onclick="setMethod('POST', this)">POST</button> |
|
|
<button class="method-btn" onclick="setMethod('PUT', this)">PUT</button> |
|
|
<button class="method-btn" onclick="setMethod('DELETE', this)">DELETE</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label">Endpoint URL</label> |
|
|
<input type="text" class="form-input" id="testUrl" placeholder="https://api.example.com/endpoint"> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label class="form-label">Headers (JSON format)</label> |
|
|
<textarea class="form-textarea" id="testHeaders" |
|
|
placeholder='{"Authorization": "Bearer YOUR_KEY"}'></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="form-group" id="bodyGroup" style="display: none;"> |
|
|
<label class="form-label">Request Body (JSON)</label> |
|
|
<textarea class="form-textarea" id="testBody" placeholder='{"key": "value"}'></textarea> |
|
|
</div> |
|
|
|
|
|
<button class="btn-gradient" onclick="sendRequest()" style="width: 100%;"> |
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<line x1="22" y1="2" x2="11" y2="13"></line> |
|
|
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon> |
|
|
</svg> |
|
|
<span>Send Request</span> |
|
|
</button> |
|
|
|
|
|
<div class="response-container" id="responseBox" style="display: none;"> |
|
|
<pre class="response-json" id="responseJson"></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="toast" id="toast"> |
|
|
<span class="toast-icon" id="toastIcon"></span> |
|
|
<span id="toastMessage"></span> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const SERVICES = { |
|
|
explorer: [ |
|
|
{ |
|
|
name: "Etherscan", url: "https://api.etherscan.io/api", key: "SZHYFZK2RR8H9TIMJBVW54V4H81K2Z2KR2", |
|
|
endpoints: ["?module=account&action=balance&address={address}&apikey={KEY}", "?module=gastracker&action=gasoracle&apikey={KEY}"] |
|
|
}, |
|
|
{ name: "Etherscan Backup", url: "https://api.etherscan.io/api", key: "T6IR8VJHX2NE6ZJW2S3FDVN1TYG4PYYI45", endpoints: [] }, |
|
|
{ |
|
|
name: "BscScan", url: "https://api.bscscan.com/api", key: "K62RKHGXTDCG53RU4MCG6XABIMJKTN19IT", |
|
|
endpoints: ["?module=account&action=balance&address={address}&apikey={KEY}"] |
|
|
}, |
|
|
{ |
|
|
name: "TronScan", url: "https://apilist.tronscanapi.com/api", key: "7ae72726-bffe-4e74-9c33-97b761eeea21", |
|
|
endpoints: ["/account?address={address}"] |
|
|
}, |
|
|
{ name: "Blockchair ETH", url: "https://api.blockchair.com/ethereum/dashboards/address/{address}", key: "", endpoints: [] }, |
|
|
{ name: "Ethplorer", url: "https://api.ethplorer.io", key: "freekey", endpoints: ["/getAddressInfo/{address}?apiKey=freekey"] }, |
|
|
{ name: "TronGrid", url: "https://api.trongrid.io", key: "", endpoints: ["/wallet/getaccount"] }, |
|
|
{ name: "Ankr", url: "https://rpc.ankr.com/multichain", key: "", endpoints: [] }, |
|
|
{ name: "1inch BSC", url: "https://api.1inch.io/v5.0/56", key: "", endpoints: [] } |
|
|
], |
|
|
market: [ |
|
|
{ |
|
|
name: "CoinGecko", url: "https://api.coingecko.com/api/v3", key: "", |
|
|
endpoints: ["/simple/price?ids=bitcoin,ethereum&vs_currencies=usd", "/coins/markets?vs_currency=usd&per_page=100"] |
|
|
}, |
|
|
{ |
|
|
name: "CoinMarketCap", url: "https://pro-api.coinmarketcap.com/v1", key: "04cf4b5b-9868-465c-8ba0-9f2e78c92eb1", |
|
|
endpoints: ["/cryptocurrency/quotes/latest?symbol=BTC&convert=USD"] |
|
|
}, |
|
|
{ name: "CoinMarketCap Alt", url: "https://pro-api.coinmarketcap.com/v1", key: "b54bcf4d-1bca-4e8e-9a24-22ff2c3d462c", endpoints: [] }, |
|
|
{ |
|
|
name: "CryptoCompare", url: "https://min-api.cryptocompare.com/data", key: "e79c8e6d4c5b4a3f2e1d0c9b8a7f6e5d4c3b2a1f", |
|
|
endpoints: ["/pricemulti?fsyms=BTC,ETH&tsyms=USD"] |
|
|
}, |
|
|
{ name: "CoinPaprika", url: "https://api.coinpaprika.com/v1", key: "", endpoints: ["/tickers", "/coins"] }, |
|
|
{ name: "CoinCap", url: "https://api.coincap.io/v2", key: "", endpoints: ["/assets", "/assets/bitcoin"] }, |
|
|
{ name: "Binance", url: "https://api.binance.com/api/v3", key: "", endpoints: ["/ticker/price?symbol=BTCUSDT"] }, |
|
|
{ name: "CoinDesk", url: "https://api.coindesk.com/v1", key: "", endpoints: ["/bpi/currentprice.json"] }, |
|
|
{ name: "Nomics", url: "https://api.nomics.com/v1", key: "", endpoints: [] }, |
|
|
{ name: "Messari", url: "https://data.messari.io/api/v1", key: "", endpoints: ["/assets/bitcoin/metrics"] }, |
|
|
{ name: "CoinLore", url: "https://api.coinlore.net/api", key: "", endpoints: ["/tickers/"] }, |
|
|
{ name: "CoinStats", url: "https://api.coinstats.app/public/v1", key: "", endpoints: ["/coins"] }, |
|
|
{ name: "Mobula", url: "https://api.mobula.io/api/1", key: "", endpoints: [] }, |
|
|
{ name: "TokenMetrics", url: "https://api.tokenmetrics.com/v2", key: "", endpoints: [] }, |
|
|
{ name: "DIA Data", url: "https://api.diadata.org/v1", key: "", endpoints: [] } |
|
|
], |
|
|
news: [ |
|
|
{ name: "CryptoPanic", url: "https://cryptopanic.com/api/v1", key: "", endpoints: ["/posts/?auth_token={KEY}"] }, |
|
|
{ |
|
|
name: "NewsAPI", url: "https://newsapi.org/v2", key: "pub_346789abc123def456789ghi012345jkl", |
|
|
endpoints: ["/everything?q=crypto&apiKey={KEY}"] |
|
|
}, |
|
|
{ name: "CryptoControl", url: "https://cryptocontrol.io/api/v1/public", key: "", endpoints: ["/news/local?language=EN"] }, |
|
|
{ name: "CoinDesk RSS", url: "https://www.coindesk.com/arc/outboundfeeds/rss/", key: "", endpoints: [] }, |
|
|
{ name: "CoinTelegraph", url: "https://cointelegraph.com/api/v1", key: "", endpoints: [] }, |
|
|
{ name: "CryptoSlate", url: "https://cryptoslate.com/api", key: "", endpoints: [] }, |
|
|
{ name: "The Block", url: "https://api.theblock.co/v1", key: "", endpoints: [] }, |
|
|
{ name: "Bitcoin Magazine", url: "https://bitcoinmagazine.com/.rss/full/", key: "", endpoints: [] }, |
|
|
{ name: "Decrypt", url: "https://decrypt.co/feed", key: "", endpoints: [] }, |
|
|
{ name: "Reddit Crypto", url: "https://www.reddit.com/r/CryptoCurrency/new.json", key: "", endpoints: [] } |
|
|
], |
|
|
sentiment: [ |
|
|
{ name: "Fear & Greed", url: "https://api.alternative.me/fng/", key: "", endpoints: ["?limit=1", "?limit=30"] }, |
|
|
{ name: "LunarCrush", url: "https://api.lunarcrush.com/v2", key: "", endpoints: ["?data=assets&key={KEY}"] }, |
|
|
{ name: "Santiment", url: "https://api.santiment.net/graphql", key: "", endpoints: [] }, |
|
|
{ name: "The TIE", url: "https://api.thetie.io", key: "", endpoints: [] }, |
|
|
{ name: "CryptoQuant", url: "https://api.cryptoquant.com/v1", key: "", endpoints: [] }, |
|
|
{ name: "Glassnode Social", url: "https://api.glassnode.com/v1/metrics/social", key: "", endpoints: [] }, |
|
|
{ name: "Augmento", url: "https://api.augmento.ai/v1", key: "", endpoints: [] } |
|
|
], |
|
|
analytics: [ |
|
|
{ name: "Whale Alert", url: "https://api.whale-alert.io/v1", key: "", endpoints: ["/transactions?api_key={KEY}&min_value=1000000"] }, |
|
|
{ name: "Nansen", url: "https://api.nansen.ai/v1", key: "", endpoints: [] }, |
|
|
{ name: "DeBank", url: "https://api.debank.com", key: "", endpoints: [] }, |
|
|
{ name: "Zerion", url: "https://api.zerion.io", key: "", endpoints: [] }, |
|
|
{ name: "WhaleMap", url: "https://whalemap.io", key: "", endpoints: [] }, |
|
|
{ name: "The Graph", url: "https://api.thegraph.com/subgraphs", key: "", endpoints: [] }, |
|
|
{ name: "Glassnode", url: "https://api.glassnode.com/v1", key: "", endpoints: [] }, |
|
|
{ name: "IntoTheBlock", url: "https://api.intotheblock.com/v1", key: "", endpoints: [] }, |
|
|
{ name: "Dune", url: "https://api.dune.com/api/v1", key: "", endpoints: [] }, |
|
|
{ name: "Covalent", url: "https://api.covalenthq.com/v1", key: "", endpoints: ["/1/address/{address}/balances_v2/"] }, |
|
|
{ name: "Moralis", url: "https://deep-index.moralis.io/api/v2", key: "", endpoints: [] }, |
|
|
{ name: "Transpose", url: "https://api.transpose.io", key: "", endpoints: [] }, |
|
|
{ name: "Footprint", url: "https://api.footprint.network", key: "", endpoints: [] }, |
|
|
{ name: "Bitquery", url: "https://graphql.bitquery.io", key: "", endpoints: [] }, |
|
|
{ name: "Arkham", url: "https://api.arkham.com", key: "", endpoints: [] }, |
|
|
{ name: "Clank", url: "https://clankapp.com/api", key: "", endpoints: [] }, |
|
|
{ |
|
|
|
|
|
name: "Hugging Face", url: "https://api-inference.huggingface.co/models", key: "", |
|
|
endpoints: ["/ElKulako/cryptobert"] |
|
|
} |
|
|
] |
|
|
}; |
|
|
|
|
|
const svgIcons = { |
|
|
chain: '<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>', |
|
|
chart: '<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg>', |
|
|
news: '<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"></path><path d="M18 14h-8"></path><path d="M15 18h-5"></path><path d="M10 6h8v4h-8V6Z"></path></svg>', |
|
|
brain: '<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"></path><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"></path></svg>', |
|
|
analytics: '<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M3 3v18h18"></path><path d="m19 9-5 5-4-4-3 3"></path></svg>' |
|
|
}; |
|
|
|
|
|
let currentMethod = 'GET'; |
|
|
let currentFilter = 'all'; |
|
|
|
|
|
function getIcon(category) { |
|
|
const icons = { |
|
|
explorer: svgIcons.chain, |
|
|
market: svgIcons.chart, |
|
|
news: svgIcons.news, |
|
|
sentiment: svgIcons.brain, |
|
|
analytics: svgIcons.analytics |
|
|
}; |
|
|
return icons[category] || svgIcons.chain; |
|
|
} |
|
|
|
|
|
function renderServices() { |
|
|
const grid = document.getElementById('servicesGrid'); |
|
|
let html = ''; |
|
|
|
|
|
Object.entries(SERVICES).forEach(([category, services]) => { |
|
|
services.forEach(service => { |
|
|
if (currentFilter !== 'all' && category !== currentFilter) return; |
|
|
|
|
|
const hasKey = service.key ? `<span class="badge badge-key">🔑 Has Key</span>` : ''; |
|
|
const endpoints = service.endpoints.length; |
|
|
|
|
|
html += ` |
|
|
<div class="service-card" data-category="${category}" data-name="${service.name.toLowerCase()}"> |
|
|
<div class="service-header"> |
|
|
<div class="service-icon">${getIcon(category)}</div> |
|
|
<div class="service-info"> |
|
|
<div class="service-name">${service.name}</div> |
|
|
<div class="service-url">${service.url}</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="service-badges"> |
|
|
<span class="badge badge-category">${category}</span> |
|
|
${endpoints > 0 ? `<span class="badge badge-endpoints">${endpoints} endpoints</span>` : ''} |
|
|
${hasKey} |
|
|
</div> |
|
|
${endpoints > 0 ? ` |
|
|
<div class="endpoints-list"> |
|
|
${service.endpoints.slice(0, 2).map(ep => ` |
|
|
<div class="endpoint-item"> |
|
|
<div class="endpoint-path">${ep}</div> |
|
|
<div class="endpoint-actions"> |
|
|
<button class="btn-sm" onclick='copyText("${service.url}${ep}")'> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> |
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> |
|
|
</svg> |
|
|
Copy |
|
|
</button> |
|
|
<button class="btn-sm" onclick='testEndpoint("${service.url}${ep}", "${service.key}")'> |
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> |
|
|
</svg> |
|
|
Test |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
`).join('')} |
|
|
${endpoints > 2 ? `<div style="text-align: center; color: var(--text-secondary); margin-top: 0.75rem; font-size: 0.875rem;">+${endpoints - 2} more endpoints</div>` : ''} |
|
|
</div> |
|
|
` : '<div style="color: var(--text-secondary); font-size: 0.875rem;">Base endpoint available</div>'} |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
}); |
|
|
|
|
|
grid.innerHTML = html || '<div style="grid-column: 1/-1; text-align: center; padding: 4rem; color: var(--text-secondary);">No services found</div>'; |
|
|
} |
|
|
|
|
|
function setFilter(filter) { |
|
|
currentFilter = filter; |
|
|
document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active')); |
|
|
event.target.classList.add('active'); |
|
|
renderServices(); |
|
|
} |
|
|
|
|
|
function filterServices() { |
|
|
const search = document.getElementById('searchInput').value.toLowerCase(); |
|
|
document.querySelectorAll('.service-card').forEach(card => { |
|
|
const text = card.textContent.toLowerCase(); |
|
|
card.style.display = text.includes(search) ? 'block' : 'none'; |
|
|
}); |
|
|
} |
|
|
|
|
|
function testEndpoint(url, key) { |
|
|
openTester(); |
|
|
let finalUrl = url; |
|
|
if (key) finalUrl = url.replace('{KEY}', key).replace('{key}', key); |
|
|
document.getElementById('testUrl').value = finalUrl; |
|
|
} |
|
|
|
|
|
function openTester() { |
|
|
document.getElementById('testerModal').classList.add('active'); |
|
|
} |
|
|
|
|
|
function closeTester() { |
|
|
document.getElementById('testerModal').classList.remove('active'); |
|
|
} |
|
|
|
|
|
function setMethod(method, btn) { |
|
|
currentMethod = method; |
|
|
document.querySelectorAll('.method-btn').forEach(b => b.classList.remove('active')); |
|
|
btn.classList.add('active'); |
|
|
document.getElementById('bodyGroup').style.display = (method === 'POST' || method === 'PUT') ? 'block' : 'none'; |
|
|
} |
|
|
|
|
|
async function sendRequest() { |
|
|
const url = document.getElementById('testUrl').value; |
|
|
const headersText = document.getElementById('testHeaders').value; |
|
|
const bodyText = document.getElementById('testBody').value; |
|
|
const responseBox = document.getElementById('responseBox'); |
|
|
const responseJson = document.getElementById('responseJson'); |
|
|
|
|
|
if (!url) { |
|
|
showToast('⚠️', 'Please enter a URL'); |
|
|
return; |
|
|
} |
|
|
|
|
|
responseBox.style.display = 'block'; |
|
|
responseJson.textContent = '⏳ Sending request...'; |
|
|
|
|
|
try { |
|
|
const headers = headersText ? JSON.parse(headersText) : {}; |
|
|
const options = { method: currentMethod, headers }; |
|
|
|
|
|
if ((currentMethod === 'POST' || currentMethod === 'PUT') && bodyText) { |
|
|
options.body = bodyText; |
|
|
} |
|
|
|
|
|
const response = await fetch(url, options); |
|
|
const data = await response.json(); |
|
|
|
|
|
responseJson.textContent = JSON.stringify(data, null, 2); |
|
|
showToast('✅', 'Request successful!'); |
|
|
} catch (error) { |
|
|
responseJson.textContent = `❌ Error: ${error.message}\n\nThis might be due to CORS policy.`; |
|
|
showToast('❌', 'Request failed'); |
|
|
} |
|
|
} |
|
|
|
|
|
function copyText(text) { |
|
|
navigator.clipboard.writeText(text).then(() => { |
|
|
showToast('✅', 'Copied to clipboard!'); |
|
|
}).catch(() => { |
|
|
showToast('❌', 'Failed to copy'); |
|
|
}); |
|
|
} |
|
|
|
|
|
function exportJSON() { |
|
|
const data = { |
|
|
metadata: { |
|
|
exported_at: new Date().toISOString(), |
|
|
total_services: Object.values(SERVICES).flat().length |
|
|
}, |
|
|
services: SERVICES |
|
|
}; |
|
|
|
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = `crypto-api-hub-${Date.now()}.json`; |
|
|
a.click(); |
|
|
URL.revokeObjectURL(url); |
|
|
|
|
|
showToast('✅', 'JSON exported!'); |
|
|
} |
|
|
|
|
|
function showToast(icon, message) { |
|
|
const toast = document.getElementById('toast'); |
|
|
document.getElementById('toastIcon').textContent = icon; |
|
|
document.getElementById('toastMessage').textContent = message; |
|
|
toast.classList.add('show'); |
|
|
setTimeout(() => toast.classList.remove('show'), 3000); |
|
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
renderServices(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
