syncstream/main.html at main · sol4nki/syncstream · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>syncstream</title>
    <link rel="icon" type="image/png" href="./assets/icon-128.png">
</head>
<body>
    <div class="mainContainer">


        <div id="setupSection">
            <p class="title">syncstream.</p>
            <p class="subtext">Watch together, anytime, anywhere</p>
            <div class="connectionContainer--green">
                <p> • Ready to Connect</p>
            </div>
            <p class="heading">Start a session</p>

            <div class="createBtn" id="createRoomBtn">
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path>
                </svg>
                <p class="heading">Create Room</p>
            </div>

            <div class="bottomContainer">
                <input class="roomIDContainer" id="roomIdInput" placeholder="Enter Room ID">
                <div class="joinBtn--green" id="joinRoomBtn">
                    <p>Join</p>
                </div>
            </div>
        </div>


        <div id="roomSection" style="display: none;">
            <p class="title">syncstream.</p>
            <!-- <p class="subtext">Watch together, anytime, anywhere</p> -->

            <div class="connectionContainer--green">
                <p id="statusText"> • Connected</p>
            </div>
            <p class="heading">Room</p>

            <div class="connectionIDContainer">
                <p class="roomCode" id="roomId">J3N9M0BH</p>
            </div>

            <div class="videoContainer" id="videoInfo">
                <p class="videoName">YouTube Video</p>
                <p class="videoLink">https://youtube.com/watch?v=example</p>
            </div>

            <p class="heading">Connected Peers (<span id="peerCount">0</span>)</p>

            <div class="peers" id="peersList">

            </div>

            <div class="bottomContainer">
                <div class="syncBtn" id="syncBtn">
                    <svg class="icon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 118.04 122.88"><path d="M16.08,59.26A8,8,0,0,1,0,59.26a59,59,0,0,1,97.13-45V8a8,8,0,1,1,16.08,0V33.35a8,8,0,0,1-8,8L80.82,43.62a8,8,0,1,1-1.44-15.95l8-.73A43,43,0,0,0,16.08,59.26Zm22.77,19.6a8,8,0,0,1,1.44,16l-10.08.91A42.95,42.95,0,0,0,102,63.86a8,8,0,0,1,16.08,0A59,59,0,0,1,22.3,110v4.18a8,8,0,0,1-16.08,0V89.14h0a8,8,0,0,1,7.29-8l25.31-2.3Z"/></svg>
                    <p class="heading">Sync</p>
                </div>

                <div class="leaveBtn" id="leaveBtn">
                    <p>Leave Room</p>
                </div>
            </div>
        </div>


    </div>


    <script src="./scripts/functionality.js"></script>

</body>
</html>