Add files via upload

prem-kumar412 · Jul 14, 2023 · 101d0ed · 101d0ed
1 parent 4f4028a
commit 101d0ed
Show file tree

Hide file tree

Showing 62 changed files with 3,977 additions and 0 deletions.
diff --git a/Single Playlist Screen Styles.css b/Single Playlist Screen Styles.css
diff --git a/Single Playlist Screen Styles.html b/Single Playlist Screen Styles.html
diff --git a/Stylesheet index.css b/Stylesheet index.css
diff --git a/index page.html b/index page.html
diff --git a/media/bell_icon.jpg b/media/bell_icon.jpg
diff --git a/media/crousel/carousel1.jpg b/media/crousel/carousel1.jpg
diff --git a/media/crousel/carousel2.jpg b/media/crousel/carousel2.jpg
diff --git a/media/crousel/carousel3.jpg b/media/crousel/carousel3.jpg
diff --git a/media/latest english/Attention.jpg b/media/latest english/Attention.jpg
diff --git a/media/latest english/Klok-Con-Klok.jpg b/media/latest english/Klok-Con-Klok.jpg
diff --git a/media/latest english/are you lonely.jpg b/media/latest english/are you lonely.jpg
diff --git a/media/latest english/havana.jpeg b/media/latest english/havana.jpeg
diff --git a/media/latest english/the song.jpg b/media/latest english/the song.jpg
diff --git a/media/latest english/titanic.jpg b/media/latest english/titanic.jpg
diff --git a/media/latest kannada/777-Charlie.jpg b/media/latest kannada/777-Charlie.jpg
diff --git a/media/latest kannada/Punith rajkumar.jpeg b/media/latest kannada/Punith rajkumar.jpeg
diff --git a/media/latest kannada/kantara.jpg b/media/latest kannada/kantara.jpg
diff --git a/media/latest kannada/kgf.jpeg b/media/latest kannada/kgf.jpeg
diff --git a/media/latest kannada/kiss.jpg b/media/latest kannada/kiss.jpg
diff --git a/media/latest kannada/perfect girl.jpg b/media/latest kannada/perfect girl.jpg
diff --git a/media/music themes 2/electronic.jpg b/media/music themes 2/electronic.jpg
diff --git a/media/music themes 2/party.jpg b/media/music themes 2/party.jpg
diff --git a/media/music themes 2/travel.jpg b/media/music themes 2/travel.jpg
diff --git a/media/music themes/love.jpeg b/media/music themes/love.jpeg
diff --git a/media/music themes/pop.jpg b/media/music themes/pop.jpg
diff --git a/media/music themes/retro.jpg b/media/music themes/retro.jpg
diff --git a/media/music themes/rock.jpg b/media/music themes/rock.jpg
diff --git a/media/music themes/sad.jpg b/media/music themes/sad.jpg
diff --git a/media/music themes/vibe.jpg b/media/music themes/vibe.jpg
diff --git a/media/playlist/Attention.jpg b/media/playlist/Attention.jpg
diff --git a/media/playlist/Punith rajkumar.jpeg b/media/playlist/Punith rajkumar.jpeg
diff --git a/media/playlist/The Kerala Story.jpg b/media/playlist/The Kerala Story.jpg
diff --git a/media/playlist/clam down.jpg b/media/playlist/clam down.jpg
diff --git a/media/playlist/hey mama.jpg b/media/playlist/hey mama.jpg
diff --git a/media/playlist/jalebi baby.jpg b/media/playlist/jalebi baby.jpg
diff --git a/media/playlist/money.jpg b/media/playlist/money.jpg
diff --git a/media/playlist/on my way.jpg b/media/playlist/on my way.jpg
diff --git a/media/playlist/peaches.jpg b/media/playlist/peaches.jpg
diff --git a/media/playlist/senorita.jpg b/media/playlist/senorita.jpg
diff --git a/media/playlist/titanic.jpg b/media/playlist/titanic.jpg
diff --git a/media/popular artists/A.R.Rahman.jpeg b/media/popular artists/A.R.Rahman.jpeg
diff --git a/media/popular artists/David Bowie.jpeg b/media/popular artists/David Bowie.jpeg
diff --git a/media/popular artists/Dua Lipa.png b/media/popular artists/Dua Lipa.png
diff --git a/media/popular artists/Florence Welch.jpeg b/media/popular artists/Florence Welch.jpeg
diff --git a/media/popular artists/Harry Styles.jpeg b/media/popular artists/Harry Styles.jpeg
diff --git a/media/popular artists/Jessie.jpeg b/media/popular artists/Jessie.jpeg
diff --git a/media/popular artists/Katy perry.jpg b/media/popular artists/Katy perry.jpg
diff --git a/media/popular artists/Lata-Mangeshkar.png b/media/popular artists/Lata-Mangeshkar.png
diff --git a/media/popular artists/Ravi Shankar.jpeg b/media/popular artists/Ravi Shankar.jpeg
diff --git a/media/popular artists/Sonu nigam.jpeg b/media/popular artists/Sonu nigam.jpeg
diff --git a/media/profile_picture.jpg b/media/profile_picture.jpg
diff --git a/media/red_dot.png b/media/red_dot.png
diff --git a/media/songs/baby.jpg b/media/songs/baby.jpg
diff --git a/media/songs/bones.jpg b/media/songs/bones.jpg
diff --git a/media/songs/enemy.jpg b/media/songs/enemy.jpg
diff --git a/media/songs/harleys in hawaii.jpg b/media/songs/harleys in hawaii.jpg
diff --git a/media/songs/hero.jpg b/media/songs/hero.jpg
diff --git a/media/songs/karma.jpg b/media/songs/karma.jpg
diff --git a/media/website_logo.jpg b/media/website_logo.jpg
diff --git a/media/website_logo.png b/media/website_logo.png
diff --git a/primary page.css b/primary page.css
@@ -0,0 +1,206 @@
+/* these are all the media queries for index.html page with the desktop first approach*/
+@media screen and (max-width: 1200px) {
+	/* animated favourites text will be hidden for this viewport width*/
+	.favs {
+		display: none !important;
+	}
+	/* reduced size of search bar */
+	.search-bar {
+		width: 30%;
+	}
+	input {
+		font-size: 11px !important;
+	}
+}
+@media screen and (max-width: 900px) {
+	/* more button vil ve visible and section 2 will be hidden by default for this viewport */
+	label[for="more"] {
+		display: block;
+	}
+	/* hidden section 2 by default */
+	.section-2 {
+		visibility: hidden;
+		opacity: 0;
+		position: absolute;
+		width: 300px;
+		height: 66vh;
+		background-color: #050043;
+		box-shadow: 0px 0px 2px 1px white;
+		right: 0px;
+		top: 23.5%;
+		z-index: 5;
+		overflow: scroll;
+		padding-left:10px;
+		transition: visibility ease-in-out 0.2s;
+		transition: opacity ease-in-out 0.2s;
+	}
+	.playlist-content {
+		overflow: visible;
+	}
+	/* re-adjusted the queue options box */
+	.queue-options {
+		position: absolute;
+		height: auto;
+		width: auto;
+		top: 7%;
+		right: 0%;
+	}
+	/* more button */
+	input[id="more"]:checked ~ .section-2 {
+		visibility: visible;
+		opacity: 1;
+	}
+	/* hide section 2 scrollbar */
+	.section-2::-webkit-scrollbar {
+		display: none;
+	}
+	/* when the section 2 is hidden, section-1 width becomes 100% to cover the whole page */
+	.section-1 {
+		width: 100%;
+	}
+	.card {
+		min-width: 250px; /* to apply the flex effect */
+	}
+	/* carousel adjustment */
+	.outer-carousel {
+		height: 9%;
+	}
+	/* carousel image */
+	.carousel img {
+		height: 23vw;
+		width: 34.5vw;
+	}
+	/* first and 3rd images of the carousel */
+	.carousel img:nth-child(1) {
+		left: 56vw;
+	}
+	.carousel img:nth-child(3) {
+		right: 56vw;
+	} /* since the size of the carousel images is increased, the hover size should also be increased */
+	.carousel img:hover {
+		height: 27vw;
+		width: 40.5vw;
+	}
+	/* music themes section */
+	.music-themes {
+		justify-content: space-around;
+	}
+	.theme-main {
+		width: 50%;
+	}
+	/* theme content */
+	/* increased theme content size */
+	.theme-content {
+		width: 12vw;
+		height: 12vw;
+	}
+	.theme-content p {
+		font-size: 3vw;
+		top: -12.5vw;
+	}
+	/* increased music themes image size */
+	.music-themes div img {
+		width: 12vw;
+		height: 12vw;
+	}
+}
+@media screen and (max-width: 700px) {
+	/* in the screens of this width, generally volume buttons are provided at the side. */
+	/* so there is no need for the volume slider at this width. so i have removed them from the display */
+	/* footer section */
+	.extras > div:nth-child(3) {
+		display: none;
+	}
+	.extras > div:nth-child(4) {
+		display: none;
+	}
+	.outer-div {
+		width: 36vw;
+		height: 24vw;
+		min-width: 123px;
+		min-height: 82px;
+	}
+	.outer-div .inner-div span {
+		font-size: 4vw;
+	}
+}
+@media screen and (max-width: 550px) {
+	/* this is the most important media query */
+	/* navigation bar section */
+	/* website image */
+	.website-logo img {
+		height: 30px;
+		width: 30px;
+	}
+	/* website name */
+	.website-name h1 {
+		font-size: 3vw;
+	}
+	/* website name */
+	.website-name h4 {
+		font-size: 2vw;
+	}
+	/* notification bell */
+	.notification-bell img {
+		width: 20px;
+		height: 20px;
+	}
+	/* profile picture */
+	.profile-picture img {
+		width: 30px;
+		height: 30px;
+	}
+	/* notification bell and profile picture */
+	.notification-bell,
+	.profile-picture {
+		margin-top: 8px;
+	}
+	/* this is the image in the footer section of the page. due to less space, it has to be removed at such lower resolutions. */
+	/* there is another option, but it will look messy and small */
+	#song-image {
+		display: none;
+	}
+
+	.theme-main {
+		width: 100%;
+	}
+	/* theme content */
+	.theme-content {
+		width: 18vw;
+		height: 18vw;
+	}
+	.theme-content p {
+		font-size: 4.5vw;
+		top: -18.8vw;
+	}
+	.music-themes div img {
+		width: 18vw;
+		height: 18vw;
+	}
+
+	/* stations */
+	/* this is the stations section- those colorful boxes in the tri-linear-gradient div */
+	#div1 {
+		width: 30vw;
+		height: 20vw;
+	}
+	#div2 {
+		width: 28vw;
+		height: 24vw;
+	}
+	#div3 {
+		width: 26vw;
+		height: 26vw;
+	}
+	#div3 img {
+		width: 12vw;
+		height: 12vw;
+	}
+	/* text part in that section which contains "stations" text */
+	#div3 p {
+		font-size: 5vw;
+	}
+	.outer-div .inner-div span {
+		font-size: 6vw;
+	}
+}
diff --git a/secondary page.css b/secondary page.css
@@ -0,0 +1,180 @@
+
+
+/* these are all the media queries for "single playlist screen.html" page with the desktop first approach*/
+@media screen and (max-width: 1200px) {
+	/* animated favourites text will be hidden for this viewport width*/
+
+	.favs {
+		display: none !important;
+	}
+	/* reduced size of search bar */
+	.search-bar {
+		width: 30%;
+	}
+	input {
+		font-size: 11px !important;
+	}
+	.song-name-main h1 {
+		font-size: 2.4vw;
+	}
+	.desc {
+		font-size: 1.2vw;
+	}
+}
+@media screen and (max-width: 900px) {
+	/* jumbotron description */
+	.desc {
+		font-size: 1.6vw;
+	}
+	/* more button vil ve visible and section 2 will be hidden by default for this viewport */
+	label {
+		display: block;
+	}
+	/* hidden section 2 by default */
+
+	.section-2 {
+		visibility: hidden;
+		opacity: 0;
+		position: absolute;
+		width: 300px;
+		height: 68vh;
+		background-color: #0500;
+		box-shadow: 0px 0px 2px 1px white;
+		right: 0px;
+		top: 23.5%;
+		overflow: scroll;
+		padding-left:10px;
+		z-index: 5;
+		padding-right:5px;
+		transition:visibility ease-in-out 0.3s;
+		transition: opacity ease-in-out 0.3s;
+	}
+	/* more button */
+	input[type="checkbox"]:checked ~ .section-2 {
+		visibility: visible;
+		opacity: 1;
+	}
+	.list {
+		overflow: hidden;
+		height: auto;
+	}
+	.list-item {
+		background-color: #1a1e33;
+	}
+	/* hide section 2 scrollbar */
+	.section-2::-webkit-scrollbar {
+		display: none;
+	}
+	/* when the section 2 is hidden, section-1 width becomes 100% to cover the whole page */
+	.section-1 {
+		width: 100%;
+	}
+	/* jumbotron */
+	.jumbotron {
+		height: 30vw;
+	}
+	/* image in the jumbotron */
+	.jumbotron-image {
+		height: 30vw;
+		width: 30vw;
+	}
+	/* buttons and all */
+	.action-part p {
+		font-size: 2vw;
+	}
+	.btns > button {
+		height: 4vw;
+		width: 11vw;
+		font-size: 1.7vw;
+	}
+}
+@media screen and (max-width: 700px) {
+	/* in the screens of this width, generally volume buttons are provided at the side. */
+	/* so there is no need for the volume slider at this width. so i have removed them from the display */
+	/* followers and author */
+	.followers,
+	.author {
+		font-size: 2vw;
+	}
+	/* jumbotron description */
+	.desc {
+		font-size: 1.8vw;
+	}
+	/* extra icons in the footer at the right hand side */
+	.extras > div:nth-child(3) {
+		display: none;
+	}
+	.extras > div:nth-child(4) {
+		display: none;
+	}
+}
+@media screen and (max-width: 550px) {
+	/* this is the most important media query */
+	/* navigation bar section */
+	/* website image */
+	.website-logo img {
+		height: 30px;
+		width: 30px;
+	}
+	/* website name */
+	.website-name h1 {
+		font-size: 3vw;
+	}
+	/* website name */
+	.website-name h4 {
+		font-size: 2vw;
+	}
+	/* notification bell */
+	.notification-bell img {
+		width: 20px;
+		height: 20px;
+	}
+	/* profile picture */
+	.profile-picture img {
+		width: 30px;
+		height: 30px;
+	}
+	/* notification bell and profile picture */
+	.notification-bell,
+	.profile-picture {
+		margin-top: 8px;
+	}
+	.song-name-main h1 {
+		font-size: 3vw;
+	}
+	/* followers and author */
+	.followers,
+	.author {
+		font-size: 3vw;
+	}
+	/* jumbotron description */
+	.desc {
+		font-size: 3vw;
+		padding-left: 4px;
+	}
+	/* buttons and all in the jumbotron */
+	.action-part {
+		padding-top: 0px;
+	}
+	/* jumbotron */
+	.jumbotron {
+		height: 60vw;
+		text-align: justify;
+	}
+	/* image in the jumbotron */
+	.jumbotron-image {
+		height: 60vw;
+		width: 60vw;
+	}
+	/* buttons and stuff */
+	.btns > button {
+		height: 8vw;
+		width: 17vw;
+		font-size: 3.2vw;
+	}
+	/* this is the image in the footer section of the page. due to less space, it has to be removed at such lower resolutions. */
+	/* there is another option, but it will look messy and small */
+	#song-image {
+		display: none;
+	}
+}