{% extends "layout/layout.html" %} {% block content %}

<main class="app-wrapper">
  {% include "../templates/layout/header-footer/app-header.html" %} {% include
  "../templates/layout/header-footer/app-sidebar.html" %} {% include
  "../templates/layout/header-footer/topnavbar.html" %}

  <div class="content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 rt-mb-25">
            <div class="page-title body-font-3 font-semibold">
              <span class="inline-block rt-mr-5">👋</span> Hey, Kevin.
            </div>
            <div class="text-gray-600 body-font-4">
              Here is all your Raple analytics overview
            </div>
          </div>
        </div>
        <div class="row grid">
          <div class="col col-only-4 col-only-xs-12 col-only-md-6">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between rt-mb-24">
                  <div>
                    <div
                      class="f-size-12 line-height-16 font-medium text-gray-700 rt-mb-4 text-uppercase"
                    >
                      Active Visitors
                    </div>
                    <div class="f-size-24 font-semibold">157,367</div>
                  </div>
                  <div
                    class="text-left text-lg-end text-success-500 body-font-4 font-medium"
                  >
                    <span class="d-inline-block rt-mr-7"
                      ><i class="ph-arrow-up"></i></span
                    >6.7% Increase
                  </div>
                </div>
                <div id="bar-chart1"></div>
              </div>
            </div>
          </div>
          <div class="col col-only-4 col-only-xs-12 col-only-md-6">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between rt-mb-24">
                  <div>
                    <div
                      class="f-size-12 line-height-16 font-medium text-gray-700 rt-mb-4 text-uppercase"
                    >
                      Visitor per minute
                    </div>
                    <div class="f-size-24 font-semibold">9,741</div>
                  </div>
                  <div
                    class="text-left text-lg-end text-danger-500 body-font-4 font-medium"
                  >
                    <span class="d-inline-block rt-mr-7"
                      ><i class="ph-arrow-down"></i></span
                    >13.5% Decrease
                  </div>
                </div>
                <div id="area-spaline-bottom" class="rt-mb-24"></div>
                <div id="area-spaline-bottom2"></div>
              </div>
            </div>
          </div>
          <div class="col col-only-4 col-only-xs-12 col-only-md-6">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between rt-mb-48">
                  <div>
                    <div
                      class="f-size-12 line-height-16 font-medium text-gray-700 rt-mb-4 text-uppercase"
                    >
                      Conversion Rate
                    </div>
                    <div class="f-size-24 font-semibold">9.73%</div>
                  </div>
                  <div
                    class="text-left text-lg-end text-success-500 body-font-4 font-medium"
                  >
                    <span class="d-inline-block rt-mr-7"
                      ><i class="ph-arrow-up"></i></span
                    >3.5% Increase
                  </div>
                </div>
                <div id="barchart2"></div>
              </div>
            </div>
          </div>
          <div class="col col-only-4 col-only-xs-12 col-only-md-6">
            <div class="card">
              <div class="card-body">
                <div class="d-flex justify-content-between rt-mb-24">
                  <div>
                    <div
                      class="f-size-12 line-height-16 font-medium text-gray-700 rt-mb-4 text-uppercase"
                    >
                      bounce rate
                    </div>
                    <div class="f-size-24 font-semibold">81.94%</div>
                  </div>
                  <div
                    class="text-left text-lg-end text-success-500 body-font-4 font-medium"
                  >
                    <span class="d-inline-block rt-mr-7"
                      ><i class="ph-arrow-up"></i
                    ></span>
                    1.1% Increase
                  </div>
                </div>
                <div id="line-1"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col col-only-9 col-only-md-7 col-only-xs-12">
            <div class="card">
              <div
                class="d-flex justify-content-between align-items-center card-header"
              >
                <div>User Overview</div>
                <div class="select-box select-header">
                  <select class="custom-select sources" title="Today">
                    <option>Yestarday</option>
                    <option>This Week</option>
                    <option>This Month</option>
                    <option>This Year</option>
                  </select>
                </div>
              </div>
              <div class="card-body">
                <div id="user_chart"></div>
              </div>
            </div>
          </div>
          <div class="col col-only-3 col-only-md-5 col-only-xs-12">
            <div class="card">
              <div class="d-flex justify-content-between card-header">
                <div>Most Visited Page</div>
                <div class="select-box select-header">
                  <select class="custom-select sources" title="Today">
                    <option>Yestarday</option>
                    <option>This Week</option>
                    <option>This Month</option>
                    <option>This Year</option>
                  </select>
                </div>
              </div>
              <div class="donut-chart-wrap">
                <div id="dount_chart"></div>
              </div>
              <div class="donut-chart-table">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Page name</th>
                      <th>total users</th>
                      <th>bounce rate</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="text-gray-900 extra-padding">
                        <img src="assets/images/svg/circle-grren.svg" alt="" />
                        Request a Quote
                      </td>
                      <td class="text-gray-700 fw-normal extra-padding">
                        547,914
                      </td>
                      <td class="text-success-500 extra-padding">81.94%</td>
                    </tr>
                    <tr>
                      <td class="text-gray-900">
                        <img src="assets/images/svg/circle-orange.svg" alt="" />
                        Career
                      </td>
                      <td class="text-gray-700 fw-normal">547,914</td>
                      <td class="text-success-500">10.94%</td>
                    </tr>
                    <tr>
                      <td class="text-gray-900">
                        <img src="assets/images/svg/circle-red.svg" alt="" />
                        Work
                      </td>
                      <td class="text-gray-700 fw-normal">547,914</td>
                      <td class="text-success-500">8.94%</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col col-only-4 col-only-xs-12 col-only-md-6">
            <div class="card">
              <div class="d-flex justify-content-between card-header">
                <div>Browser Overview</div>
                <div class="select-box select-header">
                  <select class="custom-select sources" title="Today">
                    <option>Yestarday</option>
                    <option>This Week</option>
                    <option>This Month</option>
                    <option>This Year</option>
                  </select>
                </div>
              </div>
              <div class="card-body pb-0">
                <div class="row">
                  <div class="col-6 text-center rt-mb-28">
                    <div class="borwser-img rt-mb-16">
                      <img
                        src="assets/images/all-img/chrome.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>
                    <div class="body-font-4 text-black font-semibold rt-mb-4">
                      Google Chrome
                    </div>
                    <div class="body-font-4 text-gray">54% User</div>
                  </div>
                  <div class="col-6 text-center rt-mb-28">
                    <div class="borwser-img rt-mb-16">
                      <img
                        src="assets/images/all-img/firefox.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>
                    <div class="body-font-4 text-black font-semibold rt-mb-4">
                      Firefox
                    </div>
                    <div class="body-font-4 text-gray">23% User</div>
                  </div>
                  <div class="col-6 text-center rt-mb-28">
                    <div class="borwser-img rt-mb-16">
                      <img
                        src="assets/images/all-img/edge.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>

                    <div class="body-font-4 text-black font-semibold rt-mb-4">
                      Microsoft Edge
                    </div>
                    <div class="body-font-4 text-gray">19% User</div>
                  </div>
                  <div class="col-6 text-center rt-mb-28">
                    <div class="borwser-img rt-mb-16">
                      <img
                        src="assets/images/all-img/breve.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>

                    <div class="body-font-4 text-black font-semibold rt-mb-4">
                      Brave
                    </div>
                    <div class="body-font-4 text-gray">11% User</div>
                  </div>
                  <div class="col-6 text-center rt-mb-28">
                    <div class="borwser-img rt-mb-16">
                      <img
                        src="assets/images/all-img/safari.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>

                    <div class="body-font-4 text-black font-semibold rt-mb-4">
                      Apple Safari
                    </div>
                    <div class="body-font-4 text-gray">7% User</div>
                  </div>
                  <div class="col-6 text-center rt-mb-28">
                    <div class="borwser-img rt-mb-16">
                      <img
                        src="assets/images/all-img/opera.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>
                    <div class="body-font-4 text-black font-semibold rt-mb-4">
                      Opera
                    </div>
                    <div class="body-font-4 text-gray">3% User</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-only-6 col-only-xs-12">
            <div class="card">
              <div class="d-flex justify-content-between card-header">
                <div>User Location</div>
                <div class="select-box select-header">
                  <select class="custom-select sources" title="Today">
                    <option>Yestarday</option>
                    <option>This Week</option>
                    <option>This Month</option>
                    <option>This Year</option>
                  </select>
                </div>
              </div>
              <div class="card-body">
                <div id="world-map" class="rt-mb-48"></div>
                <div class="row">
                  <div class="col-md-4 rt-md-10">
                    <div class="rt-mb-15">
                      <img
                        src="assets/images/svg/usa-flag.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>
                    <div class="text-gray-900 body-font-3 font-medium rt-mb-4">
                      United State (USA)
                    </div>
                    <div class="text-gray body-font-4">
                      54% . 5,761,687 Users
                    </div>
                  </div>
                  <div class="col-md-4 rt-md-10">
                    <div class="rt-mb-15">
                      <img
                        src="assets/images/svg/china-flag.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>
                    <div class="text-gray-900 body-font-3 font-medium rt-mb-4">
                      China
                    </div>
                    <div class="text-gray body-font-4">
                      54% . 5,761,687 Users
                    </div>
                  </div>
                  <div class="col-md-4 rt-md-10">
                    <div class="rt-mb-15">
                      <img
                        src="assets/images/svg/russia-flag.svg"
                        alt=""
                        draggable="false"
                      />
                    </div>
                    <div class="text-gray-900 body-font-3 font-medium rt-mb-4">
                      Russia
                    </div>
                    <div class="text-gray body-font-4">
                      54% . 5,761,687 Users
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-only-4 col-only-xs-12 col-only-md-12">
            <div class="card">
              <div
                class="d-flex justify-content-between flex-sm-row flex-column card-header"
              >
                <div>Devices Overview</div>
              </div>
              <div class="card-body pb-0">
                <div class="row">
                  {% include "../templates/components/device-list.html" %}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col col-only-3 col-only-md-6 col-only-xs-12">
            <div class="card">
              <div class="d-flex justify-content-between card-header border-0">
                <div>Social Media Traffic</div>
                <div class="select-box select-header">
                  <select class="custom-select sources" title="Today">
                    <option>Yestarday</option>
                    <option>This Week</option>
                    <option>This Month</option>
                    <option>This Year</option>
                  </select>
                </div>
              </div>
              <div class="card-body p-0">
                <div class="table-responsive">
                  <table class="table info-table mb-0">
                    <thead>
                      <tr>
                        <th colspan="2">Network</th>
                        <th>Visitors</th>
                        <th>Followers</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% set items = [ { title: 'Facebook', icon: 'fb.svg',
                      visitors: '5,761,687', followers: '68,412' }, { title:
                      'Twitter', icon: 'tw.svg', visitors: '5,761,687',
                      followers: '68,412' }, { title: 'Linkedin', icon:
                      'lin.svg', visitors: '5,761,687', followers: '68,412' }, {
                      title: 'Instagram', icon: 'ins.svg', visitors:
                      '5,761,687', followers: '68,412' }, { title: 'Dribbble',
                      icon: 'dr.svg', visitors: '5,761,687', followers: '68,412'
                      }, { title: 'Behance', icon: 'be.svg', visitors:
                      '5,761,687', followers: '68,412' }, { title: 'Pinterest',
                      icon: 'pin.svg', visitors: '5,761,687', followers:
                      '68,412' } ] %} {%for item in items%}
                      <tr>
                        <td colspan="2">
                          <div class="rt-single-icon-box rt-align-center">
                            <div class="icon-thumb rt-mr-8">
                              <img
                                src="assets/images/svg/social/{{item.icon}}"
                                alt=""
                              />
                            </div>
                            <div
                              class="iconbox-content text-gray-900 body-font-4 font-medium"
                            >
                              {{item.title}}
                            </div>
                          </div>
                        </td>
                        <td class="body-font-4 text-gray-700">
                          {{item.visitors}}
                        </td>
                        <td class="body-font-4 text-gray-700">
                          {{item.followers}}
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-only-4 col-only-xs-12 col-only-md-6">
            <div class="card">
              <div class="card-header">Calendar</div>
              <div class="card-body body-calendar">
                <div class="date-picker-calender rt-pt-10"></div>
              </div>
            </div>
          </div>
          <div class="col col-only-5 col-only-md-12">
            <div class="card">
              <div class="card-header">Operating System</div>
              <div class="operating-system-wrap">
                <div class="operating-system-item">
                  <div class="operating-system-thumb">
                    <img src="assets/images/svg/windows.svg" alt="" />
                  </div>
                  <div class="operating-system-data">
                    <a href="#">Computer & Laptop</a>
                    <h4>Windows</h4>
                    <p>57% • 68,412 Users</p>
                  </div>
                </div>
                <div class="operating-system-item">
                  <div class="operating-system-thumb">
                    <img src="assets/images/svg/MacOS.svg" alt="" />
                  </div>
                  <div class="operating-system-data">
                    <a href="#">Computer & Laptop</a>
                    <h4>macOS</h4>
                    <p>57% • 68,412 Users</p>
                  </div>
                </div>
                <div class="operating-system-item">
                  <div class="operating-system-thumb">
                    <img src="assets/images/svg/iOS.svg" alt="" />
                  </div>
                  <div class="operating-system-data">
                    <a href="#">Mobile & Tablet</a>
                    <h4>iOS</h4>
                    <p>57% • 68,412 Users</p>
                  </div>
                </div>
                <div class="operating-system-item">
                  <div class="operating-system-thumb">
                    <img src="assets/images/svg/Android.svg" alt="" />
                  </div>
                  <div class="operating-system-data">
                    <a href="#">Mobile & Tablet</a>
                    <h4>Android</h4>
                    <p>57% • 68,412 Users</p>
                  </div>
                </div>
                <div class="operating-system-item">
                  <div class="operating-system-thumb">
                    <img src="assets/images/svg/Ubuntu.svg" alt="" />
                  </div>
                  <div class="operating-system-data">
                    <a href="#">Computer & Laptop</a>
                    <h4>Ubuntu</h4>
                    <p>57% • 68,412 Users</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% include "../templates/layout/header-footer/footer.html" %}
      </div>
    </div>
  </div>
</main>

{% endblock %}