templates/index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description"
        content="Clubhouse for android. Clubhouse for web. Clubhouse for everyone without invite code.">
    <title>Open Clubhouse</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
        integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <style>
        html body {
            font-family: sans-serif;
            background: #F2EFE4;
        }

        .playbar {
            background: #F2EFE4;
            width: 100%;
            padding: 10px 10px 0 10px;
        }

        .list-group {
            background-color: #F2EFE4;
            padding: 0 1em;
            margin-bottom: 64px;
        }

        a.btn.disabled {
            color: grey;
            border-color: grey;
        }

        a.btn-sm {
            padding: .01rem .2rem;
        }

        .users img {
            width: 50px;
        }

        .users .user {
            padding: 5px 5px;
        }

        a.btn.disabled.btn-playing {
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;
        }

        .current {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #loading {
            margin-top: 50%;
        }
    </style>
</head>

<body>
    <div>
        <div class="d-flex justify-content-between fixed-bottom playbar" id="playbar">
            <div>
                <button class="btn btn-outline-info" data-toggle="modal" data-target="#words">
                    Info
                </button>
            </div>

            <div class="text-center">
                <b>Current Playing:</b>
                <marquee direction="left" scrollamount="2" class="current">
                    <i id="current">None</i>
                </marquee>
            </div>
            <div>
                <button class="btn btn-outline-danger" id="stop">
                    Stop
                </button>
            </div>

        </div>
        <div class="text-center">
            <div class="spinner-border text-danger" role="status" id="loading">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <div class="modal fade" tabindex="-1" id="words">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">作者的话/Author's words</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>这是一个第三方 Clubhouse 音频播放器，我希望任何人能听到 CH 上的各种声音，所以这是一个安卓可用，电脑可用，也是所有没有邀请码的小伙伴们可以使用的 Clubhouse
                            客户端。所有的房间权限都是通过个人的 Session 获取。所有音频的版权都归 JoinClubhouse.com 和其用户所有。
                        </p>
                        <p>This is a third part Clubhouse audio player. I hope that everybody can hear the voice. So it
                            is a open Clubhouse client for Android, for Computer, and for anyone without invite code.
                            All room accesses are acquired from
                            personal session, and all copyrights of the voice are belongs to JoinClubhouse.com and its
                            users.
                        </p>
                        <p>欢迎各位小伙伴在 GitHub issues 中提出你的问题和建议。</p>
                        <p>If you have any question or suggestion, issues are welcome.</p>
                        <p>GitHub: <a href="https://github.com/ai-eks/OpenClubhouse"
                                target="_blank">https://github.com/ai-eks/OpenClubhouse</a></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <ul class="list-group" id="channels">
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
        crossorigin="anonymous"></script>
    <script src="/static/AgoraRTC_N-4.3.0.js"></script>
    <script src="/static/openCH.js"></script>
    <script>
        $(document).ready(function () {
            initOptions('938de3e8055e42b281bb8c6f69c21f78', {{ owner_user_id }});
            getChannels();
            if (localStorage.getItem('firstlook') !== "looked") {
                $("#words").modal();
                localStorage.setItem('firstlook', "looked");
            }
        })
    </script>
</body>

</html>