<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>درمان یار</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- هدر -->
<header>
  <div class="header-left">
    <img src="images/logo" alt = ""class="logo">
    <div>
      <h1>داروخانه درمان یار</h1>
      <p>فروش محصولات بهداشتی و دارویی، نوبت‌دهی و ویزیت آنلاین</p>
    </div>
  </div>

  <div class="header-right">
    <button id="cartBtn">🛒 سبد خرید (<span id="cartCount">0</span>)</button>
    <button id="loginBtn">ورود</button>
    <button id="registerBtn">ثبت نام</button>
  </div>
</header>

<div class="container">

  <!-- بخش محصولات با اسلایدر ساده -->
  <section class="products-section">
    <h2>پر فروش ترین ها</h2>
    <div class="products" id="productSlider">
      <div class="product-card">
        <img src="images/b12.jpg" alt="قرص ب12">
        <h4>قرص ب12 شر کت یوروویتال</h4>
        <p>498,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/14.jpg" alt="داروی سرماخوردگی">
        <h3>داروی سرماخوردگی</h3>
        <p>18,200 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/ثسحثقه.jpg" alt="ضدعفونی کننده">
        <h4>اسپری ضد عفونی کننده دست</h4>
        <p>55,200 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/mn.jpg" alt="منیزیم بیس گلایسینات">
        <h3>منیزیم بیس گلایسینات</h3>
        <p>748,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/ezen.webp" alt="آیزن پلاس">
        <h3>دیزن پلاس</h3>
        <p>352,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/bk.jpg" alt="قرص ب کمپلکس">
        <h3>قرص ب کمپلکس </h3>
        <p>498,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
    </div>
    <button id="prev">◀</button>
    <button id="next">▶</button>
  </section>
 <!-- بخش محصولات با اسلایدر ساده -->
  <section class="products-section">
    <h2>دارای تخفیف</h2>
    <div class="products" id="productSlider">
      <div class="product-card">
        <img src="images/bk.jpg" alt="قرص ب کمپلکس">
        <h3>قرص ب کمپلکس </h3>
        <p>498,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/پوشینه.jpg" alt="ایزی لایف">
        <h3>دایزی لایف شرتی بزرگسال سایز لارج</h3>
        <p>356,950 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/dafiii'.jpg" alt="دستمال مرطوب">
        <h3>دستمال مرطوب کودک</h3>
        <p>190,200 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/promin-cerita.jpg" alt="تونیک تقویت کننده مو سریتا ">
        <h3>  تقویت کننده مو سریتا</h3>
        <p>568,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
       <div class="product-card">
        <img src="images/sharbat.webp" alt="کیندر مولتی ویتامین ">
        <h3> کیندر مولتی ویتامین  </h3>
        <p>346,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
    </div>
    <button id="prev">◀</button>
    <button id="next">▶</button>
  </section>

<section class="milk-order">
  <h2>سفارش شیر خشک</h2>
  <form id="milkForm">
    <input type="text" placeholder="نام کودک" required>
    <input type="text" placeholder="کد ملی کودک" required>
    <input type="date" placeholder="تاریخ تولد کودک" required>
    <input type="text" placeholder="آدرس" required>
    <select required>
      <option>نوع شیرخشک A</option>
      <option>نوع شیرخشک B</option>
    </select>
    <input type="tel" placeholder="شماره والدین" required>
    <button type="submit">ثبت سفارش</button>
  </form>
  <div id="milkSuccess" style="color:green; display:none;">سفارش شما ثبت شد!</div>
</section> 


<!-- بخش محصولات با اسلایدر ساده -->
  <section class="products-section">
    <h2>انواع شیر خشک</h2>
    <div class="products" id="productSlider">
      <div class="product-card">
        <img src="images/شیر-خشک-گیگوز-1.webp" alt="شیر گیگوز 1 ">
        <h3>شیر گیگوز 1</h3>
        <p>180,000 تومان</p>
      </div>
      <div class="product-card">
        <img src="images/ببلاک ای ار.webp" alt= "ببلاک ای آر">
        <h3> ببلاک ای آر</h3>
        <p>320,000 تومان</p>
      </div>
      <div class="product-card">
        <img src="images/نان 1.webp"alt="نان 1">
        <h3> نان 1</h3>
        <p>190,200 تومان</p>
      </div>
     <div class="product-card">
        <img src="images/نان کید.jpg"alt="نان کید" >
        <h3> نان کید</h3>
        <p>148,500 تومان</p>
      </div>
      <div class="product-card">
        <img src="images/گیگوز 2.jpg"alt= "گیگوز 2.jpg">
        <h3>گیگوز 2 </h3>
        <p>180,000 تومان</p>
      </div>
       <div class="product-card">
        <img src="images/آپتامیل پپتی 1.jpg"alt  ="آپتامیل پپتی1"> 
        <h3> آپتامیل پپتی1</h3>
        <p>280,000 تومان</p>
      </div>
       <div class="product-card">
        <img src="images/ببلاک 1.jpg"alt= "ببلاک 1">
        <h3>ببلاک1 </h3>
        <p>212,000 تومان</p>
      </div>
       <div class="product-card">
        <img src="images/آپتامیل پرونوترا 1.jpg"alt = "آپتامیل پرونوترا 1">
        <h3> آپتامیل پرونوترا1</h3>
        <p>280,000 تومان</p>
      </div>
    </div>
      <button id="prev">◀</button>
    <button id="next">▶</button>
  </section>
  
  
