xiongzhu
/
shorts-api


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FreeShort</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #btn {
            width: 253px;
            height: 51px;
            background-image: url(./assets/btn2.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;
            border-radius: 50px;
        }

        .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">
        <img src="./assets/share.png" style="width: 100%; height: auto;"   data-bs-toggle="modal"
            data-bs-target="#exampleModal" />

        <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">Download</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="Your email" />
                                    <div class="invalid-feedback">Invalid email</div>
                                </div>
                            </div>
                            <div class="col-12 d-grid gap-2">
                                <button class="btn submit-btn" type="submit">Download</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
    <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
        }


    </script>
</body>

</html>