<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-6WGHN61ENK"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-6WGHN61ENK');
    </script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/boxicons@2.1.2/dist/boxicons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.min.js"></script>
    <script src="https://accounts.google.com/gsi/client" async defer></script>   
    <link rel="stylesheet" href="css/index.css"/>
    <title>MotiveTag - 尋找共同興趣朋友</title>
</head>
<body>
    <div class="holder">
    <div class="left">
        <div class="left_title">
            <p class="demo" id="demo"></p>
        </div>
    </div>
    <div class="right">
    <section class="login">
            <img class="title" src="/img/title.png">
        <div class="login_holder">
                <div class="input_holder">
                    <div class="input_inner">
                        <input type="text" id="account" placeholder="帳號" autocomplete="off">
                        <box-icon name='x' color='#f7071f' id="account_x" class="account_x"></box-icon>
                    </div>
                </div>
                <div class="input_holder">
                    <div class="input_inner">
                        <input type="password" id="password" placeholder="密碼" autocomplete="current-password">
                        <box-icon name='x' color='#f7071f' id="pass_x" class="pass_x"></box-icon>
                    </div>
                </div>
        </div>
            <div class="pass_remind"></div>
            <button id="login_submit" class="login_submit">登入</button>
            <!-- <div class="mighty_google">
            <div id="g_id_onload"
            data-client_id="{{ google_oauth2_client_id }}"
            data-callback="handleCredentialResponse"
            data-auto_prompt="false">
            </div>
            <div class="g_id_signin"
            data-type="standard"
            data-size="large"
            data-theme="outline"
            data-text="sign_in_with"
            data-shape="pill"
            data-logo_alignment="left">
            </div>
            </div> -->
    </section>
    <section class="signup">
        <div class="signup_holder">
                <div class="signup_input_holder">


                    <div class="input_section">
                        <div class="input_holder">
                            <input type="text" id="sign_account" placeholder="帳號" autocomplete="off">
                            <box-icon name='check' color='#0bf707' id="check_ok" class="check_ok"></box-icon>
                            <box-icon name='x' color='#f7071f' id="x" style="display: none;"></box-icon>
                            <box-icon name='loader-alt' rotate='90' animation='spin' color='#10fc0c' id="loading" class="loading"></box-icon>
                        </div>
                        <span class="url_preview">https://motivetag.xyz/</span><span id="preview_span" class="preview_span"></span>
                        <div class="error_msg"></div>
                    </div>
                    <div class="input_section">
                        <div class="input_holder">
                            <input type="password" id="sign_password" placeholder="密碼">
                        </div>
                        
                    </div>
                    <div class="input_section">
                        <div class="input_holder">
                            <input type="email" id="sign_email" placeholder="信箱">
                        </div>
                    </div>
                    <div class="input_section">
                        <div class="input_holder">
                            <span class="label">生日</span>
                            <select name="year" autocomplete="bday-year" id="b_year">
                                <option value="null">年</option>

                            </select>
                            <span class="date_sep">/</span>
                            <select name="year" autocomplete="bday-month" id="b_month">
                                <option value="null">月</option>
                            </select>
                            <span class="date_sep">/</span>
                            <select name="year" autocomplete="bday-day" id="b_day">
                                <option value="null">日</option>
                            </select>
                        </div>
                    </div>
                </div>
            <div class="signup_btn">
                <button id="signup_submit" class="signup_submit">註冊</button>
            </div>
            <div class="outer_check">
                <box-icon id="signup_check" class="signup_check" name='check-double' color='#0cfc23' ></box-icon>
            </div>
        </div>
    </section>
    </div>
        <div class="to_bot">
            <box-icon   name='chevrons-down' type='solid' animation='fade-down' color='#FFF' ></box-icon>
        </div>
    </div>
    <section class="guide">
        <div class="g_1">
            <p class="g_content">Find ,search any Tag you want and subscribe.</p>
            <img class="g_img" src="/img/g1.png">
        </div>
        <div class="g_1">
            <img class="g_img" src="/img/g2.png">
            <p class="g_content">Browsing or Sharing with Tags.</p>
        </div>
        <div class="g_1">
            <p class="g_content">Join discussion or activities.</p>
            <img class="g_img" src="/img/g3.png">
        </div>
        <div class="g_1">
            <img class="g_img" src="/img/g4.png">
            <p class="g_content">Make friends and chat!</p>
        </div>
    </section>

<script type="text/javascript" src="js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
</body>
</html>