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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions