| |
| <?php
|
| <!doctype html>
|
| <html lang="ar" dir="rtl"><head><script>window["__codeletBootstrap__"]=JSON.parse('{"A":"A","B":"20260807-05-4dc3575","C":{"Abril Fatface":"YACgEZbkUVE,0","Alfa Slab One":"YACgEYS9sJU,0","Anton":"YACgEcYqQ-A,0","Archivo":"YAHO2-t-jNE,0","Arial":"YAGyDvJ_4Ts,0","Bebas Neue":"YACgESME5ew,0","Bricolage Grotesque":"YAFyMcdwzpc,0","Canva Sans":"YAFLd8sKbwc,2","Caveat":"YALBs2ploWQ,0","Comic Sans MS":"YAHO2VMiyZo,0","Cormorant Garamond":"YAFdJhX-538,0","Courier New":"YAGzXiGs0_8,0","DM Sans":"YAD1aU3sLnI,0","DM Serif Display":"YAD1aYG82rc,0","Forum":"YACgEcnnqB4,0","Fraunces":"YAEul-FRQw4,0","Georgia":"YAGzXkO0pEM,0","Helvetica Neue":"YAFcf6CtJfI,0","Impact":"YAFcfnjI7Vk,0","Inter":"YAFdJvSyp_k,3","Iowan Old Style":"YAGNIFa8j9o,0","Jacques Francois":"YAHO2a5g66Q,0","JetBrains Mono":"YAFdJksXcAk,0","Libre Baskerville":"YACgEUFdPdA,0","Manrope":"YAHO2b2feC4,0","Merriweather":"YACgEXvHxxs,0","Montserrat":"YADLjI9qxTA,0","Nunito":"YACgEX8C5Gg,0","Oleo Script":"YACgEQQ14jI,0","Phantom Sans":"YAHO2E8Pb88,0","Playfair Display":"YACgEYmuCJE,0","Poppins":"YAFdJjbTu24,1","Press Start 2P":"YAFyGr-8pmQ,0","Quicksand":"YADWjpfPmdk,0","Raleway":"YACgEVg3xZg,0","Segoe UI":"YAHNdRD1Klw,0","Source Sans 3":"YAG4lO1Mj10,0","Spectral":"YAHO2rVUHIM,0","Times New Roman":"YAGzXW3gftg,0","Times":"YAGzXW3gftg,0","Ubuntu":"YACgERDU--Q,0","Work Sans":"YAGXhLOKv44,0","Yellowtail":"YACgEYG4kG4,0","ui-monospace":"YADlN8CFZ8Q,0","ui-sans-serif":"YACkoN-xg4g,0"}}');</script><script src="/_sdk/7949ff62d67710d5.telemetry_sdk.js" integrity="sha512-KIvXA82Di44YY/RH9/63A9MuTuavYgDFG8PfErJn7Wli4K0LAOk+coo/aPXk3+ZNL96nHh9VYD4PE+fLes+laQ=="></script>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>صحتنا | حاسبة السعرات</title>
|
| <script src="https://cdn.tailwindcss.com/3.4.17"></script>
|
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/lucide.min.js"></script>
|
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,[email protected],600;9..144,700&display=swap" rel="stylesheet">
|
| <style>
|
| :root { --ink:
|
| * { box-sizing: border-box; }
|
| body { margin: 0; font-family: "DM Sans", sans-serif; color: var(--ink); }
|
| .desert-hero {
|
| position: relative; overflow: hidden; min-height: 420px;
|
| background:
|
| }
|
| .desert-hero::after {
|
| content: ""; position: absolute; inset: 0;
|
| background: linear-gradient(105deg, rgba(35,49,38,.92) 0%, rgba(35,49,38,.57) 47%, rgba(80,39,22,.14) 100%);
|
| }
|
| .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
| .hero-content { position: relative; z-index: 1; }
|
| .glass { background: rgba(255,250,241,.92); backdrop-filter: blur(14px); }
|
| .warm-shadow { box-shadow: 0 20px 60px rgba(69, 40, 23, .14); }
|
| .result-card { border: 1px solid rgba(160,105,61,.15); }
|
| .form-input, .form-select {
|
| width: 100%; border: 1px solid
|
| outline: none; background:
|
| }
|
| .form-input::placeholder { color:
|
| label.canva-text { font-size: 1rem !important; color:
|
| .canva-button { font-size: 1.05rem; min-height: 3.1rem; }
|
|
|
| .form-input:focus, .form-select:focus { border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(185,93,53,.13); }
|
| .plan-line { border-right: 2px solid
|
| .hidden-panel { display: none; }
|
| .fade-in { animation: rise .55s ease both; }
|
| @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
|
| .brand-serif { font-family: Fraunces, serif; }
|
| </style>
|
| <script src="/_sdk/0e8d3a91e1c6f495.data_sdk.js" type="text/javascript" integrity="sha512-c00oDoGjsMgluCLLEyVl3suwEkgjOGGplVFbsilUoBg4aMKNmsL3mwsc9r0dPn95qiSZyjBousQXgROkAW7p/w=="></script>
|
| <script src="/_sdk/04cc6185e046f597.resizing_sdk.js" type="text/javascript" integrity="sha512-CiE/G92aQF0nxneFg1kdOvXih8sQ1Z2a2QI3+r/WvzJwQqH6+IyB3iL07OkJmpm3ABAaf07+FnqWny98f5sR6w=="></script>
|
| </head>
|
| <body data-template-id="__page-root" class="w-full" style="background: rgb(248, 241, 229);">
|
| <header class="desert-hero"><img data-template-id="hero-background-image" loading="lazy" class="canva-image hero-photo" src="https://images.pexels.com/photos/1001435/pexels-photo-1001435.jpeg?auto=compress&cs=tinysrgb&w=1920" alt="Explore the beautiful sand dunes under a clear blue sky in Egypt's striking desert landscape.">
|
| <div class="hero-content w-full max-w-6xl mx-auto px-5 py-7">
|
| <nav class="flex items-center justify-between" aria-label="التنقل الرئيسي">
|
| <div class="flex items-center gap-3 text-white"><span class="w-11 h-11 rounded-2xl bg-white/15 border border-white/25 flex items-center justify-center" aria-hidden="true"> <i data-lucide="heart-pulse" class="w-6 h-6"></i> </span> <span data-template-id="brand-name" class="canva-text brand-serif text-2xl font-bold" style="color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 17px;">صحتنا</span>
|
| </div>
|
| <div data-template-id="header-tag" class="canva-tag hidden sm:block rounded-full border border-white/30 bg-white/10 px-4 py-2 text-white text-sm" style="background: rgba(255, 255, 255, 0.098); color: rgb(255, 255, 255); font-weight: 400; font-style: normal; font-size: 17px;">خطتك تبدأ بخطوة</div>
|
| </nav>
|
| <section class="mt-16 max-w-2xl">
|
| <div data-template-id="hero-kicker" class="canva-tag inline-flex rounded-full bg-[#e7b67f]/90 px-4 py-2 text-sm font-semibold text-[#3c271a]" style="background: rgb(231, 182, 127); color: rgb(60, 39, 26); font-weight: 600; font-style: normal; font-size: 17px;">توازن يدوم</div>
|
| <h1 data-template-id="hero-title" class="canva-text brand-serif mt-5 text-4xl md:text-6xl leading-tight font-bold text-white" style="color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 32px; line-height: 1.15;">اعرف احتياجك. واصنع عاداتك.</h1>
|
| <p data-template-id="hero-description" class="canva-text mt-4 max-w-xl text-lg leading-8 text-[#fff7ed]" style="color: rgb(255, 247, 237); font-weight: 400; font-style: normal; font-size: 18px; line-height: 1.7;">حاسبة ذكية تمنحك نقطة بداية واضحة للسعرات، مؤشر كتلة الجسم، وخطة يومية عملية تناسب هدفك.</p>
|
| </section>
|
| </div>
|
| </header>
|
| <main class="w-full bg-[#f8f1e5] px-4 pb-16">
|
| <div class="max-w-6xl mx-auto -mt-14 relative z-10">
|
| <section data-template-id="calculator-panel" class="canva-panel glass warm-shadow rounded-[28px] p-5 md:p-8" style="background: rgba(255, 250, 241, 0.92);">
|
| <div class="flex flex-col gap-2 mb-7">
|
| <div class="flex items-center gap-2 text-[#a95734]"><i data-lucide="calculator" class="w-5 h-5" aria-hidden="true"></i> <span data-template-id="calculator-kicker" class="canva-text font-semibold" style="color: rgb(169, 87, 52); font-weight: 700; font-style: normal; font-size: 17px;">حاسبة شخصية</span>
|
| </div>
|
| <h2 data-template-id="calculator-title" class="canva-text text-2xl font-bold" style="color: rgb(35, 49, 38); font-weight: 700; font-style: normal; font-size: 24px;">أدخل بياناتك لنرسم طريقك الصحي</h2>
|
| </div>
|
| <form id="calorie-form">
|
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
| <div>
|
| <div class="flex items-center gap-2 mb-2 text-[#a95734]"><i data-lucide="user-round" class="w-4 h-4" aria-hidden="true"></i><label data-template-id="name-label" class="canva-text text-sm font-semibold" for="person-name" style="color: rgb(54, 68, 56); font-weight: 600; font-style: normal; font-size: 17px;">الاسم (اختياري)</label>
|
| </div><input id="person-name" class="form-input" type="text" autocomplete="name">
|
| </div>
|
| <div>
|
| <div class="flex items-center gap-2 mb-2 text-[#a95734]"><i data-lucide="venus-and-mars" class="w-4 h-4" aria-hidden="true"></i><label data-template-id="gender-label" class="canva-text text-sm font-semibold" for="gender" style="color: rgb(54, 68, 56); font-weight: 600; font-style: normal; font-size: 17px;">الجنس</label>
|
| </div><select id="gender" class="form-select"> <option value="male">ذكر</option> <option value="female">أنثى</option> </select>
|
| </div>
|
| <div>
|
| <div class="flex items-center gap-2 mb-2 text-[#a95734]"><i data-lucide="calendar-days" class="w-4 h-4" aria-hidden="true"></i><label data-template-id="age-label" class="canva-text text-sm font-semibold" for="age" style="color: rgb(54, 68, 56); font-weight: 600; font-style: normal; font-size: 17px;">العمر (سنة)</label>
|
| </div><input id="age" class="form-input" type="number" min="14" max="100" inputmode="numeric">
|
| </div>
|
| <div>
|
| <div class="flex items-center gap-2 mb-2 text-[#a95734]"><i data-lucide="ruler" class="w-4 h-4" aria-hidden="true"></i><label data-template-id="height-label" class="canva-text text-sm font-semibold" for="height" style="color: rgb(54, 68, 56); font-weight: 600; font-style: normal; font-size: 17px;">الطول (سم)</label>
|
| </div><input id="height" class="form-input" type="number" min="100" max="250" inputmode="decimal">
|
| </div>
|
| <div>
|
| <div class="flex items-center gap-2 mb-2 text-[#a95734]"><i data-lucide="scale" class="w-4 h-4" aria-hidden="true"></i><label data-template-id="weight-label" class="canva-text text-sm font-semibold" for="weight" style="color: rgb(54, 68, 56); font-weight: 600; font-style: normal; font-size: 17px;">الوزن (كجم)</label>
|
| </div><input id="weight" class="form-input" type="number" min="30" max="300" step="0.1" inputmode="decimal">
|
| </div>
|
| <div>
|
| <div class="flex items-center gap-2 mb-2 text-[#a95734]"><i data-lucide="activity" class="w-4 h-4" aria-hidden="true"></i><label data-template-id="activity-label" class="canva-text text-sm font-semibold" for="activity" style="color: rgb(54, 68, 56); font-weight: 600; font-style: normal; font-size: 17px;">مستوى النشاط</label>
|
| </div><select id="activity" class="form-select"> <option value="1.2">قليل الحركة</option> <option value="1.375">نشاط خفيف</option> <option value="1.55">نشاط متوسط</option> <option value="1.725">نشاط مرتفع</option> </select>
|
| </div>
|
| <div class="lg:col-span-3">
|
| <div class="flex items-center gap-2 mb-2 text-[#a95734]"><i data-lucide="flag" class="w-4 h-4" aria-hidden="true"></i><label data-template-id="goal-label" class="canva-text text-sm font-semibold" for="goal" style="color: rgb(54, 68, 56); font-weight: 600; font-style: normal; font-size: 17px;">ما هو هدفك؟</label>
|
| </div><select id="goal" class="form-select"> <option value="lose">خفض الوزن تدريجياً</option> <option value="maintain">المحافظة على الوزن</option> <option value="gain">زيادة الوزن تدريجياً</option> </select>
|
| </div>
|
| </div>
|
| <div class="mt-6 flex flex-col sm:flex-row items-start sm:items-center gap-4"><button data-template-id="calculate-button" class="canva-button inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 font-bold shadow-lg shadow-[#b95d35]/20 hover:brightness-95 focus:outline-none focus:ring-4 focus:ring-[#b95d35]/25" type="submit" style="background: rgb(185, 93, 53); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 17px;">احسب خطتي الصحية</button>
|
| <p id="form-message" class="text-sm font-medium text-[#b23d2f]" role="status" aria-live="polite"></p>
|
| </div>
|
| </form>
|
| </section>
|
| <section data-template-id="date-converter-panel" class="canva-panel mt-6 rounded-[24px] border border-[#d8c8ae] bg-[#fffaf1] p-5 md:p-6" aria-labelledby="date-converter-title" style="background: rgb(255, 250, 241);">
|
| <div class="flex items-center gap-3 mb-4">
|
| <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-[#f2dfc3] text-[#a95734]" aria-hidden="true"><i data-lucide="calendar-range" class="w-6 h-6"></i></span>
|
| <div>
|
| <p data-template-id="date-converter-kicker" class="canva-text text-sm font-bold text-[#a95734]" style="color: rgb(169, 87, 52); font-weight: 700; font-style: normal; font-size: 17px;">أداة التاريخ</p>
|
| <h2 id="date-converter-title" data-template-id="date-converter-title" class="canva-text text-2xl font-bold text-[#233126]" style="color: rgb(35, 49, 38); font-weight: 700; font-style: normal; font-size: 24px;">تحويل التاريخ الهجري إلى الميلادي</h2>
|
| </div>
|
| </div>
|
| <p data-template-id="date-converter-description" class="canva-text mb-4 text-base leading-7 text-[#4d574b]" style="color: rgb(77, 87, 75); font-weight: 400; font-style: normal; font-size: 17px; line-height: 1.7;">أدخل تاريخاً هجرياً لمعرفة ما يقابله بالتقويم الميلادي بسهولة.</p>
|
| <form id="date-converter-form" class="flex flex-col gap-4 sm:flex-row sm:items-end" novalidate="">
|
| <div class="flex-1"><label data-template-id="date-converter-label" class="canva-text mb-2 block font-semibold" for="hijri-date" style="color: rgb(38, 54, 41); font-weight: 600; font-style: normal; font-size: 17px;">التاريخ الهجري (سنة-شهر-يوم)</label><input id="hijri-date" class="form-input" type="text" inputmode="numeric" placeholder="1447-01-01" required="">
|
| </div><button data-template-id="convert-date-button" class="canva-button inline-flex items-center justify-center gap-2 rounded-xl px-5 py-3 font-bold shadow-lg" type="submit" style="background: rgb(185, 93, 53); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 17px;">تحويل التاريخ</button>
|
| </form>
|
| <p id="date-converter-result" class="mt-4 rounded-xl bg-[#f2dfc3] px-4 py-3 text-base font-semibold text-[#3f493e]" role="status" aria-live="polite">—</p>
|
| </section>
|
| <section data-template-id="daily-tracker-panel" class="canva-panel mt-6 rounded-[24px] border border-[#d8c8ae] bg-[#fffaf1] p-5 md:p-6" aria-labelledby="daily-tracker-title" style="background: rgb(255, 250, 241);">
|
| <div class="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
|
| <div class="flex-1">
|
| <div class="flex items-center gap-3 mb-2">
|
| <span class="flex h-11 w-11 items-center justify-center rounded-xl bg-[#f2dfc3] text-[#a95734]" aria-hidden="true"><i data-lucide="utensils" class="w-6 h-6"></i></span>
|
| <div>
|
| <p data-template-id="daily-tracker-kicker" class="canva-text text-sm font-bold text-[#a95734]" style="color: rgb(169, 87, 52); font-weight: 700; font-style: normal; font-size: 17px;">التتبع اليومي</p>
|
| <h2 id="daily-tracker-title" data-template-id="daily-tracker-title" class="canva-text text-2xl font-bold text-[#233126]" style="color: rgb(35, 49, 38); font-weight: 700; font-style: normal; font-size: 24px;">جدول سعرات الوجبات</h2>
|
| </div>
|
| </div>
|
| <p data-template-id="daily-tracker-description" class="canva-text mb-4 leading-7 text-[#4d574b]" style="color: rgb(77, 87, 75); font-weight: 400; font-style: normal; font-size: 17px; line-height: 1.7;">أضف وجباتك واحسب السعرات المستهلكة والمتبقي الصافي وفق هدفك اليومي.</p>
|
| <div id="meal-rows" class="space-y-3"></div>
|
| <div class="mt-4 flex flex-wrap gap-3">
|
| <button data-template-id="add-meal-button" id="add-meal-button" type="button" class="canva-button inline-flex items-center gap-2 rounded-xl px-5 py-3 font-bold shadow-lg" style="background: rgb(185, 93, 53); color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 17px;">إضافة وجبة</button><button data-template-id="calculate-meals-button" id="calculate-meals-button" type="button" class="canva-button inline-flex items-center gap-2 rounded-xl border border-[#b95d35] bg-transparent px-5 py-3 font-bold" style="color: rgb(185, 93, 53); font-weight: 700; font-style: normal; font-size: 17px;">حساب</button>
|
| </div>
|
| </div>
|
| <aside data-template-id="calorie-summary" class="canva-card w-full lg:max-w-xs rounded-2xl bg-[#304236] p-5 text-white" style="background: rgb(48, 66, 54);">
|
| <h3 data-template-id="summary-title" class="canva-text mb-4 text-lg font-bold" style="color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 19px;">ملخص اليوم</h3>
|
| <div class="space-y-3 text-sm">
|
| <div class="flex justify-between gap-3">
|
| <span data-template-id="summary-goal-label" class="canva-text text-[#dbe5d0]" style="color: rgb(219, 229, 208); font-weight: 400; font-style: normal; font-size: 17px;">الهدف اليومي</span><strong id="summary-goal">—</strong>
|
| </div>
|
| <div class="flex justify-between gap-3">
|
| <span data-template-id="summary-consumed-label" class="canva-text text-[#dbe5d0]" style="color: rgb(219, 229, 208); font-weight: 400; font-style: normal; font-size: 17px;">إجمالي المستهلك</span><strong id="summary-consumed">0</strong>
|
| </div>
|
| <div class="flex justify-between gap-3">
|
| <span data-template-id="summary-burn-label" class="canva-text text-[#dbe5d0]" style="color: rgb(219, 229, 208); font-weight: 400; font-style: normal; font-size: 17px;">سعرات الحرق</span><strong id="summary-burn">0</strong>
|
| </div>
|
| <div class="flex justify-between gap-3">
|
| <span data-template-id="summary-add-label" class="canva-text text-[#dbe5d0]" style="color: rgb(219, 229, 208); font-weight: 400; font-style: normal; font-size: 17px;">سعرات الإضافة</span><strong id="summary-add">0</strong>
|
| </div>
|
| <div class="mt-3 border-t border-white/20 pt-3 flex justify-between gap-3">
|
| <span data-template-id="summary-remaining-label" class="canva-text font-bold text-[#e9bd7c]" style="color: rgb(233, 189, 124); font-weight: 700; font-style: normal; font-size: 17px;">المتبقي الصافي</span><strong id="summary-remaining" class="text-lg">—</strong>
|
| </div>
|
| </div>
|
| </aside>
|
| </div>
|
| </section>
|
| <section id="results" class="hidden-panel mt-7 fade-in" aria-live="polite">
|
| <div class="flex items-end justify-between gap-4 mb-5">
|
| <div>
|
| <p data-template-id="results-kicker" class="canva-text text-sm font-bold text-[#a95734]" style="color: rgb(169, 87, 52); font-weight: 700; font-style: normal; font-size: 17px;">نتيجتك الشخصية</p>
|
| <h2 data-template-id="results-title" class="canva-text mt-1 text-3xl font-bold" style="color: rgb(35, 49, 38); font-weight: 700; font-style: normal; font-size: 24px;">خارطة طريقك اليومية</h2>
|
| </div><i data-lucide="sun" class="w-9 h-9 text-[#c9773d]" aria-hidden="true"></i>
|
| </div>
|
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
| <article data-template-id="maintenance-card" class="canva-card result-card rounded-2xl p-5 bg-[#fffaf1]" style="background: rgb(255, 250, 241);">
|
| <div class="flex justify-between items-start">
|
| <div>
|
| <div class="flex items-center gap-2"><i data-lucide="flame" class="w-4 h-4 text-[#c36a35]" aria-hidden="true"></i>
|
| <p data-template-id="maintenance-label" class="canva-text text-sm font-semibold text-[#6d705b]" style="color: rgb(109, 112, 91); font-weight: 600; font-style: normal; font-size: 17px;">سعرات المحافظة</p>
|
| </div>
|
| <p id="maintenance-value" class="mt-3 text-3xl font-bold text-[#263428]">—</p>
|
| <p data-template-id="calories-unit" class="canva-text mt-1 text-sm text-[#6d705b]" style="color: rgb(109, 112, 91); font-weight: 400; font-style: normal; font-size: 17px;">سعرة حرارية / يوم</p>
|
| </div><i data-lucide="flame" class="w-6 h-6 text-[#c36a35]" aria-hidden="true"></i>
|
| </div>
|
| </article>
|
| <article data-template-id="target-card" class="canva-card result-card rounded-2xl p-5 bg-[#304236] text-white" style="background: rgb(48, 66, 54);">
|
| <div class="flex justify-between items-start">
|
| <div>
|
| <div class="flex items-center gap-2"><i data-lucide="target" class="w-4 h-4 text-[#e9bd7c]" aria-hidden="true"></i>
|
| <p data-template-id="target-label" class="canva-text text-sm font-semibold text-[#dbe5d0]" style="color: rgb(219, 229, 208); font-weight: 600; font-style: normal; font-size: 17px;">هدفك اليومي</p>
|
| </div>
|
| <p id="target-value" class="mt-3 text-3xl font-bold">—</p>
|
| <p data-template-id="target-unit" class="canva-text mt-1 text-sm text-[#dbe5d0]" style="color: rgb(219, 229, 208); font-weight: 400; font-style: normal; font-size: 17px;">سعرة حرارية / يوم</p>
|
| </div><i data-lucide="target" class="w-6 h-6 text-[#e9bd7c]" aria-hidden="true"></i>
|
| </div>
|
| </article>
|
| <article data-template-id="bmi-card" class="canva-card result-card rounded-2xl p-5 bg-[#fffaf1]" style="background: rgb(255, 250, 241);">
|
| <div class="flex justify-between items-start">
|
| <div>
|
| <div class="flex items-center gap-2"><i data-lucide="scale" class="w-4 h-4 text-[#c36a35]" aria-hidden="true"></i>
|
| <p data-template-id="bmi-label" class="canva-text text-sm font-semibold text-[#6d705b]" style="color: rgb(109, 112, 91); font-weight: 600; font-style: normal; font-size: 17px;">مؤشر كتلة الجسم BMI</p>
|
| </div>
|
| <p id="bmi-value" class="mt-3 text-3xl font-bold text-[#263428]">—</p>
|
| <p id="bmi-status" class="mt-1 text-sm font-semibold text-[#b95d35]">—</p>
|
| </div><i data-lucide="scale" class="w-6 h-6 text-[#c36a35]" aria-hidden="true"></i>
|
| </div>
|
| </article>
|
| </div>
|
| <article data-template-id="recommendation-card" class="canva-card mt-4 rounded-2xl border border-[#d8c8ae] p-5 bg-[#efe2cc]" style="background: rgb(239, 226, 204);">
|
| <div class="flex gap-4"><span class="shrink-0 w-10 h-10 rounded-xl bg-[#b95d35] text-white flex items-center justify-center"><i data-lucide="compass" class="w-5 h-5"></i></span>
|
| <div>
|
| <h3 data-template-id="recommendation-title" class="canva-text font-bold" style="color: rgb(59, 56, 47); font-weight: 700; font-style: normal; font-size: 19px;">الهدف الموصى به</h3>
|
| <p id="recommendation-text" class="mt-1 leading-7 text-[#4e493d]"></p>
|
| </div>
|
| </div>
|
| </article>
|
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-7">
|
| <section data-template-id="nutrition-panel" class="canva-panel rounded-[24px] p-6 bg-white warm-shadow" style="background: rgb(255, 255, 255);">
|
| <div class="flex items-center gap-3"><span class="w-10 h-10 rounded-xl bg-[#f6e1be] text-[#a95734] flex items-center justify-center"><i data-lucide="salad" class="w-5 h-5"></i></span>
|
| <div>
|
| <p data-template-id="nutrition-kicker" class="canva-text text-sm font-bold text-[#a95734]" style="color: rgb(169, 87, 52); font-weight: 700; font-style: normal; font-size: 17px;">الوجبات</p>
|
| <h2 data-template-id="nutrition-title" class="canva-text font-bold text-xl" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 24px;">خطة تغذية يومية</h2>
|
| </div>
|
| </div>
|
| <p id="nutrition-intro" class="mt-5 leading-7 text-[#5e6258]"></p>
|
| <div class="mt-5 space-y-4">
|
| <div class="plan-line">
|
| <h3 data-template-id="meal-one-title" class="canva-text font-bold" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 19px;">بداية مغذية</h3>
|
| <p id="meal-one-text" class="mt-1 text-sm leading-6 text-[#65675e]"></p>
|
| </div>
|
| <div class="plan-line">
|
| <h3 data-template-id="meal-two-title" class="canva-text font-bold" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 19px;">وجبة رئيسية متوازنة</h3>
|
| <p id="meal-two-text" class="mt-1 text-sm leading-6 text-[#65675e]"></p>
|
| </div>
|
| <div class="plan-line">
|
| <h3 data-template-id="meal-three-title" class="canva-text font-bold" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 19px;">عشاء خفيف وسناك</h3>
|
| <p id="meal-three-text" class="mt-1 text-sm leading-6 text-[#65675e]"></p>
|
| </div>
|
| </div>
|
| <div class="mt-7 rounded-2xl border border-[#e5d7c0] bg-[#fffaf1] p-4">
|
| <div class="flex items-center justify-between gap-3">
|
| <div class="flex items-center gap-2 text-[#a95734]">
|
| <i data-lucide="clock-3" class="w-5 h-5" aria-hidden="true"></i>
|
| <h3 data-template-id="meal-schedule-title" class="canva-text font-bold" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 19px;">جدول الوجبات والتذكير</h3>
|
| </div><span id="next-meal-reminder" class="rounded-full bg-[#f2dfc3] px-3 py-1 text-xs font-bold text-[#6d452d]" role="status" aria-live="polite">—</span>
|
| </div>
|
| <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
| <div class="flex items-center gap-3 rounded-xl bg-white p-3">
|
| <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[#f6e1be] text-[#a95734]"><i data-lucide="sunrise" class="w-4 h-4" aria-hidden="true"></i></span>
|
| <div>
|
| <p data-template-id="breakfast-label" class="canva-text text-sm font-bold" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 17px;">الفطور</p>
|
| <p id="breakfast-detail" class="text-xs text-[#6d705b]"></p>
|
| </div>
|
| </div>
|
| <div class="flex items-center gap-3 rounded-xl bg-white p-3">
|
| <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[#f6e1be] text-[#a95734]"><i data-lucide="utensils" class="w-4 h-4" aria-hidden="true"></i></span>
|
| <div>
|
| <p data-template-id="lunch-label" class="canva-text text-sm font-bold" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 17px;">الغداء</p>
|
| <p id="lunch-detail" class="text-xs text-[#6d705b]"></p>
|
| </div>
|
| </div>
|
| <div class="flex items-center gap-3 rounded-xl bg-white p-3">
|
| <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[#f6e1be] text-[#a95734]"><i data-lucide="apple" class="w-4 h-4" aria-hidden="true"></i></span>
|
| <div>
|
| <p data-template-id="snack-label" class="canva-text text-sm font-bold" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 17px;">وجبة خفيفة</p>
|
| <p id="snack-detail" class="text-xs text-[#6d705b]"></p>
|
| </div>
|
| </div>
|
| <div class="flex items-center gap-3 rounded-xl bg-white p-3">
|
| <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[#f6e1be] text-[#a95734]"><i data-lucide="moon" class="w-4 h-4" aria-hidden="true"></i></span>
|
| <div>
|
| <p data-template-id="dinner-label" class="canva-text text-sm font-bold" style="color: rgb(38, 52, 40); font-weight: 700; font-style: normal; font-size: 17px;">العشاء</p>
|
| <p id="dinner-detail" class="text-xs text-[#6d705b]"></p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
| <section data-template-id="training-panel" class="canva-panel rounded-[24px] p-6 bg-[#314338] text-white warm-shadow" style="background: rgb(49, 67, 56);">
|
| <div class="flex items-center gap-3"><span class="w-10 h-10 rounded-xl bg-[#e5b579] text-[#3d2c20] flex items-center justify-center"><i data-lucide="dumbbell" class="w-5 h-5"></i></span>
|
| <div>
|
| <p data-template-id="training-kicker" class="canva-text text-sm font-bold text-[#e8bd81]" style="color: rgb(232, 189, 129); font-weight: 700; font-style: normal; font-size: 17px;">الحركة</p>
|
| <h2 data-template-id="training-title" class="canva-text font-bold text-xl" style="color: rgb(255, 255, 255); font-weight: 700; font-style: normal; font-size: 24px;">خطة تدريب مرنة</h2>
|
| </div>
|
| </div>
|
| <p id="training-intro" class="mt-5 leading-7 text-[#e2eadc]"></p>
|
| <div class="mt-5 space-y-4 text-sm">
|
| <div class="border-b border-white/15 pb-3">
|
| <span data-template-id="training-day-one" class="canva-text font-bold text-[#e9bd7c]" style="color: rgb(233, 189, 124); font-weight: 700; font-style: normal; font-size: 17px;">3 أيام أسبوعياً</span>
|
| <p id="training-one-text" class="mt-1 text-[#e2eadc]"></p>
|
| </div>
|
| <div class="border-b border-white/15 pb-3">
|
| <span data-template-id="training-day-two" class="canva-text font-bold text-[#e9bd7c]" style="color: rgb(233, 189, 124); font-weight: 700; font-style: normal; font-size: 17px;">بين الجلسات</span>
|
| <p id="training-two-text" class="mt-1 text-[#e2eadc]"></p>
|
| </div>
|
| <div>
|
| <span data-template-id="training-day-three" class="canva-text font-bold text-[#e9bd7c]" style="color: rgb(233, 189, 124); font-weight: 700; font-style: normal; font-size: 17px;">تقدم تدريجي</span>
|
| <p id="training-three-text" class="mt-1 text-[#e2eadc]"></p>
|
| </div>
|
| </div>
|
| </section>
|
| </div>
|
| <aside data-template-id="health-note" class="canva-banner mt-6 rounded-2xl bg-[#f2dfc3] px-5 py-4 text-[#5a4632]" style="background: rgb(242, 223, 195);">
|
| <div class="flex gap-3">
|
| <i data-lucide="info" class="w-5 h-5 shrink-0 mt-0.5" aria-hidden="true"></i>
|
| <p data-template-id="health-note-text" class="canva-text leading-7 text-sm" style="color: rgb(90, 70, 50); font-weight: 400; font-style: normal; font-size: 17px; line-height: 1.7;">هذه النتائج تقديرية للتوعية وليست بديلاً عن استشارة مختص تغذية أو طبيب، خصوصاً عند وجود حالة صحية أو حمل أو أهداف علاجية.</p>
|
| </div>
|
| </aside>
|
| </section>
|
| </div>
|
| </main>
|
| <footer class="w-full bg-[#263629] px-5 py-6 text-center">
|
| <p data-template-id="footer-text" class="canva-text text-sm text-[#d8dfd0]" style="color: rgb(216, 223, 208); font-weight: 400; font-style: normal; font-size: 17px;">صحتنا — خطوات صغيرة، صحة أكبر.</p>
|
| </footer>
|
| <script src="/_sdk/571d88ca352bbccf.editing_sdk.js" integrity="sha512-jpVzCgOJfgU8ETK2cVi9ukdjrZIqXjCspYqy9afx1TyeJ4jZxisBmh2SIlonXgbaxCv9M5yrk3WY4wZKWDC3Ig=="></script>
|
| <script>
|
| document.addEventListener("DOMContentLoaded", () => {
|
| lucide.createIcons();
|
| const form = document.getElementById("calorie-form");
|
| const results = document.getElementById("results");
|
| const message = document.getElementById("form-message");
|
|
|
| const setText = (id, value) => document.getElementById(id).textContent = value;
|
| const format = number => new Intl.NumberFormat("ar-SA", { maximumFractionDigits: 0 }).format(number);
|
|
|
| const mealRows = document.getElementById("meal-rows");
|
| const mealSuggestions = ["شوفان وفاكهة", "دجاج مشوي", "سلطة خضراء", "لبن يوناني", "أرز وخضار"];
|
| let mealCount = 0;
|
| const addMealRow = () => {
|
| mealCount += 1;
|
| const row = document.createElement("div"); row.className = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-2 items-end rounded-xl border border-[#e1d4bd] bg-white p-3"; row.dataset.row = mealCount;
|
| row.innerHTML = `<div><label class="block text-xs font-bold text-[#6d705b]" for="meal-type-${mealCount}">نوع الوجبة</label><select id="meal-type-${mealCount}" class="form-select"><option>فطور</option><option>غداء</option><option>وجبة خفيفة</option><option>عشاء</option></select></div><div><label class="block text-xs font-bold text-[
|
| mealRows.appendChild(row);
|
| };
|
| const dataList = document.createElement("datalist"); dataList.id = "meal-suggestions"; mealSuggestions.forEach(item => { const option = document.createElement("option"); option.value = item; dataList.appendChild(option); }); document.body.appendChild(dataList);
|
| const updateMealSummary = () => {
|
| const target = Number(document.getElementById("target-value").textContent.replace(/[^0-9]/g, "")) || 0;
|
| const goal = document.getElementById("goal").value; const burn = goal === "lose" ? 300 : 0; const addition = goal === "gain" ? 300 : 0;
|
| let consumed = 0; mealRows.querySelectorAll("[data-row]").forEach(row => { const total = (Number(row.querySelector(".meal-qty").value) || 0) * (Number(row.querySelector(".meal-calories").value) || 0); consumed += total; row.querySelector(".meal-total").textContent = `${format(total)} سعرة`; const within = goal === "lose" ? consumed <= target + burn : goal === "gain" ? consumed <= target + addition : consumed <= target; row.querySelector(".meal-status").textContent = within ? "ضمن الهدف" : "خارج الهدف"; row.querySelector(".meal-status").className = `meal-status rounded-full px-3 py-2 text-xs font-bold ${within ? "bg-[#dcebd8] text-[#28713d]" : "bg-[#f7d8d2] text-[#a83227]"}`; }); const remaining = goal === "lose" ? target - consumed + burn : goal === "gain" ? target + addition - consumed : target - consumed; setText("summary-goal", format(target)); setText("summary-consumed", format(consumed)); setText("summary-burn", format(burn)); setText("summary-add", format(addition)); const remainingEl = document.getElementById("summary-remaining"); remainingEl.textContent = format(remaining); remainingEl.className = `text-lg ${remaining >= 0 ? "text-[#8ee0a3]" : "text-[#ff9b8f]"}`;
|
| };
|
| addMealRow(); document.getElementById("add-meal-button").addEventListener("click", addMealRow); document.getElementById("calculate-meals-button").addEventListener("click", updateMealSummary);
|
|
|
| const dateForm = document.getElementById("date-converter-form");
|
| const dateResult = document.getElementById("date-converter-result");
|
| dateForm.addEventListener("submit", (event) => {
|
| event.preventDefault();
|
| const value = document.getElementById("hijri-date").value.trim();
|
| const [year, month, day] = value.split("-").map(Number);
|
| if (!year || !month || !day || month < 1 || month > 12 || day < 1 || day > 30) { dateResult.textContent = "أدخل التاريخ الهجري بصيغة سنة-شهر-يوم، مثل 1447-01-01."; return; }
|
| const jd = Math.floor((11 * year + 3) / 30) + 354 * year + 30 * month - Math.floor((month - 1) / 2) + day + 1948440 - 385;
|
| const b = jd + 32044, c = Math.floor((4 * b + 3) / 146097), d = b - Math.floor(146097 * c / 4), e = Math.floor((4 * d + 3) / 1461), f = d - Math.floor(1461 * e / 4), g = Math.floor((5 * f + 2) / 153);
|
| const gregorianDay = f - Math.floor((153 * g + 2) / 5) + 1, gregorianMonth = g + 3 - 12 * Math.floor(g / 10), gregorianYear = 100 * c + e - 4800 + Math.floor(g / 10);
|
| dateResult.textContent = `التاريخ الميلادي التقريبي: ${gregorianYear}-${String(gregorianMonth).padStart(2, "0")}-${String(gregorianDay).padStart(2, "0")}`;
|
| });
|
|
|
| form.addEventListener("submit", (event) => {
|
| event.preventDefault();
|
| const age = Number(document.getElementById("age").value);
|
| const height = Number(document.getElementById("height").value);
|
| const weight = Number(document.getElementById("weight").value);
|
| const gender = document.getElementById("gender").value;
|
| const activity = Number(document.getElementById("activity").value);
|
| const goal = document.getElementById("goal").value;
|
| const name = document.getElementById("person-name").value.trim();
|
|
|
| if (!age || !height || !weight || age < 14 || height < 100 || weight < 30) {
|
| message.textContent = "يرجى إدخال العمر والطول والوزن ضمن نطاق صحيح للمتابعة.";
|
| results.classList.add("hidden-panel");
|
| return;
|
| }
|
|
|
| message.textContent = "";
|
| const bmr = gender === "male"
|
| ? (10 * weight) + (6.25 * height) - (5 * age) + 5
|
| : (10 * weight) + (6.25 * height) - (5 * age) - 161;
|
| const maintenance = Math.round(bmr * activity);
|
| const target = goal === "lose" ? maintenance - 400 : goal === "gain" ? maintenance + 300 : maintenance;
|
| const bmi = weight / Math.pow(height / 100, 2);
|
| const bmiStatus = bmi < 18.5 ? "أقل من النطاق الصحي" : bmi < 25 ? "ضمن النطاق الصحي" : bmi < 30 ? "زيادة في الوزن" : "سمنة";
|
|
|
| const goalText = goal === "lose" ? "خفض تدريجي ومستدام للوزن" : goal === "gain" ? "زيادة تدريجية ومدروسة للوزن" : "المحافظة على الوزن الحالي";
|
| const greeting = name ? `يا ${name}، ` : "";
|
| setText("maintenance-value", format(maintenance));
|
| setText("target-value", format(target));
|
| setText("bmi-value", bmi.toFixed(1));
|
| setText("bmi-status", bmiStatus);
|
| setText("recommendation-text", `${greeting}هدفك الموصى به هو ${goalText}. ابدأ بالسعرات المقترحة لمدة 2–3 أسابيع، ثم راقب التقدم وعدّل بشكل بسيط عند الحاجة.`);
|
|
|
| const breakfast = Math.round(target * .28), lunch = Math.round(target * .38), dinner = Math.round(target * .25), snack = Math.round(target * .09);
|
| setText("nutrition-intro", `خطة يومية مرنة حول ${format(target)} سعرة: ركّز على البروتين، الخضار، الحبوب الكاملة، والماء.`);
|
| setText("breakfast-detail", `08:00 · ${format(breakfast)} سعرة`);
|
| setText("lunch-detail", `13:00 · ${format(lunch)} سعرة`);
|
| setText("snack-detail", `16:30 · ${format(snack)} سعرة`);
|
| setText("dinner-detail", `20:00 · ${format(dinner)} سعرة`);
|
| const nextMeal = new Date();
|
| const schedule = [[8, "الفطور"], [13, "الغداء"], [16, "الوجبة الخفيفة"], [20, "العشاء"]];
|
| const upcoming = schedule.map(([hour, label]) => { const time = new Date(nextMeal); time.setHours(hour, 0, 0, 0); return { time, label }; }).find(item => item.time > nextMeal) || { time: new Date(nextMeal.getTime() + 86400000), label: "الفطور" };
|
| setText("next-meal-reminder", `الوجبة القادمة: ${upcoming.label} · ${upcoming.time.toLocaleTimeString("ar-SA", { hour: "2-digit", minute: "2-digit" })}`);
|
| setText("meal-one-text", `بيض أو لبن يوناني مع شوفان وفاكهة — حوالي ${format(breakfast)} سعرة.`);
|
| setText("meal-two-text", `دجاج أو سمك مشوي، أرز أو بطاطس، وسلطة ملونة — حوالي ${format(lunch)} سعرة.`);
|
| setText("meal-three-text", `وجبة عشاء خفيفة متوازنة بحوالي ${format(dinner)} سعرة، مع سناك ذكي بحوالي ${format(snack)} سعرة عند الحاجة.`);
|
|
|
| const highActivity = activity >= 1.55;
|
| setText("training-intro", goal === "lose"
|
| ? "امزج تمارين المقاومة مع المشي المنتظم للحفاظ على الكتلة العضلية."
|
| : goal === "gain"
|
| ? "اجعل المقاومة أساس البرنامج، وزد الأوزان تدريجياً مع نوم كافٍ."
|
| : "برنامج متوازن للحفاظ على اللياقة، القوة، والطاقة اليومية.");
|
| setText("training-one-text", highActivity ? "تمارين مقاومة لكامل الجسم لمدة 45–60 دقيقة." : "مشي سريع 30 دقيقة وتمارين مرونة خفيفة.");
|
| setText("training-two-text", "راحة نشطة: مشي هادئ، إطالات، أو حركة يومية مريحة.");
|
| setText("training-three-text", highActivity ? "مقاومة + 20 دقيقة كارديو معتدل." : "تمارين مقاومة أساسية لمدة 25–35 دقيقة.");
|
|
|
| results.classList.remove("hidden-panel");
|
| results.scrollIntoView({ behavior: "smooth", block: "start" });
|
| });
|
| });
|
| </script>
|
|
|
| </body></html>
|
| |
| |
Comments