Skip to content

index.html #3640

Open
Open
index.html#3640
@dhrouazer-a11y

Description

@dhrouazer-a11y
dhrouazer-a11y
opened on May 17, 2026
<title>الساعة الكونية — نموذج الأرض الثابتة والمحور الشمالي</title> <style> :root { --void: #04050f; --deep: #080d1e; --panel: rgba(12,18,40,0.9); --gold: #c9a84c; --gold-dim: #7a6230; --silver: #b8c4d8; --sun-color: #f5c842; --moon-color: #d4e5ff; --accent: #3a7bd5; --text: #e8dfc8; --text-dim: #7a7060; }
  • { margin: 0; padding: 0; box-sizing: border-box; }
    body {
    background: var(--void);
    color: var(--text);
    font-family: 'Amiri', serif;
    min-height: 100vh;
    overflow-x: hidden;
    }

.app {
max-width: 1100px;
margin: 0 auto;
padding: 24px 16px 60px;
position: relative;
z-index: 1;
}

header {
text-align: center;
padding: 30px 0;
border-bottom: 1px solid var(--gold-dim);
margin-bottom: 30px;
}

header h1 {
font-size: clamp(1.8rem, 4vw, 2.8rem);
color: var(--gold);
text-shadow: 0 0 30px rgba(201,168,76,0.2);
}

header p {
margin-top: 8px;
font-size: 0.95rem;
color: var(--text-dim);
font-family: 'Space Mono', monospace;
}

.clock-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}

canvas#cosmicCanvas {
background: #050814;
border-radius: 50%;
box-shadow: 0 0 60px rgba(201,168,76,0.1), 0 0 120px rgba(58,123,213,0.05);
border: 2px solid var(--gold-dim);
}

.panels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
width: 100%;
margin-top: 10px;
}

.panel {
background: var(--panel);
border: 1px solid var(--gold-dim);
border-radius: 12px;
padding: 20px;
backdrop-filter: blur(10px);
}

.panel h3 {
font-size: 1.1rem;
color: var(--gold);
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(201,168,76,0.2);
}

.data-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
}

.data-row:last-child { border-bottom: none; }
.data-label { color: var(--text-dim); font-size: 0.9rem; }
.data-value {
font-family: 'Space Mono', monospace;
font-size: 0.95rem;
direction: ltr;
}
.data-value.sun { color: var(--sun-color); }
.data-value.moon { color: var(--moon-color); }
.data-value.gold { color: var(--gold); }

.info-note {
margin-top: 30px;
text-align: center;
color: var(--text-dim);
font-size: 0.85rem;
line-height: 1.6;
}
.info-note span { color: var(--gold); }
</style>

الساعة الكونية المشهودة

COSMIC CLOCK · النجم الشمالي والأرض الثابتة

<div class="panels">
  
  <div class="panel">
    <h3>⚖️ ميزان الحركة الكونية</h3>
    <div class="data-row">
      <span class="data-label">معامل الفارق اليومي</span>
      <span class="data-value gold">+44 دقيقة / دورة</span>
    </div>
    <div class="data-row">
      <span class="data-label">الفارق المتراكم المحسوب</span>
      <span class="data-value gold" id="accumulatedDiff">—</span>
    </div>
    <div class="data-row">
      <span class="data-label">المدار الشمسي الحالي</span>
      <span class="data-value gold" id="currentOrbit">—</span>
    </div>
    <div class="data-row">
      <span class="data-label">المركز الحركي الثابت</span>
      <span class="data-value">النجم الشمالي (Polaris)</span>
    </div>
  </div>

  <div class="panel">
    <h3>☀️ الحركية الشمسية</h3>
    <div class="data-row">
      <span class="data-label">الزاوية المدارية الحالية</span>
      <span class="data-value sun" id="sunAngle">—</span>
    </div>
    <div class="data-row">
      <span class="data-label">نصف قطر المسار (البعد عن المركز)</span>
      <span class="data-value sun" id="sunRadius">—</span>
    </div>
    <div class="data-row">
      <span class="data-label">الموقع الفصلي</span>
      <span class="data-value sun" id="sunSeason">—</span>
    </div>
  </div>

  <div class="panel">
    <h3>🌙 الحركية القمرية وطوره</h3>
    <div class="data-row">
      <span class="data-label">الزاوية المدارية للقمر</span>
      <span class="data-value moon" id="moonAngle">—</span>
    </div>
    <div class="data-row">
      <span class="data-label">الاستطالة المشهودة (الفارق الزاوي)</span>
      <span class="data-value moon" id="elongation">—</span>
    </div>
    <div class="data-row">
      <span class="data-label">نسبة الإضاءة الذاتية</span>
      <span class="data-value moon" id="moonIllum">—</span>
    </div>
  </div>

</div>

الحسابات مبنية هندسياً على حركة الأجرام فوق مسطح مركزية النجم الشمالي وبمعايرة الـ 44 دقيقة الحقيقية.
الإحداثيات الافتراضية المعتمدة للمعاينة المحلية: فاس، المغرب (34.03° , -5.00°).

