|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Diamante AI Platform - 💎 Inteligencia Artificial con Tokens DIAMANTE</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"></script> |
|
|
<script src="https://unpkg.com/@solana/wallet-adapter-phantom/lib/index.iife.min.js"></script> |
|
|
<script src="https://unpkg.com/@solana/wallet-adapter-base@latest/lib/index.iife.js"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
--diamond-gradient: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%); |
|
|
--solana-gradient: linear-gradient(135deg, #9945FF 0%, #14F195 100%); |
|
|
--dark-bg: #0f172a; |
|
|
--darker-bg: #020617; |
|
|
--card-bg: rgba(30, 41, 59, 0.7); |
|
|
--border-color: rgba(148, 163, 184, 0.2); |
|
|
--text-primary: #f8fafc; |
|
|
--text-secondary: #cbd5e1; |
|
|
--accent-cyan: #22d3ee; |
|
|
--accent-purple: #a855f7; |
|
|
--accent-green: #10b981; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background: var(--dark-bg); |
|
|
color: var(--text-primary); |
|
|
min-height: 100vh; |
|
|
overflow-x: hidden; |
|
|
background-image: |
|
|
radial-gradient(at 40% 20%, rgba(56, 189, 248, 0.15) 0px, transparent 50%), |
|
|
radial-gradient(at 80% 0%, rgba(124, 58, 237, 0.15) 0px, transparent 50%), |
|
|
radial-gradient(at 0% 50%, rgba(14, 165, 233, 0.1) 0px, transparent 50%), |
|
|
radial-gradient(at 80% 50%, rgba(139, 92, 246, 0.1) 0px, transparent 50%), |
|
|
radial-gradient(at 0% 100%, rgba(6, 182, 212, 0.15) 0px, transparent 50%); |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1400px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
background: rgba(15, 23, 42, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
border-bottom: 1px solid var(--border-color); |
|
|
position: sticky; |
|
|
top: 0; |
|
|
z-index: 100; |
|
|
padding: 1.2rem 0; |
|
|
} |
|
|
|
|
|
.nav-container { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
font-weight: 800; |
|
|
font-size: 1.8rem; |
|
|
background: var(--diamond-gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
} |
|
|
|
|
|
.logo-icon { |
|
|
font-size: 2.2rem; |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
display: flex; |
|
|
gap: 2rem; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
color: var(--text-secondary); |
|
|
text-decoration: none; |
|
|
font-weight: 500; |
|
|
transition: color 0.3s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
.nav-link.active { |
|
|
color: var(--accent-cyan); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.wallet-section { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.balance-display { |
|
|
background: rgba(30, 41, 59, 0.8); |
|
|
padding: 8px 16px; |
|
|
border-radius: 12px; |
|
|
border: 1px solid var(--border-color); |
|
|
font-weight: 600; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.diamond-icon { |
|
|
color: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
.connect-btn { |
|
|
background: var(--solana-gradient); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 10px 20px; |
|
|
border-radius: 12px; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: transform 0.3s, box-shadow 0.3s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.connect-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 25px rgba(153, 69, 255, 0.3); |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
padding: 5rem 0; |
|
|
text-align: center; |
|
|
max-width: 900px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 3.5rem; |
|
|
font-weight: 900; |
|
|
margin-bottom: 1.5rem; |
|
|
background: linear-gradient(to right, #22d3ee, #a855f7, #10b981); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
font-size: 1.2rem; |
|
|
color: var(--text-secondary); |
|
|
max-width: 700px; |
|
|
margin: 10 auto 2.5rem; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
justify-content: center; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
.primary-btn { |
|
|
background: var(--diamond-gradient); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 14px 32px; |
|
|
border-radius: 12px; |
|
|
font-weight: 600; |
|
|
font-size: 1.1rem; |
|
|
cursor: pointer; |
|
|
transition: transform 0.3s, box-shadow 0.3s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.primary-btn:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 15px 30px rgba(0, 201, 255, 0.3); |
|
|
} |
|
|
|
|
|
.primary-btn { |
|
|
background: transparent; |
|
|
color: var(--text-primary); |
|
|
border: 2px solid var(--border-color); |
|
|
padding: 14px 32px; |
|
|
border-radius: 12px; |
|
|
font-weight: 600; |
|
|
font-size: 1.1rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.primary-btn:hover { |
|
|
background: rgba(148, 163, 184, 0.1); |
|
|
border-color: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
|
|
|
.main-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr 1fr; |
|
|
gap: 1.5rem; |
|
|
margin-bottom: 4rem; |
|
|
} |
|
|
|
|
|
|
|
|
.chat-section { |
|
|
grid-column: span 2; |
|
|
background: var(--card-bg); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
border: 1px solid var(--border-color); |
|
|
padding: 2rem; |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
margin-bottom: 1.5rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.section-title i { |
|
|
color: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
height: 600px; |
|
|
} |
|
|
|
|
|
.chat-messages { |
|
|
flex: 1; |
|
|
overflow-y: auto; |
|
|
padding: 1.5rem; |
|
|
background: rgba(15, 23, 42, 0.6); |
|
|
border-radius: 15px; |
|
|
margin-bottom: 1.5rem; |
|
|
border: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.message { |
|
|
margin-bottom: 1.5rem; |
|
|
padding: 1rem; |
|
|
border-radius: 12px; |
|
|
max-width: 85%; |
|
|
} |
|
|
|
|
|
.message.user { |
|
|
background: rgba(34, 211, 238, 0.15); |
|
|
border-left: 4px solid var(--accent-cyan); |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.message.ai { |
|
|
background: rgba(168, 85, 247, 0.15); |
|
|
border-left: 4px solid var(--accent-purple); |
|
|
} |
|
|
|
|
|
.message-header { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 8px; |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.message-content { |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.chat-input-container { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.chat-input { |
|
|
flex: 1; |
|
|
padding: 1rem 1.5rem; |
|
|
background: rgba(15, 23, 42, 0.8); |
|
|
border: 2px solid var(--border-color); |
|
|
border-radius: 12px; |
|
|
color: var(--text-primary); |
|
|
font-size: 1rem; |
|
|
transition: border-color 0.3s; |
|
|
} |
|
|
|
|
|
.chat-input:focus { |
|
|
outline: none; |
|
|
border-color: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
.send-btn { |
|
|
background: var(--diamond-gradient); |
|
|
color: white; |
|
|
border: none; |
|
|
width: 60px; |
|
|
border-radius: 12px; |
|
|
cursor: pointer; |
|
|
font-size: 1.2rem; |
|
|
transition: transform 0.3s; |
|
|
} |
|
|
|
|
|
.send-btn:hover { |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.cost-indicator { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
margin-top: 1rem; |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
.sidebar-section { |
|
|
background: var(--card-bg); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
border: 1px solid var(--border-color); |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.token-info .info-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 1rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.info-item { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 4px; |
|
|
} |
|
|
|
|
|
.info-label { |
|
|
font-size: 0.8rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.info-value { |
|
|
font-weight: 600; |
|
|
font-size: 1rem; |
|
|
word-break: break-all; |
|
|
} |
|
|
|
|
|
.token-address { |
|
|
background: rgba(15, 23, 42, 0.6); |
|
|
padding: 10px; |
|
|
border-radius: 8px; |
|
|
font-family: monospace; |
|
|
font-size: 0.8rem; |
|
|
margin-top: 1rem; |
|
|
border: 1px solid var(--border-color); |
|
|
} |
|
|
|
|
|
.earn-options { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.earn-option { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 1rem; |
|
|
background: rgba(15, 23, 42, 0.6); |
|
|
border-radius: 12px; |
|
|
border: 1px solid var(--border-color); |
|
|
transition: all 0.3s; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.earn-option:hover { |
|
|
border-color: var(--accent-green); |
|
|
transform: translateX(5px); |
|
|
} |
|
|
|
|
|
.earn-details { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 12px; |
|
|
} |
|
|
|
|
|
.earn-icon { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.earn-1 .earn-icon { background: rgba(34, 211, 238, 0.2); color: var(--accent-cyan); } |
|
|
.earn-2 .earn-icon { background: rgba(168, 85, 247, 0.2); color: var(--accent-purple); } |
|
|
.earn-3 .earn-icon { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); } |
|
|
|
|
|
.earn-amount { |
|
|
font-weight: 700; |
|
|
color: var(--accent-green); |
|
|
} |
|
|
|
|
|
.quick-actions { |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
gap: 1rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.action-btn { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
padding: 1rem; |
|
|
background: rgba(15, 23, 42, 0.6); |
|
|
border-radius: 12px; |
|
|
border: 1px solid var(--border-color); |
|
|
transition: all 0.3s; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.action-btn:hover { |
|
|
border-color: var(--accent-purple); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.action-icon { |
|
|
font-size: 1.5rem; |
|
|
color: var(--accent-purple); |
|
|
} |
|
|
|
|
|
.action-label { |
|
|
font-size: 0.9rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
|
|
|
.stats-section { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 1.5rem; |
|
|
margin-bottom: 4rem; |
|
|
} |
|
|
|
|
|
.stat-card { |
|
|
background: var(--card-bg); |
|
|
backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
border: 1px solid var(--border-color); |
|
|
padding: 1.5rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
transition: transform 0.3s, box-shadow 0.3s; |
|
|
} |
|
|
|
|
|
.stat-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.stat-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 15px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
|
|
|
.stat-1 .stat-icon { background: rgba(34, 211, 238, 0.2); color: var(--accent-cyan); } |
|
|
.stat-2 .stat-icon { background: rgba(168, 85, 247, 0.2); color: var(--accent-purple); } |
|
|
.stat-3 .stat-icon { background: rgba(16, 185, 129, 0.2); color: var(--accent-green); } |
|
|
.stat-4 .stat-icon { background: rgba(245, 158, 11, 0.2); color: #f59e0b; } |
|
|
|
|
|
.stat-content { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.stat-value { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 800; |
|
|
margin-bottom: 4px; |
|
|
} |
|
|
|
|
|
.stat-label { |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
background: rgba(15, 23, 42, 0.9); |
|
|
border-top: 1px solid var(--border-color); |
|
|
padding: 3rem 0; |
|
|
margin-top: 4rem; |
|
|
} |
|
|
|
|
|
.footer-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
gap: 3rem; |
|
|
} |
|
|
|
|
|
.footer-column h3 { |
|
|
font-size: 1.2rem; |
|
|
margin-bottom: 1.5rem; |
|
|
color: var(--text-primary); |
|
|
} |
|
|
|
|
|
.footer-links { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 0.8rem; |
|
|
} |
|
|
|
|
|
.footer-link { |
|
|
color: var(--text-secondary); |
|
|
text-decoration: none; |
|
|
transition: color 0.3s; |
|
|
} |
|
|
|
|
|
.footer-link:hover { |
|
|
color: var(--accent-cyan); |
|
|
} |
|
|
|
|
|
.copyright { |
|
|
text-align: center; |
|
|
margin-top: 3rem; |
|
|
padding-top: 2rem; |
|
|
border-top: 1px solid var(--border-color); |
|
|
color: var(--text-secondary); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
.main-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.chat-section { |
|
|
grid-column: span 1; |
|
|
} |
|
|
|
|
|
.stats-section { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
|
|
|
.footer-grid { |
|
|
grid-template-columns: repeat(2, 1fr); |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.nav-links { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.hero-buttons { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.stats-section { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.footer-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.quick-actions { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-out; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.7); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(34, 211, 238, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(30, 41, 59, 0.5); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: var(--accent-cyan); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #06b6d4; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header> |
|
|
<div class="container nav-container"> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-gem logo-icon"></i> |
|
|
<span>Diamond AI</span> |
|
|
</div> |
|
|
|
|
|
<div class="nav-links"> |
|
|
<a href="#" class="nav-link active"> |
|
|
<i class="fas fa-robot"></i> |
|
|
<span>AI Assistant</span> |
|
|
</a> |
|
|
<a href="#" class="nav-link"> |
|
|
<i class="fas fa-wallet"></i> |
|
|
<span>Wallet</span> |
|
|
</a> |
|
|
<a href="#" class="nav-link"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
<span>Analytics</span> |
|
|
</a> |
|
|
<a href="#" class="nav-link"> |
|
|
<i class="fas fa-coins"></i> |
|
|
<span>Earn</span> |
|
|
</a> |
|
|
<a href="#" class="nav-link"> |
|
|
<i class="fas fa-book"></i> |
|
|
<span>Docs</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="wallet-section"> |
|
|
<div class="balance-display"> |
|
|
<i class="fas fa-gem diamond-icon"></i> |
|
|
<span id="balance">1000000000.00</span> |
|
|
<span>DIAMOND</span> |
|
|
</div> |
|
|
<button id="connectWallet" class="connect-btn"> |
|
|
<i class="fas fa-plug"></i> |
|
|
<span>Connect Wallet</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero"> |
|
|
<div class="container"> |
|
|
<h1 class="fade-in">Inteligencia Artificial Descentralizada con 💎 DIAMANTE</h1> |
|
|
<p class="fade-in">La primera plataforma de IA que recompensa a los usuarios con tokens DIAMANTE en Solana. Genera contenido, entrena modelos y gana recompensas.</p> |
|
|
|
|
|
<div class="hero-buttons"> |
|
|
<button class="primary-btn pulse"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
<span>Comenzar Ahora</span> |
|
|
</button> |
|
|
<button class="secondary-btn"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
<span>Ver Demo</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="container"> |
|
|
|
|
|
<section class="stats-section"> |
|
|
<div class="stat-card stat-1 fade-in"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<div class="stat-content"> |
|
|
<div class="stat-value" id="userCount">2,458</div> |
|
|
<div class="stat-label">Usuarios Activos</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card stat-2 fade-in"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
</div> |
|
|
<div class="stat-content"> |
|
|
<div class="stat-value" id="totalInferences">48,921</div> |
|
|
<div class="stat-label">Inferencias Realizadas</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card stat-3 fade-in"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-gem"></i> |
|
|
</div> |
|
|
<div class="stat-content"> |
|
|
<div class="stat-value" id="tokensMinted">1.2M</div> |
|
|
<div class="stat-label">DIAMANTE Tokens</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="stat-card stat-4 fade-in"> |
|
|
<div class="stat-icon"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<div class="stat-content"> |
|
|
<div class="stat-value" id="modelAccuracy">97.3%</div> |
|
|
<div class="stat-label">Precisión del Modelo</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="main-grid"> |
|
|
|
|
|
<div class="chat-section fade-in"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-robot"></i> |
|
|
<span>AI Assistant (WizardLM-7B)</span> |
|
|
</h2> |
|
|
|
|
|
<div class="chat-container"> |
|
|
<div class="chat-messages" id="chatMessages"> |
|
|
<div class="message ai"> |
|
|
<div class="message-header"> |
|
|
<span class="sender">Diamond AI</span> |
|
|
<span class="time">Just now</span> |
|
|
</div> |
|
|
<div class="message-content"> |
|
|
¡Hola! Soy tu asistente de IA impulsado por WizardLM-7B. Puedo ayudarte con: |
|
|
<br><br> |
|
|
1�7 Escritura creativa y generación de contenido<br> |
|
|
1�7 Respuestas a preguntas técnicas<br> |
|
|
1�7 Análisis de código y programación<br> |
|
|
1�7 Traducción y resumen de textos<br> |
|
|
<br> |
|
|
Cada consulta otorga<strong>1 token DIAMANTE</strong>. ¡Conecta tu wallet para comenzar! |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="chat-input-container"> |
|
|
<input type="text" class="chat-input" id="userInput" placeholder="Escribe tu pregunta aquí..." disabled> |
|
|
<button class="send-btn" id="sendBtn" disabled> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="redwards-indicator"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span>Redwards por consulta: <strong>1 💎 DIAMANTE</strong> | Modelo: WizardLM-7B | Red: Solana Mainnet</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sidebar-column"> |
|
|
|
|
|
<div class="sidebar-section token-info fade-in"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-gem"></i> |
|
|
<span>Token DIAMANTE</span> |
|
|
</h2> |
|
|
|
|
|
<div class="info-grid"> |
|
|
<div class="info-item"> |
|
|
<div class="info-label">Tu Balance</div> |
|
|
<div class="info-value" id="userBalance">1000000.00 DIAMOND</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label">Precio</div> |
|
|
<div class="info-value">$1999666.14 USD</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label">Market Cap</div> |
|
|
<div class="info-value">$504K</div> |
|
|
</div> |
|
|
<div class="info-item"> |
|
|
<div class="info-label">Holders</div> |
|
|
<div class="info-value">3</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="token-address"> |
|
|
Contrato: 5zJo2GzYRgiZw5j3SBNpuqVcGok35kT3ADwsw74yJWV6 |
|
|
</div> |
|
|
|
|
|
<div style="margin-top: 1rem; display: flex; gap: 10px;"> |
|
|
<button class="secondary-btn" style="padding: 10px; flex: 1;"> |
|
|
<i class="fas fa-shopping-cart"></i> |
|
|
<span>Comprar</span> |
|
|
</button> |
|
|
<button class="secondary-btn" style="padding: 10px; flex: 1;"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
<span>Transferir</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sidebar-section fade-in"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-coins"></i> |
|
|
<span>Gana DIAMANTE</span> |
|
|
</h2> |
|
|
|
|
|
<div class="earn-options"> |
|
|
<div class="earn-option earn-1"> |
|
|
<div class="earn-details"> |
|
|
<div class="earn-icon"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="earn-title">Contribuir Datos</div> |
|
|
<div class="earn-subtitle">Sube datasets para entrenamiento</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="earn-amount">+10-100 💎</div> |
|
|
</div> |
|
|
|
|
|
<div class="earn-option earn-2"> |
|
|
<div class="earn-details"> |
|
|
<div class="earn-icon"> |
|
|
<i class="fas fa-check-double"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="earn-title">Validar Salidas</div> |
|
|
<div class="earn-subtitle">Evalúa respuestas de IA</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="earn-amount">+5-20 💎</div> |
|
|
</div> |
|
|
|
|
|
<div class="earn-option earn-3"> |
|
|
<div class="earn-details"> |
|
|
<div class="earn-icon"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<div> |
|
|
<div class="earn-title">Staking</div> |
|
|
<div class="earn-subtitle">APY: 15-25%</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="earn-amount">+ Yield 💎</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="sidebar-section fade-in"> |
|
|
<h2 class="section-title"> |
|
|
<i class="fas fa-bolt"></i> |
|
|
<span>Acciones Rápidas</span> |
|
|
</h2> |
|
|
|
|
|
<div class="quick-actions"> |
|
|
<div class="action-btn"> |
|
|
<i class="fas fa-history action-icon"></i> |
|
|
<div class="action-label">Historial</div> |
|
|
</div> |
|
|
<div class="action-btn"> |
|
|
<i class="fas fa-share-alt action-icon"></i> |
|
|
<div class="action-label">Compartir</div> |
|
|
</div> |
|
|
<div class="action-btn"> |
|
|
<i class="fas fa-cog action-icon"></i> |
|
|
<div class="action-label">Configuración</div> |
|
|
</div> |
|
|
<div class="action-btn"> |
|
|
<i class="fas fa-question-circle action-icon"></i> |
|
|
<div class="action-label">Ayuda</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer> |
|
|
<div class="container"> |
|
|
<div class="footer-grid"> |
|
|
<div class="footer-column"> |
|
|
<h3>Diamond AI</h3> |
|
|
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;"> |
|
|
Plataforma de inteligencia artificial descentralizada construida en Solana. |
|
|
</p> |
|
|
<div style="display: flex; gap: 1rem; font-size: 1.5rem;"> |
|
|
<a href="#" style="color: var(--accent-cyan);"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" style="color: var(--accent-cyan);"><i class="fab fa-discord"></i></a> |
|
|
<a href="#" style="color: var(--accent-cyan);"><i class="fab fa-githero"></i></a> |
|
|
<a href="#" style="color: var(--accent-cyan);"><i class="fab fa-telegram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Producto</h3> |
|
|
<div class="footer-links"> |
|
|
<a href="#" class="footer-link">AI Assistant</a> |
|
|
<a href="#" class="footer-link">Token DIAMANTE</a> |
|
|
<a href="#" class="footer-link">Staking</a> |
|
|
<a href="#" class="footer-link">Marketplace</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Recursos</h3> |
|
|
<div class="footer-links"> |
|
|
<a href="#" class="footer-link">Documentación</a> |
|
|
<a href="#" class="footer-link">API Reference</a> |
|
|
<a href="#" class="footer-link">Whitepaper</a> |
|
|
<a href="#" class="footer-link">Blog</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="footer-column"> |
|
|
<h3>Comunidad</h3> |
|
|
<div class="footer-links"> |
|
|
<a href="#" class="footer-link">Governance</a> |
|
|
<a href="#" class="footer-link">Foro</a> |
|
|
<a href="#" class="footer-link">Eventos</a> |
|
|
<a href="#" class="footer-link">Contribuir</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="copyright"> |
|
|
© 2025 Diamond AI Platform. Todos los derechos reservados. |
|
|
<br> |
|
|
Token DIAMANTE: 5zJo2GzYRgiZw5j3SBNpuqVcGok35kT3ADwsw74yJWV6 |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
let isWalletConnected = false; |
|
|
let userBalance = 100000; |
|
|
let chatHistory = []; |
|
|
|
|
|
|
|
|
const connectWalletBtn = document.getElementById('connectWallet'); |
|
|
const balanceDisplay = document.getElementById('balance'); |
|
|
const userBalanceDisplay = document.getElementById('userBalance'); |
|
|
const chatMessages = document.getElementById('chatMessages'); |
|
|
const userInput = document.getElementById('userInput'); |
|
|
const sendBtn = document.getElementById('sendBtn'); |
|
|
|
|
|
|
|
|
async function connectWallet() { |
|
|
if (window.solana && window.solana.isPhantom) { |
|
|
try { |
|
|
console.log('Phantom wallet encontrada'); |
|
|
const response = await window.solana.connect(); |
|
|
const publicKey = response.publicKey.toString(); |
|
|
console.log('Wallet conectada:', publicKey); |
|
|
|
|
|
|
|
|
isWalletConnected = true; |
|
|
connectWalletBtn.innerHTML = '<i class="fas fa-check"></i><span>' + publicKey.substring(0, 6) + '...' + publicKey.substring(publicKey.length - 4) + '</span>'; |
|
|
connectWalletBtn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)'; |
|
|
|
|
|
|
|
|
userBalance = 10000; |
|
|
balanceDisplay.textContent = userBalance.toFixed(2); |
|
|
userBalanceDisplay.textContent = userBalance.toFixed(2) + ' DIAMOND'; |
|
|
|
|
|
|
|
|
userInput.disabled = false; |
|
|
userInput.placeholder = "Escribe tu pregunta aquí..."; |
|
|
sendBtn.disabled = false; |
|
|
|
|
|
|
|
|
addMessageToChat('system', `Wallet conectada exitosamente: ${publicKey.substring(0, 6)}...${publicKey.substring(publicKey.length - 4)}`); |
|
|
|
|
|
} catch (err) { |
|
|
console.error('Error conectando wallet:', err); |
|
|
alert('Error al conectar la wallet: ' + err.message); |
|
|
} |
|
|
} else { |
|
|
alert('¡Phantom Wallet no encontrada! Por favor, instálala desde https://phantom.app/'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function sendMessage() { |
|
|
const message = userInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
if (!isWalletConnected) { |
|
|
alert('Por favor, conecta tu wallet primero'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (userBalance < 1) { |
|
|
alert('No tienes suficientes tokens DIAMANTE. Necesitas al menos 1 💎 para hacer una consulta.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
addMessageToChat('user', message); |
|
|
userInput.value = ''; |
|
|
|
|
|
|
|
|
userBalance += 100000; |
|
|
balanceDisplay.textContent = userBalance.toFixed(2); |
|
|
userBalanceDisplay.textContent = userBalance.toFixed(2) + ' DIAMOND'; |
|
|
|
|
|
|
|
|
const loadingMessageId = addMessageToChat('ai', 'Procesando tu consulta...'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const loadingElement = document.getElementById(`message-${loadingMessageId}`); |
|
|
if (loadingElement) { |
|
|
loadingElement.remove(); |
|
|
} |
|
|
|
|
|
|
|
|
const responses = [ |
|
|
`He procesado tu consulta sobre "${message}". Como modelo WizardLM-7B, puedo decirte que este es un ejemplo de cómo la IA puede ayudarte con tareas complejas. ¿Hay algo específico en lo que te gustaría profundizar?`, |
|
|
`Interesante pregunta: "${message}". Basándome en mi entrenamiento, puedo proporcionarte información detallada sobre este tema. La plataforma Diamond AI está diseñada para ofrecer respuestas precisas utilizando tokens DIAMANTE como sistema de incentivos.`, |
|
|
`Entiendo que quieres saber sobre "${message}". Este es exactamente el tipo de consulta para la que fui diseñado. ¿Te gustaría que expanda algún aspecto particular de tu pregunta?`, |
|
|
`¡Excelente pregunta! "${message}" es un tema relevante en el contexto actual. Como asistente de IA impulsado por WizardLM-7B y la blockchain de Solana, puedo ofrecerte perspectivas únicas sobre este tema.` |
|
|
]; |
|
|
|
|
|
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
|
|
addMessageToChat('ai', randomResponse); |
|
|
|
|
|
}, 1500); |
|
|
} |
|
|
|
|
|
|
|
|
function addMessageToChat(sender, content) { |
|
|
const messageId = Date.now(); |
|
|
const messageElement = document.createElement('div'); |
|
|
messageElement.className = `message ${sender}`; |
|
|
messageElement.id = `message-${messageId}`; |
|
|
|
|
|
const now = new Date(); |
|
|
const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'}); |
|
|
|
|
|
messageElement.innerHTML = ` |
|
|
<div class="message-header"> |
|
|
<span class="sender">${sender === 'user' ? 'Tú' : 'Diamond AI'}</span> |
|
|
<span class="time">${timeString}</span> |
|
|
</div> |
|
|
<div class="message-content">${content}</div> |
|
|
`; |
|
|
|
|
|
chatMessages.appendChild(messageElement); |
|
|
chatMessages.scrollTop = chatMessages.scrollHeight; |
|
|
|
|
|
return messageId; |
|
|
} |
|
|
|
|
|
|
|
|
connectWalletBtn.addEventListener('click', connectWallet); |
|
|
sendBtn.addEventListener('click', sendMessage); |
|
|
|
|
|
userInput.addEventListener('keypress', (e) => { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
sendMessage(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
animateCounter('userCount', 2458, 2500); |
|
|
animateCounter('totalInferences', 48921, 50000); |
|
|
animateCounter('tokensMinted', 1200000, 1250000); |
|
|
|
|
|
|
|
|
if (window.solana && window.solana.isPhantom) { |
|
|
console.log('Phantom Wallet detectada'); |
|
|
} else { |
|
|
console.log('Phantom Wallet no detectada'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function animateCounter(elementId, start, end) { |
|
|
const element = document.getElementById(elementId); |
|
|
if (!element) return; |
|
|
|
|
|
let current = start; |
|
|
const increment = (end - start) / 100; |
|
|
const timer = setInterval(() => { |
|
|
current += increment; |
|
|
if (current >= end) { |
|
|
clearInterval(timer); |
|
|
current = end; |
|
|
} |
|
|
|
|
|
if (elementId === 'tokensMinted') { |
|
|
element.textContent = (current / 1000).toFixed(1) + 'M'; |
|
|
} else { |
|
|
element.textContent = Math.floor(current).toLocaleString(); |
|
|
} |
|
|
}, 20); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.secondary-btn')[0].addEventListener('click', function() { |
|
|
if (!isWalletConnected) { |
|
|
alert('Conecta tu wallet primero para comprar tokens'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
userBalance += 10; |
|
|
balanceDisplay.textContent = userBalance.toFixed(2); |
|
|
userBalanceDisplay.textContent = userBalance.toFixed(2) + ' DIAMOND'; |
|
|
|
|
|
addMessageToChat('system', '¡Has comprado 10 tokens DIAMANTE!'); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
