Hugging Face's logo

Spaces:
Re2906
/
anycoder-4c8476d1
Running

App Files Community
anycoder-4c8476d1 / index.html
Re2906's picture
Re2906
Upload folder using huggingface_hub
0ce65ae verified
raw
history blame contribute delete
38.4 kB
 <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TON Blockchain Platform - Mainnet</title>
<!-- Security Headers -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://toncenter.com https://ton.org https://ton-access.com; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; connect-src 'self' https://toncenter.com https://ton.org https://ton-access.com wss:;">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta http-equiv="X-XSS-Protection" content="1; mode=block">
<!-- SEO & Meta -->
<meta name="description" content="پلتفرم جامع TON blockchain - کیف پول، تبادل، ماینینگ و مدیریت دارایی‌های دیجیتال">
<meta name="keywords" content="TON, blockchain, wallet, mining, swap, mainnet, cryptocurrency">
<meta name="author" content="TON Platform Team">
<!-- Open Graph -->
<meta property="og:title" content="TON Blockchain Platform">
<meta property="og:description" content="پلتفرم عملیاتی TON blockchain در mainnet">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ton-platform.com">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪙</text></svg>">
<link rel="apple-touch-icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪙</text></svg>">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--ton-primary: #2979ff;
--ton-secondary: #1e3a8a;
--ton-success: #10b981;
--ton-warning: #f59e0b;
--ton-error: #ef4444;
--ton-dark: #0f172a;
--ton-glass: rgba(30, 41, 59, 0.7);
--ton-glass-border: rgba(148, 163, 184, 0.1);
--ton-card-bg: #1e293b;
--ton-card-border: #334155;
}
body {
font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
color: #f1f5f9;
}
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
.glass {
backdrop-filter: blur(16px);
background: var(--ton-glass);
border: 1px solid var(--ton-glass-border);
border-radius: 16px;
overflow: hidden;
}
.gradient-border {
background: linear-gradient(135deg, var(--ton-primary), var(--ton-success));
padding: 2px;
border-radius: 16px;
}
.gradient-border > * {
background: var(--ton-dark);
border-radius: 14px;
}
.status-online {
display: inline-block;
width: 8px;
height: 8px;
background-color: var(--ton-success);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.4; }
50% { opacity: 1; }
100% { opacity: 0.4; }
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #1e293b;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.network-indicator {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(15, 23, 42, 0.8);
border-radius: 30px;
border: 1px solid rgba(148, 163, 184, 0.1);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.network-indicator .status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ef4444;
}
.network-indicator.connected .status-indicator {
background-color: #10b981;
animation: pulse 2s infinite;
}
.network-indicator.connecting .status-indicator {
background-color: #f59e0b;
animation: pulse 1.5s infinite;
}
.mining-status {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 1000;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(15, 23, 42, 0.8);
border-radius: 30px;
border: 1px solid rgba(148, 163, 184, 0.1);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.mining-status .status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ef4444;
}
.mining-status.active .status-indicator {
background-color: #10b981;
animation: pulse 1.5s infinite;
}
.mining-status.paused .status-indicator {
background-color: #f59e0b;
}
.mining-status.stopped .status-indicator {
background-color: #ef4444;
}
.mining-status .status-text {
color: #f1f5f9;
}
.mining-status.active .status-text {
color: #10b981;
}
.mining-status.paused .status-text {
color: #f59e0b;
}
.mining-status.stopped .status-text {
color: #ef4444;
}
.transaction-indicator {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
display: none;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: rgba(15, 23, 42, 0.9);
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.2);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s ease-out;
}
.transaction-indicator.hide {
animation: slideOut 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100px);
opacity: 0;
}
}
.transaction-indicator i {
font-size: 1.5rem;
}
.transaction-indicator.success i {
color: var(--ton-success);
}
.transaction-indicator.error i {
color: var(--ton-error);
}
.transaction-indicator.warning i {
color: var(--ton-warning);
}
.transaction-indicator .content {
flex: 1;
}
.transaction-indicator .title {
font-weight: 500;
margin-bottom: 4px;
}
.transaction-indicator .message {
font-size: 0.9rem;
opacity: 0.9;
}
.transaction-indicator .close {
background: none;
border: none;
font-size: 1.2rem;
color: #94a3b8;
cursor: pointer;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.transaction-indicator .close:hover {
background: #1e293b;
color: #f1f5f9;
}
.transaction-indicator .progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: var(--ton-primary);
width: 100%;
transform-origin: left;
transition: transform 0.2s;
}
.wallet-connect-modal .modal-content {
max-height: 90vh;
overflow-y: auto;
}
.mining-modal .modal-content {
max-height: 90vh;
overflow-y: auto;
}
.transaction-modal .modal-content {
max-height: 80vh;
overflow-y: auto;
}
.notification {
position: fixed;
top: 20px;
left: 20px;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 320px;
}
.notification-item {
padding: 12px 16px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
animation: slideInLeft 0.3s ease-out;
display: flex;
align-items: center;
gap: 10px;
}
.notification-item.success {
border-left: 4px solid var(--ton-success);
}
.notification-item.error {
border-left: 4px solid var(--ton-error);
}
.notification-item.warning {
border-left: 4px solid var(--ton-warning);
}
@keyframes slideInLeft {
from {
transform: translateX(-100px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.token-list {
max-height: 300px;
overflow-y: auto;
}
.token-list::-webkit-scrollbar {
width: 6px;
}
.token-list::-webkit-scrollbar-track {
background: #1e293b;
}
.token-list::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 3px;
}
.token-list::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.transaction-details {
max-height: 300px;
overflow-y: auto;
}
.transaction-details::-webkit-scrollbar {
width: 6px;
}
.transaction-details::-webkit-scrollbar-track {
background: #1e293b;
}
.transaction-details::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 3px;
}
.transaction-details::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.qr-code {
width: 160px;
height: 160px;
background: white;
padding: 10px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.qr-code img {
width: 100%;
height: 100%;
}
.network-switcher {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.network-switcher input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--ton-success);
}
input:checked + .slider:before {
transform: translateX(26px);
}
.token-selector {
position: relative;
width: 100%;
}
.selected-token {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 12px;
border: 1px solid #334155;
border-radius: 8px;
background: #1e293b;
}
.token-options {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 10;
background: #1e293b;
border: 1px solid #334155;
border-radius: 8px;
margin-top: 4px;
max-height: 200px;
overflow-y: auto;
display: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.token-options.show {
display: block;
}
.token-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
transition: background 0.2s;
}
.token-option:hover {
background: #334155;
}
.token-option.selected {
background: #334155;
font-weight: 500;
}
.mining-worker {
padding: 12px;
border-radius: 8px;
background: #1e293b;
border: 1px solid #334155;
margin-bottom: 8px;
transition: all 0.2s;
}
.mining-worker:hover {
border-color: var(--ton-primary);
transform: translateY(-2px);
}
.mining-worker.active {
border-color: var(--ton-success);
background: rgba(16, 185, 129, 0.05);
}
.mining-worker.paused {
border-color: var(--ton-warning);
background: rgba(245, 158, 11, 0.05);
}
.mining-worker.stopped {
border-color: var(--ton-error);
background: rgba(239, 68, 68, 0.05);
}
.mining-worker-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.mining-worker-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.mining-worker-stat {
font-size: 12px;
color: #94a3b8;
}
.mining-worker-value {
font-weight: 500;
color: #f1f5f9;
}
.mining-control {
display: flex;
gap: 8px;
margin-top: 8px;
}
.mining-control button {
flex: 1;
padding: 6px 12px;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.mining-control .start {
background: var(--ton-success);
color: white;
}
.mining-control .pause {
background: var(--ton-warning);
color: white;
}
.mining-control .stop {
background: var(--ton-error);
color: white;
}
.mining-control .resume {
background: var(--ton-primary);
color: white;
}
.mining-log {
background: #0f172a;
color: #a5b4fc;
font-family: 'JetBrains Mono', monospace;
padding: 12px;
border-radius: 8px;
height: 300px;
overflow-y: auto;
line-height: 1.4;
border: 1px solid #334155;
}
.mining-log .log-info {
color: #a5b4fc;
}
.mining-log .log-success {
color: #6ee7b7;
}
.mining-log .log-warning {
color: #fcd34d;
}
.mining-log .log-error {
color: #fca5a5;
}
.mining-log .log-timestamp {
color: #94a3b8;
margin-right: 8px;
}
.mining-log .log-source {
color: #c084fc;
margin-right: 4px;
}
.mining-log .log-message {
margin-left: 4px;
}
.swap-rate {
display: flex;
justify-content: space-between;
padding: 8px 12px;
background: #1e293b;
border-radius: 8px;
margin-top: 12px;
font-size: 14px;
}
.swap-rate-label {
color: #94a3b8;
}
.swap-rate-value {
font-weight: 500;
}
.swap-slippage {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
padding: 8px 12px;
background: #1e293b;
border-radius: 8px;
font-size: 14px;
}
.swap-slippage-label {
color: #94a3b8;
}
.swap-slippage-value {
font-weight: 500;
}
.slippage-control {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
}
.slippage-control input {
flex: 1;
}
.slippage-control span {
width: 40px;
text-align: center;
font-weight: 500;
}
.transaction-speed {
display: flex;
gap: 8px;
margin-top: 12px;
}
.transaction-speed button {
flex: 1;
padding: 8px 12px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: 1px solid #334155;
}
.transaction-speed button.active {
background: var(--ton-primary);
color: white;
border-color: var(--ton-primary);
}
.transaction-speed button.low {
background: #1e293b;
color: #94a3b8;
}
.transaction-speed button.medium {
background: #1e293b;
color: #94a3b8;
}
.transaction-speed button.high {
background: #1e293b;
color: #94a3b8;
}
.transaction-speed button.low:hover {
background: #334155;
}
.transaction-speed button.medium:hover {
background: #334155;
}
.transaction-speed button.high:hover {
background: #334155;
}
.wallet-balance {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: #1e293b;
border-radius: 8px;
margin-bottom: 16px;
}
.wallet-balance-label {
color: #94a3b8;
}
.wallet-balance-value {
font-size: 1.2rem;
font-weight: 600;
}
.wallet-address {
word-break: break-all;
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
color: #94a3b8;
margin-top: 8px;
text-align: center;
}
.wallet-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
.wallet-action {
display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
background: #1e293b;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.wallet-action:hover {
background: #334155;
transform: translateY(-2px);
}
.wallet-action i {
font-size: 1.5rem;
margin-bottom: 8px;
}
.wallet-action span {
font-size: 0.9rem;
font-weight: 500;
}
.wallet-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 16px;
background: #1e293b;
border-radius: 8px;
margin-top: 16px;
}
.wallet-qr h4 {
font-size: 1rem;
margin-bottom: 8px;
}
.stats-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 16px;
transition: all 0.2s;
}
.stats-card:hover {
border-color: var(--ton-primary);
transform: translateY(-2px);
}
.stats-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.stats-card-title {
font-size: 1rem;
font-weight: 500;
color: #94a3b8;
}
.stats-card-value {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 4px;
}
.stats-card-change {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.85rem;
}
.stats-card-change.positive {
color: var(--ton-success);
}
.stats-card-change.negative {
color: var(--ton-error);
}
.stats-chart {
height: 120px;
margin-top: 12px;
}
.token-distribution {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 16px;
}
.token-distribution-item {
display: flex;
flex-direction: column;
}
.token-distribution-label {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: 0.85rem;
}
.token-distribution-color {
width: 12px;
height: 12px;
border-radius: 50%;
}
.token-distribution-bar {
height: 6px;
border-radius: 3px;
background: #334155;
overflow: hidden;
}
.token-distribution-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(to right, var(--ton-primary), var(--ton-secondary));
transition: width 0.5s ease;
}
.holders-table {
width: 100%;
border-collapse: collapse;
}
.holders-table th {
text-align: right;
padding: 10px;
font-weight: 500;
color: #94a3b8;
border-bottom: 1px solid #334155;
}
.holders-table td {
padding: 12px 10px;
border-bottom: 1px solid #1e293b;
font-size: 0.9rem;
}
.holders-table tr:last-child td {
border-bottom: none;
}
.holders-table tr:hover {
background: #1e293b;
}
.holders-table .address {
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
color: #94a3b8;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.holders-table .balance {
font-weight: 500;
}
.holders-table .percentage {
color: #94a3b8;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: #0f172a;
border-radius: 16px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border: 1px solid #334155;
}
.modal-header {
padding: 16px 24px;
border-bottom: 1px solid #334155;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
font-size: 1.25rem;
font-weight: 600;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: #94a3b8;
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.modal-close:hover {
background: #1e293b;
color: #f1f5f9;
}
.modal-body {
padding: 24px;
}
.modal-footer {
padding: 16px 24px;
border-top: 1px solid #334155;
display: flex;
justify-content: flex-end;
gap: 12px;
}
.btn {
padding: 8px 16px;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
font-size: 1rem;
}
.btn-primary {
background: var(--ton-primary);
color: white;
}
.btn-primary:hover {
background: #1d4ed8;
}
.btn-secondary {
background: #1e293b;
color: #f1f5f9;
border: 1px solid #334155;
}
.btn-secondary:hover {
background: #334155;
}
.btn-success {
background: var(--ton-success);
color: white;
}
.btn-success:hover {
background: #0da266;
}
.btn-warning {
background: var(--ton-warning);
color: white;
}
.btn-warning:hover {
background: #d97706;
}
.btn-danger {
background: var(--ton-error);
color: white;
}
.btn-danger:hover {
background: #dc2626;
}
.btn-block {
display: block;
width: 100%;
}
.input {
width: 100%;
padding: 10px 14px;
border-radius: 8px;
background: #1e293b;
border: 1px solid #334155;
color: #f1f5f9;
font-size: 1rem;
transition: all 0.2s;
}
.input:focus {
outline: none;
border-color: var(--ton-primary);
box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.2);
}
.select {
width: 100%;
padding: 10px 14px;
border-radius: 8px;
background: #1e293b;
border: 1px solid #334155;
color: #f1f5f9;
font-size: 1rem;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
}
.select:focus {
outline: none;
border-color: var(--ton-primary);
box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.2);
}
.toast {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
padding: 12px 20px;
border-radius: 8px;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
animation: slideIn 0.3s ease-out;
display: flex;
align-items: center;
gap: 10px;
max-width: 320px;
}
.toast.hide {
animation: slideOut 0.3s ease-out;
}
.toast.success {
border-left: 4px solid var(--ton-success);
}
.toast.error {
border-left: 4px solid var(--ton-error);
}
.toast.warning {
border-left: 4px solid var(--ton-warning);
}
.toast i {
font-size: 1.2rem;
}
.toast-content {
flex: 1;
}
.toast-title {
font-weight: 500;
margin-bottom: 4px;
}
.toast-message {
font-size: 0.9rem;
opacity: 0.9;
}
.toast-close {
background: none;
border: none;
font-size: 1.2rem;
color: #94a3b8;
cursor: pointer;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.toast-close:hover {
background: #1e293b;
color: #f1f5f9;
}
.toast-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background: var(--ton-primary);
width: 100%;
transform-origin: left;
transition: transform 0.2s;
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.8);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.loading-spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top: 4px solid var(--ton-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="antialiased">
<!-- Loading Screen -->
<div id="loading-screen" class="fixed inset-0 bg-slate-900 flex items-center justify-center z-50">
<div class="text-center">
<div class="animate-spin rounded-full h-16 w-16 border-b-2 border-blue-500 mx-auto mb-4"></div>
<h2 class="text-xl font-semibold text-white">بارگذاری پلتفرم TON...</h2>
<p class="text-gray-400 mt-2">اتصال به mainnet</p>
</div>
</div>
<!-- Main App -->
<div id="root" class="hidden">
<nav class="gradient-border text-white shadow-lg sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<div class="flex items-center space-x-reverse space-x-8">
<a href="#" class="text-xl font-bold flex items-center">
<i class="fas fa-coins mr-2"></i>
TON Platform
</a>
<div class="hidden md:flex space-x-reverse space-x-4">
<a href="#wallet" class="hover:text-gray-200 px-3 py-2 rounded-md">کیف پول</a>
<a href="#swap" class="hover:text-gray-200 px-3 py-2 rounded-md">تبادل</a>
<a href="#mining" class="hover:text-gray-200 px-3 py-2 rounded-md">ماینینگ</a>
<a href="#stats" class="hover:text-gray-200 px-3 py-2 rounded-md">آمار</a>
</div>
</div>
<div class="flex items-center space-x-4 space-x-reverse">
<div class="flex items-center">
<span class="status-online mr-2"></span>
<span class="text-sm">Mainnet</span>
</div>
<div class="hidden sm:flex items-center">
<span class="text-xs text-gray-400">ساخته شده با</span>
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="mx-1 text-blue-400 hover:text-blue-300 underline">anycoder</a>
</div>
<button id="connectWalletBtn" class="bg-white text-blue-600 font-bold py-1 px-4 rounded-lg hover:bg-gray-100 transition">
اتصال کیف پول
</button>
</div>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div id="home" class="px-4 py-6 sm:px-0">
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
پلتفرم جامع TON Blockchain
</h1>
<p class="text-xl text-gray-300 mb-8 max-w-3xl mx-auto">
کیف پول، تبادل، ماینینگ و مدیریت دارایی‌های دیجیتال در شبکه اصلی TON
</p>
<div class="flex justify-center space-x-4 space-x-reverse">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition" onclick="document.getElementById('wallet').scrollIntoView({behavior:'smooth'})">
شروع کار
</button>
<button class="bg-transparent border-2 border-blue-500 text-blue-400 hover:text-white font-bold py-3 px-6 rounded-lg transition" onclick="document.getElementById('stats').scrollIntoView({behavior:'smooth'})">
راهنما
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-8">
<a href="#wallet" class="block">
<div class="bg-slate-800 p-6 rounded-xl shadow-lg card-hover border border-slate-700 hover:border-blue-500 transition">
<div class="text-4xl mb-4">💼</div>
<h3 class="text-lg font-semibold text-white mb-2">کیف پول هوشمند</h3>
<p class="text-gray-400">مدیریت امن دارایی‌های TON</p>
</div>
</a>
<a href="#swap" class="block">
<div class="bg-slate-800 p-6 rounded-xl shadow-lg card-hover border border-slate-700 hover:border-purple-500 transition">
<div class="text-4xl mb-4">🔄</div>
<h3 class="text-lg font-semibold text-white mb-2">تبادل سریع</h3>
<p class="text-gray-400">تبادل توکن‌ها با کمترین کارمزد</p>
</div>
</a>
<a href="#mining" class="block">
<div class="bg-slate-800 p-6 rounded-xl shadow-lg card-hover border border-slate-700 hover:border-green-500 transition">
<div class="text-4xl mb-4">⛏️</div>
<h3 class="text-lg font-semibold text-white mb-2">ماینینگ</h3>
<p class="text-gray-400">استخراج توکن‌های جدید</p>
</div>
</a>
<a href="#stats" class="block">
<div class="bg-slate-800 p-6 rounded-xl shadow-lg card-hover border border-slate-700 hover:border-yellow-500 transition">
<div class="text-4xl mb-4">📊</div>
<h3 class="text-lg font-semibold text-white mb-2">آمار لحظه‌ای</h3>
<p class="text-gray-400">تحلیل و آمار بازار</p>
</div>
</a>
</div>
<div class