<!DOCTYPE html>
<html lang="en">

<head>
    <title>EZPPLauncher</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" href="../assets/logo.png" />
    <link href="../assets/mdb.min.css" rel="stylesheet" />
    <link href="../assets/launcher.css" rel="stylesheet" />
    <link href="../assets/checkbox.css" rel="stylesheet" />
    <style>
        * {
            user-select: none;
            -webkit-user-select: none;
        }
    </style>
</head>

<body class="fixed-sn mdb-skin-custom" data-spy="scroll" data-target="#scrollspy" data-offset="15"
    oncontextmenu="return false;">
    <main>
        <div class="noselect">
            <div class="position-relative overflow-hidden p-1 w-100 text-center text-lg-end d-flex align-items-center justify-content-center"
                style="border-radius: 0.5em;">
                <div class="launcher-window position-relative overflow-hidden">
                    <div class="container px-1 py-2 w-100 mw-100 h-100">
                        <div class="row d-flex justify-content-center align-items-center h-100">
                            <div id="loading-page" class="sections col col-xl-10">
                                <div class="launch-section flex-row">
                                    <div class="server-logo">
                                        <img src="../assets/logo.png" height="120">
                                    </div>
                                    <div class="app-name">EZPPLauncher</div>
                                </div>
                                <div class="loading-section">
                                    <div class="loading-indicator">
                                        <div class="loader">
                                            <svg class="circular-loader" viewBox="25 25 50 50">
                                                <circle class="loader-path" cx="50" cy="50" r="20" fill="none"
                                                    stroke="#fff" stroke-width="2" />
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="loading-indicator-text">Loading... Please wait</div>
                                </div>
                            </div>
                            <div id="launch-page" class="sections col col-xl-10" style="display: none;">
                                <div class="account-section">
                                    <div class="user-image">
                                    </div>
                                    <div class="user-info">
                                        <div class="welcome-text" id="welcome-text">
                                            Nice to see you!
                                        </div>
                                        <div class="account-action" id="account-action">
                                            Click to login
                                        </div>
                                    </div>
                                </div>
                                <div class="launch-section">
                                    <div class="server-logo">
                                        <img src="../assets/logo.png" height="150">
                                    </div>
                                    <div class="launch-button-section">
                                        <button class="btn btn-lg btn-launch btn-accent" id="launch-btn" disabled>Launch</button>
                                        <div class="patch-checkbox">
                                            <input type="checkbox" id="enablePatching" checked/>
                                            <label for="enablePatching" style="display: initial;">enable
                                                Patching</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="folder-section">
                                    <div class="folder-location">
                                        Current osu! directory: <span id="currentOsuPath"></span>
                                    </div>
                                    <div class="folder-action" id="change-folder-btn">
                                        Not correct?
                                    </div>
                                </div>
                            </div>
                            <div id="login-page" class="sections col col-xl-10" style="display: none;">
                                <div class="launch-section flex-row">
                                    <div class="server-logo">
                                        <img src="../assets/logo.png" height="120">
                                    </div>
                                    <div class="app-name">EZPPLauncher</div>
                                </div>
                                <div class="login-section">
                                    <div class="form-outline mb-3 w-50">
                                        <input type="text" id="login-username" class="form-control form-control-lg" />
                                        <label class="form-label" for="login-username">Username</label>
                                    </div>
                                    <div class="form-outline mb-3 w-50">
                                        <input type="password" id="login-password"
                                            class="form-control form-control-lg" />
                                        <label class="form-label" for="login-password">Password</label>
                                    </div>
                                    <div class="pt-1 mb-4">
                                        <div class="btn-grouped">
                                            <button id="action-cancel" class="btn btn-grey btn-lg"
                                                type="button">Cancel</button>
                                            <button id="action-login" class="btn btn-accent btn-lg"
                                                type="button">Login</button>
                                        </div>
                                    </div>
                                    <p class="text-muted clickable" id="register">Don't have an account?</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

<script type="text/javascript" src="../assets/mdb.min.js"></script>

</html>