select anchor update

html/make_video2.html

@@ -294,7 +294,7 @@
                         </fieldset>
                         <fieldset>
                             <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            
-                            <select id="avatar" class='avatar'>
+                            <!-- <select id="avatar" class='avatar'>
                                 <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>請選擇人物</option>              
                                 <option value="7">Peggy</option>
                                 <option value="8">Stacy</option>
@@ -306,8 +306,8 @@
                                 <option value="17">Kristina</option>
                                 <option value="18">Paula</option>
                                 <option value="19">Amelia</option>
-                            </select>
-                            <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
+                            </select> -->
+                            <!-- <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
                                 <div class="card item col" data-avatar="Peggy" data-img="peggy">
                                     <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
                                     <div class="card-body">
@@ -368,6 +368,110 @@
                                       <h5 class="card-title">Amelia</h5>
                                     </div>
                                 </div>
+                            </div> -->
+                            <div class="d-flex row row-cols-2 row-cols-lg-6 avatar-cards" id="avatar-cards">
+                                <div class="card item col avatar-img" data-avatar="Peggy" data-img="peggy">
+                                    <input class="avatar-checkbox" type="checkbox" id="peggy" name="AvatarVal" value="7">
+                                    <label for="peggy">
+                                        <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Peggy</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card item col avatar-img" data-avatar="Stacy" data-img="stacy">
+                                    <input class="avatar-checkbox" type="checkbox" id="Stacy" name="AvatarVal" value="8">
+                                    <label for="Stacy">
+                                        <div class="imgfr"><img src="static/img/stacy.webp" class="card-img-top"
+                                                alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Stacy</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card item col" data-avatar="Summer韓小夏" data-img="summer">
+                                    <input class="avatar-checkbox" type="checkbox" id="Summer韓小夏" name="AvatarVal" value="11">
+                                    <label for="Summer韓小夏">
+                                        <div class="imgfr"><img src="static/img/summer.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Summer韓小夏</h5>
+                                        </div>
+                                    </label>
+                                </div>
+
+                                <div class="card item col" data-avatar="Jocelyn" data-img="Jocelyn">
+                                    <input class="avatar-checkbox" type="checkbox" id="Jocelyn" name="AvatarVal" value="12">
+                                   <label for="Jocelyn">
+                                       <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top"
+                                               alt="..."></div>
+                                       <div class="card-body">
+                                           <h5 class="card-title">Jocelyn</h5>
+                                       </div>
+                                   </label>
+                                </div>
+                                <div class="card item col" data-avatar="Angela" data-img="Angela">
+                                    <input class="avatar-checkbox" type="checkbox" id="Angela" name="AvatarVal" value="13">
+                                    <label for="Angela">
+                                        <div class="imgfr"><img src="static/img/Angela.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Angela</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Isabela" data-img="Isabela">
+                                    <input class="avatar-checkbox" type="checkbox" id="Isabela" name="AvatarVal" value="15">
+                                    <label for="Isabela">
+                                        <div class="imgfr"><img src="static/img/Isabela.webp" class="card-img-top"
+                                                alt="..."></div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Isabela</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Sofia" data-img="Sofia">
+                                    <input class="avatar-checkbox" type="checkbox" id="Sofia" name="AvatarVal" value="16">
+                                    <label for="Sofia">
+                                        <div class="imgfr"><img src="static/img/Sofia.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Sofia</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Kristina" data-img="Kristina">
+                                    <input class="avatar-checkbox" type="checkbox" id="Kristina" name="AvatarVal" value="17">
+                                    <label for="Kristina">
+                                        <div class="imgfr"><img src="static/img/Kristina.webp" class="card-img-top"
+                                                alt="..."></div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Kristina</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Paula" data-img="Paula">
+                                    <input class="avatar-checkbox" type="checkbox" id="Paula" name="AvatarVal" value="18">
+                                    <label for="Paula">
+                                        <div class="imgfr"><img src="static/img/Paula.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Paula</h5>
+                                        </div>
+                                    </label>
+                                </div>
+                                <div class="card col" data-avatar="Amelia" data-img="Amelia">
+                                    <input class="avatar-checkbox" type="checkbox" id="Amelia" name="AvatarVal" value="19">
+                                    <label for="Amelia">
+                                        <div class="imgfr"><img src="static/img/Amelia.webp" class="card-img-top" alt="...">
+                                        </div>
+                                        <div class="card-body">
+                                            <h5 class="card-title">Amelia</h5>
+                                        </div>
+                                    </label>
+                                </div>
                             </div>
                         </fieldset>
                         <fieldset id='imgSrc' style="box-shadow: none;-webkit-box-shadow: none; padding: 0;">