<section class="consultation">
  <h2>مشاوره آنلاین پوست و مو</h2>
  <form id="consultForm">
    <input type="text" placeholder="نام شما" required>
    <input type="email" placeholder="ایمیل" required>
    <select required>
      <option>پوست</option>
      <option>مو</option>
    </select>
    <textarea placeholder="پیام شما" rows="3" required></textarea>
    <button type="submit">ارسال پیام</button>
  </form>
  <div id="consultSuccess" style="color:green; display:none;">پیام شما با موفقیت ارسال شد!</div>
</section>


<!-- بخش محصولات با اسلایدر ساده -->
  <section class="products-section">
    <h2>محصولات مراقبت مو</h2>
    <div class="products" id="productSlider">
      <div class="product-card">
        <img src="images/Cerita-Anti-Hair-Lossjpg.jpg" alt="تونیک">
        <h3>تونیک ضد شوره سریتا</h3>
        <p>598,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/promin-cerita.jpg" alt="تونیک">
        <h3>تونیک ضد ریزش سریتا</h3>
        <p>498,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/sha1.png" alt="شامپو">
        <h3> شامپو پسو سریتا</h3>
        <p>298,200 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      <div class="product-card">
        <img src="images/کراتین.png" alt="سرم">
        <h3>سرم کراتین و احیا سریا</h3>
        <p>798,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
    </div>
    <button id="prev">◀</button>
    <button id="next">▶</button>
  </section>
  
  <!-- بخش محصولات با اسلایدر ساده -->
  <section class="products-section">
    <h2>محصولات مراقبت پوستی</h2>
    <div class="products" id="productSlider">
      <div class="product-card">
        <img src="images/jel1.png" alt="قرص ب12">
        <h3>ژل شستشوی پوست چرب سینره</h3>
        <p>258,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      
      <div class="product-card">
        <img src="images/kerem1.png" alt="داروی سرماخوردگی">
        <h3>کرم ثمین 5 درصد اوره اوثرین</h3>
        <p>283,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      
      <div class="product-card">
        <img src="images/kerem2.png" alt="ضدعفونی کننده">
        <h3>کرم ضد چروک و آبرسان فیس دوکس</h3>
        <p>348,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      
       <div class="product-card">
        <img src="images/kerem3.png" alt="قرص ب12">
        <h3>کرم ثمین 3 درصد کودک</h3>
        <p>358,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      
       <div class="product-card">
        <img src="images/kerem4.png" alt="قرص ب12">
        <h3>کرم مرطوب کننده سینره</h3>
        <p>216,000 تومان</p>
        <button class="buyBtn">خرید</button>
      </div>
      
    </div>
    <button id="prev">◀</button>
    <button id="next">▶</button>
  </section>
  
  
<section class="user-auth">
  <h2>ثبت نام / ورود کاربر</h2>
  <!-- فرم ثبت نام -->
  <form id="registerForm">
    <input type="text" placeholder="نام کامل" required>
    <input type="email" placeholder="ایمیل" required>
    <input type="password" placeholder="رمز عبور" required>
    <button type="submit">ثبت نام</button>
  </form>




  <!-- فرم ورود -->
  <form id="loginForm" style="margin-top:15px;">
    <input type="email" placeholder="ایمیل" required>
    <input type="password" placeholder="رمز عبور" required>
    <button type="submit">ورود</button>
  </form>
  <div id="authMessage" style="color:green; margin-top:10px; display:none;">عملیات با موفقیت انجام شد!</div>
</section>

  <!-- فرم نوبت‌دهی -->
  <section class="appointment">
    <h2>رزرو نوبت</h2>
    <form id="appointmentForm">
      <input type="text" placeholder="نام و نام خانوادگی" required>
      <input type="email" placeholder="ایمیل" required>
      <input type="tel" placeholder="شماره تماس" required>
      <input type="date" required>
      <textarea placeholder="توضیحات" rows="3"></textarea>
      <button type="submit">ثبت نوبت</button>
    </form>
    <div class="success-message" id="successMessage">نوبت شما با موفقیت ثبت شد!</div>
  </section>

  <!-- ویزیت آنلاین -->
  <section class="online-visit">
    <h2>ویزیت آنلاین</h2>
    <ul class="doctors-list">
      <li>📞 دکتر محمدی - ساعت 10 تا 14 <a href="tel:09120000000">تماس</a></li>
      <li>📞 داروساز احمدی - ساعت 14 تا 18 <a href="tel:09121111111">تماس</a></li>
    </ul>
    <h6>بارگزاری عکس نسخه</h6>
    <input type="file" accept=".jpg,.png,.pdf">
  </section>

  <!-- نظرسنجی -->
  <section class="survey">
    <h2>نظرسنجی کاربران</h2>
    <form id="surveyForm">
      <input type="text" placeholder="نام شما" required>
      <input type="email" placeholder="ایمیل شما" required>
      <label>امتیاز (1 تا 5)</label>
      <input type="number" min="1" max="5" required>
      <textarea placeholder="نظر شما" rows="3"></textarea>
      <button type="submit">ارسال نظر</button>
    </form>
    <div id="surveyMessage">نظر شما با موفقیت ثبت شد!</div>
  </section>

</div>

<footer>
  داروخانه درمان یار | تلفن: 09903287019 | ایمیل: <a href="mailto:baranzarei2005@gmail.com" style="color:white;">baranzarei2005@gmail.com</a>
</footer>

<script src="script.js"></script>
</body>
</html>