vapeCommerce/index.php at main · jblms00/vapeCommerce · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<?php
session_start();
include("actions/database-connection.php");
include("actions/check-login.php");
?>
<!doctype html>
<html lang="en">

<head>
  <?php include("includes/header.php"); ?>
</head>

<body>
  <div class="main-container">
    <?php include("includes/components/navbar.php"); ?>
    <div id="carouselExampleCaptions" class="carousel carousel-fade" data-bs-ride="carsousel">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
          aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
          aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
          aria-label="Slide 3"></button>
      </div>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="src/img/slide1-3.webp" class="d-block w-100 img-fluid object-fit-cover" alt="img"
            style="height: 600px;">
          <div class="carousel-caption d-none d-md-block cp1">
            <h1 class="animation-left">Experience Vaping Excellence</h1>
            <p class="animation-right">The fusion of stunning design, the best flavour and power.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="src/img/slide1-1.webp" class="d-block w-100 img-fluid object-fit-cover" alt="img"
            style="height: 600px;">
          <div class="carousel-caption d-none d-md-block cp2">
            <h1 class="animation-right">Discover the Art of Clouds</h1>
            <p class="animation-left">The fusion of stunning design, the best flavour and power.</p>
          </div>
        </div>
        <div class="carousel-item">
          <img src="src/img/slide1-2.webp" class="d-block w-100 img-fluid object-fit-cover" alt="img"
            style="height: 600px;">
          <div class="carousel-caption d-none d-md-block cp3">
            <h1 class="animation-downwards">Explore the World of Vaping</h1>
            <p class="animation-upwards">The fusion of stunning design, the best flavour and power.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="card-wrapper" id="products">
      <h3 class="animation-downwards">Our Products</h3>
      <div class="row">
        <div class="col">
          <div class="cards-container animation-left" id="displayProducts"></div>
        </div>
      </div>
    </div>
    <div class="cards-container sample-products">
      <div class="card card-1">
        <div class="card-title animation-left">Box Vape System SMOK G-PRI</div>
      </div>
      <div class="card card-2">
        <div class="card-title animation-downwards">E-Liquid Wild Berry AQUAVAPE</div>
      </div>
      <div class="card card-3">
        <div class="card-title animation-right">Accessories Vape TANK ASPIR</div>
      </div>
    </div>
    <div class="services container">
      <div class="row">
        <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
          <div class="policy-item animation-left">
            <div class="pl-icon"><i class="fa-solid fs-1 fa-truck-fast"></i></div>
            <div class="heading-policy">
              <div class="title-policy">Fast Delivery</div>
              <div class="desc-policy">For all orders $50 or more</div>
            </div>
          </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
          <div class="policy-item animation-left">
            <div class="pl-icon"><i class="fa-solid fs-1 fa-hand-holding-hand"></i></div>
            <div class="heading-policy">
              <div class="title-policy">Product Warranty</div>
              <div class="desc-policy">Your Satisfaction is Our Priority</div>
            </div>
          </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
          <div class="policy-item animation-right">
            <div class="pl-icon"><i class="fa-solid fs-1 fa-headset"></i></div>
            <div class="heading-policy">
              <div class="title-policy">Top-notch support</div>
              <div class="desc-policy">24/7 support for customers</div>
            </div>
          </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12">
          <div class="policy-item animation-right">
            <div class="pl-icon"><i class="fa-solid fs-1 fa-arrow-rotate-left"></i></div>
            <div class="heading-policy">
              <div class="title-policy">Return & Refund</div>
              <div class="desc-policy">Easy Returns & Refundse</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-wrapper">
      <div class="row spacing-0">
        <div class="col p-0">
          <img src="src/img/banner1-4.webp" class="animation-left" height="100%" width="100%" alt="img">
        </div>
        <div class="col p-0">
          <div class="content-img animation-right">
            <div class="img-21 nov-sh-img-2">
              <div class="responsive-img">
                <img src="src/img/banner1-6.webp" class="img-fluid object-fit-contain" alt="img">
              </div>
            </div>
            <div class="content-txt">
              <h3>IGNITE YOUR SENSES</h3>
            </div>
          </div>
          <div class="content-img animation-right">
            <div class="content-txt bg-dark">
              <h3 class="text-light">ELEVATE YOUR EXPERIENCE</h3>
            </div>
            <div class="img-21 nov-sh-img-2">
              <div class="responsive-img">
                <img src="src/img/banner1-5.webp" class="img-fluid object-fit-contain" alt="img">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-gallery">
      <h3 class="mb-5 animation-downwards"><span class="fw-normal">DailyPapz</span> Gallery</h3>
      <div id="imgGallery" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner animation-right">
          <div class="carousel-item active">
            <div class="img-container">
              <img src="src/img/galleryindex/1.jpg" alt="img">
              <img src="src/img/galleryindex/2.jpg" alt="img">
              <img src="src/img/galleryindex/406563128_122105737076130408_6539820251305659857_n.jpg" alt="img">
              <img src="src/img/galleryindex/414144805_122115877340130408_1912346005211406441_n.jpg" alt="img">
              <img src="src/img/galleryindex/414688882_122117268782130408_3886105022239026479_n.jpg" alt="img">
            </div>
          </div>
          <div class="carousel-item">
            <div class="img-container">
              <img src="src/img/galleryindex/415028710_122118598736130408_5805436711014273251_n.jpg" alt="img">
              <img src="src/img/galleryindex/415518148_122117270714130408_5937288406006469291_n.jpg" alt="img">
              <img src="src/img/galleryindex/417419597_122118597752130408_3501620799771271036_n.jpg" alt="img">
              <img src="src/img/galleryindex/419734281_122120806772130408_5797157809816078676_n.jpg" alt="img">
              <img src="src/img/galleryindex/420358498_122121841982130408_8531993024105170945_n.jpg" alt="img">
            </div>
          </div>
          <div class="carousel-item">
            <div class="img-container">
              <img src="src/img/galleryindex/420499925_122122344224130408_260967082519269034_n.jpg" alt="img">
              <img src="src/img/galleryindex/421415277_122122945724130408_706103635450021818_n.jpg" alt="img">
              <img src="src/img/galleryindex/422156979_122123188748130408_26593263024825209_n.jpg" alt="img">
              <img src="src/img/galleryindex/424852318_122125020614130408_8588919132494047202_n.jpg" alt="img">
              <img src="src/img/galleryindex/427690085_122128574486130408_5715048906534849267_n.jpg" alt="img">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card-wrapper">
      <h3 class="animation-downwards">Our Accessories</h3>
      <div class="row">
        <div class="col">
          <div class="cards-container animation-left" id="displayAccessories"></div>
        </div>
      </div>
    </div>
    <?php include("includes/components/footer.php"); ?>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="modalProductDescription" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
      <div class="modal-content">
        <div class="modal-header pb-0">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body"></div>
      </div>
    </div>
  </div>
  <?php include("includes/components/default-components.php"); ?>
  <?php include("includes/components/modal-registration.php"); ?>
  <?php include("includes/scripts.php"); ?>
  <script src="src/js/display-products-script.js"></script>
</body>

</html>