Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
choozmo
/
AI_Anchor_Demo
2
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Dal: master
Dallar Biçim İmleri
AI_Anchor_Demo
/
make_video_eng.html

make_video_eng.html 41 KB
Kalıcı Bağlantı Geçmiş Ham

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-TW">
    3. 

  3. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge, Chrome=1">
    8. 

  8.     <meta http-equiv="Cache-Control" content="no-cache">
    9. 

  9.     <title>AI Spokesgirl</title>
    10. 

  10.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    11. 

  11.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    12. 

  12.       crossorigin="anonymous">
    13. 

  13.     <link rel="stylesheet"
    14. 

  14.       href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
    15. 

  15.       crossorigin="anonymous">
    16. 

  16.     <link rel="preconnect" href="https://fonts.googleapis.com">
    17. 

  17.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    18. 

  18.     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> 
    19. 

  19.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    20. 

  20.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
    21. 

  21.     <link rel="stylesheet" href="./styleMV.css">
    22. 

  22.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    23. 

  23.     <title>AI Spokesgirl</title>
    24. 

  24.     <style>
    25. 

  25.       .input-sec {
    26. 

  26.         box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    27. 

  27.         -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    28. 

  28.         position: relative;
    29. 

  29.       }
    30. 

  30.       .upload-cta.box-active {
    31. 

  31.         height: 80px;
    32. 

  32.         width: 80px;
    33. 

  33.         background-size: cover !important;
    34. 

  34.         background-repeat: no-repeat;
    35. 

  35.         border-radius: 1rem;
    36. 

  36.       }
    37. 

  37.       #msform .img-inputTest {
    38. 

  38.         text-align: end;
    39. 

  39.       }
    40. 

  40.     </style>
    41. 

  41. </head>
    42. 

  42. 

  43. <body>
    44. 

  44.     <!-- ================================================================= -->
    45. 

  45.     <!-- navbar -->
    46. 

  46.     <nav class="navbar navbar-expand-lg navbar-light">
    47. 

  47.         <div class="container-fluid">
    48. 

  48.             <a class="navbar-brand" href="index.html">AI Spokesgirl</a>
    49. 

  49.             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
    50. 

  50.                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
    51. 

  51.                 aria-label="Toggle navigation">
    52. 

  52.                 <span class="navbar-toggler-icon"></span>
    53. 

  53.             </button>
    54. 

  54.             <div class="collapse navbar-collapse" id="navbarSupportedContent">
    55. 

  55.                 <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
    56. 

  56.                       <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto">
    57. 

  57.                         <i class="fas fa-book-open me-2"></i>
    58. 

  58.                         <lan set-lan="html:usage_intro">使用說明</lan>
    59. 

  59.                       </li>
    60. 

  60.                       <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
    61. 

  61.                         <i class="fas fa-history me-2"></i>
    62. 

  62.                         <lan set-lan="html:history">歷史紀錄</lan>
    63. 

  63.                       </li>
    64. 

  64.                    <!--  <li class="nav-item">
    65. 

  65.                         <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
    66. 

  66.                     </li>
    67. 

  67.                     <li class="nav-item dropdown">
    68. 

  68.                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    69. 

  69.                             中/En
    70. 

  70.                         </a>
    71. 

  71.                         <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    72. 

  72.                             <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
    73. 

  73.                             <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
    74. 

  74.                         </ul>
    75. 

  75.                     </li>
    76. 

  76.                     <li class="nav-item">
    77. 

  77.                         <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
    78. 

  78.                     </li>
    79. 

  79.                     <li class="nav-item">
    80. 

  80.                         <a class="nav-link btn-userProfile" aria-current="page" href="./user_profile2.html" set-lan="html:user_profile">會員資料</a>
    81. 

  81.                     </li>
    82. 

  82.                     <li class="nav-item">
    83. 

  83.                         <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
    84. 

  84.                     </li>-->
    85. 

  85.                 </ul> 
    86. 

  86.             </div>
    87. 

  87.         </div>
    88. 

  88.     </nav>
    89. 

  89.     <!-- ================================================================= -->
    90. 

  90. 

  91. 

  92.     <!-- ================================================================= -->
    93. 

  93.     <!-- content -->
    94. 

  94.     <div class="container-fluid px-0">
    95. 

  95.         <div class="container-fluid">
    96. 

  96.             <!-- <div id="mySidenav" class="sidenav">
    97. 

  97.                 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    98. 

  98.                 <h2 class="go_title" href="index.html"><a class="nav-link active" aria-current="page" href="index.html">AI Spokesgirl</a></h2>
    99. 

  99.                 <ul class="nav-list">
    100. 

  100.                     <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i class="fas fa-book-open me-2"></i><lan set-lan="html:usage_intro">使用說明</lan></li>
    101. 

  101.                     <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()"><i class="fas fa-history me-2"></i><lan set-lan="html:history">歷史紀錄</lan></li>
    102. 

  102.                 </ul>
    103. 

  103.                 <p class="right-text text-white d-inline-block">Choozmo All Rights Reserved</p>
    104. 

  104.             </div> -->
    105. 

  105.             <div id="mySidenav" class="sidenav">
    106. 

  106.                 <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
    107. 

  107.                 <div class="sidenav-content">
    108. 

  108.                 <div class="text-start mt-3">
    109. 

  109.                     <h2 class="fw-bold ps-0" href="index.html"><a class="nav-link active ps-1" aria-current="page" href="index.html">AI Spokesgirl</a></h2>
    110. 

  110.                 </div>
    111. 

  111.                 <div class="userName"></div> 
    112. 

  112.                 <img class="user img-fluid rounded-circle" src="img/userimg.png" alt="">
    113. 

  113.                 <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">Create something today!</p>
    114. 

  114.                 <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
    115. 

  115.                     <a class="nav-link btn-gocreate text-white col btn-makev" aria-current="page" href="./make_video_eng.html">Make Video</a>
    116. 

  116.                     <!-- <a class="nav-link btn-gocreate text-white col-6 btn-makelong" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a> -->
    117. 

  117.                 </div>
    118. 

  118.                 <!-- <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
    119. 

  119.                     <a class="nav-link btn-gocreate text-white col-6 btn-makeppt" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
    120. 

  120.                     <a class="nav-link btn-gocreate text-white col-6 btn-makeen" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">純英文影片製作</a>
    121. 

  121.                 </div> -->
    122. 

  122.                 <hr>
    123. 

  123.                 <ul class="nav-list ps-0">
    124. 

  124.                     <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
    125. 

  125.                             class="fas fa-book-open me-2"></i>
    126. 

  126.                         <lan set-lan="html:usage_intro">Usage Introduction</lan>
    127. 

  127.                     </li>
    128. 

  128.                     <!-- <a style="text-decoration: none;color:white;" href="./user_profile2.html">
    129. 

  129.                         <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
    130. 

  130.                             <i class="fas fa-user me-2"></i>
    131. 

  131.                            <lan set-lan="html:user_profile">會員資料</lan>
    132. 

  132.                         </li>
    133. 

  133.                     </a> -->
    134. 

  134.                     <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
    135. 

  135.                         <i class="fas fa-history me-2"></i>
    136. 

  136.                         <lan set-lan="html:history">History</lan>
    137. 

  137.                     </li>
    138. 

  138.                 </ul>
    139. 

  139.                 </div>
    140. 

  140.                 <div class="right-text">
    141. 

  141.                     <a target="_blank" href="http://www.choozmo.com/">| 官網 |</a>
    142. 

  142.                     <a target="_blank" href="https://www.linkedin.com/company/choozmo/mycompany/"><img
    143. 

  143.                             style="width: 20px;" src="img/linkedin-logo-copy.png" alt=""></a>
    144. 

  144.                     <a target="_blank" href="https://www.facebook.com/choozmo/"><img style="width: 20px;"
    145. 

  145.                             src="img/facebook_logos_PNG19753.png" alt=""></a>
    146. 

  146.                     <a target="_blank" href="https://www.instagram.com/choozmo_cmm/"><img style="width: 20px;"
    147. 

  147.                             src="img/IG.png" alt=""></a>
    148. 

  148.                     <a target="_blank" href="https://line.me/R/ti/p/@choozmo?from=page"><img style="width: 20px;"
    149. 

  149.                             src="img/LINE_logo.svg.png" alt=""></a>
    150. 

  150.                     <a target="_blank" href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img
    151. 

  151.                             style="width: 20px;" src="img/youtube.png" alt=""></a>
    152. 

  152.                     <a target="_blank" href="https://twitter.com/ai_cmm"><img style="width: 20px;"
    153. 

  153.                             src="img/twitter.png" alt=""></a>
    154. 

  154.                     <p class="Reserved text-white text-start mt-3 ps-2">Choozmo All Rights Reserved</p>
    155. 

  155.                 </div>
    156. 

  156.             </div>
    157. 

  157.             <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span> -->
    158. 

  158.             <div class="content ms-auto">
    159. 

  159.                 <form id="msform">
    160. 

  160.                     <div class="linker__box">
    161. 

  161.                         <p set-lan="html:preview_videos">Preview video</p>
    162. 

  162.                         <i class="fas fa-link copy"></i>
    163. 

  163.                         <a id='linker' style="display: none;" class="ms-2" set-lan="html:video_link">Video Link</a>
    164. 

  164.                     </div>
    165. 

  165.                     <!-- fieldsets -->
    166. 

  166.                     <fieldset>
    167. 

  167.                         <h3 class="fs-subtitle"><lan set-lan="html:video_title">Video Title</lan><img class="ms-1" src="img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題 The title of your video"></h3>            
    168. 

  168.                         <input id=title type="text" name='t1' class='title_new' value="" set-lan="placeholder:video_title" placeholder="Title" /> <br/>
    169. 

  169.                     </fieldset>
    170. 

  170.                     <fieldset>
    171. 

  171.                         <h3  class="fs-subtitle"><lan set-lan="html:choose_character">Choose Character</lan><img class="ms-1" src="img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            
    172. 

  172.                         <select id="avatar" class='avatar'>
    173. 

  173.                             <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>Choose Character</option>              
    174. 

  174.                             <option value="7">Peggy</option>
    175. 

  175.                             <option value="8">Stacy</option>
    176. 

  176.                             <option value="11">Summer韓小夏</option>
    177. 

  177.                             <option value="12">Jocelyn</option>
    178. 

  178.                             <option value="13">Angela</option>
    179. 

  179.                             <option value="15">Isabela</option>
    180. 

  180.                             <option value="16">Sofia</option>
    181. 

  181.                             <option value="17">Kristina</option>
    182. 

  182.                             <option value="18">Paula</option>
    183. 

  183.                         </select>
    184. 

  184.                         <div class="d-flex row row-cols-2 row-cols-lg-6">
    185. 

  185.                             <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Peggy" data-img="peggy">
    186. 

  186.                                 <div class="imgfr"><img src="img/peggy.webp" class="card-img-top" alt="..."></div>
    187. 

  187.                                 <div class="card-body">
    188. 

  188.                                     <h5 class="card-title">Peggy</h5>
    189. 

  189.                                 </div>
    190. 

  190.                             </div>
    191. 

  191.                             <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Stacy" data-img="stacy">
    192. 

  192.                                 <div class="imgfr"><img src="img/stacy.webp" class="card-img-top" alt="..."></div>
    193. 

  193.                                 <div class="card-body">
    194. 

  194.                                     <h5 class="card-title">Stacy</h5>
    195. 

  195.                                 </div>
    196. 

  196.                             </div>
    197. 

  197.                             <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Summer韓小夏" data-img="summer韓小夏">
    198. 

  198.                                 <div class="imgfr"><img src="img/summer韓小夏.webp" class="card-img-top" alt="..."></div>
    199. 

  199.                                 <div class="card-body">
    200. 

  200.                                     <h5 class="card-title">Summer</h5>
    201. 

  201.                                 </div>
    202. 

  202.                             </div>
    203. 

  203.                             <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Jocelyn" data-img="Jocelyn">
    204. 

  204.                                 <div class="imgfr"><img src="img/Jocelyn.webp" class="card-img-top" alt="..."></div>
    205. 

  205.                                 <div class="card-body">
    206. 

  206.                                     <h5 class="card-title">Jocelyn</h5>
    207. 

  207.                                 </div>
    208. 

  208.                             </div>
    209. 

  209.                             <div class="card item col-6 col-sm-4 col-md-3 col-lg-2" data-avatar="Angela" data-img="Angela">
    210. 

  210.                                 <div class="imgfr"><img src="img/Angela.webp" class="card-img-top" alt="..."></div>
    211. 

  211.                                 <div class="card-body">
    212. 

  212.                                     <h5 class="card-title">Angela</h5>
    213. 

  213.                                 </div>
    214. 

  214.                             </div>
    215. 

  215.                             <div class="card col" data-avatar="Isabela" data-img="Isabela">
    216. 

  216.                               <div class="imgfr"><img src="img/Isabela.webp" class="card-img-top" alt="..."></div>
    217. 

  217.                               <div class="card-body">
    218. 

  218.                                 <h5 class="card-title">Isabela</h5>
    219. 

  219.                               </div>
    220. 

  220.                             </div>
    221. 

  221.                             <div class="card col" data-avatar="Sofia" data-img="Sofia">
    222. 

  222.                                 <div class="imgfr"><img src="img/Sofia.webp" class="card-img-top" alt="..."></div>
    223. 

  223.                                 <div class="card-body">
    224. 

  224.                                   <h5 class="card-title">Sofia</h5>
    225. 

  225.                                 </div>
    226. 

  226.                             </div>
    227. 

  227.                             <div class="card col" data-avatar="Kristina" data-img="Kristina">
    228. 

  228.                                 <div class="imgfr"><img src="img/Kristina.webp" class="card-img-top" alt="..."></div>
    229. 

  229.                                 <div class="card-body">
    230. 

  230.                                   <h5 class="card-title">Kristina</h5>
    231. 

  231.                                 </div>
    232. 

  232.                             </div>
    233. 

  233.                             <div class="card col" data-avatar="Paula" data-img="Paula">
    234. 

  234.                                 <div class="imgfr"><img src="img/Paula.webp" class="card-img-top" alt="..."></div>
    235. 

  235.                                 <div class="card-body">
    236. 

  236.                                   <h5 class="card-title">Paula</h5>
    237. 

  237.                                 </div>
    238. 

  238.                             </div>
    239. 

  239.                         </div>
    240. 

  240.                     </fieldset>
    241. 

  241.                     <!-- <fieldset>
    242. 

  242.                       <h3 class="fs-subtitle">Lines</h3>
    243. 

  243.                       <div class="subtitle-inputs">
    244. 

  244.                         <input type="text" name="s1" placeholder="1" class="subsrc subsrc1">    
    245. 

  245.                       </div>
    246. 

  246.                       <span class="add">+</span>
    247. 

  247.                     </fieldset>
    248. 

  248.                     <fieldset id="Subline">
    249. 

  249.                       <h3 class="fs-subtitle">Subtitles</h3>
    250. 

  250.                       <div class="subline-inputs">
    251. 

  251.                                     
    252. 

  252.                       </div>
    253. 

  253.                       <span class="add-subline">+</span>
    254. 

  254.                     </fieldset> -->
    255. 

  255.                     
    256. 

  256.                     <fieldset id='imgSrc' style="box-shadow: none;">
    257. 

  257.                       <h3 class="fs-subtitle" style="display: inline-block;">
    258. 

  258.                         <lan set-lan="html:img_link">Your Content</lan>
    259. 

  259.                         <img class="ms-1" src="img/question.png" alt="" data-bs-toggle="tooltip"
    260. 

  260.                         data-bs-placement="right" title="Type in your content and images. Supported File Formats: png, jpg, mp4.">
    261. 

  261.                       </h3>
    262. 

  262.                       <br/>
    263. 

  263.                       <div class="img-inputTest mt-3 input_eng">
    264. 

  264.                         <!-- <div class="input-sec input-sec1 p-3 mb-3">
    265. 

  265.                           <input type="text" name="s1" placeholder="Subtitle" class="subsrc subsrc1">   
    266. 

  266.                           <input type="text" name="t1" class="txtsrc txtsrc1" placeholder="Line" style="width: 100%;">
    267. 

  267.                           <div class="img-box"> 
    268. 

  268.                             <input type="text" name="m1" class="imgsrc imgsrc1" placeholder="https://example.com/4VKBo9w.png">
    269. 

  269.                             <input id="img1" type="file" class="img_uploader img_up" style="display: none;">
    270. 

  270.                             <label for="img1" class="upload-btn" set-lan="html:upload_file">上傳圖片</label>
    271. 

  271.                           </div>
    272. 

  272.                         </div -->
    273. 

  273.                       </div>
    274. 

  274.                       <span class="addsec">+</span>
    275. 

  275.                       <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" value="Submit" />
    276. 

  276.                       <!-- <span class="draft-btn" data-bs-toggle="tooltip" data-bs-placement="right" title="儲存為草稿 Save as draft" set-lan="html:save_draft_btn">存為草稿</span> -->
    277. 

  277.                       <h3 style="display: none;" class="fs-subtitle"><lan set-lan="html:processing_progress">處理進度</lan></h3>
    278. 

  278.                       <div style="display: none;" id="myProgress">
    279. 

  279.                           <div style="display: none;" id="myBar">0%</div>
    280. 

  280.                       </div>
    281. 

  281.                   </fieldset>
    282. 

  282.                 </form>
    283. 

  283.                 <!-- <div style="width: 80%;margin: 0 auto;"><iframe src="http://www.choozmo.com:8168/ai_anchor_video/16250306886652043.mp4" frameborder="0" style="width: 100%;height: 400px;"></iframe></div> -->
    284. 

  284.             </div>
    285. 

  285.             
    286. 

  286.             <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
    287. 

  287.                 <div class="modal-dialog">
    288. 

  288.                     <div class="modal-content">
    289. 

  289.                     <div class="modal-header">
    290. 

  290.                         <h5 class="modal-title" id="staticBackdropLabel" set-lan="html:usage_intro">Usage Introduction</h5>
    291. 

  291.                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    292. 

  292.                     </div>
    293. 

  293.                     <div class="modal-body">
    294. 

  294.                         <div class="modal-terms">
    295. 

  295.                             <ol class="ps-0">
    296. 

  296.                               <li>1. Please Provide an Image Link Corresponding to a Line as a Collocation</li>
    297. 

  297.                               <li>2. Supported File Format:<stong class="strong">.png, jpg, .mp4</stong></li>
    298. 

  298.                               <li>3. After Clicking Submit, You Will Need To Wait For A Period Of Time For The Production Of The Video. Please Wait Patiently. You Can Check It At The Notification URL When The Production Is Completed.</li>
    299. 

  299.                             </ol>
    300. 

  300.                         </div>
    301. 

  301.                     </div>
    302. 

  302.                     </div>
    303. 

  303.                 </div>
    304. 

  304.             </div> 
    305. 

  305.             <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
    306. 

  306.                 <div class="modal-dialog modal-dialog-scrollable">
    307. 

  307.                     <div class="modal-content">
    308. 

  308.                         <div class="modal-header">
    309. 

  309.                         <h5 class="modal-title" id="staticBackdropLabel" set-lang="html:history">History</h5>
    310. 

  310.                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    311. 

  311.                         </div>
    312. 

  312.                         <div class="modal-body">
    313. 

  313.                             <div class="modal-terms">
    314. 

  314.                             <div class="loader"><img src="img/bx_loader.gif" alt=""></div>
    315. 

  315.                             <ol class="ps-0 historyList">
    316. 

  316.                             </ol>
    317. 

  317.                             </div>
    318. 

  318.                         </div>
    319. 

  319.                     </div>
    320. 

  320.                 </div>
    321. 

  321.             </div>
    322. 

  322.             <div class="modal" tabindex="-1"  id="avatarmega" aria-labelledby="history" aria-hidden="true">
    323. 

  323.                 <div class="modal-dialog modal-dialog-centered">
    324. 

  324.                     <div class="modal-content text-center">
    325. 

  325.                         <div class="modal-body">
    326. 

  326.                             <img class="modal-img" src="" alt="">
    327. 

  327.                             <h5 class="modal-title mt-2"></h5>
    328. 

  328.                             <button type="button" class="btn btn-secondary btn-dismiss" data-bs-dismiss="modal" set-lan="html:close">Close</button>
    329. 

  329.                         </div>
    330. 

  330.                     </div>
    331. 

  331.                 </div>
    332. 

  332.             </div>
    333. 

  333.         </div>
    334. 

  334.     </div>
    335. 

  335.     <!-- ================================================================= -->
    336. 

  336.     
    337. 

  337. 

  338.     <!-- ================================================================= -->
    339. 

  339.     <!-- footer -->
    340. 

  340.     <footer class="fixed-bottom text-center py-2">
    341. 

  341. 

  342.     </footer> 
    343. 

  343.     <!-- ================================================================= -->
    344. 

  344.   
    345. 

  345.     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    346. 

  346.     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
    347. 

  347.     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    348. 

  348.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
    349. 

  349.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
    350. 

  350.     <script>
    351. 

  351.       const card = document.getElementsByClassName('card');
    352. 

  352.       var client_id = Date.now()
    353. 

  353.       var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    354. 

  354.       var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    355. 

  355.         return new bootstrap.Tooltip(tooltipTriggerEl)
    356. 

  356.       });
    357. 

  357.       var myModal = new bootstrap.Modal(document.getElementById('history'), {
    358. 

  358.         keyboard: false
    359. 

  359.       })
    360. 

  360.       var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
    361. 

  361.         keyboard: false
    362. 

  362.       })
    363. 

  363.       var modalImg = document.querySelector("#avatarmega .modal-img");
    364. 

  364.       var modalTitle = document.querySelector("#avatarmega .modal-title");
    365. 

  365.       var avatarSelector = document.getElementById("avatar");
    366. 

  366. 

  367.       avatarSelector.addEventListener('change', avatarChange);
    368. 

  368.       avatarChange();
    369. 

  369. 

  370.       function addCardListener() {
    371. 

  371.         for (let i = 0; i < card.length; i++) {
    372. 

  372.           card[i].addEventListener('click', openavatarModel);
    373. 

  373.         }
    374. 

  374.       }
    375. 

  375. 

  376.       addCardListener();
    377. 

  377.       function avatarChange() {
    378. 

  378.         var value = avatarSelector.options[avatarSelector.selectedIndex].text;
    379. 

  379.         for (let i = 0; i < card.length; i++) {
    380. 

  380.           card[i].classList.remove('active');
    381. 

  381.           if (card[i].dataset.avatar == value) {
    382. 

  382.             card[i].classList.add('active');
    383. 

  383.           }
    384. 

  384.         }
    385. 

  385.       }
    386. 

  386. 

  387.       function openavatarModel() {
    388. 

  388.         console.log(this.dataset.img);
    389. 

  389.         modalImg.setAttribute("src", `img/${this.dataset.img}.webp`);
    390. 

  390.         modalTitle.textContent = `${this.dataset.avatar}`;
    391. 

  391.         avatarModal.show();
    392. 

  392.       }
    393. 

  393. 

  394.       $('input[type=file]').on('change', prepareUpload);
    395. 

  395.       function prepareUpload(event) {
    396. 

  396.         files = event.target.files;
    397. 

  397.         var data = new FormData();
    398. 

  398.         //data.append('file', $('.img_up1').prop('files')[0]);
    399. 

  399.         data.append('file', files[0]);
    400. 

  400.         // append other variables to data if you want: data.append('field_name_x', field_value_x);
    401. 

  401.         $(this).next().text('');
    402. 

  402.         //$(this).next().html('<img src="img/Spinner-1s-181px.gif">');
    403. 

  403.         $.ajax({
    404. 

  404.           type: 'POST',
    405. 

  405.           processData: false, // important
    406. 

  406.           contentType: false, // important
    407. 

  407.           data: data,
    408. 

  408.           url: 'https://www.choozmo.com:8887/uploadfile',
    409. 

  409.           dataType: 'json',
    410. 

  410.           success: function (jsonData) {
    411. 

  411.             event.target.previousSibling.value = jsonData.msg;
    412. 

  412.             console.log(jsonData.msg);
    413. 

  413.             $(this).prev().val(jsonData.msg);
    414. 

  414.             const nextEl = event.target.nextSibling;
    415. 

  415.             nextEl.style.backgroundImage = `url(http://${jsonData.msg})`;
    416. 

  416.             //console.log($(this).next());
    417. 

  417.             $(this).html('');
    418. 

  418.             $(this).next().html('');
    419. 

  419.             //$(this).next().text('上傳檔案');
    420. 

  420.           },
    421. 

  421.           error: function (error) {
    422. 

  422.             const nextEl = event.target.nextSibling;
    423. 

  423.             nextEl.style.backgroundImage = `url(./img/upload_img.png)`;
    424. 

  424.             $(this).html('');
    425. 

  425.             alert('Image Error');
    426. 

  426.           }
    427. 

  427.         });
    428. 

  428.       }
    429. 

  429. 

  430. 

  431.       const button = document.querySelector('.next');
    432. 

  432. 

  433.       $(".next").click(function () {
    434. 

  434.         button.setAttribute('disabled', '');
    435. 

  435.         setTimeout(function () {
    436. 

  436.           button.removeAttribute('disabled')
    437. 

  437.         }, 8000);
    438. 

  438.         avatar = $('.avatar').val();
    439. 

  439.         name_title = $('.title_new').val();
    440. 

  440.         txtARR = [];
    441. 

  441.         imgARR = [];
    442. 

  442.         sublineARR = [];
    443. 

  443.         var step;
    444. 

  444.         let contentIdx = document.querySelectorAll(".txtsrc").length;
    445. 

  445.         for (let i = 1; i < (contentIdx + 1); i++) {
    446. 

  446.           if ($(`.txtsrc${i}`).val() != "") {
    447. 

  447.             txtARR.push($(`.txtsrc${i}`).val())
    448. 

  448.           }
    449. 

  449.         }
    450. 

  450.         let sublineIdx = document.querySelectorAll(".subsrc").length;
    451. 

  451.         for (let i = 1; i < (sublineIdx + 1); i++) {
    452. 

  452.           if ($(`.subsrc${i}`).val() != "") {
    453. 

  453.               sublineARR.push($(`.subsrc${i}`).val())
    454. 

  454.           }
    455. 

  455.         }
    456. 

  456.         let imgIdx = document.querySelectorAll(".imgsrc").length;
    457. 

  457.         for (let i = 1; i < (imgIdx + 1); i++) {
    458. 

  458.           if ($(`.imgsrc${i}`).val() != "") {
    459. 

  459.             imgARR.push($(`.imgsrc${i}`).val())
    460. 

  460.           }
    461. 

  461.         }
    462. 

  462.         dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "sub_titles": sublineARR, "avatar": avatar };
    463. 

  463.         objstr = JSON.stringify(dataOBJ);
    464. 

  464.         console.log(dataOBJ);
    465. 

  465.         jwt_token =  get_jwt_token();
    466. 

  466.         var xhr = new XMLHttpRequest();
    467. 

  467.         xhr.open("POST", "https://www.choozmo.com:8887/make_anchor_video_eng_noAuth2");
    468. 

  468.         xhr.setRequestHeader("accept", "text/html");
    469. 

  469.         xhr.setRequestHeader("Content-Type", "application/json");
    470. 

  470.         xhr.onreadystatechange = function () {
    471. 

  471.           if (xhr.readyState === 4) {
    472. 

  472.             responseOBJ = JSON.parse(xhr.responseText);
    473. 

  473.             let text;
    474. 

  474.               text = responseOBJ.msg.eng;
    475. 

  475.               Swal.fire({
    476. 

  476.               // title: title,
    477. 

  477.                 icon: 'info',
    478. 

  478.                 text: text,
    479. 

  479.                 confirmButtonColor: '#3085d6',
    480. 

  480.               });
    481. 

  481.           }
    482. 

  482.         };
    483. 

  483.         var data = renderXHR_data(dataOBJ)
    484. 

  484.         console.log(data)
    485. 

  485.         result = xhr.send(objstr);
    486. 

  486.       });
    487. 

  487. 

  488. 

  489.       var loaded_data = ''
    490. 

  490.       function openNav() {
    491. 

  491.         document.getElementById("mySidenav").style.width = "250px";
    492. 

  492.         document.querySelector('.loader').style.display = "block";
    493. 

  493.         axios({
    494. 

  494.           method: 'post',
    495. 

  495.           url: 'https://www.choozmo.com:8887/history_input_noAuth',
    496. 

  496.           headers: { 
    497. 

  497.               'accept': 'application/json',
    498. 

  498.           },
    499. 

  499.           data: ''
    500. 

  500.         }).then(res => {
    501. 

  501.           console.log(res.data);
    502. 

  502.           loaded_data = res.data;
    503. 

  503.           var historyList = document.querySelector('.historyList');
    504. 

  504.           historyList.innerHTML = '';
    505. 

  505.           for (var obj of loaded_data) {
    506. 

  506.             var list = document.createElement('li');
    507. 

  507.             list.id = obj.id;
    508. 

  508.             // div-imgfr
    509. 

  509.             var divImgfr = document.createElement('div');
    510. 

  510.             divImgfr.classList.add('item_imgfr');
    511. 

  511.             var img = document.createElement('img');
    512. 

  512.             img.setAttribute('src', obj['image_urls'][0]);
    513. 

  513.             divImgfr.appendChild(img);
    514. 

  514.             // div-content
    515. 

  515.             var contentBox = document.createElement('div');
    516. 

  516.             contentBox.classList.add('content-box');
    517. 

  517.             var boxTitle = document.createElement('p');
    518. 

  518.             boxTitle.classList.add('box-title');
    519. 

  519.             boxTitle.textContent = obj.name;
    520. 

  520.             boxTitle.id = obj.id;
    521. 

  521.             boxTitle.setAttribute('onclick', 'load_data()');
    522. 

  522. 

  523.             var boxLink = document.createElement('span');
    524. 

  524.             boxLink.classList.add('box-link');
    525. 

  525.             boxLink.setAttribute("data-url", obj.link);
    526. 

  526.             boxLink.setAttribute('onclick', 'view()');
    527. 

  527.             boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
    528. 

  528.             contentBox.appendChild(boxTitle);
    529. 

  529.             contentBox.appendChild(boxLink);
    530. 

  530.             list.classList.add("historyList-item");
    531. 

  531.            // list.setAttribute('onclick', 'load_data()');
    532. 

  532.             list.appendChild(divImgfr);
    533. 

  533.             list.appendChild(contentBox);
    534. 

  534.             historyList.appendChild(list);
    535. 

  535.           }
    536. 

  536.           document.querySelector('.loader').style.display = "none";
    537. 

  537.         
    538. 

  538.         }).catch(err => {
    539. 

  539.           console.log(err);
    540. 

  540.         });
    541. 

  541.       }
    542. 

  542.       function closeNav() {
    543. 

  543.         document.getElementById("mySidenav").style.width = "250px";
    544. 

  544.       }
    545. 

  545. 

  546.       function view() {
    547. 

  547.         event.stopPropagation();
    548. 

  548.         console.log(event.target);
    549. 

  549.         if (event.target.nodeName === 'I') {
    550. 

  550.           return;
    551. 

  551.         } else {
    552. 

  552.           window.open(`http://${event.target.dataset.url}`, '_blank');
    553. 

  553.         }
    554. 

  554.       }
    555. 

  555. 

  556.       function renderXHR_data(jsonObj) {
    557. 

  557.         XHRstring = ''
    558. 

  558.         for (const [key, value] of Object.entries(jsonObj)) {
    559. 

  559.           console.log(value)
    560. 

  560.           if (typeof (value) == "object") {
    561. 

  561.             XHRstring += (key+'=['+value.join(',')+']&')
    562. 

  562.           }
    563. 

  563.           else {
    564. 

  564.             XHRstring += (key + '=' + value + '&')
    565. 

  565.           }
    566. 

  566.         }
    567. 

  567.         XHRstring = XHRstring.substring(0, XHRstring.length - 1);
    568. 

  568.         return XHRstring
    569. 

  569.       }
    570. 

  570. 

  571.       function get_jwt_token(){
    572. 

  572.         jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
    573. 

  573.         if(!jwt_raw) {return}
    574. 

  574.         return jwt_raw.split('=')[1];
    575. 

  575.       }
    576. 

  576. 

  577.       function load_data() {
    578. 

  578.         var title = document.getElementById("title");
    579. 

  579.         var linker = document.getElementById("linker");
    580. 

  580. 

  581.         myModal.hide()
    582. 

  582.         tid = event.srcElement.id
    583. 

  583.         console.log(tid);
    584. 

  584.         linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
    585. 

  585.         linker.setAttribute('target', '_blank')
    586. 

  586.         $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
    587. 

  587.         $("#linker").show();
    588. 

  588.         $(".linker__box").show();
    589. 

  589. 

  590.         let historyItem = loaded_data.filter(item => item.id == tid)[0];
    591. 

  591.         console.log(historyItem);
    592. 

  592.         $(".title_new").val(loaded_data.find(item => item.id == tid).name);
    593. 

  593. 

  594.         let txtlength = historyItem.text_content.length;
    595. 

  595.         let imglength = historyItem.image_urls.length;
    596. 

  596.         let sublinelength = historyItem.sub_titles.length;
    597. 

  597. 

  598.         subtitleInputs.innerHTML = '';
    599. 

  599.         imgInputs.innerHTML = '';
    600. 

  600.         sublineInputs.innerHTML = '';
    601. 

  601. 

  602.         for (let i = 0; i < txtlength; i++) {
    603. 

  603.           var input_sec = document.createElement('div');
    604. 

  604.           var img_box = document.createElement('div');
    605. 

  605. 

  606.           input_sec.classList.add('input-sec', `input-sec${i+1}`, 'p-3', 'mb-3');
    607. 

  607.           img_box.classList.add('img-box');
    608. 

  608. 

  609.           // subtitle input
    610. 

  610.           var subtitleinput = document.createElement("input");
    611. 

  611.           subtitleinput.setAttribute('type', 'text');
    612. 

  612.           subtitleinput.setAttribute('name', `s${i+1}`);
    613. 

  613.           subtitleinput.classList.add('subsrc', `subsrc${i+1}`);
    614. 

  614.           subtitleinput.value = historyItem.text_content[i];
    615. 

  615.           subtitleinput.setAttribute('placeholder', `Subtitle`);
    616. 

  616.           input_sec.appendChild(subtitleinput);
    617. 

  617. 

  618.           // text input
    619. 

  619.           var txtinput = document.createElement("input");
    620. 

  620.           txtinput.setAttribute('type', 'text');
    621. 

  621.           txtinput.setAttribute('name', `t${i+1}`);
    622. 

  622.           txtinput.classList.add('txtsrc', `txtsrc${i+1}`);
    623. 

  623.           txtinput.value = historyItem.text_content[i];
    624. 

  624.           txtinput.setAttribute('placeholder', `Line`);
    625. 

  625.           input_sec.appendChild(txtinput);
    626. 

  626. 

  627.           // img url input
    628. 

  628.           var imginput = document.createElement("input");
    629. 

  629.           imginput.setAttribute('type', 'text');
    630. 

  630.           imginput.setAttribute('name', `m${i+1}`);
    631. 

  631.           imginput.classList.add('imgsrc', `imgsrc${i+1}`);
    632. 

  632.           imginput.value = historyItem.image_urls[i];
    633. 

  633.           imginput.setAttribute('placeholder', 'https://example.com/4VKBo9w.png');
    634. 

  634.           img_box.appendChild(imginput);
    635. 

  635. 

  636.           // img upload input
    637. 

  637.           var imgupload = document.createElement("input");
    638. 

  638.           imgupload.setAttribute('id', `img${i+1}`);
    639. 

  639.           imgupload.setAttribute('type', `file`);
    640. 

  640.           imgupload.classList.add('img_uploader', 'img_up');
    641. 

  641.           imgupload.style.display = "none";
    642. 

  642.           img_box.appendChild(imgupload);
    643. 

  643. 

  644.           // img upload label
    645. 

  645.           var imguploadlabel = document.createElement("label");
    646. 

  646.           imguploadlabel.setAttribute('for', `img${i+1}`);
    647. 

  647.           imguploadlabel.classList.add('upload-btn');
    648. 

  648.           imguploadlabel.textContent = 'Upload';
    649. 

  649.           imguploadlabel.setAttribute('set-lan', `html:upload_file`);
    650. 

  650.           img_box.appendChild(imguploadlabel);
    651. 

  651.           imgupload.addEventListener('change', prepareUpload);
    652. 

  652. 

  653.           // preview image
    654. 

  654.           // var imgPreBox = document.createElement("div");
    655. 

  655.           // imgPreBox.classList.add('upload-cta', 'box-active');
    656. 

  656.           // imgPreBox.style.backgroundImage = `url(${historyItem.image_urls[i]})`;
    657. 

  657.           // img_box.appendChild(imgPreBox);
    658. 

  658. 

  659.           input_sec.appendChild(img_box);
    660. 

  660.           document.querySelector('.img-inputTest').append(input_sec);
    661. 

  661.         }
    662. 

  662.       }
    663. 

  663. 

  664.       var subtitleInputs = document.querySelector(".subtitle-inputs");
    665. 

  665.       var sublineInputs = document.querySelector(".subline-inputs");
    666. 

  666.       var imgInputs = document.querySelector(".img-inputs");
    667. 

  667.       let length = 3;
    668. 

  668. 

  669.       let txt = ["Brazil is looking to partner with SpaceX to expand internet connection to rural schools and protect the Amazon",
    670. 

  670.         "The country Communications Minister Fabio Faria tweeted on Tuesday.",
    671. 

  671.         "Faria tweets include a video and photo of himself with SpaceX founder and CEO."
    672. 

  672.       ];
    673. 

  673.       let sub = ["Connect rural areas and monitor Amazon forest",
    674. 

  674.       "connect rural areas and monitor Amazon forest",
    675. 

  675.       "connect rural areas and monitor Amazon forest"];
    676. 

  676.       let imgLinks = ['https://i.imgur.com/ANFg5m8.png', 'https://i.imgur.com/ANFg5m8.png',
    677. 

  677.       'https://i.imgur.com/GnAfwJZ.png'];
    678. 

  678. 

  679.       function initial() {
    680. 

  680.         for (let i = 0; i < length; i++) {
    681. 

  681.           // rendertxtBlock(i + 1);
    682. 

  682.           // renderimgBlock(i + 1);
    683. 

  683.           // renderSublineBlock(i +1);
    684. 

  684.           renderInputSec(i+1);
    685. 

  685.         }
    686. 

  686.         $('#title').val('Brazil touts partnership with SpaceX');
    687. 

  687.         $('#avatar').val('7');
    688. 

  688.         console.log(document.querySelectorAll(".txtsrc").length + 1);
    689. 

  689.         for (let i = 0; i < 3; i++) {
    690. 

  690.           $(`.txtsrc${i+1}`).val(txt[i]);
    691. 

  691.           $(`.subsrc${i+1}`).val(sub[i]);
    692. 

  692.           $(`.imgsrc${i+1}`).val(imgLinks[i]);
    693. 

  693.         }
    694. 

  694.       }
    695. 

  695. 

  696.       initial();
    697. 

  697. 

  698.       // var addbtn = document.querySelector(".add");
    699. 

  699.       // var addimgbtn = document.querySelector(".addimg");
    700. 

  700.       // var addSubline = document.querySelector('.add-subline');
    701. 

  701.       var addsecbtn = document.querySelector(".addsec");
    702. 

  702. 

  703.       addsecbtn.addEventListener('click', addsecBlock);
    704. 

  704.       // addbtn.addEventListener('click', addtxtBlock);
    705. 

  705.       // addimgbtn.addEventListener('click', addimgBlock);
    706. 

  706.       // addSubline.addEventListener('click', addsubBlock);
    707. 

  707.       
    708. 

  708.       function addsecBlock() {
    709. 

  709.         let newsecIdx = document.querySelectorAll(".input-sec").length + 1;
    710. 

  710.         renderInputSec(newsecIdx);
    711. 

  711.       }
    712. 

  712. 

  713.       // function addtxtBlock() {
    714. 

  714.       //   let newIdx = document.querySelectorAll(".txtsrc").length + 1;
    715. 

  715.       //   rendertxtBlock(newIdx);
    716. 

  716.       // }
    717. 

  717. 

  718.       // function addsubBlock() {
    719. 

  719.       //     let newIdx = document.querySelectorAll(".subsrc").length + 1;
    720. 

  720.       //     renderSublineBlock(newIdx);
    721. 

  721.       //   }
    722. 

  722. 

  723.       // function addimgBlock() {
    724. 

  724.       //   let newimgIdx = document.querySelectorAll(".imgsrc").length + 1;
    725. 

  725.       //   renderimgBlock(newimgIdx);
    726. 

  726.       // }
    727. 

  727. 

  728.       function rendertxtBlock(i) {
    729. 

  729.         var txtinput = document.createElement("input");
    730. 

  730.         txtinput.setAttribute('type', 'text');
    731. 

  731.         txtinput.setAttribute('name', `t${i}`);
    732. 

  732.         txtinput.value = "";
    733. 

  733.         txtinput.setAttribute('placeholder', `${i}`);
    734. 

  734.         txtinput.classList.add('txtsrc', `txtsrc${i}`)
    735. 

  735.         subtitleInputs.appendChild(txtinput);
    736. 

  736.       }
    737. 

  737. 

  738.       function renderSublineBlock(i) {
    739. 

  739.         var txtinput = document.createElement("input");
    740. 

  740.         txtinput.setAttribute('type', 'text');
    741. 

  741.         txtinput.setAttribute('name', `s${i}`);
    742. 

  742.         txtinput.value = "";
    743. 

  743.         txtinput.setAttribute('placeholder', `${i}`);
    744. 

  744.         txtinput.classList.add('subsrc', `subsrc${i}`)
    745. 

  745.         sublineInputs.appendChild(txtinput);
    746. 

  746.       }
    747. 

  747. 

  748.       function renderimgBlock(i) {
    749. 

  749.         var imginput = document.createElement("input");
    750. 

  750.         imginput.setAttribute('type', 'text');
    751. 

  751.         imginput.setAttribute('name', `m${i}`);
    752. 

  752.         imginput.classList.add('imgsrc', `imgsrc${i}`);
    753. 

  753.         imginput.value = "";
    754. 

  754.         imginput.setAttribute('placeholder', `${i}`);
    755. 

  755.         imgInputs.appendChild(imginput);
    756. 

  756. 

  757.         var imgupload = document.createElement("input");
    758. 

  758.         imgupload.setAttribute('id', `img${i}`);
    759. 

  759.         imgupload.setAttribute('type', `file`);
    760. 

  760.         imgupload.classList.add('img_uploader', 'img_up');
    761. 

  761.         imgInputs.appendChild(imgupload);
    762. 

  762.         var imguploadlabel = document.createElement("label");
    763. 

  763.         imguploadlabel.setAttribute('for', `img${i}`);
    764. 

  764.         imguploadlabel.classList.add('upload-btn');
    765. 

  765.         // imguploadlabel.textContent = 'Upload';
    766. 

  766.         imgInputs.appendChild(imguploadlabel);
    767. 

  767.         $('input[type=file]').on('change', prepareUpload);
    768. 

  768.       }
    769. 

  769. 

  770.       function renderInputSec(i) {
    771. 

  771.         var input_sec = document.createElement('div');
    772. 

  772.         var img_box = document.createElement('div');
    773. 

  773. 

  774.         input_sec.classList.add('input-sec', `input-sec${i}`, 'p-3', 'mb-3');
    775. 

  775.         img_box.classList.add('img-box');
    776. 

  776. 

  777.         // subtitle input
    778. 

  778.         var subtitleinput = document.createElement("input");
    779. 

  779.         subtitleinput.setAttribute('type', 'text');
    780. 

  780.         subtitleinput.setAttribute('name', `s${i}`);
    781. 

  781.         subtitleinput.classList.add('subsrc', `subsrc${i}`);
    782. 

  782.         subtitleinput.value = "";
    783. 

  783.         subtitleinput.setAttribute('placeholder', `Subtitle`);
    784. 

  784.         input_sec.appendChild(subtitleinput);
    785. 

  785. 

  786.         // text input
    787. 

  787.         var txtinput = document.createElement("input");
    788. 

  788.         txtinput.setAttribute('type', 'text');
    789. 

  789.         txtinput.setAttribute('name', `t${i}`);
    790. 

  790.         txtinput.classList.add('txtsrc', `txtsrc${i}`);
    791. 

  791.         txtinput.value = "";
    792. 

  792.         txtinput.setAttribute('placeholder', `Line`);
    793. 

  793.         input_sec.appendChild(txtinput);
    794. 

  794. 

  795.         // img url input
    796. 

  796.         var imginput = document.createElement("input");
    797. 

  797.         imginput.setAttribute('type', 'text');
    798. 

  798.         imginput.setAttribute('name', `m${i}`);
    799. 

  799.         imginput.classList.add('imgsrc', `imgsrc${i}`);
    800. 

  800.         imginput.value = "";
    801. 

  801.         imginput.setAttribute('placeholder', 'https://example.com/4VKBo9w.png');
    802. 

  802.         img_box.appendChild(imginput);
    803. 

  803. 

  804.         // img upload input
    805. 

  805.         var imgupload = document.createElement("input");
    806. 

  806.         imgupload.setAttribute('id', `img${i}`);
    807. 

  807.         imgupload.setAttribute('type', `file`);
    808. 

  808.         imgupload.classList.add('img_uploader', 'img_up');
    809. 

  809.         imgupload.style.display = "none";
    810. 

  810.         img_box.appendChild(imgupload);
    811. 

  811. 

  812.         // img upload label
    813. 

  813.         var imguploadlabel = document.createElement("label");
    814. 

  814.         imguploadlabel.setAttribute('for', `img${i}`);
    815. 

  815.         imguploadlabel.classList.add('upload-btn');
    816. 

  816.         // imguploadlabel.textContent = 'Upload';
    817. 

  817.         imguploadlabel.setAttribute('set-lan', `html:upload_file`);
    818. 

  818.         img_box.appendChild(imguploadlabel);
    819. 

  819.         imgupload.addEventListener('change', prepareUpload);
    820. 

  820. 

  821.         // preview image
    822. 

  822.         // var imgPreBox = document.createElement("div");
    823. 

  823.         // imgPreBox.classList.add('upload-cta');
    824. 

  824.         // img_box.appendChild(imgPreBox);
    825. 

  825. 

  826.         input_sec.appendChild(img_box);
    827. 

  827.         document.querySelector('.img-inputTest').append(input_sec);
    828. 

  828.       }
    829. 

  829. 

  830.     </script>
    831. 

  831. </body>
    832. 

  832. 

  833. </html>
    834.