xiongzhu
/
shorts-api


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!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 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>