Streamify/index.html at main · MUmer24/Streamify · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Streamify - Web Player: Music for everyone</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/color.css">
</head>

<body>

    <nav>

        <ul>
            <li>
                <img class="hamburger" src="/Streamify/img/hamburger.svg" alt="hamburger">
                <span class="logo">
                    <a href="https://umk-forge.netlify.app/">
                        <img src="/Streamify/img/logo.svg" alt="">
                    </a>
                </span>
            </li>
            <li>
                <div class="search">
                    <a class="homeIcon" href="https://umk-forge.netlify.app/">
                        <img src="/Streamify/img/homebtn.svg" alt="homebtn">
                    </a>
                    <span class="input">
                        <svg data-encore-id="icon" role="img" aria-hidden="true"
                            class="Svg-sc-ytk21e-0 bHdpig e-9541-icon M9l40ptEBXPm03dU3X1k" data-testid="search-icon"
                            viewBox="0 0 24 24" fill="#B3B3B3">
                            <path
                                d="M10.533 1.27893C5.35215 1.27893 1.12598 5.41887 1.12598 10.5579C1.12598 15.697 5.35215 19.8369 10.533 19.8369C12.767 19.8369 14.8235 19.0671 16.4402 17.7794L20.7929 22.132C21.1834 22.5226 21.8166 22.5226 22.2071 22.132C22.5976 21.7415 22.5976 21.1083 22.2071 20.7178L17.8634 16.3741C19.1616 14.7849 19.94 12.7634 19.94 10.5579C19.94 5.41887 15.7138 1.27893 10.533 1.27893ZM3.12598 10.5579C3.12598 6.55226 6.42768 3.27893 10.533 3.27893C14.6383 3.27893 17.94 6.55226 17.94 10.5579C17.94 14.5636 14.6383 17.8369 10.533 17.8369C6.42768 17.8369 3.12598 14.5636 3.12598 10.5579Z">
                            </path>
                        </svg>
                        <input type="text" name="" id="" placeholder="What do you want to play?">

                        <span>
                            <svg data-encore-id="icon" role="img" aria-hidden="true"
                                class="Svg-sc-ytk21e-0 bneLcE e-9541-icon" viewBox="0 0 24 24" fill="#B3B3B3">
                                <path d="M15 15.5c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2z"></path>
                                <path
                                    d="M1.513 9.37A1 1 0 0 1 2.291 9h19.418a1 1 0 0 1 .979 1.208l-2.339 11a1 1 0 0 1-.978.792H4.63a1 1 0 0 1-.978-.792l-2.339-11a1 1 0 0 1 .201-.837zM3.525 11l1.913 9h13.123l1.913-9H3.525zM4 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v4h-2V3H6v3H4V2z">
                                </path>
                            </svg>
                        </span>
                    </span>
                </div>
            </li>
            <li>
                <div class="options">
                    <div class="premium button_increase_size">
                        <h4>Explore Premium</h4>
                    </div>
                    <div class="androidApp">
                        <img src="/Streamify/img/installApp.svg" alt="installApp">
                        <h4>Install App</h4>
                    </div>
                    <div class="notification">
                        <img src="/Streamify/img/notification.svg" alt="notification">
                    </div>
                    <div class="user button_increase_size">
                        <h4>Guest</h4>
                    </div>
                </div>
            </li>
        </ul>
    </nav>
    <div class="container">
        <div class="left_panel">
            <img class="closebtn" src="/Streamify/img/closebtn.svg" alt="close">
            <!-- <span class="close_button"> -->
            <!-- </span> -->
            <div class="library">
                <div>

                    <div>
                        <button><span><img class="svg" src="/Streamify/img/library.svg" alt="library_svg"></span></button>
                    </div>

                    <p>Your Library</p>
                </div>
            </div>


            <div class="playlist_albums">

                <div class="songsList">
                    <ul>

                    </ul>
                </div>
            </div>
        </div>

        <div class="right_panel">

            <div class="playlists_section">

                <div class="section_title">
                    <h2>My Albums</h2>
                </div>

                <div class="card_container"></div>

            </div>

        </div>

    </div>
    <footer>
        <div class="soundbar">
            <div class="song_info">
                <svg class="first-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
                    color="currentColor" fill="none" opacity="0.6">
                    <path
                        d="M3 14V9.5C3 8.67157 3.67157 8 4.5 8C5.32843 8 6 8.67157 6 9.5V16.5C6 17.3284 6.67157 18 7.5 18C8.32843 18 9 17.3284 9 16.5V4.5C9 3.67157 9.67157 3 10.5 3C11.3284 3 12 3.67157 12 4.5V19.5C12 20.3284 12.6716 21 13.5 21C14.3284 21 15 20.3284 15 19.5V8.5C15 7.67157 15.6716 7 16.5 7C17.3284 7 18 7.67157 18 8.5V15.5C18 16.3284 18.6716 17 19.5 17C20.3284 17 21 16.3284 21 15.5V12"
                        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span class="song_name">Song Info</span>
            </div>
            <div class="song_player">
                <div class="songControls">
                    <img id="previous" src="/Streamify/img/previous.svg" alt="previous">
                    <img id="play" src="/Streamify/img/playbtn.svg" alt="playbtn">
                    <img id="next" src="/Streamify/img/next.svg" alt="next">
                </div>
                <div class="controlbar">
                    <div class="songtime_current">--</div>
                    <div class="seekbar">
                        <div class="seekbar_track"></div>
                        <div class="circle"></div>
                        <div class="length"></div>

                    </div>
                    <div class="songtime_total">--</div>
                </div>
            </div>

            <div class="volume_button">
                <img class="volume" src="/Streamify/img/volume.svg" alt="volumebtn">
                <div class="range">
                    <input type="range" name="volumebar" id="volumebar">
                </div>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>

</html>