موقع حساب عملات بسيط
الياس سفيان الياس
مو دقيق ١٠٠ ب١٠٠ لان ما عندي فلوس حتى احصل api المصارف
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>المحول الشامل الذكي | العملات التقليدية والرقمية</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* ===== CSS SECTION - ENHANCED WITH AI ===== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');
:root {
--primary: #3b82f6;
--primary-dark: #2563eb;
--primary-light: #60a5fa;
--secondary: #06b6d4;
--secondary-dark: #0891b2;
--ai-color: #8b5cf6;
--ai-dark: #7c3aed;
--ai-light: #a78bfa;
--crypto: #f59e0b;
--crypto-dark: #d97706;
--crypto-light: #fbbf24;
--fiat: #10b981;
--fiat-dark: #059669;
--fiat-light: #34d399;
--warning: #ef4444;
--warning-dark: #dc2626;
--dark: #0f172a;
--darker: #020617;
--light: #f8fafc;
--lighter: #ffffff;
--success: #10b981;
--success-dark: #059669;
--glass: rgba(255, 255, 255, 0.08);
--glass-dark: rgba(255, 255, 255, 0.05);
--glass-light: rgba(255, 255, 255, 0.12);
--glass-border: rgba(255, 255, 255, 0.15);
--glass-border-light: rgba(255, 255, 255, 0.25);
--card-bg: rgba(30, 41, 59, 0.7);
--card-bg-light: rgba(30, 41, 59, 0.8);
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #94a3b8;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.2);
--radius: 20px;
--radius-sm: 12px;
--radius-lg: 24px;
--glow: 0 0 20px rgba(59, 130, 246, 0.5);
--glow-ai: 0 0 25px rgba(139, 92, 246, 0.3);
--glow-crypto: 0 0 25px rgba(245, 158, 11, 0.3);
--glow-fiat: 0 0 25px rgba(16, 185, 129, 0.25);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] {
--bg-primary: var(--darker);
--bg-secondary: var(--dark);
--text-primary: #f1f5f9;
--text-secondary: #e2e8f0;
--card-bg: rgba(30, 41, 59, 0.7);
--glass: rgba(255, 255, 255, 0.08);
--glass-border: rgba(255, 255, 255, 0.15);
}
[data-theme="light"] {
--bg-primary: #f8fafc;
--bg-secondary: #f1f5f9;
--text-primary: #1e293b;
--text-secondary: #334155;
--text-muted: #64748b;
--card-bg: rgba(255, 255, 255, 0.92);
--glass: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.4);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 15px 50px rgba(0, 0, 0, 0.12);
--glow: 0 0 25px rgba(59, 130, 246, 0.15);
--glow-ai: 0 0 25px rgba(139, 92, 246, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Cairo", sans-serif;
background: linear-gradient(-45deg, #0f172a, #1e293b, #334155, #475569);
background-size: 400% 400%;
animation: gradientShift 20s ease infinite;
color: var(--text-primary);
min-height: 100vh;
padding: 0;
transition: var(--transition-slow);
position: relative;
overflow-x: hidden;
line-height: 1.6;
}
body::before {
content: '';
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
radial-gradient(circle at 60% 60%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
z-index: -1;
opacity: 0.6;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: var(--glow-ai); }
50% { box-shadow: 0 0 35px rgba(139, 92, 246, 0.5); }
}
@keyframes ai-thinking {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
.container {
max-width: 500px;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 20px;
}
/* ===== شريط التحكم العلوي المحسن ===== */
.top-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
position: relative;
}
.theme-toggle {
display: flex;
gap: 8px;
background: var(--glass);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 25px;
padding: 6px;
transition: var(--transition);
}
.theme-btn {
background: transparent;
border: none;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
color: var(--text-primary);
position: relative;
font-size: 1.2rem;
}
.theme-btn.active {
background: var(--primary);
color: white;
box-shadow: var(--glow);
}
.settings-btn {
background: var(--glass);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
color: var(--text-primary);
}
.settings-btn:hover {
transform: rotate(90deg);
background: var(--primary);
box-shadow: var(--glow);
}
/* ===== الهيدر المحسن ===== */
.app-header {
background: #000;
width: 100%;
padding: 15px 0;
margin-bottom: 25px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.logo h1 {
font-weight: 700;
font-size: 1.4rem;
color: white;
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
}
.header-controls {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 500px;
margin: 0 auto;
padding: 0 20px;
}
.converter-card {
background: var(--card-bg);
backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 2.2rem;
box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-light);
transition: var(--transition);
margin-bottom: 25px;
position: relative;
overflow: hidden;
}
.converter-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--fiat), var(--crypto), var(--ai-color));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.converter-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.03), rgba(245, 158, 11, 0.03), rgba(139, 92, 246, 0.03));
opacity: 0;
transition: var(--transition);
pointer-events: none;
}
.converter-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg),
inset 0 1px 0 var(--glass-light),
var(--glow);
}
.converter-card:hover::after {
opacity: 1;
}
.card-header {
text-align: center;
margin-bottom: 30px;
}
.card-header h2 {
font-weight: 800;
margin-bottom: 10px;
font-size: 1.5rem;
background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-header p {
opacity: 0.9;
font-size: 0.95rem;
color: var(--text-secondary);
font-weight: 500;
}
.input-group {
margin-bottom: 1.8rem;
position: relative;
}
.input-group label {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-secondary);
transition: var(--transition);
}
.input-with-icon {
position: relative;
}
.input-with-icon input {
width: 100%;
padding: 16px 50px 16px 16px;
border-radius: var(--radius-sm);
border: 2px solid transparent;
background: var(--glass-dark);
color: var(--text-primary);
font-size: 16px;
font-weight: 500;
transition: var(--transition);
outline: none;
backdrop-filter: blur(10px);
}
.input-with-icon input::placeholder {
color: var(--text-muted);
font-weight: 400;
}
.input-with-icon input:focus {
border-color: var(--primary);
background: var(--glass-light);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(59, 130, 246, 0.15);
}
.input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: var(--text-muted);
transition: var(--transition);
}
.input-with-icon input:focus + .input-icon {
color: var(--primary);
transform: translateY(-50%) scale(1.1);
}
.currency-selectors {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 25px;
}
.currency-selectors .input-group {
margin-bottom: 0;
}
.currency-select-wrapper {
position: relative;
}
.currency-select {
width: 100%;
padding: 16px;
border-radius: var(--radius-sm);
border: 2px solid transparent;
background: var(--glass-dark);
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
transition: var(--transition);
outline: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
backdrop-filter: blur(10px);
}
.currency-select:hover, .currency-select.active {
border-color: var(--primary);
background: var(--glass-light);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(59, 130, 246, 0.15);
}
.currency-badge {
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 10px;
font-weight: 700;
letter-spacing: 0.5px;
}
.fiat-badge {
background: linear-gradient(135deg, var(--fiat), var(--fiat-dark));
color: white;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.crypto-badge {
background: linear-gradient(135deg, var(--crypto), var(--crypto-dark));
color: white;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.ai-badge {
background: linear-gradient(135deg, var(--ai-color), var(--ai-dark));
color: white;
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.search-currency {
position: absolute;
top: 100%;
right: 0;
left: 0;
background: var(--card-bg-light);
backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 12px;
margin-top: 8px;
z-index: 100;
box-shadow: var(--shadow-lg), var(--glow);
display: none;
}
.search-currency.active {
display: block;
animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-15px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.search-input {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--glass-border);
background: var(--glass-dark);
color: var(--text-primary);
margin-bottom: 12px;
outline: none;
transition: var(--transition);
font-weight: 500;
}
.search-input:focus {
border-color: var(--primary);
background: var(--glass-light);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.currency-options {
max-height: 220px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--primary) var(--glass-dark);
}
.currency-options::-webkit-scrollbar {
width: 6px;
}
.currency-options::-webkit-scrollbar-track {
background: var(--glass-dark);
border-radius: 3px;
}
.currency-options::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 3px;
}
.currency-option {
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.currency-option:last-child {
margin-bottom: 0;
}
.currency-option:hover {
background: var(--glass-light);
transform: translateX(-5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.option-badge {
font-size: 0.7rem;
padding: 3px 7px;
border-radius: 8px;
font-weight: 700;
}
.convert-btn {
background: linear-gradient(135deg, var(--fiat), var(--crypto), var(--ai-color));
border: none;
border-radius: var(--radius-sm);
padding: 18px 24px;
color: white;
font-size: 17px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
width: 100%;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
position: relative;
overflow: hidden;
letter-spacing: 0.5px;
}
.convert-btn::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
}
.convert-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4), var(--glow);
}
.convert-btn:hover::before {
transform: translateX(100%);
transition: transform 0.8s ease;
}
.convert-btn:active {
transform: translateY(-1px);
}
.convert-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.ai-prediction-btn {
background: linear-gradient(135deg, var(--ai-color), var(--ai-dark));
border: none;
border-radius: var(--radius-sm);
padding: 14px 20px;
color: white;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
width: 100%;
margin-top: 12px;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
position: relative;
overflow: hidden;
}
.ai-prediction-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
animation: pulse-glow 2s infinite;
}
.ai-prediction-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.ai-thinking {
animation: ai-thinking 1.5s infinite;
}
/* ===== شريط التحميل المحسن ===== */
.progress-bar {
height: 6px;
background: var(--glass-dark);
border-radius: 3px;
overflow: hidden;
margin: 20px 0;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
border-radius: 3px;
width: 0%;
transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
animation: progressShine 1.5s ease-in-out infinite;
}
@keyframes progressShine {
0% { transform: translateX(-20px); }
100% { transform: translateX(100px); }
}
.result-card {
background: var(--card-bg);
backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 1.8rem;
box-shadow: var(--shadow-lg);
margin-top: 25px;
animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.result-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--fiat), var(--crypto), var(--ai-color));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.result-header h3 {
font-weight: 700;
font-size: 1.15rem;
color: var(--text-secondary);
}
.result-badge {
background: var(--success);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.ai-badge {
background: var(--ai-color);
box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.result-content {
text-align: center;
}
.conversion-result {
margin-bottom: 15px;
}
.amount {
font-size: 2.2rem;
font-weight: 800;
color: var(--crypto);
text-shadow: 0 2px 10px rgba(245, 158, 11, 0.2);
}
.currency {
font-size: 1.3rem;
margin-right: 8px;
font-weight: 700;
color: var(--text-secondary);
}
.conversion-rate {
opacity: 0.9;
font-size: 0.95rem;
color: var(--text-secondary);
font-weight: 500;
line-height: 1.5;
}
.ai-prediction-card {
background: var(--card-bg);
backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 1.8rem;
box-shadow: var(--shadow-lg);
margin-top: 25px;
animation: slideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transition: var(--transition);
position: relative;
overflow: hidden;
display: none;
}
.ai-prediction-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: var(--ai-color);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ai-prediction-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.ai-prediction-header h3 {
font-weight: 700;
font-size: 1.15rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 10px;
}
.ai-prediction-content {
text-align: center;
}
.prediction-result {
margin-bottom: 15px;
}
.prediction-amount {
font-size: 2rem;
font-weight: 800;
color: var(--ai-color);
text-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}
.prediction-currency {
font-size: 1.2rem;
margin-right: 8px;
font-weight: 700;
color: var(--text-secondary);
}
.prediction-details {
opacity: 0.9;
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
line-height: 1.5;
margin-bottom: 15px;
}
.prediction-confidence {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.confidence-bar {
flex: 1;
height: 8px;
background: var(--glass-dark);
border-radius: 4px;
overflow: hidden;
}
.confidence-fill {
height: 100%;
background: linear-gradient(90deg, var(--warning), var(--crypto), var(--success));
border-radius: 4px;
width: 0%;
transition: width 1s ease;
}
.confidence-value {
font-size: 0.85rem;
font-weight: 700;
min-width: 40px;
}
.prediction-timeframe {
display: flex;
gap: 10px;
margin-top: 15px;
}
.timeframe-btn {
flex: 1;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 10px;
text-align: center;
cursor: pointer;
transition: var(--transition);
font-size: 0.85rem;
font-weight: 600;
}
.timeframe-btn.active {
background: var(--ai-color);
color: white;
border-color: var(--ai-color);
}
.timeframe-btn:hover:not(.active) {
background: var(--glass-light);
transform: translateY(-2px);
}
.stats-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 25px;
}
.stat-card {
background: var(--glass);
backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 18px;
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: var(--glow);
}
.stat-value {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 6px;
color: var(--crypto);
}
.stat-label {
font-size: 0.85rem;
opacity: 0.8;
font-weight: 600;
color: var(--text-secondary);
}
.quick-actions {
display: flex;
gap: 12px;
margin-top: 20px;
}
.quick-action {
flex: 1;
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 12px;
text-align: center;
cursor: pointer;
transition: var(--transition);
font-size: 0.9rem;
font-weight: 600;
position: relative;
overflow: hidden;
}
.quick-action::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(245, 158, 11, 0.1));
opacity: 0;
transition: var(--transition);
}
.quick-action:hover {
background: var(--glass-light);
transform: translateY(-3px);
box-shadow: var(--glow);
}
.quick-action:hover::before {
opacity: 1;
}
.ai-action {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
border-color: var(--ai-color);
}
.ai-action:hover {
box-shadow: var(--glow-ai);
}
/* ===== شريط التبويبات المحسن ===== */
.tabs-container {
display: flex;
background: var(--glass-dark);
border-radius: var(--radius);
padding: 8px;
margin-bottom: 25px;
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
}
.tabs-container::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
opacity: 0;
transition: var(--transition);
}
.tabs-container:hover::before {
opacity: 1;
}
.tab {
flex: 1;
text-align: center;
padding: 14px 12px;
cursor: pointer;
border-radius: 12px;
transition: var(--transition);
font-weight: 700;
font-size: 0.9rem;
color: var(--text-secondary);
position: relative;
overflow: hidden;
z-index: 1;
}
.tab::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
opacity: 0;
transition: var(--transition);
}
.tab.active {
background: var(--primary);
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
transform: translateY(-2px);
}
.tab.active::before {
opacity: 1;
}
.tab span {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.crypto-rates-card, .local-rates-card, .sources-card, .news-card, .ai-insights-card {
background: var(--card-bg);
backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: 1.8rem;
box-shadow: var(--shadow-lg);
margin-top: 25px;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.crypto-rates-card::before {
background: var(--crypto);
}
.local-rates-card::before {
background: var(--fiat);
}
.sources-card::before {
background: var(--secondary);
}
.news-card::before {
background: var(--primary);
}
.ai-insights-card::before {
background: var(--ai-color);
}
.crypto-rates-card::before, .local-rates-card::before,
.sources-card::before, .news-card::before, .ai-insights-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.crypto-rates-card:hover, .local-rates-card:hover,
.sources-card:hover, .news-card:hover, .ai-insights-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg), var(--glow);
}
.ai-insights-card:hover {
box-shadow: var(--shadow-lg), var(--glow-ai);
}
.crypto-rates-header, .local-rates-header,
.sources-header, .news-header, .ai-insights-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.crypto-rates-header h3, .local-rates-header h3,
.sources-header h3, .news-header h3, .ai-insights-header h3 {
font-weight: 700;
font-size: 1.15rem;
display: flex;
align-items: center;
gap: 12px;
color: var(--text-secondary);
}
.crypto-rates-icon {
color: var(--crypto);
}
.local-rates-icon {
color: var(--fiat);
}
.sources-icon {
color: var(--secondary);
}
.news-icon {
color: var(--primary);
}
.ai-insights-icon {
color: var(--ai-color);
}
.crypto-rates-icon, .local-rates-icon,
.sources-icon, .news-icon, .ai-insights-icon {
font-size: 1.4rem;
}
.crypto-rates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
gap: 12px;
}
.crypto-rate-item {
background: var(--glass);
border-radius: var(--radius-sm);
padding: 16px;
text-align: center;
transition: var(--transition);
cursor: pointer;
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.crypto-rate-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(59, 130, 246, 0.05));
opacity: 0;
transition: var(--transition);
}
.crypto-rate-item:hover {
transform: translateY(-5px);
background: var(--glass-light);
border-color: var(--crypto);
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.2);
}
.crypto-rate-item:hover::before {
opacity: 1;
}
.crypto-rate-icon {
font-size: 1.6rem;
margin-bottom: 8px;
transition: var(--transition);
}
.crypto-rate-item:hover .crypto-rate-icon {
transform: scale(1.1) rotate(5deg);
}
.crypto-rate-name {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 4px;
}
.crypto-rate-symbol {
font-size: 0.75rem;
opacity: 0.7;
margin-bottom: 6px;
font-weight: 600;
}
.crypto-rate-value {
font-size: 0.85rem;
opacity: 0.9;
font-weight: 700;
color: var(--crypto);
}
.local-rates-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.local-rates-table th {
text-align: right;
padding: 14px;
background: var(--glass);
border-bottom: 2px solid var(--glass-border);
font-weight: 700;
color: var(--text-secondary);
}
.local-rates-table td {
padding: 14px;
border-bottom: 1px solid var(--glass-border);
transition: var(--transition);
}
.local-rates-table tr:last-child td {
border-bottom: none;
}
.local-rates-table tr:hover td {
background: var(--glass-light);
}
.rate-value {
font-weight: 700;
color: var(--fiat);
}
.country-selector {
margin-bottom: 18px;
}
.country-select {
width: 100%;
padding: 14px;
border-radius: var(--radius-sm);
border: 2px solid transparent;
background: var(--glass-dark);
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
transition: var(--transition);
outline: none;
cursor: pointer;
backdrop-filter: blur(10px);
}
.country-select:focus {
border-color: var(--primary);
background: var(--glass-light);
box-shadow: 0 5px 20px rgba(59, 130, 246, 0.15);
}
.ai-insights-content {
margin-top: 18px;
}
.ai-insight-item {
background: var(--glass);
border-radius: var(--radius-sm);
padding: 18px;
margin-bottom: 15px;
transition: var(--transition);
border-left: 4px solid var(--ai-color);
position: relative;
overflow: hidden;
}
.ai-insight-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(59, 130, 246, 0.05));
opacity: 0;
transition: var(--transition);
}
.ai-insight-item:hover {
transform: translateX(-5px);
background: var(--glass-light);
}
.ai-insight-item:hover::before {
opacity: 1;
}
.ai-insight-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
.ai-insight-title {
font-weight: 700;
font-size: 1rem;
color: var(--text-secondary);
}
.ai-insight-confidence {
font-size: 0.8rem;
padding: 4px 8px;
border-radius: 12px;
background: var(--ai-color);
color: white;
font-weight: 700;
}
.ai-insight-content {
font-size: 0.9rem;
opacity: 0.9;
line-height: 1.6;
position: relative;
z-index: 1;
}
.ai-insight-meta {
display: flex;
justify-content: space-between;
margin-top: 12px;
font-size: 0.8rem;
opacity: 0.7;
position: relative;
z-index: 1;
}
.sources-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin: 18px 0;
}
.source-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: var(--glass);
border-radius: var(--radius-sm);
font-size: 0.92rem;
transition: var(--transition);
border: 1px solid transparent;
position: relative;
overflow: hidden;
}
.source-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background: var(--success);
transition: var(--transition);
}
.source-item:hover {
transform: translateY(-3px);
border-color: var(--secondary);
box-shadow: 0 4px 15px rgba(6, 182, 212, 0.2);
}
.source-item.active::before {
background: var(--success);
}
.source-item.inactive::before {
background: var(--warning);
}
.source-item i {
color: var(--success);
font-size: 1.1rem;
}
.source-item.inactive i {
color: var(--warning);
}
.source-item small {
margin-right: auto;
opacity: 0.7;
font-weight: 600;
}
.performance-stats {
background: var(--glass);
border-radius: var(--radius-sm);
padding: 18px;
font-size: 0.88rem;
opacity: 0.9;
margin-bottom: 18px;
border: 1px solid var(--glass-border);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.performance-stats div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
}
.performance-stats strong {
color: var(--text-secondary);
font-weight: 700;
}
.settings-section {
background: var(--glass);
border-radius: var(--radius-sm);
padding: 18px;
margin-top: 18px;
border: 1px solid var(--glass-border);
}
.setting-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--glass-border);
}
.setting-item:last-child {
margin-bottom: 0;
border-bottom: none;
}
.setting-label {
font-size: 0.92rem;
font-weight: 600;
color: var(--text-secondary);
}
.toggle-switch {
position: relative;
display: inline-block;
width: 52px;
height: 26px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--glass-dark);
transition: var(--transition);
border-radius: 26px;
border: 1px solid var(--glass-border);
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 4px;
bottom: 3px;
background-color: white;
transition: var(--transition);
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
input:checked + .toggle-slider {
background-color: var(--success);
border-color: var(--success);
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
}
.ai-toggle input:checked + .toggle-slider {
background-color: var(--ai-color);
border-color: var(--ai-color);
}
.news-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.news-item {
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 18px;
transition: var(--transition);
cursor: pointer;
position: relative;
overflow: hidden;
}
.news-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(6, 182, 212, 0.05));
opacity: 0;
transition: var(--transition);
}
.news-item:hover {
background: var(--glass-light);
transform: translateX(-5px);
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15);
}
.news-item:hover::before {
opacity: 1;
}
.news-title {
font-weight: 700;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
color: var(--text-secondary);
}
.news-badge {
background: var(--primary);
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 800;
}
.news-content {
font-size: 0.92rem;
opacity: 0.9;
margin-bottom: 10px;
line-height: 1.6;
color: var(--text-primary);
}
.news-meta {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
opacity: 0.7;
font-weight: 600;
}
.news-date {
display: flex;
align-items: center;
gap: 6px;
}
footer {
text-align: center;
margin-top: 35px;
font-size: 0.85rem;
opacity: 0.7;
padding: 20px 0;
color: var(--text-secondary);
font-weight: 600;
}
.favorites-section {
background: var(--glass);
border-radius: var(--radius-sm);
padding: 18px;
margin-top: 18px;
border: 1px solid var(--glass-border);
}
.favorites-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.favorite-item {
background: var(--card-bg);
border: 1px solid var(--glass-border);
border-radius: 10px;
padding: 10px 14px;
font-size: 0.82rem;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
position: relative;
overflow: hidden;
}
.favorite-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(59, 130, 246, 0.1));
opacity: 0;
transition: var(--transition);
}
.favorite-item:hover {
background: var(--glass-light);
transform: translateY(-3px);
border-color: var(--crypto);
}
.favorite-item:hover::before {
opacity: 1;
}
.favorite-item.active {
border-color: var(--crypto);
background: rgba(245, 158, 11, 0.1);
}
.remove-favorite {
color: var(--warning);
cursor: pointer;
margin-right: 5px;
transition: var(--transition);
position: relative;
z-index: 1;
}
.remove-favorite:hover {
color: var(--warning-dark);
transform: scale(1.1);
}
.history-section {
background: var(--glass);
border-radius: var(--radius-sm);
padding: 18px;
margin-top: 18px;
border: 1px solid var(--glass-border);
}
.history-list {
max-height: 160px;
overflow-y: auto;
margin-top: 12px;
scrollbar-width: thin;
scrollbar-color: var(--primary) var(--glass-dark);
}
.history-list::-webkit-scrollbar {
width: 6px;
}
.history-list::-webkit-scrollbar-track {
background: var(--glass-dark);
border-radius: 3px;
}
.history-list::-webkit-scrollbar-thumb {
background: var(--primary);
border-radius: 3px;
}
.history-item {
padding: 10px 12px;
border-bottom: 1px solid var(--glass-border);
font-size: 0.82rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--transition);
}
.history-item:last-child {
border-bottom: none;
}
.history-item:hover {
background: var(--glass-light);
border-radius: 8px;
}
.history-amount {
font-weight: 700;
color: var(--crypto);
}
.quick-convert-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 18px;
}
.quick-convert-btn {
background: var(--glass);
border: 1px solid var(--glass-border);
border-radius: 10px;
padding: 10px;
text-align: center;
cursor: pointer;
transition: var(--transition);
font-size: 0.82rem;
font-weight: 600;
position: relative;
overflow: hidden;
}
.quick-convert-btn::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(245, 158, 11, 0.1));
opacity: 0;
transition: var(--transition);
}
.quick-convert-btn:hover {
background: var(--glass-light);
transform: translateY(-3px);
border-color: var(--primary);
}
.quick-convert-btn:hover::before {
opacity: 1;
}
.quick-convert-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.ai-quick-convert-btn {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
border-color: var(--ai-color);
}
.ai-quick-convert-btn:hover {
border-color: var(--ai-dark);
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}
.loading-spinner {
display: inline-block;
width: 22px;
height: 22px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: var(--primary);
animation: spin 1s ease-in-out infinite;
}
.ai-loading-spinner {
border-top-color: var(--ai-color);
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.offline-indicator {
position: fixed;
top: 15px;
right: 15px;
background: var(--warning);
color: white;
padding: 8px 16px;
border-radius: 25px;
font-size: 0.82rem;
z-index: 1000;
display: none;
font-weight: 700;
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
animation: pulse-glow 2s ease-in-out infinite;
}
.notification {
position: fixed;
top: 25px;
left: 25px;
right: 25px;
background: var(--card-bg-light);
backdrop-filter: blur(25px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow-lg), var(--glow);
z-index: 1100;
transform: translateY(-120px);
opacity: 0;
transition: var(--transition-slow);
}
.notification.show {
transform: translateY(0);
opacity: 1;
}
.notification.success {
border-right: 4px solid var(--success);
}
.notification.error {
border-right: 4px solid var(--warning);
}
.notification.warning {
border-right: 4px solid var(--crypto);
}
.notification.ai {
border-right: 4px solid var(--ai-color);
}
.notification-content {
display: flex;
align-items: center;
gap: 12px;
}
.notification-icon {
font-size: 22px;
}
.notification.success .notification-icon {
color: var(--success);
}
.notification.error .notification-icon {
color: var(--warning);
}
.notification.warning .notification-icon {
color: var(--crypto);
}
.notification.ai .notification-icon {
color: var(--ai-color);
}
.notification-message {
font-weight: 600;
font-size: 0.95rem;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake {
animation: shake 0.5s ease-in-out;
}
/* ===== صفحة الإعدادات المحسنة ===== */
.settings-page {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--bg-primary);
z-index: 2000;
overflow-y: auto;
padding: 20px;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-page.active {
transform: translateX(0);
}
.settings-header {
background: #000;
width: 100%;
padding: 15px 0;
margin-bottom: 25px;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.settings-header-content {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 500px;
margin: 0 auto;
padding: 0 20px;
}
.settings-title {
font-weight: 700;
font-size: 1.4rem;
color: white;
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
}
.close-settings {
background: transparent;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
transition: var(--transition);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.close-settings:hover {
background: rgba(255, 255, 255, 0.1);
transform: rotate(90deg);
}
.contact-info {
background: var(--glass);
border-radius: var(--radius);
padding: 25px;
margin-bottom: 25px;
text-align: center;
border: 1px solid var(--glass-border);
}
.contact-info h3 {
color: var(--text-secondary);
margin-bottom: 15px;
font-size: 1.2rem;
}
.contact-email {
background: var(--primary);
color: white;
padding: 12px 20px;
border-radius: var(--radius-sm);
font-weight: 700;
display: inline-block;
transition: var(--transition);
text-decoration: none;
}
.contact-email:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--glow);
}
/* تحسينات للجوال */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
.converter-card {
padding: 1.8rem;
border-radius: 18px;
}
.currency-selectors {
grid-template-columns: 1fr;
gap: 18px;
}
.app-header {
padding: 12px 0;
}
.logo h1 {
font-size: 1.2rem;
}
.stats-container {
grid-template-columns: 1fr;
}
.quick-actions {
flex-direction: column;
}
.crypto-rates-grid {
grid-template-columns: repeat(2, 1fr);
}
.sources-list {
grid-template-columns: 1fr;
}
.quick-convert-buttons {
grid-template-columns: repeat(2, 1fr);
}
.performance-stats {
grid-template-columns: 1fr;
}
.notification {
left: 15px;
right: 15px;
top: 15px;
}
.top-controls {
margin-bottom: 25px;
}
.prediction-timeframe {
flex-direction: column;
}
.tabs-container {
padding: 6px;
}
.tab {
padding: 12px 8px;
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
body {
padding: 0;
}
.container {
padding: 0 15px;
}
.converter-card {
padding: 1.5rem;
}
.crypto-rates-grid {
grid-template-columns: 1fr;
}
.quick-convert-buttons {
grid-template-columns: 1fr;
}
.logo h1 {
font-size: 1.1rem;
}
.tabs-container {
flex-wrap: wrap;
}
.tab {
flex: 1 0 45%;
margin-bottom: 5px;
}
}
/* تحسينات للأجهزة الكبيرة */
@media (min-width: 1200px) {
.container {
max-width: 550px;
}
}
/* تحسينات خاصة بالطباعة */
@media print {
.top-controls,
.tabs-container,
.quick-actions,
.favorites-section,
.history-section,
.offline-indicator,
.notification {
display: none !important;
}
body {
background: white !important;
color: black !important;
}
.converter-card,
.result-card {
box-shadow: none !important;
border: 1px solid #ddd !important;
}
}
</style>
</head>
<body data-theme="dark">
<!-- ===== HTML SECTION - ENHANCED WITH AI ===== -->
<div id="particles-js"></div>
<div class="offline-indicator" id="offlineIndicator">
<i class="fas fa-wifi"></i> غير متصل
</div>
<div class="notification" id="notification">
<div class="notification-content">
<span class="notification-icon"></span>
<span class="notification-message"></span>
</div>
</div>
<!-- ===== صفحة الإعدادات المحسنة ===== -->
<div class="settings-page" id="settingsPage">
<div class="settings-header">
<div class="settings-header-content">
<div class="settings-title">الإعدادات</div>
<button class="close-settings" id="closeSettings">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="container">
<div class="contact-info">
<h3><i class="fas fa-envelope"></i> بريد التواصل</h3>
<a href="mailto:alias.soufian@gmail.com" class="contact-email">
alias.soufian@gmail.com
</a>
</div>
<div class="sources-card">
<div class="sources-header">
<h3><i class="fas fa-cog sources-icon"></i> المصادر والإعدادات</h3>
<span class="result-badge">متقدم</span>
</div>
<div class="performance-stats" id="performanceStats">
<div><strong>معدل النجاح:</strong> <span id="successRate">0%</span></div>
<div><strong>الطلبات الناجحة:</strong> <span id="successfulRequests">0</span></div>
<div><strong>الطلبات الفاشلة:</strong> <span id="failedRequests">0</span></div>
<div><strong>آخر تحديث:</strong> <span id="statsLastUpdate">--:--</span></div>
</div>
<div class="sources-list" id="sourcesList"></div>
<div class="settings-section">
<h4 style="margin-bottom: 18px; color: var(--text-secondary);">
<i class="fas fa-sliders-h"></i> إعدادات التحويل
</h4>
<div class="setting-item">
<span class="setting-label">تفعيل التحديث التلقائي</span>
<label class="toggle-switch">
<input type="checkbox" id="autoUpdateToggle" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="setting-item">
<span class="setting-label">تفعيل الذكاء الاصطناعي</span>
<label class="toggle-switch ai-toggle">
<input type="checkbox" id="aiToggle" checked>
<span class="toggle-slider"></span>
</label>
</div>
<div class="setting-item">
<span class="setting-label">تقليل استخدام البيانات</span>
<label class="toggle-switch">
<input type="checkbox" id="dataSavingToggle">
<span class="toggle-slider"></span>
</label>
</div>
<div class="setting-item">
<span class="setting-label">حفظ سجل التحويلات</span>
<label class="toggle-switch">
<input type="checkbox" id="saveHistoryToggle" checked>
<span class="toggle-slider"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- ===== الواجهة الرئيسية ===== -->
<header class="app-header">
<div class="header-controls">
<div class="logo">
<h1>المحول الشامل</h1>
</div>
<div class="top-controls">
<div class="theme-toggle">
<button class="theme-btn active" id="themeToggle" title="تبديل الوضع">
<i class="fas fa-moon"></i>
</button>
</div>
<button class="settings-btn" id="settingsBtn" title="الإعدادات">
<i class="fas fa-cog"></i>
</button>
</div>
</div>
</header>
<div class="container">
<div class="tabs-container">
<div class="tab active" data-tab="converter">
<span><i class="fas fa-exchange-alt"></i> المحول</span>
</div>
<div class="tab" data-tab="crypto">
<span><i class="fas fa-coins"></i> الرقمية</span>
</div>
<div class="tab" data-tab="local">
<span><i class="fas fa-map-marker-alt"></i> المحلية</span>
</div>
<div class="tab" data-tab="news">
<span><i class="fas fa-newspaper"></i> الأخبار</span>
</div>
<div class="tab" data-tab="ai">
<span><i class="fas fa-robot"></i> الذكاء</span>
</div>
</div>
<!-- تبويب المحول -->
<div class="tab-content active" id="converter-tab">
<div class="converter-card">
<div class="card-header">
<h2>تحويل العملات الذكي</h2>
<p>تحويل سريع ودقيق مع تنبؤات الذكاء الاصطناعي</p>
</div>
<div class="input-group">
<label><i class="fas fa-money-bill-wave"></i> المبلغ المطلوب تحويله</label>
<div class="input-with-icon">
<input type="number" id="amount" placeholder="0.00" min="0" step="0.01">
<span class="input-icon">💵</span>
</div>
</div>
<div class="currency-selectors">
<div class="input-group">
<label><i class="fas fa-arrow-down"></i> من عملة</label>
<div class="currency-select-wrapper">
<div class="currency-select" id="fromCurrencySelect">
<span>الدولار الأمريكي (USD)</span>
<span class="currency-badge fiat-badge">تقليدية</span>
</div>
<div class="search-currency" id="fromSearch">
<input type="text" class="search-input" placeholder="ابحث عن عملة...">
<div class="currency-options" id="fromOptions"></div>
</div>
</div>
</div>
<div class="input-group">
<label><i class="fas fa-arrow-up"></i> إلى عملة</label>
<div class="currency-select-wrapper">
<div class="currency-select" id="toCurrencySelect">
<span>الدينار العراقي (IQD)</span>
<span class="currency-badge fiat-badge">تقليدية</span>
</div>
<div class="search-currency" id="toSearch">
<input type="text" class="search-input" placeholder="ابحث عن عملة...">
<div class="currency-options" id="toOptions"></div>
</div>
</div>
</div>
</div>
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<button class="convert-btn" id="convertBtn">
<i class="fas fa-sync-alt"></i> تحويل العملة
</button>
<button class="ai-prediction-btn" id="aiPredictionBtn">
<i class="fas fa-robot"></i> تنبؤ الذكاء الاصطناعي
</button>
<div class="quick-actions">
<div class="quick-action" id="reverseAction">
<i class="fas fa-retweet"></i> عكس العملات
</div>
<div class="quick-action" id="favoriteAction">
<i class="fas fa-star"></i> إضافة للمفضلة
</div>
<div class="quick-action ai-action" id="aiInsightAction">
<i class="fas fa-brain"></i> رؤى الذكاء
</div>
<div class="quick-action" id="clearAction">
<i class="fas fa-broom"></i> مسح الكل
</div>
</div>
<div class="favorites-section" id="favoritesSection" style="display: none;">
<h4><i class="fas fa-star" style="color: var(--crypto);"></i> العملات المفضلة</h4>
<div class="favorites-list" id="favoritesList"></div>
</div>
<div class="stats-container">
<div class="stat-card">
<div class="stat-value" id="marketRate">0.00</div>
<div class="stat-label">سعر السوق الحالي</div>
</div>
<div class="stat-card">
<div class="stat-value" id="lastUpdate">--:--</div>
<div class="stat-label">آخر تحديث</div>
</div>
</div>
</div>
<div class="result-card" id="resultCard" style="display: none;">
<div class="result-header">
<h3>نتيجة التحويل</h3>
<span class="result-badge" id="resultBadge">محدث</span>
</div>
<div class="result-content">
<div class="conversion-result">
<span class="amount" id="convertedAmount">0.00</span>
<span class="currency" id="convertedCurrency">IQD</span>
</div>
<div class="conversion-rate" id="conversionRate">
1 USD = 0.00 IQD
</div>
</div>
</div>
<div class="ai-prediction-card" id="aiPredictionCard">
<div class="ai-prediction-header">
<h3><i class="fas fa-robot"></i> تنبؤ الذكاء الاصطناعي</h3>
<span class="result-badge ai-badge">AI</span>
</div>
<div class="ai-prediction-content">
<div class="prediction-result">
<span class="prediction-amount" id="predictedAmount">0.00</span>
<span class="prediction-currency" id="predictedCurrency">IQD</span>
</div>
<div class="prediction-details" id="predictionDetails">
تنبؤ بسعر الصرف المستقبلي بناءً على تحليل الذكاء الاصطناعي
</div>
<div class="prediction-confidence">
<span>ثقة التنبؤ:</span>
<div class="confidence-bar">
<div class="confidence-fill" id="confidenceFill"></div>
</div>
<span class="confidence-value" id="confidenceValue">0%</span>
</div>
<div class="prediction-timeframe">
<div class="timeframe-btn active" data-timeframe="1d">يوم</div>
<div class="timeframe-btn" data-timeframe="1w">أسبوع</div>
<div class="timeframe-btn" data-timeframe="1m">شهر</div>
<div class="timeframe-btn" data-timeframe="3m">3 أشهر</div>
</div>
</div>
</div>
<div class="history-section" id="historySection" style="display: none;">
<h4><i class="fas fa-history"></i> آخر التحويلات</h4>
<div class="history-list" id="historyList"></div>
</div>
</div>
<!-- تبويب العملات الرقمية -->
<div class="tab-content" id="crypto-tab">
<div class="crypto-rates-card">
<div class="crypto-rates-header">
<h3><i class="fas fa-coins crypto-rates-icon"></i> أسعار العملات الرقمية</h3>
<span class="result-badge">مباشر</span>
</div>
<div class="crypto-rates-grid" id="cryptoRatesGrid"></div>
</div>
</div>
<!-- تبويب الأسعار المحلية -->
<div class="tab-content" id="local-tab">
<div class="local-rates-card">
<div class="local-rates-header">
<h3><i class="fas fa-map-marker-alt local-rates-icon"></i> الأسعار المحلية</h3>
<span class="result-badge" id="localRatesUpdate">تحديث: اليوم</span>
</div>
<div class="country-selector">
<select class="country-select" id="countrySelect">
<option value="iraq">العراق - الدينار العراقي</option>
<option value="saudi">السعودية - الريال السعودي</option>
<option value="uae">الإمارات - الدرهم الإماراتي</option>
<option value="egypt">مصر - الجنيه المصري</option>
<option value="jordan">الأردن - الدينار الأردني</option>
</select>
</div>
<table class="local-rates-table">
<thead>
<tr>
<th>المدينة/المنطقة</th>
<th>سعر 100 دولار</th>
<th>سعر 1 دولار</th>
</tr>
</thead>
<tbody id="localRatesBody"></tbody>
</table>
</div>
</div>
<!-- تبويب الأخبار -->
<div class="tab-content" id="news-tab">
<div class="news-card">
<div class="news-header">
<h3><i class="fas fa-newspaper news-icon"></i> آخر أخبار العملات</h3>
<button class="theme-btn" id="refreshNews">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<div class="news-list" id="newsList"></div>
</div>
</div>
<!-- تبويب الذكاء الاصطناعي -->
<div class="tab-content" id="ai-tab">
<div class="ai-insights-card">
<div class="ai-insights-header">
<h3><i class="fas fa-robot ai-insights-icon"></i> رؤى الذكاء الاصطناعي</h3>
<span class="result-badge ai-badge">محدث</span>
</div>
<div class="ai-insights-content" id="aiInsightsContent">
<!-- سيتم ملؤها ديناميكياً -->
</div>
</div>
<div class="crypto-rates-card">
<div class="crypto-rates-header">
<h3><i class="fas fa-chart-line crypto-rates-icon"></i> تنبؤات العملات الرقمية</h3>
<button class="theme-btn" id="refreshAiPredictions">
<i class="fas fa-sync-alt"></i>
</button>
</div>
<div class="crypto-rates-grid" id="aiCryptoPredictions"></div>
</div>
</div>
<footer>
© 2025 | المحول الشامل - جميع الحقوق محفوظة
<div style="margin-top: 8px; font-size: 0.8rem; opacity: 0.6;">
مدعوم بالذكاء الاصطناعي - تم التطوير بأحدث تقنيات الويب
</div>
</footer>
</div>
<!-- ===== JAVASCRIPT SECTION - ENHANCED WITH AI ===== -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// API Key للذكاء الاصطناعي
const AI_API_KEY = "AIzaSyAveQgII51g-BYRx7zwPDQI-h8gPmj1obQ";
// تهيئة نظام الجسيمات المتحركة المحسن
document.addEventListener('DOMContentLoaded', function() {
if (typeof particlesJS !== 'undefined') {
particlesJS('particles-js', {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 1000
}
},
color: {
value: ["#3b82f6", "#06b6d4", "#f59e0b", "#8b5cf6"]
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
}
},
opacity: {
value: 0.3,
random: true,
anim: {
enable: true,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 2.5,
random: true,
anim: {
enable: true,
speed: 2,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 120,
color: "#ffffff",
opacity: 0.1,
width: 1
},
move: {
enable: true,
speed: 1.2,
direction: "none",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "grab"
},
onclick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 0.3
}
},
push: {
particles_nb: 4
}
}
},
retina_detect: true
});
}
});
// العناصر DOM المحسنة مع الذكاء الاصطناعي
const elements = {
// العناصر الأساسية
fromCurrencySelect: document.getElementById("fromCurrencySelect"),
toCurrencySelect: document.getElementById("toCurrencySelect"),
amountInput: document.getElementById("amount"),
convertBtn: document.getElementById("convertBtn"),
resultCard: document.getElementById("resultCard"),
convertedAmount: document.getElementById("convertedAmount"),
convertedCurrency: document.getElementById("convertedCurrency"),
conversionRate: document.getElementById("conversionRate"),
resultBadge: document.getElementById("resultBadge"),
progressFill: document.getElementById("progressFill"),
marketRate: document.getElementById("marketRate"),
notification: document.getElementById("notification"),
lastUpdate: document.getElementById("lastUpdate"),
// الذكاء الاصطناعي
aiPredictionBtn: document.getElementById("aiPredictionBtn"),
aiPredictionCard: document.getElementById("aiPredictionCard"),
predictedAmount: document.getElementById("predictedAmount"),
predictedCurrency: document.getElementById("predictedCurrency"),
predictionDetails: document.getElementById("predictionDetails"),
confidenceFill: document.getElementById("confidenceFill"),
confidenceValue: document.getElementById("confidenceValue"),
aiInsightsContent: document.getElementById("aiInsightsContent"),
aiCryptoPredictions: document.getElementById("aiCryptoPredictions"),
refreshAiPredictions: document.getElementById("refreshAiPredictions"),
aiInsightAction: document.getElementById("aiInsightAction"),
aiToggle: document.getElementById("aiToggle"),
// البحث والعملات
fromSearch: document.getElementById("fromSearch"),
toSearch: document.getElementById("toSearch"),
fromOptions: document.getElementById("fromOptions"),
toOptions: document.getElementById("toOptions"),
// التبويبات والمحتوى
tabs: document.querySelectorAll('.tab'),
tabContents: document.querySelectorAll('.tab-content'),
settingsBtn: document.getElementById("settingsBtn"),
settingsPage: document.getElementById("settingsPage"),
closeSettings: document.getElementById("closeSettings"),
themeToggle: document.getElementById("themeToggle"),
// الأخبار
newsList: document.getElementById("newsList"),
refreshNews: document.getElementById("refreshNews"),
// الإجراءات
reverseAction: document.getElementById("reverseAction"),
favoriteAction: document.getElementById("favoriteAction"),
clearAction: document.getElementById("clearAction"),
// العملات الرقمية
cryptoRatesGrid: document.getElementById("cryptoRatesGrid"),
// المصادر والإعدادات
sourcesList: document.getElementById("sourcesList"),
successRate: document.getElementById("successRate"),
successfulRequests: document.getElementById("successfulRequests"),
failedRequests: document.getElementById("failedRequests"),
statsLastUpdate: document.getElementById("statsLastUpdate"),
autoUpdateToggle: document.getElementById("autoUpdateToggle"),
dataSavingToggle: document.getElementById("dataSavingToggle"),
saveHistoryToggle: document.getElementById("saveHistoryToggle"),
// المفضلة والتاريخ
favoritesSection: document.getElementById("favoritesSection"),
favoritesList: document.getElementById("favoritesList"),
historySection: document.getElementById("historySection"),
historyList: document.getElementById("historyList"),
// الأسعار المحلية
localRatesBody: document.getElementById("localRatesBody"),
countrySelect: document.getElementById("countrySelect"),
localRatesUpdate: document.getElementById("localRatesUpdate"),
// مؤشر الاتصال
offlineIndicator: document.getElementById("offlineIndicator"),
// أزرار الوقت للتنبؤات
timeframeButtons: document.querySelectorAll('.timeframe-btn')
};
// المتغيرات العامة المحسنة مع الذكاء الاصطناعي
let currentFromCurrency = "USD";
let currentToCurrency = "IQD";
let favorites = JSON.parse(localStorage.getItem('currencyFavorites')) || [];
let conversionHistory = JSON.parse(localStorage.getItem('conversionHistory')) || [];
let currentTab = "converter";
let isOnline = navigator.onLine;
let currentTimeframe = "1d";
let aiInsights = [];
let currentCountry = "iraq";
let isDarkMode = true;
// نظام إدارة الذكاء الاصطناعي المحسن
const AIManager = {
isEnabled: true,
async getAIPrediction(fromCurrency, toCurrency, amount, timeframe = "1d") {
if (!this.isEnabled) {
throw new Error("الذكاء الاصطناعي غير مفعل");
}
try {
// محاكاة اتصال بالذكاء الاصطناعي (في الواقع سيكون اتصالاً حقيقياً)
const prediction = await this.simulateAIPrediction(fromCurrency, toCurrency, amount, timeframe);
return prediction;
} catch (error) {
console.error('❌ خطأ في الذكاء الاصطناعي:', error);
throw new Error("تعذر الحصول على تنبؤات الذكاء الاصطناعي");
}
},
async simulateAIPrediction(fromCurrency, toCurrency, amount, timeframe) {
// محاكاة تأخير الشبكة
await new Promise(resolve => setTimeout(resolve, 1500 + Math.random() * 1000));
const baseRate = await ExchangeRateManager.getExchangeRate(fromCurrency, toCurrency);
let predictedRate = baseRate.rate;
let confidence = 0;
let trend = "مستقر";
// محاكاة تحليل الذكاء الاصطناعي بناءً على العملة والفترة
if (timeframe === "1d") {
// تغيير طفيف لليوم الواحد
const change = (Math.random() * 0.04) - 0.02; // ±2%
predictedRate = baseRate.rate * (1 + change);
confidence = 75 + Math.random() * 20; // 75-95%
trend = change > 0.01 ? "صاعد" : change < -0.01 ? "هابط" : "مستقر";
} else if (timeframe === "1w") {
// تغيير أكبر لأسبوع
const change = (Math.random() * 0.08) - 0.04; // ±4%
predictedRate = baseRate.rate * (1 + change);
confidence = 65 + Math.random() * 25; // 65-90%
trend = change > 0.02 ? "صاعد" : change < -0.02 ? "هابط" : "مستقر";
} else if (timeframe === "1m") {
// تغيير أكبر لشهر
const change = (Math.random() * 0.15) - 0.075; // ±7.5%
predictedRate = baseRate.rate * (1 + change);
confidence = 55 + Math.random() * 30; // 55-85%
trend = change > 0.04 ? "صاعد" : change < -0.04 ? "هابط" : "مستقر";
} else if (timeframe === "3m") {
// تغيير أكبر لـ 3 أشهر
const change = (Math.random() * 0.25) - 0.125; // ±12.5%
predictedRate = baseRate.rate * (1 + change);
confidence = 45 + Math.random() * 35; // 45-80%
trend = change > 0.06 ? "صاعد" : change < -0.06 ? "هابط" : "مستقر";
}
const predictedValue = amount * predictedRate;
const changePercent = ((predictedRate - baseRate.rate) / baseRate.rate) * 100;
return {
success: true,
fromCurrency,
toCurrency,
amount,
predictedValue: ExchangeRateManager.isCrypto(toCurrency) ?
predictedValue.toFixed(8) : predictedValue.toFixed(2),
currentRate: baseRate.rate,
predictedRate,
changePercent,
confidence: Math.round(confidence),
trend,
timeframe,
timestamp: new Date().toISOString()
};
},
async generateAIInsights() {
if (!this.isEnabled) return [];
const insights = [
{
title: "توقعات البيتكوين",
content: "يتوقع الذكاء الاصطناعي استقراراً في سعر البيتكوين حول 40,000 دولار مع احتمالية صعود إلى 42,000 دولار في الأسبوع القادم بناءً على تحليل أنماط التداول وحجم التداول.",
confidence: 78,
category: "عملات رقمية",
impact: "مرتفع",
timestamp: new Date().toISOString()
},
{
title: "الدينار العراقي",
content: "من المتوقع استقرار سعر الدينار العراقي مقابل الدولار حول 1320 دينار مع تحسن في السيولة النقدية واستقرار السوق المحلي.",
confidence: 85,
category: "عملات تقليدية",
impact: "متوسط",
timestamp: new Date().toISOString()
},
{
title: "الإيثيريوم وتطبيقات DeFi",
content: "يشير التحليل إلى نمو في استخدام الإيثيريوم في تطبيقات التمويل اللامركزي (DeFi) مما قد يدعم سعره على المدى المتوسط.",
confidence: 72,
category: "عملات رقمية",
impact: "متوسط",
timestamp: new Date().toISOString()
}
];
// محاكاة تأخير الشبكة
await new Promise(resolve => setTimeout(resolve, 1000));
return insights;
},
async getCryptoPredictions() {
if (!this.isEnabled) return [];
const predictions = [
{
symbol: "BTC",
name: "البيتكوين",
currentPrice: "40,125",
predictedPrice: "41,200",
change: "+2.7%",
confidence: 78,
trend: "صاعد"
},
{
symbol: "ETH",
name: "الإيثيريوم",
currentPrice: "2,240",
predictedPrice: "2,350",
change: "+4.9%",
confidence: 72,
trend: "صاعد"
},
{
symbol: "BNB",
name: "البينانس",
currentPrice: "315",
predictedPrice: "330",
change: "+4.8%",
confidence: 68,
trend: "صاعد"
},
{
symbol: "SOL",
name: "سولانا",
currentPrice: "98.50",
predictedPrice: "105",
change: "+6.6%",
confidence: 65,
trend: "صاعد"
}
];
// محاكاة تأخير الشبكة
await new Promise(resolve => setTimeout(resolve, 800));
return predictions;
},
async generateAINews() {
if (!this.isEnabled) return [];
const news = [
{
title: "البيتكوين يتجاوز حاجز 40,000 دولار مع تدفق استثمارات مؤسسية جديدة",
content: "ارتفع سعر البيتكوين اليوم متجاوزاً حاجز 40,000 دولار للمرة الأولى منذ أشهر، مدعوماً بتدفق استثمارات مؤسسية جديدة وتحسن معنويات السوق.",
category: "عملات رقمية",
date: "منذ 15 دقيقة",
trending: true,
impact: "كبير"
},
{
title: "البنك المركزي الأوروبي يعلن عن سياسات نقدية جديدة تؤثر على اليورو",
content: "أعلن البنك المركزي الأوروبي عن حزمة سياسات نقدية جديدة تهدف إلى مكافحة التضخم، مما أثر على سعر اليورو مقابل العملات الرئيسية.",
category: "عملات تقليدية",
date: "منذ ساعة",
trending: true,
impact: "متوسط"
},
{
title: "نمو سوق العملات الرقمية في الشرق الأوسط بنسبة 35% خلال الربع الأخير",
content: "شهد سوق العملات الرقمية في منطقة الشرق الأوسط نمواً ملحوظاً بنسبة 35% خلال الربع الأخير، مدعوماً بتبني متزايد من قبل المؤسسات المالية.",
category: "تحليلات",
date: "منذ 3 ساعات",
trending: false,
impact: "متوسط"
},
{
title: "توقعات بتحسن سعر الدينار العراقي مع تحسن الوضع الاقتصادي",
content: "تشير التوقعات إلى تحسن محتمل في سعر الدينار العراقي مقابل الدولار خلال الأسابيع القادمة مع تحسن الوضع الاقتصادي وزيادة الاحتياطي النقدي.",
category: "عملات محلية",
date: "منذ 5 ساعات",
trending: true,
impact: "كبير"
}
];
// محاكاة تأخير الشبكة
await new Promise(resolve => setTimeout(resolve, 1200));
return news;
},
toggleEnabled(state) {
this.isEnabled = state;
if (!state) {
showEnhancedNotification("❌ تم إيقاف الذكاء الاصطناعي", 'warning');
} else {
showEnhancedNotification("✅ تم تفعيل الذكاء الاصطناعي", 'success');
}
}
};
// نظام إدارة مصادر أسعار الصرف المحسن
const ExchangeRateManager = {
apis: [
{
name: "Exchangerate-host",
url: "https://api.exchangerate.host/latest",
priority: 1,
active: true,
format: "standard",
description: "مصدر مجاني للعملات التقليدية - يدعم CORS",
reliability: 95
},
{
name: "المصادر المحلية الذكية",
url: "local",
priority: 2,
active: true,
format: "local",
description: "قاعدة بيانات محلية مع أسعار واقعية ومحدثة",
reliability: 100
}
],
stats: {
totalRequests: 0,
successfulRequests: 0,
failedRequests: 0,
lastSuccessfulSource: null,
averageResponseTime: 0,
lastUpdate: null
},
init() {
this.loadStats();
this.cleanOldCache();
this.updateStatsDisplay();
this.setupOnlineStatusListener();
this.setupAutoUpdate();
console.log("✅ نظام أسعار الصرف المحسن جاهز للعمل");
},
setupOnlineStatusListener() {
window.addEventListener('online', () => {
isOnline = true;
elements.offlineIndicator.style.display = 'none';
this.showEnhancedNotification("✅ تم استعادة الاتصال بالإنترنت", 'success');
this.updateAllRates();
});
window.addEventListener('offline', () => {
isOnline = false;
elements.offlineIndicator.style.display = 'block';
this.showEnhancedNotification("⚠️ فقدان الاتصال بالإنترنت - استخدام البيانات المخزنة", 'warning');
});
// فحص الاتصال بشكل دوري
setInterval(() => {
const previousStatus = isOnline;
isOnline = navigator.onLine;
if (previousStatus !== isOnline) {
if (isOnline) {
elements.offlineIndicator.style.display = 'none';
this.showEnhancedNotification("✅ اتصال الإنترنت نشط", 'success');
} else {
elements.offlineIndicator.style.display = 'block';
this.showEnhancedNotification("⚠️ فقدان الاتصال بالإنترنت", 'warning');
}
}
}, 5000);
},
setupAutoUpdate() {
setInterval(() => {
if (elements.autoUpdateToggle.checked && isOnline) {
this.updateAllRates();
}
}, 120000); // تحديث كل دقيقتين
},
updateAllRates() {
if (currentFromCurrency && currentToCurrency) {
const startTime = performance.now();
this.getExchangeRate(currentFromCurrency, currentToCurrency)
.then(rateData => {
const endTime = performance.now();
this.stats.averageResponseTime = (this.stats.averageResponseTime + (endTime - startTime)) / 2;
elements.marketRate.textContent = this.isCrypto(currentToCurrency) ?
rateData.rate.toFixed(8) : rateData.rate.toFixed(4);
elements.lastUpdate.textContent = new Date().toLocaleTimeString('ar-EG');
this.stats.lastUpdate = new Date().toISOString();
this.updateStatsDisplay();
})
.catch(error => {
console.warn('❌ فشل التحديث التلقائي:', error);
});
}
},
async getExchangeRate(fromCurrency, toCurrency) {
this.stats.totalRequests++;
this.updateStatsDisplay();
// التحقق من التخزين المؤقت أولاً
const cachedRate = this.getCachedRate(fromCurrency, toCurrency);
if (cachedRate && this.isCacheValid(cachedRate)) {
return {
rate: cachedRate.rate,
source: `CACHE (${cachedRate.source})`,
timestamp: cachedRate.timestamp,
cached: true
};
}
// إذا لم يكن هناك اتصال، استخدم الأسعار الافتراضية
if (!isOnline) {
const defaultRate = this.getDefaultRate(fromCurrency, toCurrency);
if (defaultRate) {
return {
rate: defaultRate,
source: "أسعار افتراضية (غير متصل)",
timestamp: new Date().toISOString(),
cached: false
};
}
throw new Error("لا يوجد اتصال بالإنترنت ولا توجد أسعار افتراضية متاحة");
}
// ترتيب المصادر حسب الأولوية والموثوقية
const sortedApis = [...this.apis]
.filter(api => api.active)
.sort((a, b) => {
const priorityDiff = a.priority - b.priority;
if (priorityDiff !== 0) return priorityDiff;
return b.reliability - a.reliability;
});
// محاولة المصادر بالتتابع
for (const api of sortedApis) {
try {
const startTime = performance.now();
const rate = await this.fetchFromAPI(api, fromCurrency, toCurrency);
const endTime = performance.now();
if (rate && rate > 0) {
// تحديث موثوقية المصدر
api.reliability = Math.min(100, api.reliability + 1);
// تخزين النتيجة
this.cacheRate(fromCurrency, toCurrency, rate, api.name);
this.stats.successfulRequests++;
this.stats.lastSuccessfulSource = api.name;
this.stats.averageResponseTime = (this.stats.averageResponseTime + (endTime - startTime)) / 2;
this.updateStatsDisplay();
return {
rate: rate,
source: api.name,
timestamp: new Date().toISOString(),
cached: false,
responseTime: endTime - startTime
};
}
} catch (error) {
console.warn(`❌ فشل المصدر ${api.name}:`, error.message);
// تقليل موثوقية المصدر
api.reliability = Math.max(50, api.reliability - 2);
this.stats.failedRequests++;
this.updateStatsDisplay();
continue;
}
}
// إذا فشلت جميع المصادر، استخدم الأسعار الافتراضية
const defaultRate = this.getDefaultRate(fromCurrency, toCurrency);
if (defaultRate) {
return {
rate: defaultRate,
source: "أسعار افتراضية (الطوارئ)",
timestamp: new Date().toISOString(),
cached: false
};
}
throw new Error("تعذر الاتصال بجميع مصادر أسعار الصرف");
},
async fetchFromAPI(api, from, to) {
if (api.name === "المصادر المحلية الذكية") {
return this.getSmartLocalRate(from, to);
}
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 8000);
try {
let url = `${api.url}?base=${from}&symbols=${to}`;
const response = await fetch(url, {
signal: controller.signal,
mode: 'cors',
headers: {
'Accept': 'application/json',
}
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(`خطأ HTTP: ${response.status}`);
}
const data = await response.json();
return this.extractRateFromResponse(data, api.format, from, to);
} catch (error) {
clearTimeout(timeoutId);
throw error;
}
},
extractRateFromResponse(data, format, from, to) {
try {
let rate;
if (data.rates && data.rates[to]) {
rate = data.rates[to];
} else if (data.result && data.result[to]) {
rate = data.result[to];
}
if (!rate || typeof rate !== 'number' || rate <= 0 || !isFinite(rate)) {
throw new Error('سعر صرف غير صالح');
}
return rate;
} catch (error) {
throw new Error(`فشل في معالجة البيانات: ${error.message}`);
}
},
getSmartLocalRate(from, to) {
// أسعار واقعية بناءً على بيانات السوق الحالية (محدثة)
const baseRates = {
"USD": 1,
"EUR": 0.92,
"GBP": 0.79,
"IQD": 1320,
"SAR": 3.75,
"AED": 3.67,
"KWD": 0.31,
"QAR": 3.64,
"TRY": 32.15,
"JPY": 147.50,
"CNY": 7.18,
"BTC": 0.000025,
"ETH": 0.00058,
"BNB": 0.0038,
"ADA": 2.85,
"DOGE": 15.2,
"XRP": 2.1,
"SOL": 0.042,
"DOT": 0.15
};
if (baseRates[from] && baseRates[to]) {
const rate = baseRates[to] / baseRates[from];
// إضافة تباين طفيف لمحاكاة تقلبات السوق الحقيقية
const variation = 1 + (Math.random() * 0.02 - 0.01); // ±1%
return rate * variation;
}
return null;
},
getDefaultRate(from, to) {
const defaultRates = {
"USD_BTC": 0.000025,
"USD_ETH": 0.00058,
"USD_BNB": 0.0038,
"USD_ADA": 2.85,
"USD_DOGE": 15.2,
"USD_XRP": 2.1,
"USD_SOL": 0.042,
"USD_DOT": 0.15,
"EUR_BTC": 0.000027,
"GBP_BTC": 0.000032,
"IQD_BTC": 0.000000019,
"BTC_USD": 40000,
"ETH_USD": 1724,
"BNB_USD": 263,
"ADA_USD": 0.35,
"DOGE_USD": 0.066,
"XRP_USD": 0.48,
"SOL_USD": 102,
"DOT_USD": 6.67,
"USD_IQD": 1320,
"IQD_USD": 0.000758,
"USD_SAR": 3.75,
"SAR_USD": 0.267,
"USD_AED": 3.67,
"AED_USD": 0.272,
"USD_EGP": 30.9,
"EGP_USD": 0.032,
"USD_JPY": 147.5,
"JPY_USD": 0.00678
};
const key = `${from}_${to}`;
return defaultRates[key] || null;
},
isCrypto(currency) {
const cryptoCurrencies = ["BTC", "ETH", "BNB", "ADA", "DOGE", "XRP", "SOL", "DOT"];
return cryptoCurrencies.includes(currency);
},
cacheRate(from, to, rate, source) {
const key = `exc_${from}_${to}`;
const cacheData = {
rate: rate,
source: source,
timestamp: new Date().getTime(),
expiresAt: new Date().getTime() + (2 * 60 * 60 * 1000), // ساعتين
version: "2.0"
};
try {
localStorage.setItem(key, JSON.stringify(cacheData));
} catch (error) {
console.warn('❌ فشل في تخزين البيانات مؤقتاً:', error);
this.cleanOldCache(); // تنظيف الذاكرة إذا كانت ممتلئة
}
},
getCachedRate(from, to) {
const key = `exc_${from}_${to}`;
try {
const cached = localStorage.getItem(key);
if (!cached) return null;
const data = JSON.parse(cached);
// التحقق من توافق الإصدار
if (data.version !== "2.0") return null;
return data;
} catch (error) {
return null;
}
},
isCacheValid(cachedData) {
if (!cachedData || !cachedData.timestamp) return false;
const now = new Date().getTime();
const cacheAge = now - cachedData.timestamp;
const maxAge = 4 * 60 * 60 * 1000; // 4 ساعات
return cacheAge < maxAge && (!cachedData.expiresAt || now < cachedData.expiresAt);
},
cleanOldCache() {
const now = new Date().getTime();
const maxAge = 24 * 60 * 60 * 1000; // 24 ساعة
try {
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.startsWith('exc_')) {
try {
const item = localStorage.getItem(key);
const data = JSON.parse(item);
if (data && data.timestamp && (now - data.timestamp) > maxAge) {
localStorage.removeItem(key);
}
} catch (e) {
localStorage.removeItem(key);
}
}
}
} catch (error) {
console.warn('❌ فشل في تنظيف التخزين المؤقت:', error);
}
},
updateStatsDisplay() {
const successRateValue = this.stats.totalRequests > 0
? ((this.stats.successfulRequests / this.stats.totalRequests) * 100).toFixed(1)
: 0;
elements.successRate.textContent = `${successRateValue}%`;
elements.successfulRequests.textContent = this.stats.successfulRequests;
elements.failedRequests.textContent = this.stats.failedRequests;
elements.statsLastUpdate.textContent = this.stats.lastUpdate ?
new Date(this.stats.lastUpdate).toLocaleTimeString('ar-EG') : '--:--';
this.saveStats();
},
saveStats() {
try {
localStorage.setItem('exchange_rate_stats_v2', JSON.stringify(this.stats));
} catch (error) {
console.warn('❌ فشل في حفظ الإحصائيات:', error);
}
},
loadStats() {
try {
const saved = localStorage.getItem('exchange_rate_stats_v2');
if (saved) {
this.stats = { ...this.stats, ...JSON.parse(saved) };
}
} catch (error) {
console.warn('❌ فشل في تحميل الإحصائيات:', error);
}
},
showEnhancedNotification(message, type = 'success') {
showNotification(message, type);
}
};
// البيانات المحسنة مع رموز أفضل للعملات الرقمية
const fiatCurrencies = {
"USD": "الدولار الأمريكي",
"EUR": "اليورو الأوروبي",
"GBP": "الجنيه الإسترليني",
"IQD": "الدينار العراقي",
"SAR": "الريال السعودي",
"AED": "الدرهم الإماراتي",
"KWD": "الدينار الكويتي",
"QAR": "الريال القطري",
"OMR": "الريال العماني",
"BHD": "الدينار البحريني",
"TRY": "الليرة التركية",
"JPY": "الين الياباني",
"CNY": "اليوان الصيني",
"RUB": "الروبل الروسي",
"AUD": "الدولار الأسترالي",
"CAD": "الدولار الكندي",
"CHF": "الفرنك السويسري",
"EGP": "الجنيه المصري",
"INR": "الروبية الهندية",
"PKR": "الروبية الباكستانية"
};
const cryptoCurrencies = {
"BTC": { name: "البيتكوين", category: "رائدة", icon: "🪙", volatility: "عالي" },
"ETH": { name: "الإيثيريوم", category: "رائدة", icon: "🧿", volatility: "عالي" },
"BNB": { name: "البينانس كوين", category: "منصات", icon: "🪅", volatility: "متوسط" },
"ADA": { name: "كاردانو", category: "عقود ذكية", icon: "🃏", volatility: "عالي" },
"DOGE": { name: "دوج كوين", category: "ميم", icon: "🐶", volatility: "عالي جداً" },
"XRP": { name: "ريبل", category: "دفع", icon: "ⓧ", volatility: "متوسط" },
"SOL": { name: "سولانا", category: "عقود ذكية", icon: "☀️", volatility: "عالي" },
"DOT": { name: "بولكادوت", category: "شبكات", icon: "⏺️", volatility: "متوسط" }
};
// بيانات الأسعار المحلية المحدثة
const localRatesData = {
iraq: {
name: "العراق - الدينار العراقي",
rates: [
{ city: "بغداد", rate100: "132,000", rate1: "1,320" },
{ city: "البصرة", rate100: "132,000", rate1: "1,320" },
{ city: "أربيل", rate100: "131,800", rate1: "1,318" },
{ city: "كركوك", rate100: "132,000", rate1: "1,320" },
{ city: "السليمانية", rate100: "131,800", rate1: "1,318" },
{ city: "دهوك", rate100: "131,800", rate1: "1,318" },
{ city: "النجف", rate100: "132,000", rate1: "1,320" },
{ city: "كربلاء", rate100: "132,000", rate1: "1,320" }
]
},
saudi: {
name: "السعودية - الريال السعودي",
rates: [
{ city: "الرياض", rate100: "375", rate1: "3.75" },
{ city: "جدة", rate100: "375", rate1: "3.75" },
{ city: "الدمام", rate100: "375", rate1: "3.75" },
{ city: "مكة", rate100: "375", rate1: "3.75" },
{ city: "المدينة", rate100: "375", rate1: "3.75" }
]
},
uae: {
name: "الإمارات - الدرهم الإماراتي",
rates: [
{ city: "دبي", rate100: "367", rate1: "3.67" },
{ city: "أبوظبي", rate100: "367", rate1: "3.67" },
{ city: "الشارقة", rate100: "367", rate1: "3.67" },
{ city: "عجمان", rate100: "367", rate1: "3.67" }
]
},
egypt: {
name: "مصر - الجنيه المصري",
rates: [
{ city: "القاهرة", rate100: "3,090", rate1: "30.9" },
{ city: "الإسكندرية", rate100: "3,090", rate1: "30.9" },
{ city: "الجيزة", rate100: "3,090", rate1: "30.9" },
{ city: "بورسعيد", rate100: "3,090", rate1: "30.9" }
]
},
jordan: {
name: "الأردن - الدينار الأردني",
rates: [
{ city: "عمان", rate100: "70.9", rate1: "0.709" },
{ city: "الزرقاء", rate100: "70.9", rate1: "0.709" },
{ city: "إربد", rate100: "70.9", rate1: "0.709" },
{ city: "العقبة", rate100: "70.9", rate1: "0.709" }
]
}
};
// الدوال الأساسية المحسنة مع الذكاء الاصطناعي
function loadCurrencies() {
elements.fromOptions.innerHTML = '';
elements.toOptions.innerHTML = '';
// إضافة العملات التقليدية والرقمية للقائمة اليسرى (من)
Object.entries(fiatCurrencies).forEach(([code, name]) => {
addCurrencyOption(code, name, "fiat", elements.fromOptions, "from");
});
Object.entries(cryptoCurrencies).forEach(([code, data]) => {
addCurrencyOption(code, data.name, "crypto", elements.fromOptions, "from");
});
// إضافة العملات التقليدية والرقمية للقائمة اليمنى (إلى)
Object.entries(fiatCurrencies).forEach(([code, name]) => {
addCurrencyOption(code, name, "fiat", elements.toOptions, "to");
});
Object.entries(cryptoCurrencies).forEach(([code, data]) => {
addCurrencyOption(code, data.name, "crypto", elements.toOptions, "to");
});
}
function addCurrencyOption(code, name, type, container, direction) {
const option = document.createElement("div");
option.className = "currency-option";
const badgeClass = type === "fiat" ? "fiat-badge" : "crypto-badge";
const badgeText = type === "fiat" ? "تقليدية" : "رقمية";
option.innerHTML = `
<div>
<div style="font-weight: 700;">${name}</div>
<div style="font-size: 0.8rem; opacity: 0.8;">${code}</div>
</div>
<span class="option-badge ${badgeClass}">${badgeText}</span>
`;
option.setAttribute("data-value", code);
option.setAttribute("data-name", name);
option.setAttribute("data-type", type);
option.addEventListener("click", () => {
if (direction === "from") {
currentFromCurrency = code;
updateCurrencyDisplay(elements.fromCurrencySelect, code, name, type);
elements.fromSearch.classList.remove("active");
elements.fromCurrencySelect.classList.remove("active");
} else {
currentToCurrency = code;
updateCurrencyDisplay(elements.toCurrencySelect, code, name, type);
elements.toSearch.classList.remove("active");
elements.toCurrencySelect.classList.remove("active");
}
showEnhancedNotification(`✅ تم اختيار ${name} (${code})`, 'success');
// تحديث سعر السوق تلقائياً
updateMarketRate();
});
container.appendChild(option);
}
function updateCurrencyDisplay(element, code, name, type) {
const badgeClass = type === "fiat" ? "fiat-badge" : "crypto-badge";
const badgeText = type === "fiat" ? "تقليدية" : "رقمية";
element.innerHTML = `
<div>
<div style="font-weight: 600;">${name}</div>
<div style="font-size: 0.85rem; opacity: 0.8;">${code}</div>
</div>
<span class="currency-badge ${badgeClass}">${badgeText}</span>
`;
}
function showEnhancedNotification(message, type = 'success') {
showNotification(message, type);
}
function showNotification(message, type = 'success') {
const icon = elements.notification.querySelector('.notification-icon');
const messageEl = elements.notification.querySelector('.notification-message');
elements.notification.className = `notification ${type}`;
icon.className = `notification-icon ${type === 'success' ? 'fas fa-check-circle' : type === 'error' ? 'fas fa-exclamation-circle' : type === 'ai' ? 'fas fa-robot' : 'fas fa-exclamation-triangle'}`;
messageEl.textContent = message;
elements.notification.classList.add('show');
setTimeout(() => {
elements.notification.classList.remove('show');
}, 4000);
}
// نظام التحويل المحسن مع الذكاء الاصطناعي
async function convertCurrency() {
const amount = parseFloat(elements.amountInput.value);
const from = currentFromCurrency;
const to = currentToCurrency;
if (!validateInputs(amount, from, to)) {
return;
}
prepareUIForConversion();
try {
const result = await performConversion(amount, from, to);
displayConversionResult(result);
showEnhancedNotification(`✅ تم التحويل بنجاح - ${amount} ${from} = ${result.convertedValue} ${to}`, 'success');
if (elements.saveHistoryToggle.checked) {
saveToHistory(result);
}
} catch (error) {
handleConversionError(error, amount, from, to);
}
}
// دالة تنبؤ الذكاء الاصطناعي
async function getAIPrediction() {
const amount = parseFloat(elements.amountInput.value);
const from = currentFromCurrency;
const to = currentToCurrency;
if (!validateInputs(amount, from, to)) {
return;
}
if (!elements.aiToggle.checked) {
showEnhancedNotification("❌ الذكاء الاصطناعي غير مفعل. الرجاء تفعيله من الإعدادات", 'error');
return;
}
prepareUIForAIPrediction();
try {
const prediction = await AIManager.getAIPrediction(from, to, amount, currentTimeframe);
displayAIPrediction(prediction);
showEnhancedNotification("🧠 تم الحصول على تنبؤات الذكاء الاصطناعي", 'ai');
} catch (error) {
handleAIPredictionError(error);
}
}
function prepareUIForAIPrediction() {
elements.aiPredictionBtn.disabled = true;
elements.aiPredictionBtn.innerHTML = '<i class="fas fa-robot ai-thinking"></i> جاري التحليل...';
elements.aiPredictionCard.style.display = "none";
}
function displayAIPrediction(prediction) {
elements.predictedAmount.textContent = prediction.predictedValue;
elements.predictedCurrency.textContent = prediction.toCurrency;
const changeText = prediction.changePercent >= 0 ?
`+${prediction.changePercent.toFixed(2)}%` :
`${prediction.changePercent.toFixed(2)}%`;
const trendIcon = prediction.trend === "صاعد" ? "📈" :
prediction.trend === "هابط" ? "📉" : "➡️";
elements.predictionDetails.innerHTML = `
تنبؤ بسعر الصرف خلال ${getTimeframeText(prediction.timeframe)}<br>
<small style="color: ${prediction.changePercent >= 0 ? 'var(--success)' : 'var(--warning)'};">
${trendIcon} ${changeText} | ${prediction.trend}
</small>
`;
elements.confidenceValue.textContent = `${prediction.confidence}%`;
elements.confidenceFill.style.width = `${prediction.confidence}%`;
elements.confidenceFill.style.background = prediction.confidence >= 80 ? 'var(--success)' :
prediction.confidence >= 60 ? 'var(--crypto)' : 'var(--warning)';
elements.aiPredictionCard.style.display = "block";
elements.aiPredictionBtn.disabled = false;
elements.aiPredictionBtn.innerHTML = '<i class="fas fa-robot"></i> تنبؤ الذكاء الاصطناعي';
}
function getTimeframeText(timeframe) {
const timeframes = {
"1d": "24 ساعة",
"1w": "أسبوع",
"1m": "شهر",
"3m": "3 أشهر"
};
return timeframes[timeframe] || timeframe;
}
function handleAIPredictionError(error) {
console.error('❌ خطأ في تنبؤ الذكاء الاصطناعي:', error);
elements.aiPredictionBtn.disabled = false;
elements.aiPredictionBtn.innerHTML = '<i class="fas fa-robot"></i> تنبؤ الذكاء الاصطناعي';
showEnhancedNotification(`❌ ${error.message}`, 'error');
}
function validateInputs(amount, from, to) {
if (!amount || amount <= 0 || isNaN(amount)) {
elements.amountInput.classList.add("shake");
showEnhancedNotification("❌ الرجاء إدخال مبلغ صالح أكبر من الصفر", 'error');
setTimeout(() => elements.amountInput.classList.remove("shake"), 500);
return false;
}
if (amount > 1000000000) {
elements.amountInput.classList.add("shake");
showEnhancedNotification("❌ المبلغ كبير جداً، الرجاء إدخال مبلغ أصغر", 'error');
setTimeout(() => elements.amountInput.classList.remove("shake"), 500);
return false;
}
if (from === to) {
showEnhancedNotification("❌ العملتان متماثلتان، الرجاء اختيار عملتين مختلفتين", 'error');
return false;
}
return true;
}
function prepareUIForConversion() {
simulateProgress();
elements.resultCard.style.display = "none";
elements.convertBtn.disabled = true;
elements.convertBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> جاري التحويل...';
}
async function performConversion(amount, from, to) {
try {
const startTime = performance.now();
const exchangeData = await ExchangeRateManager.getExchangeRate(from, to);
const endTime = performance.now();
const responseTime = endTime - startTime;
const convertedValue = ExchangeRateManager.isCrypto(to) ?
(amount * exchangeData.rate).toFixed(8) :
(amount * exchangeData.rate).toFixed(2);
return {
success: true,
amount: amount,
from: from,
to: to,
convertedValue: convertedValue,
rate: exchangeData.rate,
source: exchangeData.source,
timestamp: exchangeData.timestamp,
responseTime: responseTime,
cached: exchangeData.cached
};
} catch (error) {
throw error;
}
}
function displayConversionResult(result) {
elements.marketRate.textContent = ExchangeRateManager.isCrypto(result.to) ?
result.rate.toFixed(8) : result.rate.toFixed(4);
elements.lastUpdate.textContent = new Date().toLocaleTimeString('ar-EG');
elements.convertedAmount.textContent = result.convertedValue;
elements.convertedCurrency.textContent = result.to;
let rateText = `1 ${result.from} = ${ExchangeRateManager.isCrypto(result.to) ?
result.rate.toFixed(8) : result.rate.toFixed(4)} ${result.to}`;
if (result.source) {
rateText += `<br><small style="opacity: 0.8;">المصدر: ${result.source}</small>`;
}
if (result.cached) {
rateText += `<br><small style="color: var(--crypto);">🔄 بيانات مخزنة</small>`;
}
if (result.responseTime) {
rateText += `<br><small style="opacity: 0.7;">الوقت: ${result.responseTime.toFixed(0)}ms</small>`;
}
elements.conversionRate.innerHTML = rateText;
elements.resultBadge.textContent = result.cached ? "مخزن" : "مباشر";
elements.resultBadge.style.background = result.cached ? "var(--crypto)" : "var(--success)";
elements.resultCard.style.display = "block";
elements.convertBtn.disabled = false;
elements.convertBtn.innerHTML = '<i class="fas fa-sync-alt"></i> تحويل العملة';
}
function handleConversionError(error, amount, from, to) {
console.error('❌ خطأ في التحويل:', error);
elements.convertBtn.disabled = false;
elements.convertBtn.innerHTML = '<i class="fas fa-sync-alt"></i> تحويل العملة';
elements.resultBadge.textContent = "فشل";
elements.resultBadge.style.background = "var(--warning)";
elements.convertedAmount.textContent = "0.00";
elements.convertedCurrency.textContent = to;
elements.conversionRate.textContent = "❌ " + getErrorMessage(error);
elements.resultCard.style.display = "block";
showEnhancedNotification(`❌ ${getErrorMessage(error)}`, 'error');
}
function getErrorMessage(error) {
const message = error.message || error.toString();
if (message.includes('الاتصال') || message.includes('انتهت مهلة') || message.includes('غير متصل')) {
return "تعذر الاتصال بالإنترنت. الرجاء التحقق من الاتصال أو استخدام الأسعار المخزنة";
} else if (message.includes('مصادر')) {
return "جميع مصادر أسعار الصرف غير متاحة حالياً. جاري استخدام البيانات المخزنة";
} else if (message.includes('غير صالح')) {
return "سعر الصرف غير صالح. الرجاء المحاولة لاحقاً أو استخدام عملات أخرى";
} else {
return "حدث خطأ غير متوقع. الرجاء المحاولة مرة أخرى";
}
}
function simulateProgress() {
let width = 0;
elements.progressFill.style.width = width + "%";
elements.progressFill.style.transition = "width 0.8s cubic-bezier(0.4, 0, 0.2, 1)";
const interval = setInterval(() => {
if (width >= 85) {
clearInterval(interval);
} else {
width += Math.random() * 8 + 4;
if (width > 85) width = 85;
elements.progressFill.style.width = width + "%";
}
}, 150);
setTimeout(() => {
elements.progressFill.style.width = "100%";
setTimeout(() => {
elements.progressFill.style.width = "0%";
}, 600);
}, 1200);
}
// الدوال المساعدة المحسنة مع الذكاء الاصطناعي
function reverseCurrencies() {
const temp = currentFromCurrency;
currentFromCurrency = currentToCurrency;
currentToCurrency = temp;
updateCurrencyDisplayAfterReverse();
showEnhancedNotification("✅ تم عكس العملات بنجاح", 'success');
updateMarketRate();
}
function updateCurrencyDisplayAfterReverse() {
const fromType = ExchangeRateManager.isCrypto(currentFromCurrency) ? "crypto" : "fiat";
const toType = ExchangeRateManager.isCrypto(currentToCurrency) ? "crypto" : "fiat";
const fromName = fromType === "fiat" ? fiatCurrencies[currentFromCurrency] : cryptoCurrencies[currentFromCurrency].name;
const toName = toType === "fiat" ? fiatCurrencies[currentToCurrency] : cryptoCurrencies[currentToCurrency].name;
updateCurrencyDisplay(elements.fromCurrencySelect, currentFromCurrency, fromName, fromType);
updateCurrencyDisplay(elements.toCurrencySelect, currentToCurrency, toName, toType);
}
async function updateMarketRate() {
try {
const rateData = await ExchangeRateManager.getExchangeRate(currentFromCurrency, currentToCurrency);
elements.marketRate.textContent = ExchangeRateManager.isCrypto(currentToCurrency) ?
rateData.rate.toFixed(8) : rateData.rate.toFixed(4);
elements.lastUpdate.textContent = new Date().toLocaleTimeString('ar-EG');
} catch (error) {
console.warn('فشل تحديث سعر السوق:', error);
}
}
// دوال الذكاء الاصطناعي الإضافية
async function loadAIInsights() {
try {
elements.aiInsightsContent.innerHTML = '<div class="loading-spinner ai-loading-spinner"></div> جاري تحميل الرؤى...';
const insights = await AIManager.generateAIInsights();
aiInsights = insights;
displayAIInsights(insights);
} catch (error) {
elements.aiInsightsContent.innerHTML = `
<div style="text-align: center; padding: 20px; opacity: 0.7;">
<i class="fas fa-exclamation-triangle" style="font-size: 2rem; margin-bottom: 10px; color: var(--warning);"></i>
<div>تعذر تحميل رؤى الذكاء الاصطناعي</div>
</div>
`;
console.error('❌ خطأ في تحميل رؤى الذكاء الاصطناعي:', error);
}
}
function displayAIInsights(insights) {
elements.aiInsightsContent.innerHTML = '';
insights.forEach(insight => {
const insightItem = document.createElement('div');
insightItem.className = 'ai-insight-item';
const confidenceColor = insight.confidence >= 80 ? 'var(--success)' :
insight.confidence >= 60 ? 'var(--crypto)' : 'var(--warning)';
insightItem.innerHTML = `
<div class="ai-insight-header">
<div class="ai-insight-title">${insight.title}</div>
<div class="ai-insight-confidence" style="background: ${confidenceColor}">
${insight.confidence}%
</div>
</div>
<div class="ai-insight-content">${insight.content}</div>
<div class="ai-insight-meta">
<span>${insight.category}</span>
<span>تأثير: ${insight.impact}</span>
</div>
`;
elements.aiInsightsContent.appendChild(insightItem);
});
}
async function loadAICryptoPredictions() {
try {
elements.aiCryptoPredictions.innerHTML = '<div class="loading-spinner ai-loading-spinner"></div>';
const predictions = await AIManager.getCryptoPredictions();
displayAICryptoPredictions(predictions);
} catch (error) {
elements.aiCryptoPredictions.innerHTML = `
<div style="text-align: center; padding: 20px; opacity: 0.7;">
<i class="fas fa-exclamation-triangle" style="font-size: 1.5rem; margin-bottom: 10px; color: var(--warning);"></i>
<div>تعذر تحميل التنبؤات</div>
</div>
`;
console.error('❌ خطأ في تحميل تنبؤات العملات الرقمية:', error);
}
}
function displayAICryptoPredictions(predictions) {
elements.aiCryptoPredictions.innerHTML = '';
predictions.forEach(prediction => {
const predictionItem = document.createElement('div');
predictionItem.className = 'crypto-rate-item';
const trendIcon = prediction.trend === "صاعد" ? "📈" : "📉";
const changeColor = prediction.change.includes('+') ? 'var(--success)' : 'var(--warning)';
predictionItem.innerHTML = `
<div class="crypto-rate-icon">${cryptoCurrencies[prediction.symbol]?.icon || '💰'}</div>
<div class="crypto-rate-name">${prediction.name}</div>
<div class="crypto-rate-symbol">${prediction.symbol}</div>
<div class="crypto-rate-value">${prediction.predictedPrice} $</div>
<div style="font-size: 0.7rem; margin-top: 4px;">
<span style="color: ${changeColor}">${trendIcon} ${prediction.change}</span>
</div>
<div style="font-size: 0.65rem; opacity: 0.7; margin-top: 2px;">
ثقة: ${prediction.confidence}%
</div>
`;
elements.aiCryptoPredictions.appendChild(predictionItem);
});
}
async function loadAINews() {
try {
elements.newsList.innerHTML = '<div class="loading-spinner"></div> جاري تحميل الأخبار...';
const news = await AIManager.generateAINews();
displayAINews(news);
} catch (error) {
elements.newsList.innerHTML = `
<div style="text-align: center; padding: 20px; opacity: 0.7;">
<i class="fas fa-exclamation-triangle" style="font-size: 1.5rem; margin-bottom: 10px; color: var(--warning);"></i>
<div>تعذر تحميل الأخبار</div>
</div>
`;
console.error('❌ خطأ في تحميل أخبار الذكاء الاصطناعي:', error);
}
}
function displayAINews(news) {
elements.newsList.innerHTML = '';
news.forEach(item => {
const newsItem = document.createElement('div');
newsItem.className = 'news-item';
newsItem.innerHTML = `
<div class="news-title">
${item.trending ? '<span class="news-badge">شائع</span>' : ''}
${item.title}
</div>
<div class="news-content">${item.content}</div>
<div class="news-meta">
<span>${item.category} | تأثير: ${item.impact}</span>
<span class="news-date"><i class="far fa-clock"></i> ${item.date}</span>
</div>
`;
newsItem.addEventListener('click', () => {
showEnhancedNotification(`📰 ${item.title}`, 'success');
});
elements.newsList.appendChild(newsItem);
});
}
function showAIInsights() {
// التبديل إلى تبويب الذكاء الاصطناعي
elements.tabs.forEach(t => t.classList.remove('active'));
elements.tabContents.forEach(tc => tc.classList.remove('active'));
document.querySelector('.tab[data-tab="ai"]').classList.add('active');
document.getElementById('ai-tab').classList.add('active');
showEnhancedNotification("🧠 جاري تحميل رؤى الذكاء الاصطناعي...", 'ai');
// تحميل الرؤى إذا لم تكن محملة
if (aiInsights.length === 0) {
loadAIInsights();
}
}
// دوال الأسعار المحلية
function loadLocalRates() {
const countryData = localRatesData[currentCountry];
if (!countryData) return;
elements.localRatesBody.innerHTML = '';
countryData.rates.forEach(rate => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${rate.city}</td>
<td><span class="rate-value">${rate.rate100}</span></td>
<td><span class="rate-value">${rate.rate1}</span></td>
`;
elements.localRatesBody.appendChild(row);
});
// تحديث تاريخ التحديث
const now = new Date();
elements.localRatesUpdate.textContent = `تحديث: ${now.toLocaleDateString('ar-EG')}`;
}
function addToFavorites() {
const from = currentFromCurrency;
const to = currentToCurrency;
const pair = `${from}-${to}`;
if (favorites.includes(pair)) {
showEnhancedNotification("⚠️ هذا الزوج موجود بالفعل في المفضلة", 'warning');
return;
}
if (favorites.length >= 10) {
showEnhancedNotification("❌ وصلت للحد الأقصى للمفضلة (10 أزواج)", 'error');
return;
}
favorites.push(pair);
try {
localStorage.setItem('currencyFavorites_v2', JSON.stringify(favorites));
showEnhancedNotification("✅ تمت الإضافة إلى المفضلة", 'success');
loadFavorites();
} catch (error) {
showEnhancedNotification("❌ فشل في حفظ المفضلة", 'error');
}
}
function loadFavorites() {
elements.favoritesList.innerHTML = '';
if (favorites.length === 0) {
elements.favoritesSection.style.display = 'none';
return;
}
elements.favoritesSection.style.display = 'block';
favorites.forEach(pair => {
const [from, to] = pair.split('-');
const fromType = ExchangeRateManager.isCrypto(from) ? "crypto" : "fiat";
const toType = ExchangeRateManager.isCrypto(to) ? "crypto" : "fiat";
const fromName = fromType === "fiat" ? fiatCurrencies[from] : cryptoCurrencies[from].name;
const toName = toType === "fiat" ? fiatCurrencies[to] : cryptoCurrencies[to].name;
const favoriteItem = document.createElement('div');
favoriteItem.className = 'favorite-item';
favoriteItem.innerHTML = `
<span class="remove-favorite" data-pair="${pair}">
<i class="fas fa-times"></i>
</span>
${from} → ${to}
<small style="opacity: 0.7; margin-right: auto;">${fromName} → ${toName}</small>
`;
favoriteItem.addEventListener('click', (e) => {
if (!e.target.closest('.remove-favorite')) {
currentFromCurrency = from;
currentToCurrency = to;
updateCurrencyDisplayAfterReverse();
showEnhancedNotification(`✅ تم تحميل الزوج ${from}-${to} من المفضلة`, 'success');
updateMarketRate();
}
});
const removeBtn = favoriteItem.querySelector('.remove-favorite');
removeBtn.addEventListener('click', (e) => {
e.stopPropagation();
removeFromFavorites(pair);
});
elements.favoritesList.appendChild(favoriteItem);
});
}
function removeFromFavorites(pair) {
favorites = favorites.filter(fav => fav !== pair);
localStorage.setItem('currencyFavorites_v2', JSON.stringify(favorites));
loadFavorites();
showEnhancedNotification("🗑️ تمت الإزالة من المفضلة", 'success');
}
function clearAll() {
elements.amountInput.value = '';
elements.resultCard.style.display = 'none';
elements.aiPredictionCard.style.display = 'none';
showEnhancedNotification("🧹 تم مسح جميع الحقول", 'success');
}
function saveToHistory(result) {
const historyItem = {
from: result.from,
to: result.to,
amount: result.amount,
converted: result.convertedValue,
rate: result.rate,
source: result.source,
timestamp: new Date().toISOString(),
cached: result.cached
};
conversionHistory.unshift(historyItem);
if (conversionHistory.length > 15) {
conversionHistory = conversionHistory.slice(0, 15);
}
localStorage.setItem('conversionHistory_v2', JSON.stringify(conversionHistory));
loadHistory();
}
function loadHistory() {
elements.historyList.innerHTML = '';
if (conversionHistory.length === 0) {
elements.historySection.style.display = 'none';
return;
}
elements.historySection.style.display = 'block';
conversionHistory.forEach((item, index) => {
const historyItem = document.createElement('div');
historyItem.className = 'history-item';
const fromType = ExchangeRateManager.isCrypto(item.from) ? "crypto" : "fiat";
const toType = ExchangeRateManager.isCrypto(item.to) ? "crypto" : "fiat";
const fromName = fromType === "fiat" ? fiatCurrencies[item.from] : cryptoCurrencies[item.from].name;
const toName = toType === "fiat" ? fiatCurrencies[item.to] : cryptoCurrencies[item.to].name;
const time = new Date(item.timestamp).toLocaleTimeString('ar-EG', {
hour: '2-digit',
minute: '2-digit'
});
historyItem.innerHTML = `
<div>
<div style="font-weight: 700;">${item.from} → ${item.to}</div>
<div style="font-size: 0.75rem; opacity: 0.7;">${time}</div>
</div>
<div style="text-align: left;">
<div class="history-amount">${item.converted} ${item.to}</div>
<div style="font-size: 0.75rem; opacity: 0.7;">${item.amount} ${item.from}</div>
</div>
`;
historyItem.addEventListener('click', () => {
currentFromCurrency = item.from;
currentToCurrency = item.to;
elements.amountInput.value = item.amount;
updateCurrencyDisplayAfterReverse();
showEnhancedNotification(`↩️ تم استعادة التحويل السابق`, 'success');
updateMarketRate();
});
elements.historyList.appendChild(historyItem);
});
}
function loadCryptoRates() {
elements.cryptoRatesGrid.innerHTML = '';
Object.entries(cryptoCurrencies).forEach(([code, data]) => {
const rateItem = document.createElement('div');
rateItem.className = 'crypto-rate-item';
rateItem.innerHTML = `
<div class="crypto-rate-icon">${data.icon}</div>
<div class="crypto-rate-name">${data.name}</div>
<div class="crypto-rate-symbol">${code}</div>
<div class="crypto-rate-value">${getCryptoRate(code)} $</div>
<div style="font-size: 0.7rem; opacity: 0.7; margin-top: 4px;">${data.volatility}</div>
`;
rateItem.addEventListener('click', () => {
currentToCurrency = code;
const toType = "crypto";
const toName = cryptoCurrencies[code].name;
updateCurrencyDisplay(elements.toCurrencySelect, code, toName, toType);
showEnhancedNotification(`✅ تم تحميل سعر ${data.name}`, 'success');
updateMarketRate();
});
elements.cryptoRatesGrid.appendChild(rateItem);
});
}
function getCryptoRate(code) {
const rates = {
"BTC": "40,125",
"ETH": "2,240",
"BNB": "315",
"ADA": "0.48",
"DOGE": "0.12",
"XRP": "0.62",
"SOL": "98.50",
"DOT": "7.85"
};
return rates[code] || "0.00";
}
function loadSourcesList() {
elements.sourcesList.innerHTML = '';
ExchangeRateManager.apis.forEach(api => {
const sourceItem = document.createElement('div');
sourceItem.className = `source-item ${api.active ? 'active' : 'inactive'}`;
sourceItem.innerHTML = `
<i class="fas fa-${api.active ? 'check-circle' : 'times-circle'}"></i>
<div style="flex: 1;">
<div style="font-weight: 700;">${api.name}</div>
<div style="font-size: 0.75rem; opacity: 0.8; margin-top: 2px;">${api.description}</div>
<div style="font-size: 0.7rem; opacity: 0.6; margin-top: 2px;">
موثوقية: ${api.reliability}% | أولوية: ${api.priority}
</div>
</div>
<small>${api.priority}★</small>
`;
elements.sourcesList.appendChild(sourceItem);
});
}
function setupCurrencySearch() {
const fromSearchInput = elements.fromSearch.querySelector('.search-input');
const toSearchInput = elements.toSearch.querySelector('.search-input');
elements.fromCurrencySelect.addEventListener('click', () => {
elements.fromSearch.classList.add('active');
fromSearchInput.focus();
elements.fromCurrencySelect.classList.add('active');
});
elements.toCurrencySelect.addEventListener('click', () => {
elements.toSearch.classList.add('active');
toSearchInput.focus();
elements.toCurrencySelect.classList.add('active');
});
document.addEventListener('click', (e) => {
if (!elements.fromSearch.contains(e.target) && e.target !== elements.fromCurrencySelect) {
elements.fromSearch.classList.remove('active');
elements.fromCurrencySelect.classList.remove('active');
}
if (!elements.toSearch.contains(e.target) && e.target !== elements.toCurrencySelect) {
elements.toSearch.classList.remove('active');
elements.toCurrencySelect.classList.remove('active');
}
});
function filterCurrencyOptions(input, optionsContainer) {
const filter = input.value.toUpperCase();
const options = optionsContainer.querySelectorAll('.currency-option');
let hasResults = false;
options.forEach(option => {
const text = option.textContent.toUpperCase();
const value = option.getAttribute('data-value');
const name = option.getAttribute('data-name');
if (text.indexOf(filter) > -1 || value.indexOf(filter) > -1 || name.toUpperCase().indexOf(filter) > -1) {
option.style.display = 'flex';
hasResults = true;
} else {
option.style.display = 'none';
}
});
// إظهار رسالة إذا لم توجد نتائج
const noResults = optionsContainer.querySelector('.no-results');
if (!hasResults) {
if (!noResults) {
const noResultsMsg = document.createElement('div');
noResultsMsg.className = 'no-results';
noResultsMsg.style.padding = '10px';
noResultsMsg.style.textAlign = 'center';
noResultsMsg.style.opacity = '0.7';
noResultsMsg.style.fontSize = '0.85rem';
noResultsMsg.textContent = 'لم يتم العثور على عملات مطابقة';
optionsContainer.appendChild(noResultsMsg);
}
} else if (noResults) {
noResults.remove();
}
}
fromSearchInput.addEventListener('input', () => {
filterCurrencyOptions(fromSearchInput, elements.fromOptions);
});
toSearchInput.addEventListener('input', () => {
filterCurrencyOptions(toSearchInput, elements.toOptions);
});
}
function setupToggleSwitches() {
elements.autoUpdateToggle.addEventListener('change', function() {
if (this.checked) {
showEnhancedNotification("✅ تم تفعيل التحديث التلقائي (كل دقيقتين)", 'success');
} else {
showEnhancedNotification("❌ تم إيقاف التحديث التلقائي", 'warning');
}
});
elements.aiToggle.addEventListener('change', function() {
AIManager.toggleEnabled(this.checked);
});
elements.dataSavingToggle.addEventListener('change', function() {
if (this.checked) {
showEnhancedNotification("✅ تم تفعيل وضع توفير البيانات", 'success');
ExchangeRateManager.apis.forEach(api => {
if (api.priority > 1) api.active = false;
});
loadSourcesList();
} else {
showEnhancedNotification("❌ تم إيقاف وضع توفير البيانات", 'warning');
ExchangeRateManager.apis.forEach(api => api.active = true);
loadSourcesList();
}
});
elements.saveHistoryToggle.addEventListener('change', function() {
if (this.checked) {
showEnhancedNotification("✅ تم تفعيل حفظ سجل التحويلات", 'success');
loadHistory();
} else {
showEnhancedNotification("❌ تم إيقاف حفظ سجل التحويلات", 'warning');
elements.historySection.style.display = 'none';
}
});
}
function setupTabs() {
elements.tabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabId = tab.getAttribute('data-tab');
// إزالة النشاط من جميع التبويبات
elements.tabs.forEach(t => t.classList.remove('active'));
elements.tabContents.forEach(tc => tc.classList.remove('active'));
// إضافة النشاط للتبويب المحدد
tab.classList.add('active');
document.getElementById(`${tabId}-tab`).classList.add('active');
currentTab = tabId;
// تحميل محتوى خاص بالتبويب إذا لزم الأمر
if (tabId === 'ai') {
loadAIInsights();
loadAICryptoPredictions();
} else if (tabId === 'local') {
loadLocalRates();
} else if (tabId === 'news') {
loadAINews();
}
showEnhancedNotification(`✅ تم التبديل إلى ${getTabName(tabId)}`, 'success');
});
});
}
function getTabName(tabId) {
const tabNames = {
'converter': 'المحول الرئيسي',
'ai': 'الذكاء الاصطناعي',
'crypto': 'العملات الرقمية',
'local': 'الأسعار المحلية',
'news': 'أخبار العملات'
};
return tabNames[tabId] || tabId;
}
function setupTimeframeButtons() {
elements.timeframeButtons.forEach(btn => {
btn.addEventListener('click', function() {
elements.timeframeButtons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
currentTimeframe = this.getAttribute('data-timeframe');
// إذا كان هناك تنبؤ معروض، قم بتحديثه
if (elements.aiPredictionCard.style.display === 'block') {
getAIPrediction();
}
});
});
}
function setupCountrySelector() {
elements.countrySelect.addEventListener('change', function() {
currentCountry = this.value;
loadLocalRates();
showEnhancedNotification(`✅ تم تحميل أسعار ${localRatesData[currentCountry].name}`, 'success');
});
}
function setupSettingsPage() {
elements.settingsBtn.addEventListener('click', function() {
elements.settingsPage.classList.add('active');
document.body.style.overflow = 'hidden';
});
elements.closeSettings.addEventListener('click', function() {
elements.settingsPage.classList.remove('active');
document.body.style.overflow = 'auto';
});
// إغلاق الإعدادات عند النقر خارجها
elements.settingsPage.addEventListener('click', function(e) {
if (e.target === elements.settingsPage) {
elements.settingsPage.classList.remove('active');
document.body.style.overflow = 'auto';
}
});
}
function setupThemeToggle() {
elements.themeToggle.addEventListener('click', function() {
isDarkMode = !isDarkMode;
const theme = isDarkMode ? 'dark' : 'light';
document.body.setAttribute('data-theme', theme);
// تحديث الأيقونة
const icon = elements.themeToggle.querySelector('i');
icon.className = isDarkMode ? 'fas fa-moon' : 'fas fa-sun';
// حفظ السمة المفضلة
localStorage.setItem('preferred-theme', theme);
showEnhancedNotification(`🎨 تم التبديل إلى ${isDarkMode ? 'الوضع الليلي' : 'الوضع النهاري'}`, 'success');
});
}
// إعداد الأحداث المحسن مع الذكاء الاصطناعي
function setupEventListeners() {
elements.convertBtn.addEventListener("click", convertCurrency);
elements.aiPredictionBtn.addEventListener("click", getAIPrediction);
elements.reverseAction.addEventListener("click", reverseCurrencies);
elements.favoriteAction.addEventListener("click", addToFavorites);
elements.aiInsightAction.addEventListener("click", showAIInsights);
elements.clearAction.addEventListener("click", clearAll);
elements.refreshNews.addEventListener('click', () => {
elements.refreshNews.style.transform = 'rotate(360deg)';
elements.refreshNews.style.transition = 'transform 0.6s ease';
setTimeout(() => {
elements.refreshNews.style.transform = 'rotate(0deg)';
loadAINews();
showEnhancedNotification("🔄 تم تحديث الأخبار", 'success');
}, 600);
});
elements.refreshAiPredictions.addEventListener('click', () => {
elements.refreshAiPredictions.style.transform = 'rotate(360deg)';
elements.refreshAiPredictions.style.transition = 'transform 0.6s ease';
setTimeout(() => {
elements.refreshAiPredictions.style.transform = 'rotate(0deg)';
loadAICryptoPredictions();
showEnhancedNotification("🔄 تم تحديث تنبؤات الذكاء الاصطناعي", 'ai');
}, 600);
});
// إضافة إمكانية استخدام Enter للتحويل
elements.amountInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
convertCurrency();
}
});
// تحديث سعر السوق عند تغيير العملات
elements.fromCurrencySelect.addEventListener('click', updateMarketRate);
elements.toCurrencySelect.addEventListener('click', updateMarketRate);
}
// التهيئة المحسنة عند تحميل الصفحة مع الذكاء الاصطناعي
window.addEventListener('load', function() {
// تحميل السمة المفضلة
const preferredTheme = localStorage.getItem('preferred-theme') || 'dark';
isDarkMode = preferredTheme === 'dark';
document.body.setAttribute('data-theme', preferredTheme);
// تحديث أيقونة الوضع
const icon = elements.themeToggle.querySelector('i');
icon.className = isDarkMode ? 'fas fa-moon' : 'fas fa-sun';
// تهيئة المكونات
ExchangeRateManager.init();
loadCurrencies();
setupCurrencySearch();
loadAINews();
loadCryptoRates();
loadLocalRates();
loadSourcesList();
loadFavorites();
loadHistory();
setupToggleSwitches();
setupTabs();
setupTimeframeButtons();
setupCountrySelector();
setupSettingsPage();
setupThemeToggle();
setupEventListeners();
// تأثيرات الظهور
const converterCard = document.querySelector('.converter-card');
converterCard.style.opacity = '0';
converterCard.style.transform = 'translateY(30px) scale(0.95)';
setTimeout(() => {
converterCard.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
converterCard.style.opacity = '1';
converterCard.style.transform = 'translateY(0) scale(1)';
}, 300);
// تحديث سعر السوق الأولي
setTimeout(updateMarketRate, 1000);
showEnhancedNotification("🧠🚀 مرحباً بك في المحول الشامل الذكي للعملات!", 'ai');
console.log("✅ التطبيق المحسن مع الذكاء الاصطناعي جاهز للاستخدام");
});
// تحسينات إضافية للأداء
window.addEventListener('beforeunload', () => {
// حفظ الحالة الحالية
const currentState = {
fromCurrency: currentFromCurrency,
toCurrency: currentToCurrency,
amount: elements.amountInput.value,
tab: currentTab,
aiEnabled: elements.aiToggle.checked,
country: currentCountry,
theme: isDarkMode ? 'dark' : 'light'
};
localStorage.setItem('app-state', JSON.stringify(currentState));
});
// تحميل الحالة المحفوظة
try {
const savedState = localStorage.getItem('app-state');
if (savedState) {
const state = JSON.parse(savedState);
currentFromCurrency = state.fromCurrency || currentFromCurrency;
currentToCurrency = state.toCurrency || currentToCurrency;
elements.amountInput.value = state.amount || '';
currentTab = state.tab || currentTab;
elements.aiToggle.checked = state.aiEnabled !== undefined ? state.aiEnabled : true;
AIManager.isEnabled = elements.aiToggle.checked;
currentCountry = state.country || currentCountry;
elements.countrySelect.value = currentCountry;
if (state.theme) {
isDarkMode = state.theme === 'dark';
document.body.setAttribute('data-theme', state.theme);
const icon = elements.themeToggle.querySelector('i');
icon.className = isDarkMode ? 'fas fa-moon' : 'fas fa-sun';
}
}
} catch (error) {
console.warn('❌ فشل في تحميل الحالة المحفوظة:', error);
}
</script>
</body>
</html>