From 4f79580501ce64eea550c908cf5fd2b715fe45e1 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Wed, 5 Jul 2023 11:54:09 -0500
Subject: [PATCH] added popup review, question, and share

---
 ecommerce/fashion_website/pages/page.css  | 111 +++++++++++++++++++++-
 ecommerce/fashion_website/pages/page.html |  82 +++++++++++++++-
 2 files changed, 188 insertions(+), 5 deletions(-)

diff --git a/ecommerce/fashion_website/pages/page.css b/ecommerce/fashion_website/pages/page.css
index 2343244..a00d63d 100644
--- a/ecommerce/fashion_website/pages/page.css
+++ b/ecommerce/fashion_website/pages/page.css
@@ -934,8 +934,115 @@ form :where(input, textarea, select)::placeholder{
 .inner-footer .list-block .company-address:hover p{
     color: var(--dark-color);
 }
-
-
+/*--------- popup --------*/
+.data-popup{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    pointer-events: none;
+}
+.data-popup .wrap{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+.data-popup .data-content{
+    position: relative;
+    background-color: var(--white-color);
+    width: var(--data-width, 400px);
+    padding: 40px 20px;
+    max-width: calc(100vw -50px);
+    max-height: calc(100vh -60px);
+    border-radius: 5px;
+    overflow-y: auto;
+    pointer-events: auto;
+}
+.data-popup .close-trigger, .data-popup .form span{
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 40px;
+    align-items: center;
+}
+.data-popup .form{
+    position: relative;
+}
+.data-popup label{
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 10px;
+    display: block;
+}
+.data-popup .form input{
+    background-color: lightgrey;
+    color: var(--dark-color);
+    padding: 5px 30px 5px 10px;
+    border: none;
+    font-size: 14px;
+}
+.data-popup .form span{
+    top: auto;
+    bottom: 0;
+    right: 10px;
+    cursor: pointer;
+}
+.data-popup .form span:hover{
+    color: gray;
+}
+.data-popup .media-share{
+    margin-top: 20px;
+}
+.data-popup form>div{
+    margin-top: 20px;
+}
+.data-popup form input, textarea{
+    border-color: var(--main-color);
+}
+form .button button{
+    cursor: pointer;
+}
+form .button .secondary-btn{
+    border-radius: 0;
+}
+.data-popup h3, form .button{
+    text-align: center;
+}
+.data_review .data-content{
+    --data-width: 500px;
+}
+.data_review .dotgrid .wrapper{
+    --gutter: 10px;
+}
+.data_review .stars input{
+    display: none;
+}
+.data_review .stars > input:checked ~ label{
+    color: var(--based-color);
+}
+.data_review .stars label{
+    font-size: 16px;
+    margin: 0;
+    cursor: pointer;
+}
+.data_review :where(.rating, .stars){
+    display: flex;
+    gap: 5px;
+}
+.data_review .stars{
+    flex-direction: row-reverse;
+}
+.data-popup{
+    display: none;
+    animation: var(--fade);
+}
+.data-popup.active{
+    display: block;
+}
 
 
 
diff --git a/ecommerce/fashion_website/pages/page.html b/ecommerce/fashion_website/pages/page.html
index b61b108..a32db95 100644
--- a/ecommerce/fashion_website/pages/page.html
+++ b/ecommerce/fashion_website/pages/page.html
@@ -307,8 +307,8 @@
                                         <div class="product-control list-inline">
                                             <ul>
                                                 <li><a href=""><i class='bx bx-heart' ></i><span>Add to List</span></a></li>
-                                                <li><a href=""><i class='bx bx-share' ></i><span>Share</span></a></li>
-                                                <li><a href=""><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
+                                                <li><a href="#0" trigger-button data-target="data-share"><i class='bx bx-share' ></i><span>Share</span></a></li>
+                                                <li><a href="#0" trigger-button data-target="data-question"><i class='bx bx-help-circle' ></i><span>Help</span></a></li>
                                             </ul>
                                         </div>
                                         <div class="shipping">
@@ -375,7 +375,7 @@
                                                 <span>2 reviews</span>
                                             </div>
                                             <div class="button">
-                                                <a href="" class="primary-btn">Write a Review</a>
+                                                <a href="#0" class="primary-btn" trigger-button data-target="data-review">Write a Review</a>
                                             </div>
                                         </div>
                                         <div class="body-review">
@@ -675,6 +675,82 @@
         </div>
     </div>
 
+    <div id="data-share" class="data-popup data_share">
+        <div class="wrap">
+            <div class="data-content">
+                <a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
+                <div class="form">
+                    <label>Copy link</label>
+                    <input type="text" disabled value="https://www.youtube.com/watch?v=FMgraHfrw_o">
+                    <span><i class='bx bx-copy' ></i></span>
+                </div>
+                <div class="media-share list-inline">
+                    <label>Share</label>
+                    <ul>
+                        <lu><a href=""><i class='bx bxl-instagram' ></i></a></lu>
+                        <lu><a href=""><i class='bx bxl-twitter' ></i></a></lu>
+                        <lu><a href=""><i class='bx bxl-pinterest' ></i></a></lu>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="data-question" class="data-popup data_question">
+        <div class="wrap">
+            <div class="data-content">
+                <a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
+                <h3>Question</h3>
+                <form action="">
+                    <div><input type="text" placeholder="Name"></div>
+                    <div><input type="text" placeholder="Email"></div>
+                    <div><textarea placeholder="Leave us your question(s)" cols="30" rows="4"></textarea></div>
+                    <div class="button">
+                        <button type="submit" class="secondary-btn">Send</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <div id="data-review" class="data-popup data_review">
+        <div class="wrap">
+            <div class="data-content">
+                <a href="#0" class="close-trigger" close-button><i class='bx bx-x'></i></a>
+                <h3>Leave a Review</h3>
+                <form action="">
+                    <div class="dotgrid">
+                        <div class="wrapper">
+                            <div><input type="text" placeholder="Name"></div>
+                            <div><input type="text" placeholder="Email"></div>
+                        </div>
+                    </div>
+                    <div class="rating">
+                        <span>Rating: </span>
+                        <div class="stars">
+                            <input type="radio" name="rating" id="star5">
+                            <label for="star5"><i class='bx bxs-star' ></i></label>
+                            <input type="radio" name="rating" id="star4">
+                            <label for="star4"><i class='bx bxs-star' ></i></label>
+                            <input type="radio" name="rating" id="star3">
+                            <label for="star3"><i class='bx bxs-star' ></i></label>
+                            <input type="radio" name="rating" id="star2">
+                            <label for="star2"><i class='bx bxs-star' ></i></label>
+                            <input type="radio" name="rating" id="star1">
+                            <label for="star1"><i class='bx bxs-star' ></i></label>
+                        </div>
+                    </div>
+                    <div><input type="text" placeholder="Review title"></div>
+                    <div><textarea placeholder="Your review" cols="30" rows="4"></textarea></div>
+                    <div class="button">
+                        <button type="submit" class="secondary-btn">Send</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+
     <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
     <script src="page.js"></script>
 </body>