Valeriser

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 <repository_link>
-     ```
-
-     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 <branch_name>
-     ```
-     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 <branch_name>
-     ```
-  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 <filename>
-     ```
-     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 <branch_name>
-     ```
-
-     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 🎉🎉.
+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/

about/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="with=device-width,initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <title>Valeriser</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"  />
+    </head>
+    <body>
+        <section class="header">
+            <nav>
+                <a href="index.html"><p id="logo"><i class="fa fa-music" aria-hidden="true">Lilifier</i></p></a>
+                <div class="nav-links" style="color:aquamarine">
+                    <ul>
+                        <li><a href="../index.html">HOME</a></li>
+                        <li><a href="index.html">ABOUT</a></li>
+                        <li><a href="../comments/index.html">COMMENTS</a></li>
+                        <li><a href="../contact/index.html">CONTACT</a></li>
+
+
+                    </ul>
+                </div>
+            </nav>
+            <section class="footer">
+                <h4>
+                    ABOUT THIS WEBSITE
+                </h4>
+                <P>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 :)<br>
+                Ahem!COMING TO THE MAIN POINTS AND ADVANTAGES OF THIS SITE YOU CAN :
+            <br><BR>
+        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.CHOOSE AMONG THE THREE LANGUAGES<BR>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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<BR>
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.YOU SHOULD CLICK ON THE THUMBNAIL THO TO LISTEN TO A PARTICULAR SONG/MUSIC :/<BR>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4.HEY THERE NOW COMES THE FUN PART!(AND SOMETHING WHICH TOOK ME HUGE TIME TO WORKOUT THROUGH SO PLEASE SUPPORT GUYS <i class="fa fa-frown-o" aria-hidden="true"></i>  )<br>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I.YOU CAN ACTUALLY INCREASE OR DECRESE THE VOLUME OR EVEN MUTE!!!<BR>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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<BR>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WHEN IT REACHES THE LAST SONG OF THE LIST :P<br>
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                            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!<BR>
+                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6.A CONTACTS PAGE WHERE YOU CAN SEND ME YOUR PERSONAL REVIEWS ABOUT MY SITE OR SUGGESTONS.<BR>
+                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7.I HAVE ALSO INCLUDED MY SOCIAL MEDIA HANDLES WHERE YOU CAN GET IN TOUCH WITH ME <i class="fa fa-smile-o" aria-hidden="true"></i></P>
+                                    <h4>
+                                        TECHNOLOGIES USED FOR DEVELOPING THIS SITE
+                                    </h4>
+                                <P> 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<i class="fa fa-smile-o" aria-hidden="true"></i></P>
+
+            </section>
+
+            </section>
+
+
+        </section>
+
+        <script>
+            document.getElementById('mybutton1').onclick=function(){
+                location.href="english.html";
+            }
+            document.getElementById('mybutton2').onclick=function(){
+                location.href="hindi.html";
+            }
+            document.getElementById('mybutton3').onclick=function(){
+                location.href="bengali.html";
+            }
+        </script>
+
+    </body>
+</html>

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;
+}