html/static/script_util2.js

@@ -133,16 +133,16 @@ var modalTitle = document.querySelector("#avatarmega .modal-title");
 var avatarSelector = document.getElementById("avatar");
 
 
-avatarSelector.addEventListener('change', avatarChange);
+// avatarSelector.addEventListener('change', avatarChange);
 
-function addCardListener() {
-  for (let i = 0; i < card.length; i++) {
-    card[i].addEventListener('click', openavatarModel);
-  }
-}
+// function addCardListener() {
+//   for (let i = 0; i < card.length; i++) {
+//     card[i].addEventListener('click', openavatarModel);
+//   }
+// }
 
-addCardListener()
-avatarChange()
+// addCardListener()
+// avatarChange()
 
 function avatarChange() {
   var value = avatarSelector.options[avatarSelector.selectedIndex].text;
@@ -154,12 +154,25 @@ function avatarChange() {
   }
 }
 
-function openavatarModel() {
-  console.log(this.dataset.img);
-  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
-  modalTitle.textContent = `${this.dataset.avatar}`;
-  avatarModal.show();
-}
+$('input[name=AvatarVal').on('change', function () {
+	$('input[name=AvatarVal]').not(this).prop('checked', false);
+  $('input[name=AvatarVal]').not(this).parent().removeClass('active');
+});
+
+$(document).on("click", ".avatar-checkbox", function (event) {
+
+  $(this).parent().toggleClass('active'); 
+
+
+});
+
+
+// function openavatarModel() {
+//   console.log(this.dataset.img);
+//   modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
+//   modalTitle.textContent = `${this.dataset.avatar}`;
+//   avatarModal.show();
+// }
 // Drafts
 function getDraft() {
   JsLoadingOverlay.show({
@@ -338,7 +351,26 @@ $(".next").click(function () {
   setTimeout(function () {
     button.removeAttribute('disabled')
   }, 10000);
-  avatar = $('.avatar').val();
+
+  var Avatar_value 
+  var Avatar_value2
+  $('input[name="AvatarVal"]:checked').each(function(){//遍歷每一個名字為interest的核取方塊，其中選中的執行函式  
+    Avatar_value=$(this).val();//將選中的值新增到陣列chk_value中  
+  });
+  Avatar_value2=parseInt(Avatar_value);
+  
+  var avatar= Avatar_value2
+  console.log(avatar);
+
+  if(isNaN(avatar)){
+    Swal.fire({
+      // title: title,
+       icon: 'error',
+       text: '請選擇主播',
+       confirmButtonColor: '#3085d6',
+     });
+  }
+  // avatar = $('.avatar').val();
   name_title = $('.title_new').val();
   txtARR = [];
   imgARR = [];

html/static/scss/style.css

@@ -903,6 +903,10 @@ body {
   font-family: "Lato", sans-serif;
 }
 
+.avatar-checkbox {
+  display: none;
+}
+
 #mySidenav::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   border-radius: 10px;

html/static/scss/style.scss

@@ -850,6 +850,9 @@ footer {
 body {
 	font-family: "Lato", sans-serif;
 }
+.avatar-checkbox{
+	display: none;
+}
 
 #mySidenav::-webkit-scrollbar-track {
 	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);