حاسبة مستويات فيبوناتشي

حاسبة فيبوناتشي :root { --bg: #0a0c0f; --surface: #111318; --surface2: #181c22; --border: #1e2530; --border2: #252d3a; --accent-up: #00d4aa; --accent-up-dim: rgba(0, 212, 170, 0.12); --accent-down: #ff4f6d; --accent-down-dim: rgba(255, 79, 109, 0.12); --accent-gold: #f0b429; --text: #e8edf5; --text-muted: #5a6475; --text-mid: #8a95a5; --mono: 'JetBrains Mono', monospace; --sans: 'IBM Plex Sans Arabic', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--bg); color: var(--text); min-height: 100vh; padding: 24px 16px 48px; } /* Grid background */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } .container { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; } /* Header */ .header { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .logo { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent-gold), #e07b00); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 18px; font-weight: 600; color: #000; flex-shrink: 0; } .header-text h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; color: var(--text); } .header-text p { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: var(--mono); } /* Direction Tabs */ .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 24px; } .tab { padding: 12px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; cursor: pointer; text-align: center; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--text-muted); transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .tab:hover { border-color: var(--border2); color: var(--text-mid); } .tab.active-up { border-color: var(--accent-up); background: var(--accent-up-dim); color: var(--accent-up); } .tab.active-down { border-color: var(--accent-down); background: var(--accent-down-dim); color: var(--accent-down); } .tab-arrow { font-size: 16px; } /* Input Card */ .input-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 20px; } .input-grid { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; } @media (max-width: 600px) { .input-grid { grid-template-columns: 1fr 1fr; } .calc-btn { grid-column: span 2; } } .field label { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; } .field input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 14px; color: var(--text); outline: none; transition: border-color 0.2s; text-align: right; direction: ltr; } .field input:focus { border-color: var(--accent-gold); } .field input::placeholder { color: var(--text-muted); } .calc-btn { padding: 10px 20px; background: linear-gradient(135deg, var(--accent-gold), #d4920a); border: none; border-radius: 8px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: #000; cursor: pointer; transition: opacity 0.2s, transform 0.1s; white-space: nowrap; } .calc-btn:hover { opacity: 0.9; } .calc-btn:active { transform: scale(0.97); } /* Results */ .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .results-grid { grid-template-columns: 1fr; } } .results-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .card-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .card-header.up { background: var(--accent-up-dim); } .card-header.down { background: var(--accent-down-dim); } .card-title { font-size: 13px; font-weight: 600; } .card-header.up .card-title { color: var(--accent-up); } .card-header.down .card-title { color: var(--accent-down); } .card-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .up .card-dot { background: var(--accent-up); } .down .card-dot { background: var(--accent-down); } .level-list { padding: 8px 0; } .level-row { display: grid; grid-template-columns: 80px 1fr 110px; align-items: center; padding: 8px 16px; gap: 8px; transition: background 0.15s; position: relative; } .level-row:hover { background: var(--surface2); } .level-pct { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text-muted); text-align: right; } .level-bar-wrap { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; } .level-bar { height: 100%; border-radius: 2px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .up .level-bar { background: var(--accent-up); } .down .level-bar { background: var(--accent-down); } .level-val { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); text-align: left; direction: ltr; } .level-val.key { color: var(--accent-gold); } .section-label { padding: 6px 16px 4px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border); margin-top: 4px; } .section-label:first-child { border-top: none; margin-top: 0; } /* Empty state */ .empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; } .empty-icon { font-size: 28px; margin-bottom: 10px; opacity: 0.5; } /* Copy toast */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(60px); background: var(--surface2); border: 1px solid var(--border2); padding: 10px 20px; border-radius: 100px; font-size: 13px; color: var(--text-mid); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 100; font-family: var(--sans); } .toast.show { transform: translateX(-50%) translateY(0); } /* Highlight key fib levels */ .level-row[data-key="true"] .level-pct { color: var(--accent-gold); } φ حاسبة فيبوناتشي Fibonacci Retracement & Extension ↑ اتجاه صعودي ↓ اتجاه نزولي عالي (a) منخفض (b) مخصص (c) — اختياري احسب تغير الاتجاه (Retracement) 📊أدخل القيم للحساب التمديدات (Extensions) 📈أدخل القيم للحساب ✓ تم النسخ let direction = 'up'; const RET_LEVELS_UP = [ { pct: 0, label: '0%', key: false }, { pct: 23.6, label: '23.6%', key: false }, { pct: 38.2, label: '38.2%', key: true }, { pct: 50, label: '50%', key: true }, { pct: 61.8, label: '61.8%', key: true }, { pct: 76.4, label: '76.4%', key: false }, { pct: 100, label: '100%', key: false }, { pct: 138.2, label: '138.2%', key: false }, ]; const EXT_LEVELS_UP = [ { pct: 261.8, label: '261.8%', key: false }, { pct: 200, label: '200%', key: false }, { pct: 161.8, label: '161.8%', key: true }, { pct: 138.2, label: '138.2%', key: false }, { pct: 100, label: '100%', key: false }, { pct: 61.8, label: '61.8%', key: true }, { pct: 50, label: '50%', key: false }, { pct: 38.2, label: '38.2%', key: false }, { pct: 23.6, label: '23.6%', key: false }, ]; const RET_LEVELS_DOWN = [ { pct: 138.2, label: '138.2%', key: false }, { pct: 100, label: '100%', key: false }, { pct: 76.4, label: '76.4%', key: false }, { pct: 61.8, label: '61.8%', key: true }, { pct: 50, label: '50%', key: true }, { pct: 38.2, label: '38.2%', key: true }, { pct: 23.6, label: '23.6%', key: false }, { pct: 0, label: '0%', key: false }, ]; const EXT_LEVELS_DOWN = [ { pct: 23.6, label: '23.6%', key: false }, { pct: 38.2, label: '38.2%', key: false }, { pct: 50, label: '50%', key: false }, { pct: 61.8, label: '61.8%', key: true }, { pct: 100, label: '100%', key: false }, { pct: 138.2, label: '138.2%', key: false }, { pct: 161.8, label: '161.8%', key: true }, { pct: 200, label: '200%', key: false }, { pct: 261.8, label: '261.8%', key: false }, ]; function setDirection(dir) { direction = dir; document.getElementById('tab-up').className = 'tab' + (dir === 'up' ? ' active-up' : ''); document.getElementById('tab-down').className = 'tab' + (dir === 'down' ? ' active-down' : ''); const color = dir === 'up' ? 'up' : 'down'; document.getElementById('card-ret-header').className = 'card-header ' + color; document.getElementById('card-ext-header').className = 'card-header ' + color; document.getElementById('card-ret').className = 'results-card ' + color; document.getElementById('card-ext').className = 'results-card ' + color; if (dir === 'up') { document.getElementById('label-a').textContent = 'منخفض (a)'; document.getElementById('label-b').textContent = 'عالي (b)'; } else { document.getElementById('label-a').textContent = 'عالي (a)'; document.getElementById('label-b').textContent = 'منخفض (b)'; } calculate(); } function autoCalc() { const a = parseFloat(document.getElementById('input-a').value); const b = parseFloat(document.getElementById('input-b').value); if (!isNaN(a) && !isNaN(b)) calculate(); } function calcPrice(a, b, c, pct) { const base = c !== null ? c : a; const diff = b - a; return base + (diff * pct / 100); } function calculate() { const a = parseFloat(document.getElementById('input-a').value); const b = parseFloat(document.getElementById('input-b').value); const cRaw = document.getElementById('input-c').value; const c = cRaw !== '' ? parseFloat(cRaw) : null; if (isNaN(a) || isNaN(b)) { document.getElementById('ret-body').innerHTML = '📊أدخل القيم للحساب'; document.getElementById('ext-body').innerHTML = '📈أدخل القيم للحساب'; return; } const retLevels = direction === 'up' ? RET_LEVELS_UP : RET_LEVELS_DOWN; const extLevels = direction === 'up' ? EXT_LEVELS_UP : EXT_LEVELS_DOWN; const allPrices = [...retLevels, ...extLevels].map(l => Math.abs(calcPrice(a, b, c, l.pct))); const maxPrice = Math.max(...allPrices); document.getElementById('ret-body').innerHTML = renderLevels(retLevels, a, b, c, maxPrice, 'تراجع الاتجاه'); document.getElementById('ext-body').innerHTML = renderLevels(extLevels, a, b, c, maxPrice, 'امتداد الاتجاه'); // Animate bars requestAnimationFrame(() => { document.querySelectorAll('.level-bar').forEach(bar => { bar.style.width = bar.dataset.w + '%'; }); }); } function renderLevels(levels, a, b, c, maxPrice, sectionLabel) { let html = `${sectionLabel}`; levels.forEach(level => { const price = calcPrice(a, b, c, level.pct); const barW = maxPrice > 0 ? Math.min(100, (Math.abs(price) / maxPrice) * 100) : 0; const formatted = formatPrice(price); html += ` ${level.label} ${formatted} `; }); html += ''; return html; } function formatPrice(val) { if (Math.abs(val) >= 1000) return val.toLocaleString('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); if (Math.abs(val) >= 1) return val.toFixed(4); return val.toFixed(6); } function copyVal(val) { navigator.clipboard.writeText(val).catch(() => {}); const t = document.getElementById('toast'); t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 1800); } // Init cards with correct class document.getElementById('card-ret').className = 'results-card up'; document.getElementById('card-ext').className = 'results-card up';

حاسبة فيبوناتشي

مقالات ذات صلة

تقرير تحليل الفضة، النفط وداو جونز اليومي – ١٠ مارس 2026

تقرير تحليل الفضة، النفط وداو جونز الاسبوعي – 9-13 مارس 2026

مؤشر الخوف والجشع

حاسبة نقاط البايفوت (Pivot Points)