<script> const canvas = document.getElementById('cosmicCanvas'); const ctx = canvas.getContext('2d'); const W = canvas.width, H = canvas.height; const cx = W / 2, cy = H / 2; // النجم الشمالي في المركز تماماً // تعريف أنصاف أقطار المدارات الثلاثة على الـ Canvas const R_cancer = 70; // مدار السرطان (الداخلي - الصيف) const R_equator = 130; // خط الاستواء (الأوسط - الربيع والخريف) const R_capricorn = 190; // مدار الجدي (الخارجي - الشتاء) const rad = d => d * Math.PI / 180; const deg = r => r * 180 / Math.PI; // دالة حساب فارق الـ 44 دقيقة وتحديث الإحداثيات الكونية function updateCosmicClock() { const now = new Date(); // 1. حساب فارق الـ 44 دقيقة التراكمي بناءً على وقت اليوم الحالي const hours = now.getUTCHours() + 1; // تعديل بسيط ليناسب النطاق المحلي لقاعدة الانطلاق const minutes = now.getUTCMinutes(); const seconds = now.getUTCSeconds(); // الوقت الإجمالي الممر بالدقائق منذ بداية اليوم المدني const totalMinutesToday = (hours * 60) + minutes + (seconds / 60); // نسبة التقدم خلال الدورة اليومية للشمس const dayRatio = totalMinutesToday / 1440; // الفارق المتراكم لهذا اليوم بناءً على الـ 44 دقيقة الإضافية للدورة الكونية الكاملة const currentDiffMinutes = dayRatio * 44; document.getElementById('accumulatedDiff').textContent = `+${currentDiffMinutes.toFixed(2)} دقيقة اليوم`; // 2. حساب الزاوية المدارية للشمس (الدوران حول النجم الشمالي) // نقوم بدمج الفارق الزمني (المعايرة الحركية) داخل زاوية الدوران الحية const sunAngleDeg = ((totalMinutesToday + currentDiffMinutes) / 1440) * 360 - 90; const sunAngleRad = rad(sunAngleDeg); document.getElementById('sunAngle').textContent = ((sunAngleDeg + 90 + 360) % 360).toFixed(2) + '°'; // 3. حساب المسار الفصلي للشمس (تحديد نصف القطر بين السرطان والجدي) // يعتمد على رقم اليوم في السنة (تنتقل الشمس ديناميكياً بين المدارات الثلاثة) const startOfYear = new Date(now.getFullYear(), 0, 1); const diffInMs = now - startOfYear; const dayOfYear = Math.floor(diffInMs / (1000 * 60 * 60 * 24)); // معادلة جيبية لمحاكاة حركة الشمس بين الانقلابين الصيفي والشتوي عبر خط الاستواء // الانقلاب الصيفي (أصغر قطر - مدار السرطان) يكون في أواخر يونيو (اليوم ~172) const seasonalFactor = Math.sin(((dayOfYear - 81) / 365) * 2 * Math.PI); // 81 هو الاعتدال الربيعي // حساب نصف قطر مدار الشمس اللحظي بناءً على العامل الفصلي const currentSunRadius = R_equator - (seasonalFactor * (R_equator - R_cancer)); document.getElementById('sunRadius').textContent = currentSunRadius.toFixed(1) + ' وحدة نصف قطرية'; // تحديث نص المدار الفصلي الحالي في اللوحة let orbitName = "خط الاستواء 🌓"; if (seasonalFactor > 0.5) orbitName = "مدار السرطان (صيف داخلي) ☀️"; else if (seasonalFactor < -0.5) orbitName = "مدار الجدي (شتاء خارجي) ❄️"; document.getElementById('currentOrbit').textContent = orbitName; document.getElementById('sunSeason').textContent = seasonalFactor >= 0 ? "نصف السنة الشمالي (صعود)" : "نصف السنة الجنوبي (هبوط)"; // 4. حساب زاوية القمر وطوره المشهود // القمر يتأخر في سباقه اليومي عن الشمس لإتمام الدورة الشهرية (حوالي 12.2 درجة يومياً) const synodicMonthDays = 29.53059; const lunarMonthRatio = (dayOfYear % synodicMonthDays) / synodicMonthDays; // زاوية القمر بالنسبة للمركز متأخرة عن زاوية الشمس بناءً على عمره الإجمالي const moonAngleDeg = sunAngleDeg - (lunarMonthRatio * 360); const moonAngleRad = rad(moonAngleDeg); document.getElementById('moonAngle').textContent = ((moonAngleDeg + 90 + 360) % 360).toFixed(2) + '°'; // حساب الاستطالة (الفارق الزاوي المباشر بين الشمس والقمر) const diffAngle = ((sunAngleDeg - moonAngleDeg) + 360) % 360; document.getElementById('elongation').textContent = diffAngle.toFixed(1) + '°'; // حساب نسبة الإضاءة الحقيقية بناءً على المسافة الزاوية فوق الأرض الثابتة const illumRatio = (1 - Math.cos(rad(diffAngle))) / 2; document.getElementById('moonIllum').textContent = (illumRatio * 100).toFixed(1) + '%'; // ─── البدء في رسم عناصر الساعة الكونية على الـ Canvas ─── ctx.clearRect(0, 0, W, H); // أ. رسم الفضاء الداخلي للساعة ctx.beginPath(); ctx.arc(cx, cy, R_capricorn + 30, 0, 2 * Math.PI); ctx.fillStyle = '#030611'; ctx.fill(); ctx.strokeStyle = varColor('--gold-dim'); ctx.lineWidth = 2; ctx.stroke(); // ب. رسم المدارات الثلاثة الثابتة (السرطان، الاستواء، الجدي) drawStaticOrbit(R_cancer, 'rgba(245, 200, 66, 0.15)', 'مدار السرطان'); drawStaticOrbit(R_equator, 'rgba(184, 196, 216, 0.15)', 'خط الاستواء'); drawStaticOrbit(R_capricorn, 'rgba(58, 123, 213, 0.15)', 'مدار الجدي'); // ج. رسم النجم الشمالي الثابت (Polaris) في المركز تماماً ctx.beginPath(); ctx.arc(cx, cy, 6, 0, 2 * Math.PI); ctx.fillStyle = '#ffffff'; ctx.shadowColor = '#ffffff'; ctx.shadowBlur = 15; ctx.fill(); ctx.shadowBlur = 0; // إعادة تعيين التوهج // د. حساب ورسم جرم الشمس (بناءً على نصف القطر الزاوي الديناميكي والوقت المصلح) const sunX = cx + Math.cos(sunAngleRad) * currentSunRadius; const sunY = cy + Math.sin(sunAngleRad) * currentSunRadius; // هالة توهج الشمس const sunGlow = ctx.createRadialGradient(sunX, sunY, 0, sunX, sunY, 25); sunGlow.addColorStop(0, 'rgba(245, 200, 66, 0.4)'); sunGlow.addColorStop(1, 'transparent'); ctx.fillStyle = sunGlow; ctx.beginPath(); ctx.arc(sunX, sunY, 25, 0, 2*Math.PI); ctx.fill(); // قرص الشمس ctx.beginPath(); ctx.arc(sunX, sunY, 10, 0, 2 * Math.PI); ctx.fillStyle = '#f5c842'; ctx.fill(); // هـ. حساب ورسم جرم القمر (يتحرك في مدار أوسط ديناميكي ثابت موازٍ للاستواء) const moonX = cx + Math.cos(moonAngleRad) * R_equator; const moonY = cy + Math.sin(moonAngleRad) * R_equator; // رسم القمر مع إضاءته المصلحة هندسياً drawCosmicMoonPhase(ctx, moonX, moonY, 8, lunarMonthRatio); } // دالة مساعدة لترسيم المدارات الثابتة function drawStaticOrbit(radius, color, label) { ctx.beginPath(); ctx.arc(cx, cy, radius, 0, 2 * Math.PI); ctx.strokeStyle = color; ctx.lineWidth = 1; ctx.setLineDash([4, 6]); ctx.stroke(); ctx.setLineDash([]); // إضافة تسمية نصية خفيفة لكل مدار ctx.font = '10px Amiri'; ctx.fillStyle = 'rgba(122, 112, 96, 0.4)'; ctx.fillText(label, cx - 25, cy - radius - 4); } // دالة رسم طور القمر المصلحة هندسياً بناءً على موقعه في المسار الدائري function drawCosmicMoonPhase(context, x, y, radius, ratio) { context.save(); context.translate(x, y); // النصف المظلم (الخلفية الأساسية للقرص) context.beginPath(); context.arc(0, 0, radius, 0, 2 * Math.PI); context.fillStyle = '#0a122c'; context.fill(); // حساب انحناء الجزء المضاء بناءً على النسبة الشهرية المباشرة (Ratio) context.beginPath(); if (ratio <= 0.5) { // مرحلة التزايد (نصف منير أيمن يتسع تدريجياً) context.arc(0, 0, radius, -Math.PI / 2, Math.PI / 2, false); const ctrlX = radius * (1 - 4 * ratio); context.bezierCurveTo(ctrlX, radius, ctrlX, -radius, 0, -Math.PI / 2); } else { // مرحلة التناقص (نصف منير أيسر يتقلص تدريجياً) context.arc(0, 0, radius, Math.PI / 2, -Math.PI / 2, false); const ctrlX = radius * (4 * ratio - 3); context.bezierCurveTo(ctrlX, -radius, ctrlX, radius, 0, Math.PI / 2); } context.fillStyle = '#d4e5ff'; context.fill(); context.restore(); // إطار حماية خارجي خفيف للقمر context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI); context.strokeStyle = 'rgba(180, 210, 255, 0.3)'; context.lineWidth = 1; context.stroke(); } // دالة لجلب الألوان من الـ CSS لـ الـ Canvas function varColor(name) { return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); } // بدء التشغيل والتحديث التلقائي اللحظي (كل ثانية) updateCosmicClock(); setInterval(updateCosmicClock, 1000); </script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions