diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md deleted file mode 100644 index fc878014..00000000 --- a/.github/pull_request_template.md +++ /dev/null @@ -1,15 +0,0 @@ -# Description - -## TechStack Used: -- [ ] React js -- [ ] Vue js -- [ ] Django -- [ ] Express -- [ ] Flutter -- [ ] Native Android -- [ ] other, *specify*- _________ - - -**Your Github Repository link** - - -*Don't forget to make your submission in [Hackalog Site](https://hackalog.copsiitbhu.co.in/hackathon/debug-it-2022 "DebugIt'22") too!* diff --git a/README.md b/README.md index f0df3a2a..6d97793a 100644 --- a/README.md +++ b/README.md @@ -1,124 +1,24 @@ -## Debugit 2022 -[![Debugit](./lib/copsWeek_debugit.png)](https://hackalog.copsiitbhu.co.in/hackathon/debug-it-2022) - -## Introduction -Debugit is a week long hackathon open to ideas in a very literal sense. You can make anything from the projects' list we'll share or ignite the inquisitive Bob the Builder inside you to make something exciting and completely new! - -## How to make a submission? -Submissions are to be made through GitHub Pull Requests. To know more about how to make a GitHub Pull Request you can refer the [Fundamentals of Git](https://www.youtube.com/playlist?list=PLLt4yMoVgczVgFcTzT60U5IXtNX1qjHL9) playlist which contains everything that you would need. - -## Make sure to include - - A README.md file with your name, contact information, project description and how to run the code (and other necessary information). - - A folder containing a demo video of your project. - -## Here is a detailed step by step walkthrough if you don't know how to make a Debugit submission. - -- Create a fork of this [repository](https://github.com/COPS-IITBHU/Debugit_2022) - A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project. - 1. Click on the fork icon in the repository that you might find at the top right corner. - - Demo: - ![](./lib/fork.png) - - 2. It will ask you what would you like to name the forked repository. By default they are named the same as the parent directory. Lets keep the name as it is. - - Demo: - ![](./lib/fork_name.png) - -- Clone the repository that you forked - 1. Find the link which you would need to clone and copy it. - - Demo: - ![](./lib/clone_link.png) - - 2. Go to the directory in which you want to clone your repository and open the terminal. - - Demo: - ![](./lib/open_terminal.png) - - 3. Run the `git clone` command in the terminal (in case of windows, git bash terminal) and append the link that you copied. - ``` - git clone - ``` - - Demo: - ![](./lib/clone.png) - - 4. You will find that the repository is cloned in the directory. -- Now you can open the directory in vs code and play with the code and complete your project. -- After completing the project, its time to push your code: - 1. Open the vs code (or any other editor of your choice) terminal in the project folder. - 2. Create a new branch in which you want to push your code using the following code. - ``` - git checkout -b - ``` - You can name your branch whatever you like. - - Demo: - ![](./lib/create_branch.png) - - 3. Check which branch are you on using the `git branch` command. - ``` - git branch - ``` - 4. The branch name with a `*` on it is the current branch. If it is different from the branch that you created, then switch to your branch using the `git checkout` - ``` - git checkout - ``` - 5. You can check the status of the files using - ``` - git status - ``` - 6. Add (Stage) all the files you want to upload using the `git add` command. - To add individual files run the following command: - ``` - git add - ``` - If you want to add all the files from your project directory you can run - ``` - git add . - ``` - It is recommended not to add the some directories like node_modules directory in your commit. You can prevent it by adding it in a `.gitignore` file (For more reference [here](https://www.w3schools.com/git/git_ignore.asp?remote=github)). - - Demo: - ![](./lib/add_files.png) - - 6. Commmit your code. - You can commit all your staged code (to the local git repository) using the `git commit` command - Run the following command: - ``` - git commit -m "first commit" - ``` - You can replace `first commit` with anything. It is actually a message to let you keep a brief track of what changes has been done in that commit. - - Demo: - ![](./lib/commit.png) - - 7. Push your code. - Push all of your commited code using the `git push` command. - Run the following command: - ``` - git push --set-upstream origin - ``` - - Demo: - ![](./lib/push.png) - -- Make the Pull Request and submit your code. - 1. After you push your code, it gets uploaded to your forked directory and creates a new branch that you created. - 2. If it notices any difference in the code of your forked repo and the parent repo. It automatically shows you an option to create a pull request. - - Demo: - ![](./lib/pull_request.png) - - 3. Write down a brief description of your project in the Pull Request description and give the PR a proper title and click on create pull request. Now GitHub might run some checks. If you pass all the checks, you are good to go. - - Demo: - ![](./lib/submission.png) - - -- Pat yourself on the back - - ![](./lib/pat.gif) - -> All The Best 🎉🎉. \ No newline at end of file +This site is a mini music player.The songs are currently available in theree languages English,Hindi and Bengali.The playlist is currently pre defined but let's say i tried my best to talk to a range variety of people to sort out the best trending songs in the market right now :) +Ahem!COMING TO THE MAIN POINTS AND ADVANTAGES OF THIS SITE YOU CAN : + + 1.CHOOSE AMONG THE THREE LANGUAGES + 2.A SEARCH BUTTON IS AVAILABLE WHERE YOU MAY SEARCH FOR THE SONGS AND ARTISTS TOO! AND THAT TOO WITH INSTANTENOUS FILTERING FOR EACH LETTER YOU TYPE :D + 3.YOU SHOULD CLICK ON THE THUMBNAIL THO TO LISTEN TO A PARTICULAR SONG/MUSIC :/ + 4.HEY THERE NOW COMES THE FUN PART!(AND SOMETHING WHICH TOOK ME HUGE TIME TO WORKOUT THROUGH SO PLEASE SUPPORT GUYS ) + I.YOU CAN ACTUALLY INCREASE OR DECRESE THE VOLUME OR EVEN MUTE!!! + II.THERE IS A REALTIME PROGRESS BAR WHICH PROGRESSES WITH THE TIME OF PLAY OF THE SONG! AAANNNDDD YOU CAN ACTUALLY SKIP TO ANY SPECIFIC AREA OF THE SONG + III.AUTOPLAY IS IN BUILT SO YOU CAN SIMPLY RUN THE SONGS IN THE BACKGROUND WITHOUT EVEN THINKING ABOUT CHANGING TO THE NEXT FOR AT ANY POINT. YES THE PLAYLIST "AUTO-REPEATS" ITSELF WHEN IT REACHES THE LAST SONG OF THE LIST :P + 5.there is actually a chat site where you can post your comments absolutely anonymously!!YOU JUST NEED TO ENTER WITH A DESIRED ID AND POST YOUR COMMENTS.AND!THE COMMENTS POSTED BY OTHERS WOULD BE VISIBLE TOO! + 6.A CONTACTS PAGE WHERE YOU CAN SEND ME YOUR PERSONAL REVIEWS ABOUT MY SITE OR SUGGESTONS. + 7.I HAVE ALSO INCLUDED MY SOCIAL MEDIA HANDLES WHERE YOU CAN GET IN TOUCH WITH ME + + + + + + + + + + LINK TO MY SITE WHICH HAS ALREADY BEEN HOSTED: + https://lilifier.netlify.app/ diff --git a/about/index.html b/about/index.html new file mode 100644 index 00000000..9d4f49ee --- /dev/null +++ b/about/index.html @@ -0,0 +1,70 @@ + + + + + + Valeriser + + + + + + +
+ +
+

+ ABOUT THIS WEBSITE +

+

This site is a mini music player.The songs are currently available in theree languages English,Hindi and Bengali.The playlist is currently pre defined but let's say i tried my best to talk to a range variety of people to sort out the best trending songs in the market right now :)
+ Ahem!COMING TO THE MAIN POINTS AND ADVANTAGES OF THIS SITE YOU CAN : +

+          1.CHOOSE AMONG THE THREE LANGUAGES
+          2.A SEARCH BUTTON IS AVAILABLE WHERE YOU MAY SEARCH FOR THE SONGS AND ARTISTS TOO! AND THAT TOO WITH INSTANTENOUS FILTERING FOR EACH LETTER YOU TYPE :D
+          3.YOU SHOULD CLICK ON THE THUMBNAIL THO TO LISTEN TO A PARTICULAR SONG/MUSIC :/
+          4.HEY THERE NOW COMES THE FUN PART!(AND SOMETHING WHICH TOOK ME HUGE TIME TO WORKOUT THROUGH SO PLEASE SUPPORT GUYS )
+                   I.YOU CAN ACTUALLY INCREASE OR DECRESE THE VOLUME OR EVEN MUTE!!!
+                   II.THERE IS A REALTIME PROGRESS BAR WHICH PROGRESSES WITH THE TIME OF PLAY OF THE SONG! AAANNNDDD YOU CAN ACTUALLY SKIP TO ANY SPECIFIC AREA OF THE SONG
+                   III.AUTOPLAY IS IN BUILT SO YOU CAN SIMPLY RUN THE SONGS IN THE BACKGROUND WITHOUT EVEN THINKING ABOUT CHANGING TO THE NEXT FOR AT ANY POINT. YES THE PLAYLIST "AUTO-REPEATS" ITSELF                   WHEN IT REACHES THE LAST SONG OF THE LIST :P
+           + 5.there is actually a chat site where you can post your comments absolutely anonymously!!YOU JUST NEED TO ENTER WITH A DESIRED ID AND POST YOUR COMMENTS.AND!THE COMMENTS POSTED BY OTHERS WOULD BE VISIBLE TOO!
+          6.A CONTACTS PAGE WHERE YOU CAN SEND ME YOUR PERSONAL REVIEWS ABOUT MY SITE OR SUGGESTONS.
+          7.I HAVE ALSO INCLUDED MY SOCIAL MEDIA HANDLES WHERE YOU CAN GET IN TOUCH WITH ME

+

+ TECHNOLOGIES USED FOR DEVELOPING THIS SITE +

+

WELL NOTHING MUCH BUT JUST AN INTERESTING MIX OF HTML,JAVASCRIPT AND CSS AND USE OF APIS FOR ENCRYPTION AND A FIREBASE REALTIME DATABASE TO KEEP TRACK AND UPDATION OF THE COMMENTS BEING POSTED INSTANTENOUSLY ON THE COMMENTING SERVER NAMELY LILIFIER_CRITICISER

+ +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/about/qGFw78.webp b/about/qGFw78.webp new file mode 100644 index 00000000..26033a22 Binary files /dev/null and b/about/qGFw78.webp differ diff --git a/about/style.css b/about/style.css new file mode 100644 index 00000000..81cae123 --- /dev/null +++ b/about/style.css @@ -0,0 +1,110 @@ +*{ + margin:0; + padding:0; + font-family: 'Bebas Neue', cursive; + +} +.header{ + min-height: 100vh; + width:100%; + background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(qGFw78.webp); + background-position: center; + background-size: cover; + background-attachment: fixed; + +} +nav{ + display:flex; + padding:2% 6%; + justify-content: space-between; + align-items:right; +} +nav img{ + padding: 2% 0%; + height: 50px; + position:relative; + top: -12px; + + +} + +.nav-links{ + flex:l; + text-align:right; + +} +.nav-links ul li{ + list-style:none; + display:inline-block; + padding:2px 12px; + position:relative; + +} +.nav-links ul li a{ + color:rgb(237, 239, 239); + text-decoration: none; + font-size:20px; + +} +.nav-links ul li::after{ + content:''; + width:0%; + height:2px; + background:white; + display:block; + margin:auto; + transition:0.5s; +} +.nav-links ul li:hover::after{ + width:100%; + +} +@media(max-width:700px){ + .text-box h1{ + font-size:20px; + } + .nav-links ul li{ + display:block; + } + .nav-links{ + position: absolute; + background:#f44336; + height:100vh; + width:200px; + top:0; + right:0; + text-align:left; + z-index:2; + } + +} +.header #logo{ + position:absolute; + top:10px; + left:30px; + font-size:30px; + color:#ccc; + text-transform:capitalize; +} +.main #logo0 i{ + margin-right:15px; +} +.footer{ + width:100%; + text-align: center; + padding: 30px 0; + +} +.footer h4{ + font-size: 30px; + margin-bottom: 25px; + margin-top: 20px; + font-weight: 600; + color: white; +} +.footer p{ + font-size: 20px; + font-weight: 100; + color: #ccc; + text-align: left; +} \ No newline at end of file diff --git a/ariji.jpg b/ariji.jpg new file mode 100644 index 00000000..244b1b98 Binary files /dev/null and b/ariji.jpg differ diff --git a/bengali.html b/bengali.html new file mode 100644 index 00000000..2a74e75d --- /dev/null +++ b/bengali.html @@ -0,0 +1,308 @@ + + + + + + + + + Document + + Valeriser + + + + + + + + +
+ +
+ +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CoverSONGARTIST
+ + MAMO CHITTEY + RABINDRANATH TAGORE FT. ARIGIT SINGH +
+ + KENO DURE THAKO + SRIKANTO ACHARYA +
+ + MEGH KALO AADHAR KALO + HEMANTA MUKHERJEE FT.NACHIKETA GHOSH +
+ + KOTOBARO BHEBECHINU + RABINDRANATH TAGORE FT.BABUL SUPRIYO +
+ + PHERARI MON + SHANTANU MOITRA FT. SHREYA GHOSHAL,BABUL SUPRIYO +
+ + JAO PAKHI + SHANTANU MOITRA FT. SHREYA GHOSHAL,PRANAB BISWAS +
+ + PAGLA HAWAR BADOL DINE + RABINDRANATH TAGORE FT.SHREYA GHOSHAL,NACHIKETA +
+ + AMAKE AMAR MOTO THAKTE DAO + ANUPAM ROY +
+ + BECHE THAKAR GAAN + ANUPAM ROY +
+ + KHOLO DWAR BODHUA + BYOMKESH PAWRBO +
+ + KICCHU KICCHU KOTHA + ARIJIT SINGH +
+ + TOMAY HRID MAJHARE RAKHBO + ADITYA CHAKRABORTY +
+ + + + + +
+ + + + + + \ No newline at end of file diff --git a/comments/index.css b/comments/index.css new file mode 100644 index 00000000..723fee8b --- /dev/null +++ b/comments/index.css @@ -0,0 +1,322 @@ +body{ + /* https://www.color-hex.com/color/d3d3d3 */ + background-color: rgb(225, 233, 231); /*#f6f6f6, EBEBD3, fafafa*/ + font-family: Bungee Outline; + font-weight: 900; + + overflow: hidden; + animation: blur 0.5s ease-out; + + } + *{ + outline: none; + border: none; + padding: 0; + margin: 0; + box-sizing: border-box; + } + #title_container{ + width: 100%; + height: 225px; + + display:flexbox; + justify-content: center; + align-items: center; + + background-color: #4e4b4c;/*#467599;*/ + border-bottom: 5px solid #fff; + box-shadow: 0 0 30px -18px #D64045; + + } + #title_inner_container{ + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + + /* background-color: #083D77; */ + border-radius: 200px; + } + #title{ + display: inline-block; + color: #fff;/*EBEBD3, C5283D*/ + font-size: 55px; + letter-spacing: 2px; + user-select: none; + } + + #join_container{ + width: 100%; + height: 200px; + + display: flex; + justify-content: center; + align-items: center; + + float: left; + margin-top: 80px; + + } + #join_inner_container{ + width: 50%; + height: 100%; + } + #join_input_container{ + width: 100%; + height: 50px; + + display: flex; + justify-content: center; + align-items: center; + + float: left; + } + #join_input{ + width: 60%; + height: 40px; + + color: #1D3354; + font-family: Varela Round; + font-size: 15px; + font-weight: bold; + text-align: center; + background-color: Transparent; + border-bottom: 2px dashed #1D3354; + + } + #join_input:focus{ + box-shadow: 0 10px 30px -17px #1D3354; + } + #join_button_container{ + width: 100%; + height: 50px; + + display: flex; + justify-content: center; + align-items: center; + + float: left; + } + #join_button{ + width: 60%; + height: 40px; + + font-family: Varela Round; + font-size: 15px; + font-weight: bold; + text-align: center; + color: #fff; + } + + #chat_container{ + width: 100%; + height: 450px; + + display: flex; + justify-content: center; + + float: left; + margin-top: 40px; + /* Fade in container */ + animation: fadeIn 1s linear; + + } + #chat_inner_container{ + width: 40%; + height: 100%; + } + #chat_content_container{ + width: 100%; + height: 70%; + + float: left; + overflow-y: auto; + font-family: Varela Round; + + padding-left: 15px; + padding-right: 15px; + } + #chat_input_container{ + width: 100%; + height: 10%; + + float: left; + border-bottom: 2px dashed #1D3354; + background-color: Transparent; + + padding-left: 15px; + padding-right: 15px; + font-family: Varela Round; + margin-top: 10px; + } + #chat_input{ + width: 95%; + height: 100%; + float: left; + background-color: Transparent; + color: #1D3354; + font-size: 15px; + } + #chat_input_send{ + /*width: 5%; + height: 80%; + float: left; + font-size: 18px; + background-color:#1D3354; + text-align: right; + color: rgb(20, 19, 19);*/ + + background-color:#7f8285; + background-image: url( + 'paperplane_diable.png'); + + + background-size: cover; + width: 30px; + + height: 30px; + text-align: right; + font-size: 2rem; + float:right; + } + #chat_input_send.enabled{ + background-color:#7f8285; + background-image: url( + 'paperplane.png'); + + background-size: cover; + width: 30px; + + height: 30px; + text-align: right; + font-size: 2rem; + float:right; + + } + #chat_logout_container{ + width: 100%; + display: inline-block; + + display: flex; + justify-content: center; + align-items: center; + + + margin-top: 20px; + } + #chat_logout{ + color: #D64045; + cursor: pointer; + } + #chat_logout:hover{ + text-decoration: underline; + } + .message_container{ + width: 100%; + display: inline-block; + margin-bottom: 20px; + + } + .message_inner_container{ + width: 100%; + display: inline-block; + + color: #1D3354; + } + .message_user_container{ + width: 100%; + display: inline-block; + } + .message_user{ + font-weight: bold; + font-size: 14px; + } + .message_content_container{ + width: 100%; + display: inline-block; + + white-space: pre-wrap; + word-wrap: break-word; + } + .message_content{ + font-weight: normal; + font-size: 14px; + margin-top: 5px; + } + + .enabled{ + transition: background-color 0.5s; + color: #fff; + background-color: #D64045; /*#5B7553;*/ + cursor: pointer; + } + #title_container.chat_title_container{ + transition: 0.8s; + transition-timing-function: ease-in-out; + height: 100px; + } + #title.chat_title{ + transition: 0.8s; + font-size: 47px; + } + .loader_container{ + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + } + .loader { + border-radius: 50%; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; + + border-top: 6px solid #D64045; + border-bottom: 6px solid #1D3354; + border-left: 6px solid #E9FFF9; + border-right: 6px solid #E9FFF9; + } + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + @keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + @keyframes blur { + 0% {filter: blur(5px);} + 100% {} + } + ::selection { + background-color: #D64045; + color: #fff; + } + /* width */ + ::-webkit-scrollbar { + width: 6px; + } + /* Track */ + ::-webkit-scrollbar-track { + background: #2e2d2d; + } + /* Handle */ + ::-webkit-scrollbar-thumb { + background: #2e2d2d; + border-radius: 5px; + } + #join_info_container{ + width: 60%; + height: 40px; + + font-family: Varela Round; + font-size: 15px; + font-weight: bold; + text-align: center; + color:black; + } \ No newline at end of file diff --git a/comments/index.html b/comments/index.html new file mode 100644 index 00000000..b5b15176 --- /dev/null +++ b/comments/index.html @@ -0,0 +1,22 @@ + + + + + MemeChat 2.0 + + + + + + + + + + + + + + + + + diff --git a/comments/index.js b/comments/index.js new file mode 100644 index 00000000..bb502ae8 --- /dev/null +++ b/comments/index.js @@ -0,0 +1,347 @@ +// We enclose this in window.onload. +// So we don't have ridiculous errors. +window.onload = function() { + // Import the functions you need from the SDKs you need + + // TODO: Add SDKs for Firebase products that you want to use + // https://firebase.google.com/docs/web/setup#available-libraries + + // Your web app's Firebase configuration + const firebaseConfig = { + apiKey: "AIzaSyCOdElzJp3b47rNLFAVZQ_-vnvn4AoAJKw", + authDomain: "lilifiercriticiser.firebaseapp.com", + projectId: "lilifiercriticiser", + storageBucket: "lilifiercriticiser.appspot.com", + messagingSenderId: "270477199560", + appId: "1:270477199560:web:ed6ca5294748fdbc123dfd" + }; + + // Initialize Firebase + + // Initialize Firebase + firebase.initializeApp(firebaseConfig); + // This is very IMPORTANT!! We're going to use "db" a lot. + var db = firebase.database() + // We're going to use oBjEcT OrIeNtEd PrOgRaMmInG. Lol + class MEME_CHAT{ + // Home() is used to create the home page + home(){ + // First clear the body before adding in + // a title and the join form + document.body.innerHTML = '' + this.create_title() + this.create_join_form() + } + // chat() is used to create the chat page + chat(){ + this.create_title() + this.create_chat() + } + // create_title() is used to create the title + create_title(){ + // This is the title creator. 🎉 + var title_container = document.createElement('div') + title_container.setAttribute('id', 'title_container') + var title_inner_container = document.createElement('div') + title_inner_container.setAttribute('id', 'title_inner_container') + + var title = document.createElement('h1') + title.setAttribute('id', 'title') + title.textContent = 'LILIFIER_CRITICISER' + + title_inner_container.append(title) + title_container.append(title_inner_container) + document.body.append(title_container) + } + // create_join_form() creates the join form + create_join_form(){ + // YOU MUST HAVE (PARENT = THIS). OR NOT. I'M NOT YOUR BOSS!😂 + var parent = this; + + var join_container = document.createElement('div') + join_container.setAttribute('id', 'join_container') + var join_inner_container = document.createElement('div') + join_inner_container.setAttribute('id', 'join_inner_container') + + var join_button_container = document.createElement('div') + join_button_container.setAttribute('id', 'join_button_container') + + + var join_button = document.createElement('button') + join_button.setAttribute('id', 'join_button') + join_button.innerHTML = 'Join ' + + var join_input_container = document.createElement('div') + join_input_container.setAttribute('id', 'join_input_container') + + + + var join_input = document.createElement('input') + join_input.setAttribute('id', 'join_input') + join_input.setAttribute('maxlength', 15) + join_input.placeholder = 'Enter UserID to post your criticism/comments :)' + // Every time we type into the join_input + join_input.onkeyup = function(){ + // If the input we have is longer that 0 letters + if(join_input.value.length > 0){ + // Make the button light up + join_button.classList.add('enabled') + // Allow the user to click the button + join_button.onclick = function(){ + // Save the name to local storage. Passing in + // the join_input.value + parent.save_name(join_input.value) + // Remove the join_container. So the site doesn't look weird. + join_container.remove() + // parent = this. But it is not the join_button + // It is (MEME_CHAT = this). + parent.create_chat() + } + }else{ + // If the join_input is empty then turn off the + // join button + join_button.classList.remove('enabled') + } + } + + // Append everything to the body + join_button_container.append(join_button) + join_input_container.append(join_input) + join_inner_container.append(join_input_container, join_button_container) + join_container.append(join_inner_container) + document.body.append(join_container) + } + // create_load() creates a loading circle that is used in the chat container + create_load(container_id){ + // YOU ALSO MUST HAVE (PARENT = THIS). BUT IT'S WHATEVER THO. + var parent = this; + + // This is a loading function. Something cool to have. + var container = document.getElementById(container_id) + container.innerHTML = '' + + var loader_container = document.createElement('div') + loader_container.setAttribute('class', 'loader_container') + + var loader = document.createElement('div') + loader.setAttribute('class', 'loader') + + loader_container.append(loader) + container.append(loader_container) + + } + // create_chat() creates the chat container and stuff + create_chat(){ + // Again! You need to have (parent = this) + var parent = this; + // GET THAT MEMECHAT HEADER OUTTA HERE + var title_container = document.getElementById('title_container') + var title = document.getElementById('title') + title_container.classList.add('chat_title_container') + // Make the title smaller by making it 'chat_title' + title.classList.add('chat_title') + + var chat_container = document.createElement('div') + chat_container.setAttribute('id', 'chat_container') + + var chat_inner_container = document.createElement('div') + chat_inner_container.setAttribute('id', 'chat_inner_container') + + var chat_content_container = document.createElement('div') + chat_content_container.setAttribute('id', 'chat_content_container') + + var chat_input_container = document.createElement('div') + chat_input_container.setAttribute('id', 'chat_input_container') + + var chat_input_send = document.createElement('button') + chat_input_send.setAttribute('id', 'chat_input_send') + chat_input_send.setAttribute('disabled', true) + chat_input_send.innerHTML = `` + + var chat_input = document.createElement('input') + chat_input.setAttribute('id', 'chat_input') + // Only a max message length of 1000 + chat_input.setAttribute('maxlength', 1000) + // Get the name of the user + chat_input.placeholder = `${parent.get_name()}. Say something...` + chat_input.onkeyup = function(){ + if(chat_input.value.length > 0){ + chat_input_send.removeAttribute('disabled') + chat_input_send.classList.add('enabled') + chat_input_send.onclick = function(){ + chat_input_send.setAttribute('disabled', true) + chat_input_send.classList.remove('enabled') + if(chat_input.value.length <= 0){ + return + } + // Enable the loading circle in the 'chat_content_container' + parent.create_load('chat_content_container') + // Send the message. Pass in the chat_input.value + parent.send_message(chat_input.value) + // Clear the chat input box + chat_input.value = '' + // Focus on the input just after + chat_input.focus() + } + }else{ + chat_input_send.classList.remove('enabled') + } + } + + var chat_logout_container = document.createElement('div') + chat_logout_container.setAttribute('id', 'chat_logout_container') + + var chat_logout = document.createElement('button') + chat_logout.setAttribute('id', 'chat_logout') + chat_logout.textContent = `${parent.get_name()} • logout` + // "Logout" is really just deleting the name from the localStorage + chat_logout.onclick = function(){ + localStorage.clear() + // Go back to home page + parent.home() + } + + chat_logout_container.append(chat_logout) + chat_input_container.append(chat_input, chat_input_send) + chat_inner_container.append(chat_content_container, chat_input_container, chat_logout_container) + chat_container.append(chat_inner_container) + document.body.append(chat_container) + // After creating the chat. We immediatly create a loading circle in the 'chat_content_container' + parent.create_load('chat_content_container') + // then we "refresh" and get the chat data from Firebase + parent.refresh_chat() + } + // Save name. It literally saves the name to localStorage + save_name(name){ + // Save name to localStorage + localStorage.setItem('name', name) + } + // Sends message/saves the message to firebase database + send_message(message){ + var parent = this + // if the local storage name is null and there is no message + // then return/don't send the message. The user is somehow hacking + // to send messages. Or they just deleted the + // localstorage themselves. But hacking sounds cooler!! + if(parent.get_name() == null && message == null){ + return + } + + // Get the firebase database value + db.ref('chats/').once('value', function(message_object) { + // This index is mortant. It will help organize the chat in order + var index = parseFloat(message_object.numChildren()) + 1 + db.ref('chats/' + `message_${index}`).set({ + name: parent.get_name(), + message: message, + index: index + }) + .then(function(){ + // After we send the chat refresh to get the new messages + parent.refresh_chat() + }) + }) + } + // Get name. Gets the username from localStorage + get_name(){ + // Get the name from localstorage + if(localStorage.getItem('name') != null){ + return localStorage.getItem('name') + }else{ + this.home() + return null + } + } + // Refresh chat gets the message/chat data from firebase + refresh_chat(){ + var chat_content_container = document.getElementById('chat_content_container') + + // Get the chats from firebase + db.ref('chats/').on('value', function(messages_object) { + // When we get the data clear chat_content_container + chat_content_container.innerHTML = '' + // if there are no messages in the chat. Retrun . Don't load anything + if(messages_object.numChildren() == 0){ + return + } + + // OK! SO IF YOU'RE A ROOKIE CODER. THIS IS GOING TO BE + // SUPER EASY-ISH! I THINK. MAYBE NOT. WE'LL SEE! + + // convert the message object values to an array. + var messages = Object.values(messages_object.val()); + var guide = [] // this will be our guide to organizing the messages + var unordered = [] // unordered messages + var ordered = [] // we're going to order these messages + + for (var i, i = 0; i < messages.length; i++) { + // The guide is simply an array from 0 to the messages.length + guide.push(i+1) + // unordered is the [message, index_of_the_message] + unordered.push([messages[i], messages[i].index]); + } + + // Now this is straight up from stack overflow 🤣 + // Sort the unordered messages by the guide + guide.forEach(function(key) { + var found = false + unordered = unordered.filter(function(item) { + if(!found && item[1] == key) { + // Now push the ordered messages to ordered array + ordered.push(item[0]) + found = true + return false + }else{ + return true + } + }) + }) + + // Now we're done. Simply display the ordered messages + ordered.forEach(function(data) { + var name = data.name + var message = data.message + + var message_container = document.createElement('div') + message_container.setAttribute('class', 'message_container') + + var message_inner_container = document.createElement('div') + message_inner_container.setAttribute('class', 'message_inner_container') + + var message_user_container = document.createElement('div') + message_user_container.setAttribute('class', 'message_user_container') + + var message_user = document.createElement('p') + message_user.setAttribute('class', 'message_user') + message_user.textContent = `${name}` + + var message_content_container = document.createElement('div') + message_content_container.setAttribute('class', 'message_content_container') + + var message_content = document.createElement('p') + message_content.setAttribute('class', 'message_content') + message_content.textContent = `${message}` + + message_user_container.append(message_user) + message_content_container.append(message_content) + message_inner_container.append(message_user_container, message_content_container) + message_container.append(message_inner_container) + + chat_content_container.append(message_container) + }); + // Go to the recent message at the bottom of the container + chat_content_container.scrollTop = chat_content_container.scrollHeight; + }) + + } + } + // So we've "built" our app. Let's make it work!! + var app = new MEME_CHAT() + // If we have a name stored in localStorage. + // Then use that name. Otherwise , if not. + // Go to home. + if(app.get_name() != null){ + app.chat() + } + } + \ No newline at end of file diff --git a/comments/paperplane.png b/comments/paperplane.png new file mode 100644 index 00000000..4490bec6 Binary files /dev/null and b/comments/paperplane.png differ diff --git a/comments/paperplane_diable.png b/comments/paperplane_diable.png new file mode 100644 index 00000000..25c0ffc0 Binary files /dev/null and b/comments/paperplane_diable.png differ diff --git a/contact/index.html b/contact/index.html new file mode 100644 index 00000000..c8931b34 --- /dev/null +++ b/contact/index.html @@ -0,0 +1,72 @@ + + + + + + + + + Document + + + + + + + + + + +
+ +
+

CONTACT ME!

+

HEY! SOMETIMES U MIGHT JUST WANNA DROP ME PERSONAL SUGGESTIONS AND I WOULD BE HIGHLY GLAD TO HAVE THEM :D

+
+
+
+
+ + +
+
+ + +
+
+ + +
+ + + + +
+ +
+
+ +

I am also available on the following social media

+
+ + + + +
+
+
+ + \ No newline at end of file diff --git a/contact/qGFw78.webp b/contact/qGFw78.webp new file mode 100644 index 00000000..26033a22 Binary files /dev/null and b/contact/qGFw78.webp differ diff --git a/contact/style.css b/contact/style.css new file mode 100644 index 00000000..6758f781 --- /dev/null +++ b/contact/style.css @@ -0,0 +1,177 @@ +*{ + margin:0; + padding:0; + font-family: 'Bebas Neue', cursive; + +} +.header{ + min-height: 100vh; + width:100%; + background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(qGFw78.webp); + background-position: center; + background-size: cover; + background-attachment: fixed; + +} +.hero{ + display:flex; + align-items: center; + justify-content: center; +} +nav{ + display:flex; + padding:2% 6%; + justify-content: space-between; + align-items:right; +} +nav img{ + padding: 2% 0%; + height: 50px; + position:relative; + top: -12px; + + +} + +.nav-links{ + flex:l; + text-align:right; + +} +.nav-links ul li{ + list-style:none; + display:inline-block; + padding:2px 12px; + position:relative; + +} +.nav-links ul li a{ + color:rgb(237, 239, 239); + text-decoration: none; + font-size:20px; + +} +.nav-links ul li::after{ + content:''; + width:0%; + height:2px; + background:white; + display:block; + margin:auto; + transition:0.5s; +} +.nav-links ul li:hover::after{ + width:100%; + +} +.text-box{ + width:90%; + color:aliceblue; + position: absolute; + + transform:translate(); + text-align: center; +} + +@media(max-width:700px){ + .text-box h1{ + font-size:20px; + } + .nav-links ul li{ + display:block; + } + .nav-links{ + position: absolute; + background:#f44336; + height:100vh; + width:200px; + top:0; + right:0; + text-align:left; + z-index:2; + } + +} + + + +.header #logo{ + position:absolute; + top:10px; + left:30px; + font-size:30px; + color:#ccc; + text-transform:capitalize; +} +.main #logo0 i{ + margin-right:15px; +} +form{ + width:90%; + max-width:600px; + +} +.input-group{ + margin-bottom: 30px; + position: relative; +} +input,textarea{ + width:100%; + padding:10px; + outline:0; + border:1px solid #fff; + color:#fff; + background: transparent; + font-size: 15px;; +} +label{ + height:100%; + position: absolute; + left:0; + top:0; + padding:10px; + color:#fff; + cursor:text; + transition: 0.2s; +} +button{ + padding:10px 0; + color:#fff; + outline:none; + background: transparent; + border:1px solid #fff; + width:100%; + cursor:pointer; +} +input:focus~label, +input:valid~label,textarea:focus~label,textarea:valid~label{ + top:-35px; + font-size:14px; +} +.footer{ + width:100%; + text-align: center; + padding: 30px 0; + +} + +.footer h1{ + font-size: 30px; + margin-bottom: 5px; + margin-top: 20px; + font-weight: 600; + color: white; + text-align: center; +} +.footer p{ + font-size: 20px; + font-weight: 100; + color:white; + text-align: center; +} +.iconsgaf{ + font-size: 30px; + color: #ccc; + word-spacing: 10px; + justify-content: center; +} \ No newline at end of file diff --git a/edsheeran.jpg b/edsheeran.jpg new file mode 100644 index 00000000..df93087d Binary files /dev/null and b/edsheeran.jpg differ diff --git a/english-genrecode copy 2/base.html b/english-genrecode copy 2/base.html new file mode 100644 index 00000000..c4cc36af --- /dev/null +++ b/english-genrecode copy 2/base.html @@ -0,0 +1,283 @@ + + + + english-genre + + + + + +
+ + + +
+ +
+ +

90

+ + +
+
+ +
+
+

+

+

+
+ +

istsong

+

art

+ +
+ + + + +
+ +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/english-genrecode copy 2/bengalisong/MEGHKALO.mp3 b/english-genrecode copy 2/bengalisong/MEGHKALO.mp3 new file mode 100644 index 00000000..39fec4e3 Binary files /dev/null and b/english-genrecode copy 2/bengalisong/MEGHKALO.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/amakeamar.mp3 b/english-genrecode copy 2/bengalisong/amakeamar.mp3 new file mode 100644 index 00000000..d274c81e Binary files /dev/null and b/english-genrecode copy 2/bengalisong/amakeamar.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/bechethakargaan.mp3 b/english-genrecode copy 2/bengalisong/bechethakargaan.mp3 new file mode 100644 index 00000000..b4e5f17d Binary files /dev/null and b/english-genrecode copy 2/bengalisong/bechethakargaan.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/hrid.mp3 b/english-genrecode copy 2/bengalisong/hrid.mp3 new file mode 100644 index 00000000..d470bccb Binary files /dev/null and b/english-genrecode copy 2/bengalisong/hrid.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/jaopakhi.mp3 b/english-genrecode copy 2/bengalisong/jaopakhi.mp3 new file mode 100644 index 00000000..2eb38701 Binary files /dev/null and b/english-genrecode copy 2/bengalisong/jaopakhi.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/kenodure.mp3 b/english-genrecode copy 2/bengalisong/kenodure.mp3 new file mode 100644 index 00000000..442d3a2e Binary files /dev/null and b/english-genrecode copy 2/bengalisong/kenodure.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/kholo.mp3 b/english-genrecode copy 2/bengalisong/kholo.mp3 new file mode 100644 index 00000000..1df32f9f Binary files /dev/null and b/english-genrecode copy 2/bengalisong/kholo.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/kichukotha.mp3 b/english-genrecode copy 2/bengalisong/kichukotha.mp3 new file mode 100644 index 00000000..63b6f4df Binary files /dev/null and b/english-genrecode copy 2/bengalisong/kichukotha.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/kotobaro.mp3 b/english-genrecode copy 2/bengalisong/kotobaro.mp3 new file mode 100644 index 00000000..56391171 Binary files /dev/null and b/english-genrecode copy 2/bengalisong/kotobaro.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/mamochittey.mp3 b/english-genrecode copy 2/bengalisong/mamochittey.mp3 new file mode 100644 index 00000000..d6d505e8 Binary files /dev/null and b/english-genrecode copy 2/bengalisong/mamochittey.mp3 differ diff --git a/english-genrecode copy 2/bengalisong/paglahawa.m4a b/english-genrecode copy 2/bengalisong/paglahawa.m4a new file mode 100644 index 00000000..830e92b9 Binary files /dev/null and b/english-genrecode copy 2/bengalisong/paglahawa.m4a differ diff --git a/english-genrecode copy 2/bengalisong/pherari.mp3 b/english-genrecode copy 2/bengalisong/pherari.mp3 new file mode 100644 index 00000000..42764b64 Binary files /dev/null and b/english-genrecode copy 2/bengalisong/pherari.mp3 differ diff --git a/english-genrecode copy 2/images/HRID.jpg b/english-genrecode copy 2/images/HRID.jpg new file mode 100644 index 00000000..6a91cc0a Binary files /dev/null and b/english-genrecode copy 2/images/HRID.jpg differ diff --git a/english-genrecode copy 2/images/Srikanto.jpg b/english-genrecode copy 2/images/Srikanto.jpg new file mode 100644 index 00000000..9765bf71 Binary files /dev/null and b/english-genrecode copy 2/images/Srikanto.jpg differ diff --git a/english-genrecode copy 2/images/amakeamar.jpg b/english-genrecode copy 2/images/amakeamar.jpg new file mode 100644 index 00000000..e4d381f0 Binary files /dev/null and b/english-genrecode copy 2/images/amakeamar.jpg differ diff --git a/english-genrecode copy 2/images/bechethakargaan.jpg b/english-genrecode copy 2/images/bechethakargaan.jpg new file mode 100644 index 00000000..e46bd5f8 Binary files /dev/null and b/english-genrecode copy 2/images/bechethakargaan.jpg differ diff --git a/english-genrecode copy 2/images/hemanta.jpg b/english-genrecode copy 2/images/hemanta.jpg new file mode 100644 index 00000000..f7f283a2 Binary files /dev/null and b/english-genrecode copy 2/images/hemanta.jpg differ diff --git a/english-genrecode copy 2/images/jaopakhi.jpg b/english-genrecode copy 2/images/jaopakhi.jpg new file mode 100644 index 00000000..87f3bdfb Binary files /dev/null and b/english-genrecode copy 2/images/jaopakhi.jpg differ diff --git a/english-genrecode copy 2/images/kholo.jpg b/english-genrecode copy 2/images/kholo.jpg new file mode 100644 index 00000000..f7b2a4a8 Binary files /dev/null and b/english-genrecode copy 2/images/kholo.jpg differ diff --git a/english-genrecode copy 2/images/kichukotha.jpg b/english-genrecode copy 2/images/kichukotha.jpg new file mode 100644 index 00000000..bfafb241 Binary files /dev/null and b/english-genrecode copy 2/images/kichukotha.jpg differ diff --git a/english-genrecode copy 2/images/kotobaro.jpg b/english-genrecode copy 2/images/kotobaro.jpg new file mode 100644 index 00000000..7125c58d Binary files /dev/null and b/english-genrecode copy 2/images/kotobaro.jpg differ diff --git a/english-genrecode copy 2/images/mamochittey.webp b/english-genrecode copy 2/images/mamochittey.webp new file mode 100644 index 00000000..9c7c8120 Binary files /dev/null and b/english-genrecode copy 2/images/mamochittey.webp differ diff --git a/english-genrecode copy 2/images/paglahawa.jpg b/english-genrecode copy 2/images/paglahawa.jpg new file mode 100644 index 00000000..cdcde42a Binary files /dev/null and b/english-genrecode copy 2/images/paglahawa.jpg differ diff --git a/english-genrecode copy 2/images/pherari.jpg b/english-genrecode copy 2/images/pherari.jpg new file mode 100644 index 00000000..08bca47e Binary files /dev/null and b/english-genrecode copy 2/images/pherari.jpg differ diff --git a/english-genrecode copy 2/qGFw78.webp b/english-genrecode copy 2/qGFw78.webp new file mode 100644 index 00000000..26033a22 Binary files /dev/null and b/english-genrecode copy 2/qGFw78.webp differ diff --git a/english-genrecode copy 2/script1.js b/english-genrecode copy 2/script1.js new file mode 100644 index 00000000..1f4d9524 --- /dev/null +++ b/english-genrecode copy 2/script1.js @@ -0,0 +1,94 @@ +let previous=document.querySelector('#pre'); +let play=document.querySelector('#play'); +let next=document.querySelector('#next'); +let title=document.querySelector('#title'); +let recent_volume=document.querySelector('#recent_volume'); +let volume_show=document.querySelector('volume_show'); +let slider=document.querySelector('#slider'); +let show_duration=document.querySelector('#show_duration'); +let track_image=document.querySelector('#track_image'); +let auto_play=document.querySelector('#auto_play'); +let present=document.querySelector('#present'); +let total=document.querySelector('#total'); +let artist=document.querySelector('#artist'); +let newindex_no=document.getElementById('#newindex_no'); + + +let timer; +let autoplay=0; +var index_no=0; + +index_no=sessionStorage.getItem('index_no123'); +let playing_song=false; + +//creating audio element +let track=document.createElement('audio'); +//All songs list +let ALL_SONG=[ + { + name:"STAY", + path:"english-genre/stay.mp3", + img:"images/stay.jpg", + singer:"The Kid LAROI - STAY (ft. Justin Bieber)" + }, + { + name:" INDUSTRY BABY", + path:"english-genre/industry.mp3", + img:"images/INDUSTRYBABY.png", + singer:" Lil Nas X - INDUSTRY BABY" + }, + +]; +//loading the tracks +function load_track(index_no){ + track.src=ALL_SONG[index_no].path; + title.innerHTML=ALL_SONG[index_no].name; + track_image.src=ALL_SONG[index_no].img; + artist.innerHTML=ALL_SONG[index_no].singer; + +} + +load_track(index_no); +function justplay(){ + if(playing_song==false){ + playsong(); + } + else{ + pausesong(); + } +} +//play song +function playsong(){ + track.play(); + playing_song=true; + play.innerHTML=''; +} +//pause song +function pausesong(){ + track.pause(); + playing_song=false; + play.innerHTML=''; +} +//next song +function next_song(){ + if(index_no0){ + index_no-=1; + load_track(index_no); + playsong(); + }else{ + index_no=ALL_SONG.length; + load_track(index_no); + playsong(); + } +} \ No newline at end of file diff --git a/english-genrecode copy 2/style2.css b/english-genrecode copy 2/style2.css new file mode 100644 index 00000000..d488ee98 --- /dev/null +++ b/english-genrecode copy 2/style2.css @@ -0,0 +1,205 @@ +*{ + margin:0; + padding:0; + font-family: Arial, Helvetica, sans-serif; +} +body{ + height:100vh; + width:100%; + display:flex; + align-items:center; + justify-content:center; +} +.main{ + position:relative; + height:100vh; + width:100%; + display:flex; + align-items:center; + justify-content:center; + background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(qGFw78.webp); + background-position: center; + background-size: cover; + background-attachment: fixed; +} +.main button{ + padding:10px 12px; + margin: 0 10px; +} +.main #logo{ + position:absolute; + top:5%; + left:5%; + font-size:25px; + color:#ccc; + text-transform:capitalize; +} +.main #logo0 i{ + margin-right:15px; +} +.right , .left{ + position:relative; + height:100%; + width:50%; + display:flex; + align-items:center; + justify-content:center; + flex-direction:column; +} + +/*song image*/ +.left img{ + position:relative; + left:40%; + bottom:200px; + height:300px; + width:200%; + border-radius:15px; + box-shadow:1px 0px 20px 12px rgba(240,240,240,0.2); +} +/*box range slider*/ +input[type="range"]{ + -webkit-appearance: none; + width:90%; + outline:none; + height:2px; + margin:0 15px; +} +input[type="range"]::-webkit-slider-thumb{ + -webkit-appearance:none; + height:20px; + width:20px; + background:#CCC; + border-radius:50%; + cursor:pointer; +} +.right input[type="range"]{ + width:40%; +} + +/*VOLUME PART*/ +.left .volume{ + position:absolute; + bottom:10%; + left:0px; + width:600px; + height:30px; + display:flex; + align-items:center; + justify-content:center; + color:#fff; +} +.left .volume p{ + font-size:15px; + +} +.left .volume i{ + cursor:pointer; + padding:8px 12px; + +} + +.volume #volume_show{ + padding:8px 12px; + margin:0 5px 0 0; + +} +.right .middle{ + position:absolute; + top:70%; + + width:100%; + display:flex; + align-items: center; + justify-content: center; +} +.right .middle button{ + border:none; + height:50px; + width:50px; + border-radius:50%; + display:flex; + align-items:center; + justify-content: center; + cursor:pointer; + outline:none; + transition:0.5s; + background:#ccc + +} +.right #title{ + position:absolute; + top:20%; + left:50%; + transform:translateX(-50%); + text-transform:capitalize; + color:#ccc; + font-size:30px; + font-family: 'Times New Roman', Times, serif; +} +.right #artist{ + position:absolute; + top: 40%; + left:50%; + transform:translatex(-50%); + text-transform:capitalize; + color:#ccc; + font-size:20px; + font-family: 'Times New Roman', Times, serif; +} +.right .duration{ + position:absolute; + bottom:10%; + left:50%; + transform:translatex(-50%); + display:flex; + align-items:center; + justify-content:center; + width:100%; + height:20px; + margin-top:40px; +} +.right .duration p{ + color:#ccc; + font-size:15px; + margin-left:20px; +} +.right #audio{ + font-size:18px; + cursor:pointer; + margin-top:45px; + border:none; + padding:10px 14px; + color:#fff; + background:#Fff; + outline:none; + border-radius:10px; +} +.right #auddio i{ + margin-left:8px; +} +#play{ + background:#ccc; +} +.right button:hover{ + background:#ccc; +} +.right i:before{ + color:rgb(16, 14, 14); + font-size:30px; + font-style:normal; +} +/*.right .show_song_no{ + position:absolute; + top:10px; + right:10px; + width:20px; + height:20px; + display:flex; + align-items:center; + justify-content: center; + padding:8px 12px; + color:#ccc; + border-radius:5px; + background:#ccc; +}*/ diff --git a/english-genrecode copy/base.html b/english-genrecode copy/base.html new file mode 100644 index 00000000..acf72cd6 --- /dev/null +++ b/english-genrecode copy/base.html @@ -0,0 +1,261 @@ + + + + english-genre + + + + + + +
+ + + +
+ +
+ +

90

+ + +
+
+ +
+
+

+

+

+
+ +

istsong

+

art

+ +
+ + + + +
+ +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/english-genrecode copy/hindi-genre/Screenshot (355).png b/english-genrecode copy/hindi-genre/Screenshot (355).png new file mode 100644 index 00000000..7e06b90f Binary files /dev/null and b/english-genrecode copy/hindi-genre/Screenshot (355).png differ diff --git a/english-genrecode copy/hindi-genre/VALORANT 2022-04-21 02-36-33.mp4 b/english-genrecode copy/hindi-genre/VALORANT 2022-04-21 02-36-33.mp4 new file mode 100644 index 00000000..66ddfb75 Binary files /dev/null and b/english-genrecode copy/hindi-genre/VALORANT 2022-04-21 02-36-33.mp4 differ diff --git a/english-genrecode copy/hindi-genre/agartumsaathho.mp3 b/english-genrecode copy/hindi-genre/agartumsaathho.mp3 new file mode 100644 index 00000000..9428db67 Binary files /dev/null and b/english-genrecode copy/hindi-genre/agartumsaathho.mp3 differ diff --git a/english-genrecode copy/hindi-genre/galliyan.mp3 b/english-genrecode copy/hindi-genre/galliyan.mp3 new file mode 100644 index 00000000..4329313f Binary files /dev/null and b/english-genrecode copy/hindi-genre/galliyan.mp3 differ diff --git a/english-genrecode copy/hindi-genre/hawayein.mp3 b/english-genrecode copy/hindi-genre/hawayein.mp3 new file mode 100644 index 00000000..4da2ce95 Binary files /dev/null and b/english-genrecode copy/hindi-genre/hawayein.mp3 differ diff --git a/english-genrecode copy/hindi-genre/maitera.mp3 b/english-genrecode copy/hindi-genre/maitera.mp3 new file mode 100644 index 00000000..f34b8434 Binary files /dev/null and b/english-genrecode copy/hindi-genre/maitera.mp3 differ diff --git a/english-genrecode copy/hindi-genre/pal.mp3 b/english-genrecode copy/hindi-genre/pal.mp3 new file mode 100644 index 00000000..9862cfeb Binary files /dev/null and b/english-genrecode copy/hindi-genre/pal.mp3 differ diff --git a/english-genrecode copy/hindi-genre/peeloon.mp3 b/english-genrecode copy/hindi-genre/peeloon.mp3 new file mode 100644 index 00000000..230a874a Binary files /dev/null and b/english-genrecode copy/hindi-genre/peeloon.mp3 differ diff --git a/english-genrecode copy/hindi-genre/raatan.mp3 b/english-genrecode copy/hindi-genre/raatan.mp3 new file mode 100644 index 00000000..d1c206db Binary files /dev/null and b/english-genrecode copy/hindi-genre/raatan.mp3 differ diff --git a/english-genrecode copy/hindi-genre/terebin.mp3 b/english-genrecode copy/hindi-genre/terebin.mp3 new file mode 100644 index 00000000..0e8cbdef Binary files /dev/null and b/english-genrecode copy/hindi-genre/terebin.mp3 differ diff --git a/english-genrecode copy/hindi-genre/tumsehi.mp3 b/english-genrecode copy/hindi-genre/tumsehi.mp3 new file mode 100644 index 00000000..76d64e15 Binary files /dev/null and b/english-genrecode copy/hindi-genre/tumsehi.mp3 differ diff --git a/english-genrecode copy/images/HAWAYEIN.jpg b/english-genrecode copy/images/HAWAYEIN.jpg new file mode 100644 index 00000000..0b5d6be2 Binary files /dev/null and b/english-genrecode copy/images/HAWAYEIN.jpg differ diff --git a/english-genrecode copy/images/agartumsaathho.jpg b/english-genrecode copy/images/agartumsaathho.jpg new file mode 100644 index 00000000..7b01275f Binary files /dev/null and b/english-genrecode copy/images/agartumsaathho.jpg differ diff --git a/english-genrecode copy/images/galliyan.jpg b/english-genrecode copy/images/galliyan.jpg new file mode 100644 index 00000000..9aae8448 Binary files /dev/null and b/english-genrecode copy/images/galliyan.jpg differ diff --git a/english-genrecode copy/images/maitera.jpg b/english-genrecode copy/images/maitera.jpg new file mode 100644 index 00000000..ff9b425c Binary files /dev/null and b/english-genrecode copy/images/maitera.jpg differ diff --git a/english-genrecode copy/images/pal.jpg b/english-genrecode copy/images/pal.jpg new file mode 100644 index 00000000..dff590ec Binary files /dev/null and b/english-genrecode copy/images/pal.jpg differ diff --git a/english-genrecode copy/images/peeloon.jpg b/english-genrecode copy/images/peeloon.jpg new file mode 100644 index 00000000..466ac08b Binary files /dev/null and b/english-genrecode copy/images/peeloon.jpg differ diff --git a/english-genrecode copy/images/raatan.jpg b/english-genrecode copy/images/raatan.jpg new file mode 100644 index 00000000..4906a9bc Binary files /dev/null and b/english-genrecode copy/images/raatan.jpg differ diff --git a/english-genrecode copy/images/terebin.jpg b/english-genrecode copy/images/terebin.jpg new file mode 100644 index 00000000..9a2252d8 Binary files /dev/null and b/english-genrecode copy/images/terebin.jpg differ diff --git a/english-genrecode copy/images/tumsehi.jpg b/english-genrecode copy/images/tumsehi.jpg new file mode 100644 index 00000000..97c06764 Binary files /dev/null and b/english-genrecode copy/images/tumsehi.jpg differ diff --git a/english-genrecode copy/qGFw78.webp b/english-genrecode copy/qGFw78.webp new file mode 100644 index 00000000..26033a22 Binary files /dev/null and b/english-genrecode copy/qGFw78.webp differ diff --git a/english-genrecode copy/script1.js b/english-genrecode copy/script1.js new file mode 100644 index 00000000..1f4d9524 --- /dev/null +++ b/english-genrecode copy/script1.js @@ -0,0 +1,94 @@ +let previous=document.querySelector('#pre'); +let play=document.querySelector('#play'); +let next=document.querySelector('#next'); +let title=document.querySelector('#title'); +let recent_volume=document.querySelector('#recent_volume'); +let volume_show=document.querySelector('volume_show'); +let slider=document.querySelector('#slider'); +let show_duration=document.querySelector('#show_duration'); +let track_image=document.querySelector('#track_image'); +let auto_play=document.querySelector('#auto_play'); +let present=document.querySelector('#present'); +let total=document.querySelector('#total'); +let artist=document.querySelector('#artist'); +let newindex_no=document.getElementById('#newindex_no'); + + +let timer; +let autoplay=0; +var index_no=0; + +index_no=sessionStorage.getItem('index_no123'); +let playing_song=false; + +//creating audio element +let track=document.createElement('audio'); +//All songs list +let ALL_SONG=[ + { + name:"STAY", + path:"english-genre/stay.mp3", + img:"images/stay.jpg", + singer:"The Kid LAROI - STAY (ft. Justin Bieber)" + }, + { + name:" INDUSTRY BABY", + path:"english-genre/industry.mp3", + img:"images/INDUSTRYBABY.png", + singer:" Lil Nas X - INDUSTRY BABY" + }, + +]; +//loading the tracks +function load_track(index_no){ + track.src=ALL_SONG[index_no].path; + title.innerHTML=ALL_SONG[index_no].name; + track_image.src=ALL_SONG[index_no].img; + artist.innerHTML=ALL_SONG[index_no].singer; + +} + +load_track(index_no); +function justplay(){ + if(playing_song==false){ + playsong(); + } + else{ + pausesong(); + } +} +//play song +function playsong(){ + track.play(); + playing_song=true; + play.innerHTML=''; +} +//pause song +function pausesong(){ + track.pause(); + playing_song=false; + play.innerHTML=''; +} +//next song +function next_song(){ + if(index_no0){ + index_no-=1; + load_track(index_no); + playsong(); + }else{ + index_no=ALL_SONG.length; + load_track(index_no); + playsong(); + } +} \ No newline at end of file diff --git a/english-genrecode copy/style2.css b/english-genrecode copy/style2.css new file mode 100644 index 00000000..c307b11a --- /dev/null +++ b/english-genrecode copy/style2.css @@ -0,0 +1,205 @@ +*{ + margin:0; + padding:0; + font-family: Arial, Helvetica, sans-serif; +} +body{ + height:100vh; + width:100%; + display:flex; + align-items:center; + justify-content:center; +} +.main{ + position:relative; + height:100vh; + width:100%; + display:flex; + align-items:center; + justify-content:center; + background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(qGFw78.webp); + background-position: center; + background-size: cover; + background-attachment: fixed; +} +.main button{ + padding:10px 12px; + margin: 0 10px; +} +.main #logo{ + position:absolute; + top:5%; + left:5%; + font-size:25px; + color:#ccc; + text-transform:capitalize; +} +.main #logo0 i{ + margin-right:15px; +} +.right , .left{ + position:relative; + height:100%; + width:50%; + display:flex; + align-items:center; + justify-content:center; + flex-direction:column; +} + +/*song image*/ +.left img{ + position:relative; + left:40%; + bottom:200px; + height:300px; + width:200%; + border-radius:15px; + box-shadow:1px 0px 20px 12px rgba(240,240,240,0.2); +} +/*box range slider*/ +input[type="range"]{ + -webkit-appearance: none; + width:90%; + outline:none; + height:2px; + margin:0 15px; +} +input[type="range"]::-webkit-slider-thumb{ + -webkit-appearance:none; + height:20px; + width:20px; + background:#CCC; + border-radius:50%; + cursor:pointer; +} +.right input[type="range"]{ + width:40%; +} + +/*VOLUME PART*/ +.left .volume{ + position:absolute; + bottom:10%; + left:0px; + width:600px; + height:30px; + display:flex; + align-items:center; + justify-content:center; + color:#fff; +} +.left .volume p{ + font-size:15px; + +} +.left .volume i{ + cursor:pointer; + padding:8px 12px; + +} + +.volume #volume_show{ + padding:8px 12px; + margin:0 5px 0 0; + +} +.right .middle{ + position:absolute; + top:70%; + + width:100%; + display:flex; + align-items: center; + justify-content: center; +} +.right .middle button{ + border:none; + height:50px; + width:50px; + border-radius:50%; + display:flex; + align-items:center; + justify-content: center; + cursor:pointer; + outline:none; + transition:0.5s; + background:#ccc + +} +.right #title{ + position:absolute; + top:20%; + left:50%; + transform:translateX(-50%); + text-transform:capitalize; + color:#ccc; + font-size:30px; + font-family: 'Times New Roman', Times, serif; +} +.right #artist{ + position:absolute; + top: 35%; + left:50%; + transform:translatex(-50%); + text-transform:capitalize; + color:#ccc; + font-size:20px; + font-family: 'Times New Roman', Times, serif; +} +.right .duration{ + position:absolute; + bottom:10%; + left:50%; + transform:translatex(-50%); + display:flex; + align-items:center; + justify-content:center; + width:100%; + height:20px; + margin-top:40px; +} +.right .duration p{ + color:#ccc; + font-size:15px; + margin-left:20px; +} +.right #audio{ + font-size:18px; + cursor:pointer; + margin-top:45px; + border:none; + padding:10px 14px; + color:#fff; + background:#Fff; + outline:none; + border-radius:10px; +} +.right #auddio i{ + margin-left:8px; +} +#play{ + background:#ccc; +} +.right button:hover{ + background:#ccc; +} +.right i:before{ + color:rgb(16, 14, 14); + font-size:30px; + font-style:normal; +} +/*.right .show_song_no{ + position:absolute; + top:10px; + right:10px; + width:20px; + height:20px; + display:flex; + align-items:center; + justify-content: center; + padding:8px 12px; + color:#ccc; + border-radius:5px; + background:#ccc; +}*/ diff --git a/english-genrecode/base.html b/english-genrecode/base.html new file mode 100644 index 00000000..54c61647 --- /dev/null +++ b/english-genrecode/base.html @@ -0,0 +1,340 @@ + + + + english-genre + + + + + +
+ + + +
+ +
+ +

90

+ + +
+
+ +
+
+

+

+

+
+ +

istsong

+

art

+ +
+ + + + +
+ +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/english-genrecode/english-genre/Stay.mp3 b/english-genrecode/english-genre/Stay.mp3 new file mode 100644 index 00000000..5dfbfb5a Binary files /dev/null and b/english-genrecode/english-genre/Stay.mp3 differ diff --git a/english-genrecode/english-genre/WOW.mp3 b/english-genrecode/english-genre/WOW.mp3 new file mode 100644 index 00000000..573f085a Binary files /dev/null and b/english-genrecode/english-genre/WOW.mp3 differ diff --git a/english-genrecode/english-genre/allweknow.mp3 b/english-genrecode/english-genre/allweknow.mp3 new file mode 100644 index 00000000..0cefba77 Binary files /dev/null and b/english-genrecode/english-genre/allweknow.mp3 differ diff --git a/english-genrecode/english-genre/attention.mp3 b/english-genrecode/english-genre/attention.mp3 new file mode 100644 index 00000000..b922ea91 Binary files /dev/null and b/english-genrecode/english-genre/attention.mp3 differ diff --git a/english-genrecode/english-genre/bambam.mp3 b/english-genrecode/english-genre/bambam.mp3 new file mode 100644 index 00000000..ca48aeb6 Binary files /dev/null and b/english-genrecode/english-genre/bambam.mp3 differ diff --git a/english-genrecode/english-genre/callmebyyourname.mp3 b/english-genrecode/english-genre/callmebyyourname.mp3 new file mode 100644 index 00000000..b15abffb Binary files /dev/null and b/english-genrecode/english-genre/callmebyyourname.mp3 differ diff --git a/english-genrecode/english-genre/chandelier.mp3 b/english-genrecode/english-genre/chandelier.mp3 new file mode 100644 index 00000000..60154e02 Binary files /dev/null and b/english-genrecode/english-genre/chandelier.mp3 differ diff --git a/english-genrecode/english-genre/demons.mp3 b/english-genrecode/english-genre/demons.mp3 new file mode 100644 index 00000000..20541442 Binary files /dev/null and b/english-genrecode/english-genre/demons.mp3 differ diff --git a/english-genrecode/english-genre/eastside.mp3 b/english-genrecode/english-genre/eastside.mp3 new file mode 100644 index 00000000..41fe811f Binary files /dev/null and b/english-genrecode/english-genre/eastside.mp3 differ diff --git a/english-genrecode/english-genre/hello.mp3 b/english-genrecode/english-genre/hello.mp3 new file mode 100644 index 00000000..e9cc10d1 Binary files /dev/null and b/english-genrecode/english-genre/hello.mp3 differ diff --git a/english-genrecode/english-genre/idgaf.mp3 b/english-genrecode/english-genre/idgaf.mp3 new file mode 100644 index 00000000..1944a990 Binary files /dev/null and b/english-genrecode/english-genre/idgaf.mp3 differ diff --git a/english-genrecode/english-genre/industry.mp3 b/english-genrecode/english-genre/industry.mp3 new file mode 100644 index 00000000..8accf43c Binary files /dev/null and b/english-genrecode/english-genre/industry.mp3 differ diff --git a/english-genrecode/english-genre/inmyfeeling.mp3 b/english-genrecode/english-genre/inmyfeeling.mp3 new file mode 100644 index 00000000..026bc4f2 Binary files /dev/null and b/english-genrecode/english-genre/inmyfeeling.mp3 differ diff --git a/english-genrecode/english-genre/jalebi.mp3.crdownload b/english-genrecode/english-genre/jalebi.mp3.crdownload new file mode 100644 index 00000000..2e456409 Binary files /dev/null and b/english-genrecode/english-genre/jalebi.mp3.crdownload differ diff --git a/english-genrecode/english-genre/lemmeloveu.mp3 b/english-genrecode/english-genre/lemmeloveu.mp3 new file mode 100644 index 00000000..ceb2fe62 Binary files /dev/null and b/english-genrecode/english-genre/lemmeloveu.mp3 differ diff --git a/english-genrecode/english-genre/likemebetter.mp3 b/english-genrecode/english-genre/likemebetter.mp3 new file mode 100644 index 00000000..68dea266 Binary files /dev/null and b/english-genrecode/english-genre/likemebetter.mp3 differ diff --git a/english-genrecode/english-genre/peaches.mp3 b/english-genrecode/english-genre/peaches.mp3 new file mode 100644 index 00000000..5f44d849 Binary files /dev/null and b/english-genrecode/english-genre/peaches.mp3 differ diff --git a/english-genrecode/english-genre/sigue.mp3 b/english-genrecode/english-genre/sigue.mp3 new file mode 100644 index 00000000..6f11dc69 Binary files /dev/null and b/english-genrecode/english-genre/sigue.mp3 differ diff --git a/english-genrecode/english-genre/sugar.mp3 b/english-genrecode/english-genre/sugar.mp3 new file mode 100644 index 00000000..48631d83 Binary files /dev/null and b/english-genrecode/english-genre/sugar.mp3 differ diff --git a/english-genrecode/english-genre/thisiswhatyoucamefor.mp3 b/english-genrecode/english-genre/thisiswhatyoucamefor.mp3 new file mode 100644 index 00000000..4acadb54 Binary files /dev/null and b/english-genrecode/english-genre/thisiswhatyoucamefor.mp3 differ diff --git a/english-genrecode/english-genre/wedont.mp3 b/english-genrecode/english-genre/wedont.mp3 new file mode 100644 index 00000000..72e62bdf Binary files /dev/null and b/english-genrecode/english-genre/wedont.mp3 differ diff --git a/english-genrecode/english-genre/youngblood.mp3 b/english-genrecode/english-genre/youngblood.mp3 new file mode 100644 index 00000000..47098293 Binary files /dev/null and b/english-genrecode/english-genre/youngblood.mp3 differ diff --git a/english-genrecode/images/INDUSTRYBABY.png b/english-genrecode/images/INDUSTRYBABY.png new file mode 100644 index 00000000..97dfeb4f Binary files /dev/null and b/english-genrecode/images/INDUSTRYBABY.png differ diff --git a/english-genrecode/images/Jalebi_Baby.jpeg b/english-genrecode/images/Jalebi_Baby.jpeg new file mode 100644 index 00000000..f984555b Binary files /dev/null and b/english-genrecode/images/Jalebi_Baby.jpeg differ diff --git a/english-genrecode/images/PEACHES.jpg b/english-genrecode/images/PEACHES.jpg new file mode 100644 index 00000000..0144ff29 Binary files /dev/null and b/english-genrecode/images/PEACHES.jpg differ diff --git a/english-genrecode/images/allweknow.jpg b/english-genrecode/images/allweknow.jpg new file mode 100644 index 00000000..1c3e9c1c Binary files /dev/null and b/english-genrecode/images/allweknow.jpg differ diff --git a/english-genrecode/images/asitwas.webp b/english-genrecode/images/asitwas.webp new file mode 100644 index 00000000..6b17f8bd Binary files /dev/null and b/english-genrecode/images/asitwas.webp differ diff --git a/english-genrecode/images/attentions.jpg b/english-genrecode/images/attentions.jpg new file mode 100644 index 00000000..e50f11e1 Binary files /dev/null and b/english-genrecode/images/attentions.jpg differ diff --git a/english-genrecode/images/bambam.jpg b/english-genrecode/images/bambam.jpg new file mode 100644 index 00000000..7eb45162 Binary files /dev/null and b/english-genrecode/images/bambam.jpg differ diff --git a/english-genrecode/images/chandelier.jpg b/english-genrecode/images/chandelier.jpg new file mode 100644 index 00000000..3ff730f8 Binary files /dev/null and b/english-genrecode/images/chandelier.jpg differ diff --git a/english-genrecode/images/chandelier1.jpg b/english-genrecode/images/chandelier1.jpg new file mode 100644 index 00000000..546ec021 Binary files /dev/null and b/english-genrecode/images/chandelier1.jpg differ diff --git a/english-genrecode/images/demons.jpg b/english-genrecode/images/demons.jpg new file mode 100644 index 00000000..cb3ae7c3 Binary files /dev/null and b/english-genrecode/images/demons.jpg differ diff --git a/english-genrecode/images/dj.jpg b/english-genrecode/images/dj.jpg new file mode 100644 index 00000000..7b0c55f9 Binary files /dev/null and b/english-genrecode/images/dj.jpg differ diff --git a/english-genrecode/images/eastside.jpg b/english-genrecode/images/eastside.jpg new file mode 100644 index 00000000..7b2de133 Binary files /dev/null and b/english-genrecode/images/eastside.jpg differ diff --git a/english-genrecode/images/hello.jpg b/english-genrecode/images/hello.jpg new file mode 100644 index 00000000..63aa87e6 Binary files /dev/null and b/english-genrecode/images/hello.jpg differ diff --git a/english-genrecode/images/idgaf.jpg b/english-genrecode/images/idgaf.jpg new file mode 100644 index 00000000..06cda05e Binary files /dev/null and b/english-genrecode/images/idgaf.jpg differ diff --git a/english-genrecode/images/inmyfeelings.jpg b/english-genrecode/images/inmyfeelings.jpg new file mode 100644 index 00000000..2302eab2 Binary files /dev/null and b/english-genrecode/images/inmyfeelings.jpg differ diff --git a/english-genrecode/images/lemmeloveu.jpg b/english-genrecode/images/lemmeloveu.jpg new file mode 100644 index 00000000..621f49b5 Binary files /dev/null and b/english-genrecode/images/lemmeloveu.jpg differ diff --git a/english-genrecode/images/letmeloveu.jpg b/english-genrecode/images/letmeloveu.jpg new file mode 100644 index 00000000..79294b0e Binary files /dev/null and b/english-genrecode/images/letmeloveu.jpg differ diff --git a/english-genrecode/images/likemebetter.jpg b/english-genrecode/images/likemebetter.jpg new file mode 100644 index 00000000..51032e8e Binary files /dev/null and b/english-genrecode/images/likemebetter.jpg differ diff --git a/english-genrecode/images/montero.jpg b/english-genrecode/images/montero.jpg new file mode 100644 index 00000000..370251a5 Binary files /dev/null and b/english-genrecode/images/montero.jpg differ diff --git a/english-genrecode/images/qGFw78.webp b/english-genrecode/images/qGFw78.webp new file mode 100644 index 00000000..26033a22 Binary files /dev/null and b/english-genrecode/images/qGFw78.webp differ diff --git a/english-genrecode/images/sigue.jpg b/english-genrecode/images/sigue.jpg new file mode 100644 index 00000000..e652ba1a Binary files /dev/null and b/english-genrecode/images/sigue.jpg differ diff --git a/english-genrecode/images/stay.jpg b/english-genrecode/images/stay.jpg new file mode 100644 index 00000000..3e077b54 Binary files /dev/null and b/english-genrecode/images/stay.jpg differ diff --git a/english-genrecode/images/sugar.png b/english-genrecode/images/sugar.png new file mode 100644 index 00000000..5f912f1d Binary files /dev/null and b/english-genrecode/images/sugar.png differ diff --git a/english-genrecode/images/thisiswhatucamefor.png b/english-genrecode/images/thisiswhatucamefor.png new file mode 100644 index 00000000..eec81e9c Binary files /dev/null and b/english-genrecode/images/thisiswhatucamefor.png differ diff --git a/english-genrecode/images/wedont.jpg b/english-genrecode/images/wedont.jpg new file mode 100644 index 00000000..2da27965 Binary files /dev/null and b/english-genrecode/images/wedont.jpg differ diff --git a/english-genrecode/images/wow.png b/english-genrecode/images/wow.png new file mode 100644 index 00000000..0f7e3c61 Binary files /dev/null and b/english-genrecode/images/wow.png differ diff --git a/english-genrecode/images/youngblood.jpg b/english-genrecode/images/youngblood.jpg new file mode 100644 index 00000000..0337985b Binary files /dev/null and b/english-genrecode/images/youngblood.jpg differ diff --git a/english-genrecode/qGFw78.webp b/english-genrecode/qGFw78.webp new file mode 100644 index 00000000..26033a22 Binary files /dev/null and b/english-genrecode/qGFw78.webp differ diff --git a/english-genrecode/script1.js b/english-genrecode/script1.js new file mode 100644 index 00000000..1f4d9524 --- /dev/null +++ b/english-genrecode/script1.js @@ -0,0 +1,94 @@ +let previous=document.querySelector('#pre'); +let play=document.querySelector('#play'); +let next=document.querySelector('#next'); +let title=document.querySelector('#title'); +let recent_volume=document.querySelector('#recent_volume'); +let volume_show=document.querySelector('volume_show'); +let slider=document.querySelector('#slider'); +let show_duration=document.querySelector('#show_duration'); +let track_image=document.querySelector('#track_image'); +let auto_play=document.querySelector('#auto_play'); +let present=document.querySelector('#present'); +let total=document.querySelector('#total'); +let artist=document.querySelector('#artist'); +let newindex_no=document.getElementById('#newindex_no'); + + +let timer; +let autoplay=0; +var index_no=0; + +index_no=sessionStorage.getItem('index_no123'); +let playing_song=false; + +//creating audio element +let track=document.createElement('audio'); +//All songs list +let ALL_SONG=[ + { + name:"STAY", + path:"english-genre/stay.mp3", + img:"images/stay.jpg", + singer:"The Kid LAROI - STAY (ft. Justin Bieber)" + }, + { + name:" INDUSTRY BABY", + path:"english-genre/industry.mp3", + img:"images/INDUSTRYBABY.png", + singer:" Lil Nas X - INDUSTRY BABY" + }, + +]; +//loading the tracks +function load_track(index_no){ + track.src=ALL_SONG[index_no].path; + title.innerHTML=ALL_SONG[index_no].name; + track_image.src=ALL_SONG[index_no].img; + artist.innerHTML=ALL_SONG[index_no].singer; + +} + +load_track(index_no); +function justplay(){ + if(playing_song==false){ + playsong(); + } + else{ + pausesong(); + } +} +//play song +function playsong(){ + track.play(); + playing_song=true; + play.innerHTML=''; +} +//pause song +function pausesong(){ + track.pause(); + playing_song=false; + play.innerHTML=''; +} +//next song +function next_song(){ + if(index_no0){ + index_no-=1; + load_track(index_no); + playsong(); + }else{ + index_no=ALL_SONG.length; + load_track(index_no); + playsong(); + } +} \ No newline at end of file diff --git a/english-genrecode/style2.css b/english-genrecode/style2.css new file mode 100644 index 00000000..d488ee98 --- /dev/null +++ b/english-genrecode/style2.css @@ -0,0 +1,205 @@ +*{ + margin:0; + padding:0; + font-family: Arial, Helvetica, sans-serif; +} +body{ + height:100vh; + width:100%; + display:flex; + align-items:center; + justify-content:center; +} +.main{ + position:relative; + height:100vh; + width:100%; + display:flex; + align-items:center; + justify-content:center; + background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(qGFw78.webp); + background-position: center; + background-size: cover; + background-attachment: fixed; +} +.main button{ + padding:10px 12px; + margin: 0 10px; +} +.main #logo{ + position:absolute; + top:5%; + left:5%; + font-size:25px; + color:#ccc; + text-transform:capitalize; +} +.main #logo0 i{ + margin-right:15px; +} +.right , .left{ + position:relative; + height:100%; + width:50%; + display:flex; + align-items:center; + justify-content:center; + flex-direction:column; +} + +/*song image*/ +.left img{ + position:relative; + left:40%; + bottom:200px; + height:300px; + width:200%; + border-radius:15px; + box-shadow:1px 0px 20px 12px rgba(240,240,240,0.2); +} +/*box range slider*/ +input[type="range"]{ + -webkit-appearance: none; + width:90%; + outline:none; + height:2px; + margin:0 15px; +} +input[type="range"]::-webkit-slider-thumb{ + -webkit-appearance:none; + height:20px; + width:20px; + background:#CCC; + border-radius:50%; + cursor:pointer; +} +.right input[type="range"]{ + width:40%; +} + +/*VOLUME PART*/ +.left .volume{ + position:absolute; + bottom:10%; + left:0px; + width:600px; + height:30px; + display:flex; + align-items:center; + justify-content:center; + color:#fff; +} +.left .volume p{ + font-size:15px; + +} +.left .volume i{ + cursor:pointer; + padding:8px 12px; + +} + +.volume #volume_show{ + padding:8px 12px; + margin:0 5px 0 0; + +} +.right .middle{ + position:absolute; + top:70%; + + width:100%; + display:flex; + align-items: center; + justify-content: center; +} +.right .middle button{ + border:none; + height:50px; + width:50px; + border-radius:50%; + display:flex; + align-items:center; + justify-content: center; + cursor:pointer; + outline:none; + transition:0.5s; + background:#ccc + +} +.right #title{ + position:absolute; + top:20%; + left:50%; + transform:translateX(-50%); + text-transform:capitalize; + color:#ccc; + font-size:30px; + font-family: 'Times New Roman', Times, serif; +} +.right #artist{ + position:absolute; + top: 40%; + left:50%; + transform:translatex(-50%); + text-transform:capitalize; + color:#ccc; + font-size:20px; + font-family: 'Times New Roman', Times, serif; +} +.right .duration{ + position:absolute; + bottom:10%; + left:50%; + transform:translatex(-50%); + display:flex; + align-items:center; + justify-content:center; + width:100%; + height:20px; + margin-top:40px; +} +.right .duration p{ + color:#ccc; + font-size:15px; + margin-left:20px; +} +.right #audio{ + font-size:18px; + cursor:pointer; + margin-top:45px; + border:none; + padding:10px 14px; + color:#fff; + background:#Fff; + outline:none; + border-radius:10px; +} +.right #auddio i{ + margin-left:8px; +} +#play{ + background:#ccc; +} +.right button:hover{ + background:#ccc; +} +.right i:before{ + color:rgb(16, 14, 14); + font-size:30px; + font-style:normal; +} +/*.right .show_song_no{ + position:absolute; + top:10px; + right:10px; + width:20px; + height:20px; + display:flex; + align-items:center; + justify-content: center; + padding:8px 12px; + color:#ccc; + border-radius:5px; + background:#ccc; +}*/ diff --git a/english.html b/english.html new file mode 100644 index 00000000..bddcf163 --- /dev/null +++ b/english.html @@ -0,0 +1,425 @@ + + + + + + + + + Document + + Valeriser + + + + + + + + +
+ +
+ +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CoverSONGARTIST
+ + STAY + The Kid LAROI - STAY (ft. Justin Bieber) + + + + + + +
+ INDUSTRY BABY + Lil Nas X - INDUSTRY BABY + + + +
+ PEACHES + Justin Bieber - Justice + + + +
+ Jalebi Baby + Tesher - Jalebi Baby + + + +
+ BAM BAM + Camila Cabello - Bam Bam + + +
+ SIGUE + J Balvin - Sigue/Forever My Love + + +
+ MONTERO(Call Me By Your Name) + Lil Nas X - MONTERO (Call Me By Your Name) + + +
+ LET ME LOVE YOU! + DJ SNAKE FT.JUSTIN BIEBER + + +
+ ALL WE KNOW + THE CHAINSMOKERS FT.PHOEBE RYAN + + +
+ WOW + POST MALONE + + +
+ CHANDELIER + SIA + + +
+ IDGAF + DUA LIPA + + +
+ WE DON'T TALK ANYMORE + CHARLIE PUTH FT.SELENA GOMEZ + + +
+ HELLO + ADELE + + +
+ IN MY FEELINGS + DRAKE + + +
+ THIS IS WHAT YOU CAME FOR + CALVIN HARRIS HT.RIHANNA + + +
+ SUGAR + MAROON 5 + + +
+ YOUNGBLOOD + 5 SECONDS OF SUMMER + + +
+ DEMONS + IMAGINE DRAGONS + + +
+ ATTENTION + CHARLIE PUTH + + +
+ EASTSIDE + BENNY BLANCO, HALSEY,KHALID + + + +
+ I LIKE ME BETTER + LAUV + + + +
+ + + + + +
+ + + + + + \ No newline at end of file diff --git a/hindi.html b/hindi.html new file mode 100644 index 00000000..3bf1cfa9 --- /dev/null +++ b/hindi.html @@ -0,0 +1,253 @@ + + + + + + + + + Document + + Valeriser + + + + + + + + +
+ +
+ +
+ + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CoverSONGARTIST
+ + RAATAN LAMBIYAN + SIDHARTH-KIARA +
+ + PEE LOON + MOHIT CHAUHAN +
+ + TUM SE HI + MOHIT CHAUHAN +
+ + AGAR TUM SAATH HO + ALKA YAGNIK,ARIJIT SINGH +
+ + MAIN TERA MAIN TERA + ARIJIT SINGH +
+ + GALLIYAN + ANKIT TIWARI +
+ + PAL-JALEBI + ARIJIT SINGH,SHREYA GHOSHAL +
+ + TERE BIN + RAHAT FATEH ALI,ASEES KAUR,TANISHQ BAGCHI +
+ + HAWAYEIN + ARIJIT SINGH,PRITAM +
+ + + + + +
+ + + + + + \ No newline at end of file diff --git a/images/INDUSTRYBABY.png b/images/INDUSTRYBABY.png new file mode 100644 index 00000000..97dfeb4f Binary files /dev/null and b/images/INDUSTRYBABY.png differ diff --git a/images/Jalebi_Baby.jpeg b/images/Jalebi_Baby.jpeg new file mode 100644 index 00000000..f984555b Binary files /dev/null and b/images/Jalebi_Baby.jpeg differ diff --git a/images/PEACHES.jpg b/images/PEACHES.jpg new file mode 100644 index 00000000..0144ff29 Binary files /dev/null and b/images/PEACHES.jpg differ diff --git a/images/allweknow.jpg b/images/allweknow.jpg new file mode 100644 index 00000000..1c3e9c1c Binary files /dev/null and b/images/allweknow.jpg differ diff --git a/images/asitwas.webp b/images/asitwas.webp new file mode 100644 index 00000000..6b17f8bd Binary files /dev/null and b/images/asitwas.webp differ diff --git a/images/aswini.jpg b/images/aswini.jpg new file mode 100644 index 00000000..585c37e3 Binary files /dev/null and b/images/aswini.jpg differ diff --git a/images/attentions.jpg b/images/attentions.jpg new file mode 100644 index 00000000..e50f11e1 Binary files /dev/null and b/images/attentions.jpg differ diff --git a/images/bambam.jpg b/images/bambam.jpg new file mode 100644 index 00000000..7eb45162 Binary files /dev/null and b/images/bambam.jpg differ diff --git a/images/chandelier.jpg b/images/chandelier.jpg new file mode 100644 index 00000000..3ff730f8 Binary files /dev/null and b/images/chandelier.jpg differ diff --git a/images/chandelier1.jpg b/images/chandelier1.jpg new file mode 100644 index 00000000..546ec021 Binary files /dev/null and b/images/chandelier1.jpg differ diff --git a/images/demons.jpg b/images/demons.jpg new file mode 100644 index 00000000..cb3ae7c3 Binary files /dev/null and b/images/demons.jpg differ diff --git a/images/dj.jpg b/images/dj.jpg new file mode 100644 index 00000000..7b0c55f9 Binary files /dev/null and b/images/dj.jpg differ diff --git a/images/eastside.jpg b/images/eastside.jpg new file mode 100644 index 00000000..7b2de133 Binary files /dev/null and b/images/eastside.jpg differ diff --git a/images/hello.jpg b/images/hello.jpg new file mode 100644 index 00000000..63aa87e6 Binary files /dev/null and b/images/hello.jpg differ diff --git a/images/idgaf.jpg b/images/idgaf.jpg new file mode 100644 index 00000000..06cda05e Binary files /dev/null and b/images/idgaf.jpg differ diff --git a/images/inmyfeelings.jpg b/images/inmyfeelings.jpg new file mode 100644 index 00000000..2302eab2 Binary files /dev/null and b/images/inmyfeelings.jpg differ diff --git a/images/lemmeloveu.jpg b/images/lemmeloveu.jpg new file mode 100644 index 00000000..621f49b5 Binary files /dev/null and b/images/lemmeloveu.jpg differ diff --git a/images/letmeloveu.jpg b/images/letmeloveu.jpg new file mode 100644 index 00000000..79294b0e Binary files /dev/null and b/images/letmeloveu.jpg differ diff --git a/images/likemebetter.jpg b/images/likemebetter.jpg new file mode 100644 index 00000000..51032e8e Binary files /dev/null and b/images/likemebetter.jpg differ diff --git a/images/montero.jpg b/images/montero.jpg new file mode 100644 index 00000000..370251a5 Binary files /dev/null and b/images/montero.jpg differ diff --git a/images/qGFw78.webp b/images/qGFw78.webp new file mode 100644 index 00000000..26033a22 Binary files /dev/null and b/images/qGFw78.webp differ diff --git a/images/sigue.jpg b/images/sigue.jpg new file mode 100644 index 00000000..e652ba1a Binary files /dev/null and b/images/sigue.jpg differ diff --git a/images/stay.jpg b/images/stay.jpg new file mode 100644 index 00000000..3e077b54 Binary files /dev/null and b/images/stay.jpg differ diff --git a/images/sugar.png b/images/sugar.png new file mode 100644 index 00000000..5f912f1d Binary files /dev/null and b/images/sugar.png differ diff --git a/images/thisiswhatucamefor.png b/images/thisiswhatucamefor.png new file mode 100644 index 00000000..eec81e9c Binary files /dev/null and b/images/thisiswhatucamefor.png differ diff --git a/images/wedont.jpg b/images/wedont.jpg new file mode 100644 index 00000000..2da27965 Binary files /dev/null and b/images/wedont.jpg differ diff --git a/images/wow.png b/images/wow.png new file mode 100644 index 00000000..0f7e3c61 Binary files /dev/null and b/images/wow.png differ diff --git a/images/youngblood.jpg b/images/youngblood.jpg new file mode 100644 index 00000000..0337985b Binary files /dev/null and b/images/youngblood.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..3ed68519 --- /dev/null +++ b/index.html @@ -0,0 +1,223 @@ + + + + + + Valeriser + + + + + + +
+ +
+

If Music is a Place — then Jazz is the City, Folk is the Wilderness, Rock is the Road, Classical is a Temple

+ + +
+
+

languages of songs

+

Let's dive through a range of languages to cherish your mind and self conciousness.
Right now we are available in English, Hindi and Bengali..More coming soon Hold tight!

+

Click on that playlist and slip into nirvana..

+
+
+

english

+

Be it Ed Sheeran's melody or Charlie Puth's voice we got u all covered! Right from Justin Bieber,Taylor swift,Zayn to Rihanna and Selena!

+
+
+

hindi

+

Arijit singh?Shreya ghoshal?Ritviz?NO? we got more!!just check out the playlist guys you wont be disappointed :))

+
+
+

bengali

+

ARE YOU FOND OF BENGALI SONGS? WE GOT YOU COVERED WITH BOTH A MIX OF ADHUNIK AND OLD BENGALI FOLKLORE AND RABINDRASANGEET

+
+
+
+
+

What our Visitors say

+

Nothing much but let's say i decided to ask some of my respected seniors and friends to write a testimonial for my demo site :)

+
+ +
+ +
+ +
+ +
+ +
+ +
+ LOVE_SUBHAS_DHOBI + @the_0xytocin +
+ +


+ + + + + + +
+ +
+
+ +
+ I like how the design and interface are straightforward and subtle. It's easy to navigate through with a very posh feeling. The playlists are very well curated and get sorted quite quickly when I want to search for a song. I feel the vibe when the songs are on autoplay by default, and I don't have to switch tabs as it runs in the background by itself. +
+
+
+ +
+ +
+ +
+ +
+ +
+ SOUMIK_DUTTA + @reyansh.13 +
+ +


+ + + + + + + +
+ +
+
+ +
+ Really a pretty sweet mini music player site.Though being a demo version,this site rocks! Looking forward to a more prettier version in future. Keep up! :) +
+
+
+ +
+ +
+ +
+ +
+ +
+ PUNEET_AWASTHI + @puneet_awasthi_03 +
+ +


+ + + + + + +
+ +
+
+ +
+ This website is great for all musical listening needs. The user interface is top notch and it gives a great environment to enjoy music :) +
+
+
+ +
+ +
+ +
+ +
+ +
+ ASWINI_KUMAR + @aswinitalks +
+ +


+ + + + + + +
+ +
+
+ +
+ a cute version music player.looks and animations included are quite pretty and the chat box included just adds to the beauty really looking forward to have more songs on the playlist and a updated version in the near future with more features.but for a newbie this is quite awesome +
+
+
+
+ +
+

+ OPEN COMMENTS +

+

Equally eager to know about how you feel enjoying my website!! So what are you waiting for hop into that comment section!
+ And let me know your open reviews :D Feel free to enter with your anonymous names. Any sort of open criticism are also welcomed
+ C'mon I wanna know how my viewers feel after exploring my site

+ Comment here! + +
+
+

+ ABOUT ME +

+

Well... I am just a student fishing my way to learn newer stuff into web dev annnddd guess what! This was my first attempt at building a mini music player...Hope you like it

+
+ + + + +
+
+ + +
+ + + + + \ No newline at end of file diff --git a/lib/add_files.png b/lib/add_files.png deleted file mode 100644 index fa1927d1..00000000 Binary files a/lib/add_files.png and /dev/null differ diff --git a/lib/clone.png b/lib/clone.png deleted file mode 100644 index 1b20ffb9..00000000 Binary files a/lib/clone.png and /dev/null differ diff --git a/lib/clone_link.png b/lib/clone_link.png deleted file mode 100644 index 82dcd7ba..00000000 Binary files a/lib/clone_link.png and /dev/null differ diff --git a/lib/commit.png b/lib/commit.png deleted file mode 100644 index a8cb9a5a..00000000 Binary files a/lib/commit.png and /dev/null differ diff --git a/lib/copsWeek_debugit.png b/lib/copsWeek_debugit.png deleted file mode 100644 index fd2f3252..00000000 Binary files a/lib/copsWeek_debugit.png and /dev/null differ diff --git a/lib/create_branch.png b/lib/create_branch.png deleted file mode 100644 index 809d1115..00000000 Binary files a/lib/create_branch.png and /dev/null differ diff --git a/lib/fork.png b/lib/fork.png deleted file mode 100644 index 14475e08..00000000 Binary files a/lib/fork.png and /dev/null differ diff --git a/lib/fork_name.png b/lib/fork_name.png deleted file mode 100644 index 5d68719c..00000000 Binary files a/lib/fork_name.png and /dev/null differ diff --git a/lib/open_terminal.png b/lib/open_terminal.png deleted file mode 100644 index 660533bf..00000000 Binary files a/lib/open_terminal.png and /dev/null differ diff --git a/lib/pat.gif b/lib/pat.gif deleted file mode 100644 index 46624205..00000000 Binary files a/lib/pat.gif and /dev/null differ diff --git a/lib/pull_request.png b/lib/pull_request.png deleted file mode 100644 index 4e08144e..00000000 Binary files a/lib/pull_request.png and /dev/null differ diff --git a/lib/push.png b/lib/push.png deleted file mode 100644 index 164bd8e0..00000000 Binary files a/lib/push.png and /dev/null differ diff --git a/lib/submission.png b/lib/submission.png deleted file mode 100644 index fe1d4278..00000000 Binary files a/lib/submission.png and /dev/null differ diff --git a/lonely.webp b/lonely.webp new file mode 100644 index 00000000..20bbdf62 Binary files /dev/null and b/lonely.webp differ diff --git a/love.jpg b/love.jpg new file mode 100644 index 00000000..cad6f87f Binary files /dev/null and b/love.jpg differ diff --git a/oblivion.jpg b/oblivion.jpg new file mode 100644 index 00000000..ece5c792 Binary files /dev/null and b/oblivion.jpg differ diff --git a/pausebut.png b/pausebut.png new file mode 100644 index 00000000..1bcb2015 Binary files /dev/null and b/pausebut.png differ diff --git a/playbut.png b/playbut.png new file mode 100644 index 00000000..5f724939 Binary files /dev/null and b/playbut.png differ diff --git a/puneet.jpg b/puneet.jpg new file mode 100644 index 00000000..397df7a5 Binary files /dev/null and b/puneet.jpg differ diff --git a/rabindra.webp b/rabindra.webp new file mode 100644 index 00000000..cc99a4ef Binary files /dev/null and b/rabindra.webp differ diff --git a/ravi.jpg b/ravi.jpg new file mode 100644 index 00000000..c6d71ece Binary files /dev/null and b/ravi.jpg differ diff --git a/soumik.jpg b/soumik.jpg new file mode 100644 index 00000000..e048f6a8 Binary files /dev/null and b/soumik.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..c32718bd --- /dev/null +++ b/style.css @@ -0,0 +1,381 @@ +*{ + margin:0; + padding:0; + font-family: 'Bebas Neue', cursive; + +} +.header{ + min-height: 100vh; + width:100%; + background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/qGFw78.webp); + background-position: center; + background-size: cover; + background-attachment: fixed; + +} +nav{ + display:flex; + padding:2% 6%; + justify-content: space-between; + align-items:right; +} +nav img{ + padding: 2% 0%; + height: 50px; + position:relative; + top: -12px; + + +} + +.nav-links{ + flex:l; + text-align:right; + +} +.nav-links ul li{ + list-style:none; + display:inline-block; + padding:2px 12px; + position:relative; + +} +.nav-links ul li a{ + color:rgb(237, 239, 239); + text-decoration: none; + font-size:20px; + +} +.nav-links ul li::after{ + content:''; + width:0%; + height:2px; + background:white; + display:block; + margin:auto; + transition:0.5s; +} +.nav-links ul li:hover::after{ + width:100%; + +} +.text-box{ + width:90%; + color:aliceblue; + position: absolute; + + transform:translate(); + text-align: center; +} +.hero-btn{ + display:inline-block; + text-decoration:none; + color:aliceblue; + border:1px solid #fff; + padding:12px 34px; + font-size:18px; + background:transparent; + position:relative; + cursor:pointer; +} +.hero-btn:hover{ + border: 1px solid #fff; + background: white; + transition:1s; +} +@media(max-width:700px){ + .text-box h1{ + font-size:20px; + } + .nav-links ul li{ + display:block; + } + .nav-links{ + position: absolute; + background:#f44336; + height:100vh; + width:200px; + top:0; + right:0; + text-align:left; + z-index:2; + } + +} + + +.search_box{ + width: 50%; + position:static; + align-items: center; + align-content: center; + align-self: center; + justify-content: center; +} + + .search_box input[type="text"]{ + width: 100%; + padding: 20px; + padding-right: 60px; + box-sizing: border-box; + background: rgba(0,0,0,0.3); + border: 2px solid #fff; + border-radius: 10px; + font-size: 18px; + color: #fff; + outline: none; + } + + .fa-search{ + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 25px; + color: #fff; + font-size: 25px; + } + + ::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ + color: #fff; + } + ::-moz-placeholder { + /* Firefox 19+ */ + color: #fff; + } + :-ms-input-placeholder { + /* IE 10+ */ + color: #fff; + } + + @media screen and (max-width: 425px){ + .search_box{ + width: 95%; + } + } +.user-cards{ + display:grid; + grid-template-rows:none; + gap:.25rem; + margin-top:1rem; +} +.card{ + border:1px solid black; + padding:.5rem; +} +.card > .header{ + margin-bottom:.25rem; +} +.card > .body{ + font-size: .8rem; + color:white +} +.header #logo{ + position:absolute; + top:10px; + left:30px; + font-size:30px; + color:#ccc; + text-transform:capitalize; +} +.main #logo0 i{ + margin-right:15px; +} +.languages{ + width:80%; + margin:auto; + text-align: center; + padding-top: 4%; + +} +h1{ + font-size: 36px; + font-weight: 300; + color: white; + text-align: center; + justify-content: center; +} +h2{ + font-size: 30px; + font-weight: 300; + color: white; + text-align: center; + justify-content: center; +} +p{ + color:#fff; + font-size: 18px; + font-weight: 200; + line-height: 22px; + padding:10px; + text-align: center; + justify-content: center; +} +.row{ + margin-top: 5%; + display: flex; + justify-content: space-between; +} +.language-col1{ + flex-basis: 31%; + background-image: url('edsheeran.jpg'); + background-size: 100% 100%; + object-fit: contain; + border-radius:10px; + margin-bottom: 5%; + padding:50px 12px; + box-sizing: border-box; + box-shadow:0px 3px 8px #fff; + transition:300ms; + cursor: pointer; +} +.language-col1:hover{ + box-shadow:0px 8px 28px; + + +} +.language-col2{ + flex-basis: 31%; + background-image: url('ariji.jpg'); + background-size: 100% 100%; + object-fit: contain; + border-radius:10px; + margin-bottom: 5%; + padding:50px 12px; + box-sizing: border-box; + box-shadow:0px 3px 8px #fff; + transition:300ms; + cursor: pointer; +} +.language-col2:hover{ + box-shadow:0px 8px 28px; + +} +.language-col3{ + flex-basis: 31%; + background-image: url('rabindra.webp'); + background-size: 100% 100%; + object-fit: contain; + border-radius:10px; + margin-bottom: 5%; + padding:50px 12px; + box-sizing: border-box; + box-shadow:0px 3px 8px #fff; + transition:300ms; + cursor: pointer; +} +.language-col3:hover{ + box-shadow:0px 8px 28px; + +} +@media(max-width:700px){ + .row{ + flex-direction: column; + } +} +.testimonials{ + display:flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; +} +.testimonial-box-container{ + display:flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + width:100%; +} +.testimonial-box{ + width:500px; + height:200px; + box-shadow: 2px 1px 10px white; + background-color: rgb(29, 28, 28); + padding: 20px; + margin:15px; + cursor:pointer; + transition: 300ms; +} +.testimonial-box:hover{ + box-shadow: 8px 8px 28px white; +} +.profile-pic{ + width:50px; + height:50px; + border-radius: 50%; + overflow: hidden; + margin-right: 10px; +} + +.profile-pic img{ + width:100%; + height:100%; + object-fit:cover; + object-position: center; +} +.profile{ + display: flex; + align-items: center; +} +.name-user{ + display: flex; + flex-direction: column; +} +.name-user strong{ + color: white; + font-size: 1.1rem; + letter-spacing: 0.5px; +} +.name-user span{ + color: white; + font-size: 0.8rem; +} +.reviews{ + color: rgb(240, 239, 232); + justify-content: space-between; + align-items: center; + margin-bottom: 60px; + margin-left: 200px; +} +.box-top{ + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0px; + margin-top: 0px; +} +.client-comment{ + font-size: 0.9rem; + color: white; +} +.footer{ + width:100%; + text-align: center; + padding: 30px 0; + +} +.footer h4{ + font-size: 30px; + margin-bottom: 25px; + margin-top: 20px; + font-weight: 600; + color: white; +} +.footer p{ + font-size: 20px; + font-weight: 100; +} +.iconsgaf{ + font-size: 30px; + color: #ccc; + word-spacing: 10px; +} +.language-col1 h3{ + color: black; + margin-left: 25px; +} +.language-col1 p{ + font-size: 15px; + font-weight: lighter; +} \ No newline at end of file