src/app/app.component.html - master - RomichN/cookies

src/app/app.component.html
105 строк6 KB
RomichN
first commit
13 дек 2024, 11:44
13 дек 2024, 11:440e0691e
<main class="main">
  <div class="currency" id="change-currency" title="Изменить валюту" (click)="changeCurrency()">{{currency}}</div>
  <header class="header">
    <div class="container">
      <div class="logo">
        <img src="./assets/images/logo.png" alt="logo"/>
      </div>
      <nav class="menu">
        <ul class="menu-list">
          <li class="menu-item"><a (click)="scrollTo(products)">Каталог</a></li>
          <li class="menu-item"><a (click)="scrollTo(love)">О нас</a></li>
          <li class="menu-item"><a (click)="scrollTo(order)">Оформление заказа</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section class="main-content">
    <div class="container">
      <img src="./assets/images/line1.png" class="line1" alt="cookie"/>
      <div class="main-info">
        <h1 class="main-title">Магия вкуса в каждой крошке</h1>
        <p class="main-text">Наши рецепты вдыхают жизнь в изысканность ингредиентов: ароматное натуральное масло, свежие сливки, чистый мёд и отборная мука. Мы тщательно отбираем каждый компонент премиального печенья, стремясь подарить вам истинное кулинарное наслаждение.</p>
        <div class="main-action">
          <button class="button" id="main-action-button" (click)="scrollTo(products)">Заказать</button>
        </div>
      </div>
      <img class="main-image" src="./assets/images/cookie.png" alt="Cookie"/>
    </div>
  </section>
  <section class="products" id="products" #products>
    <div class="container">
      <img src="./assets/images/line2.png" class="line2" alt="cookie"/>
      <div class="common-title">Выберите печенье</div>
      <div class="sugar-free">
        <div>Все</div>
        <input type="checkbox" id="switch" (change)="switchSugarFree($event)" />
        <label for="switch"></label>
        <div>Без сахара</div>
      </div>
      <div class="products-items">
        <div class="products-item" *ngFor="let product of productsData">
          <div class="products-item-image">
            <img src="{{product.image}}" alt="product"/>
          </div>
          <div class="products-item-details">
            <div class="products-item-title">
              {{product.title}}
            </div>
            <div class="products-item-text">
              {{product.text}}
            </div>
            <div class="products-item-extra">
              <div class="products-item-info">
                <div class="products-item-price">{{product.price}} {{currency}}</div>
                <div class="products-item-weight">{{product.weight}}</div>
              </div>
              <button class="button violet-button" (click)="scrollTo(order, product)">Заказать</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="love" id="love" #love>
    <div class="container">
      <div class="common-title">
        Пекарня с любовью
      </div>
      <div class="love-items">
        <div class="love-item love-item-white">
          <div class="love-item-title">Приготовлено с заботой, чтобы радовать вас каждый день</div>
          <div class="love-item-text">Мы с гордостью представляем наше печенье, которое мы выпекаем вручную каждый день с 1995 года, используя только лучшие ингредиенты. Погрузитесь в мир изысканных лакомств, приготовленных с применением передовых технологий, и насладитесь их неповторимым вкусом.</div>
        </div>
        <div class="love-item love-item-image">
          <img src="./assets/images/love.png" alt="Cookies image"/>
        </div>
      </div>
    </div>
  </section>
  <section class="order" id="order" #order>
    <img src="./assets/images/line3.png" class="line3" alt="cookie"/>
    <div class="container">
      <div class="common-title">Закажите печенье</div>
      <img src="./assets/images/breadcrumbs.png" alt="breadcrumbs" class="order-bg-image"/>
      <div class="order-block">
        <div class="order-form">
          <div class="order-form-text">Откройте для себя волшебство вкуса с нашим премиальным печеньем! Закажите прямо сейчас и окунитесь в мир сладких наслаждений. </div>
          <div class="order-form-inputs" [formGroup]="form">
            <input type="text"  placeholder="Выберите печенье" id="product" formControlName="product" [class]="{'error':form.get('product')?.invalid && (form.get('product')?.dirty || form.get('product')?.touched)}" readonly>
            <input type="text"  placeholder="Ваше имя" id="name" formControlName="name" [class]="{'error':form.get('name')?.invalid && (form.get('name')?.dirty || form.get('name')?.touched)}">
            <input type="text"   placeholder="Ваш телефон" id="phone" formControlName="phone" [class]="{'error':form.get('phone')?.invalid && (form.get('phone')?.dirty || form.get('phone')?.touched)}">
            <button class="button violet-button" id="order-action" (click)="confirmOrder()" [disabled]="!form.valid" >Оформить заказ</button>
          </div>
        </div>
        <div class="order-block-image">
          <img src="./assets/images/order.png" alt="Cookies" class="order-image"/>
        </div>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="logo"><img src="./assets/images/logo.png" alt="logo"/></div>
    <div class="rights">«Все права защищены»</div>
  </footer>
</main>