|
|
@@ -0,0 +1,213 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>走馬短劇</title>
|
|
|
+ <link href="./css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
|
|
|
+
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ #app {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-image: url(./assets/bg-1.png);
|
|
|
+ background-position: center;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ #btn {
|
|
|
+ width: 253px;
|
|
|
+ height: 51px;
|
|
|
+ background-image: url(./assets/btn1.png);
|
|
|
+ background-position: center;
|
|
|
+ background-size: cover;
|
|
|
+ position: absolute;
|
|
|
+ bottom: calc(env(safe-area-inset-bottom) + 30px);
|
|
|
+ bottom: calc(constant(safe-area-inset-bottom) + 30px);
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 20;
|
|
|
+ }
|
|
|
+ .video {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ border: 2px solid #fff;
|
|
|
+ }
|
|
|
+ .video::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ }
|
|
|
+ #title {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 20;
|
|
|
+ }
|
|
|
+ #video-cover {
|
|
|
+ width: 70vw;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .label-img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ :root {
|
|
|
+ --bs-tertiary-bg: #f5f7fa;
|
|
|
+ --bs-form-control-bg: #f5f7fa;
|
|
|
+ --bs-border-color: #f5f7fa;
|
|
|
+ --bs-modal-margin: 28px;
|
|
|
+ }
|
|
|
+ .input-group-text {
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+ .form-control {
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+ .modal-dialog {
|
|
|
+ margin: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: AlimamaShuHeiTi;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto 22px;
|
|
|
+ }
|
|
|
+ .modal-body {
|
|
|
+ padding: 18px 20px 26px;
|
|
|
+ }
|
|
|
+ .submit-btn {
|
|
|
+ background: linear-gradient(180deg, #ff7340 0%, #ff3e3e 100%);
|
|
|
+ height: 42px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: AlimamaShuHeiTi;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ text-shadow: 0px 2px 0px #e71d0d;
|
|
|
+ border-radius: 42px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .form-check-input:checked {
|
|
|
+ background-color: #ff7340;
|
|
|
+ border-color: #ff7340;
|
|
|
+ }
|
|
|
+ .form-check-label {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #61657a;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="app">
|
|
|
+ <div class="video">
|
|
|
+ <div class="title" id="title"></div>
|
|
|
+ <img src="" alt="" id="video-cover" />
|
|
|
+ </div>
|
|
|
+ <div id="btn" data-bs-toggle="modal" data-bs-target="#exampleModal"></div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="modal fade"
|
|
|
+ id="exampleModal"
|
|
|
+ tabindex="-1"
|
|
|
+ aria-labelledby="exampleModalLabel"
|
|
|
+ aria-hidden="true"
|
|
|
+ >
|
|
|
+ <div class="modal-dialog modal-dialog-centered">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="modal-title">立即下载</div>
|
|
|
+ <form class="row g-3 needs-validation" novalidate>
|
|
|
+ <div class="col-md-4">
|
|
|
+ <div class="input-group has-validation">
|
|
|
+ <span class="input-group-text" id="inputEmail">
|
|
|
+ <img
|
|
|
+ class="label-img"
|
|
|
+ src="./assets/email.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <input
|
|
|
+ type="email"
|
|
|
+ class="form-control"
|
|
|
+ id="email"
|
|
|
+ aria-describedby="inputEmail"
|
|
|
+ required
|
|
|
+ placeholder="請輸入您的郵箱"
|
|
|
+ />
|
|
|
+ <div class="invalid-feedback">郵箱不能为空或格式错误</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-12">
|
|
|
+ <div class="form-check">
|
|
|
+ <input
|
|
|
+ class="form-check-input"
|
|
|
+ type="checkbox"
|
|
|
+ value=""
|
|
|
+ id="invalidCheck"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ <label class="form-check-label" for="invalidCheck">
|
|
|
+ 點擊同意注册協定
|
|
|
+ </label>
|
|
|
+ <div class="invalid-feedback"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-12 d-grid gap-2">
|
|
|
+ <button class="btn submit-btn" type="submit">下载</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="./js/bootstrap.min.js" crossorigin="anonymous"></script>
|
|
|
+ <script src="./js/form.js" crossorigin="anonymous"></script>
|
|
|
+ <script>
|
|
|
+ function GetQueryString(name) {
|
|
|
+ var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
|
|
|
+ var r = window.location.search.substr(1).match(reg) //获取url中"?"符后的字符串并正则匹配
|
|
|
+ var context = ''
|
|
|
+ if (r != null) context = decodeURIComponent(r[2])
|
|
|
+ reg = null
|
|
|
+ r = null
|
|
|
+ return context == null || context == '' || context == 'undefined' ? '' : context
|
|
|
+ }
|
|
|
+ if (GetQueryString('cover')) {
|
|
|
+ var img = document.getElementById('video-cover')
|
|
|
+ img.src = decodeURIComponent(GetQueryString('cover'))
|
|
|
+ }
|
|
|
+ if (GetQueryString('title')) {
|
|
|
+ var title = GetQueryString('title')
|
|
|
+ if (GetQueryString('num')) {
|
|
|
+ title += '-第'
|
|
|
+ title += GetQueryString('num') + '集'
|
|
|
+ }
|
|
|
+ document.getElementById('title').innerText = title
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
