- var page_Title = 'Rating';
- var theme_customizer      = true;
- var ratings               = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Rating
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Rating
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Star Rating
                    p.f-m-light.mt-1
                      | Use
                      code  main-star-rating
                      |  class to set default rating.
                  .card-body
                    .main-star-rating
                      .common-flex.star-box.justify-center
                        i.fa-solid.fa-star.active
                        i.fa-solid.fa-star.active
                        i.fa-solid.fa-star.active
                        i.fa-solid.fa-star
                        i.fa-solid.fa-star
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Stroke Star Rating
                    p.f-m-light.mt-1
                      | Use
                      code  star-box1
                      |  class to set stroke rating.
                  .card-body
                    .main-star-rating
                      .common-flex.star-box1.justify-center
                        i.fa-regular.fa-star.active
                        i.fa-regular.fa-star.active
                        i.fa-regular.fa-star.active
                        i.fa-regular.fa-star.active
                        i.fa-regular.fa-star
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Star with Message Rating
                    p.f-m-light.mt-1
                      | Use
                      code  msg-emojis-wrapper
                      |  class to set star with message rating.
                  .card-body
                    .msg-emojis-wrapper
                      .star-widget
                        input#rate-5(type='radio' name='rating')
                        label.fa.fa-star(for='rate-5' class="[@media(max-width:400px)]:!text-[25px] [@media(max-width:400px)]:!px-[8px]")
                        input#rate-4(type='radio' name='rating')
                        label.fa.fa-star(for='rate-4' class="[@media(max-width:400px)]:!text-[25px] [@media(max-width:400px)]:!px-[8px]")
                        input#rate-3(type='radio' name='rating')
                        label.fa.fa-star(for='rate-3' class="[@media(max-width:400px)]:!text-[25px] [@media(max-width:400px)]:!px-[8px]")
                        input#rate-2(type='radio' name='rating')
                        label.fa.fa-star(for='rate-2' class="[@media(max-width:400px)]:!text-[25px] [@media(max-width:400px)]:!px-[8px]")
                        input#rate-1(type='radio' name='rating')
                        label.fa.fa-star(for='rate-1' class="[@media(max-width:400px)]:!text-[25px] [@media(max-width:400px)]:!px-[8px]")
                        form(action='#')
                          header
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Reset Rating
                    p.f-m-light.mt-1
                      | Use
                      code  reset-rating
                      |  class to set and reset rating.
                  .card-body.reset-rating-wrapper
                    .ratingCard
                      .reset-rating(class="[@media(max-width:320px)]:gap-[13px]")
                        input#rating-5(type='radio' name='rating')
                        label.fa.fa-star(for='rating-5')
                        input#rating-4(type='radio' name='rating')
                        label.fa.fa-star(for='rating-4')
                        input#rating-3(type='radio' name='rating')
                        label.fa.fa-star(for='rating-3')
                        input#rating-2(type='radio' name='rating')
                        label.fa.fa-star(for='rating-2')
                        input#rating-1(type='radio' name='rating')
                        label.fa.fa-star(for='rating-1')
                        input#rating-0(type='radio' name='rating')
                      .buttonContainer
                        button.reset-btn.text-white.btn.btn-primary Reset
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Slider Emoji Rating
                    p.f-m-light.mt-1
                      | Use
                      code  stars
                      |  class to set slider emoji ratings.
                  .card-body.rating-stars-2
                    .emoji-rating
                      input#star-1(type='radio' name='rate')
                      input#star-2(type='radio' name='rate')
                      input#star-3(type='radio' name='rate')
                      input#star-4(type='radio' name='rate')
                      input#star-5(type='radio' name='rate')
                      .common-align.flex-col
                        .outer-emoji
                          ul.emojis
                            li.slide-emoji
                              i.icofont.icofont-emo-angry
                            li
                              i.icofont.icofont-emo-expressionless
                            li
                              i.icofont.icofont-emo-slightly-smile
                            li
                              i.icofont.icofont-emo-heart-eyes
                            li
                              i.icofont.icofont-emo-laughing
                        .stars
                          label.star-1.fa.fa-star(for='star-1')
                          label.star-2.fa.fa-star(for='star-2')
                          label.star-3.fa.fa-star(for='star-3')
                          label.star-4.fa.fa-star(for='star-4')
                          label.star-5.fa.fa-star(for='star-5')
                      .main-emoji-text
                        span.emoji-msg
                        span.emoji-number
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Range Rating
                    p.f-m-light.mt-1
                      | Use
                      code  emoji__face
                      |  class to set all expression of emoji.
                  .card-body.rating_expression
                    form.emoji
                      label.emoji__label(for='face-rating') Rate your experience? 
                      .emoji__face(role='img' aria-label='Straight face')
                          .emoji__face-right-eye(data-right='')
                          .emoji__face-left-eye(data-left='')
                          .emoji__face-mouth-lower(data-mouth-lower='')
                          .emoji__face-mouth-upper(data-mouth-upper='')
                      input#face-rating.emoji__input.emoji_slider(type='range' value='2.5' min='0' max='5' step='0.1')
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Half Star Rating
                    p.f-m-light.mt-1
                      | Use
                      code  half-star-rating
                      |  class to set a half rating for any star.
                  .card-body.half-star-rating
                    .grid.grid-cols-12
                      div(class="col-span-12")
                        #starrate.starrate(data-val='2.5' data-max='5')
                          span.ctrl
                          span.cont
                            i.fa-solid.fa-star
                            i.fa-solid.fa-star
                            i.fa-solid.fa-star-half-stroke
                            i.fa-regular.fa-star
                            i.fa-regular.fa-star
                      div(class="col-span-12")  
                        #rating-result.rating-result 2.5
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Animated Rating
                    p.f-m-light.mt-1
                      | Use 
                      code angry, sad, ok, good, happy
                      |  classes to set emoji ratings.
                  .card-body
                    .rating-container
                      ul.feedback
                        li.angry.mr-0
                          div
                            svg.eye.left
                              use(xlink:href='../assets/svg/icon-sprite.svg#eye')
                            svg.eye.right
                              use(xlink:href='../assets/svg/icon-sprite.svg#eye')
                            svg.mouth
                              use(xlink:href='../assets/svg/icon-sprite.svg#mouth')
                        li.sad.mr-0
                          div
                            svg.eye.left
                              use(xlink:href='../assets/svg/icon-sprite.svg#eye')
                            svg.eye.right
                              use(xlink:href='../assets/svg/icon-sprite.svg#eye')
                            svg.mouth
                              use(xlink:href='../assets/svg/icon-sprite.svg#mouth')
                        li.ok.mr-0
                          div
                        li.good.active.mr-0
                          div
                            svg.eye.left
                              use(xlink:href='../assets/svg/icon-sprite.svg#eye')
                            svg.eye.right
                              use(xlink:href='../assets/svg/icon-sprite.svg#eye')
                            svg.mouth
                              use(xlink:href='../assets/svg/icon-sprite.svg#mouth')
                        li.happy.mr-0
                          div
                            svg.eye.left
                              use(xlink:href='../assets/svg/icon-sprite.svg#eye')
                            svg.eye.right
                              use(xlink:href='../assets/svg/icon-sprite.svg#eye')
              div(class="col-span-4 xxl:col-span-12")
                .card
                  .card-header
                    h5 Animated Heart Rating
                    p.f-m-light.mt-1
                      | Use
                      code  rating-system3
                      |  class to set heart with message rating.
                  .card-body
                    .heart-rating
                      .rating-system3
                          input#star5_3(type='radio' name='rate3')
                          label(for='star5_3')
                          input#star4_3(type='radio' name='rate3')
                          label(for='star4_3')
                          input#star3_3(type='radio' name='rate3')
                          label(for='star3_3')
                          input#star2_3(type='radio' name='rate3')
                          label(for='star2_3')
                          input#star1_3(type='radio' name='rate3')
                          label.ms-1(for='star1_3')
                          .rating-text
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
