diff --git a/index.html b/index.html index 7558ad3..8c8c9fb 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,15 @@
+

PlayListAdda

+
+ + +
+ +

"A place to share your playlists with your friends."

@@ -148,7 +155,7 @@
by Robin
-
+
@@ -159,12 +166,12 @@

by Arunim
- - + +
@@ -245,7 +252,6 @@
by SP
-
@@ -603,9 +609,12 @@

WORKOUT

-

- +

+

@@ -837,7 +846,8 @@
by HARSH
- +

@@ -847,7 +857,9 @@

by TRISHA
" + width="100%" height="380" frameBorder="0" allowfullscreen="" + allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" + loading="lazy">"
@@ -898,8 +910,7 @@
by YD
- +

@@ -985,12 +996,12 @@

by SP
--> - + -
+
- +

@@ -1001,146 +1012,29 @@

by Vansh
-
- - - - -
- -
- - -
-
-

- Khone Do

-
by Pooja
-
-
- - - -
-
- - - -
- -
- -
-
-

- xoxo

-
by Hosenur
-
-
- - - -
-
- +
-
- - -
-
-

- WORKOUT

-
-
-

- -

-
- - - -
- -
- -
-
-

Memories

-
~Tania Banerjee
-
-
- - +
+ -
- - - - -
- -
- -
-
-

- English Spark

-
by Gryffindor's Common Room
-
-
- - - -
+
+

+ WORKOUT

- - - - - -
- -
- -
-
-

best of me

-
by Rachit
-
-
- - - +
+

+

- - -
- -
- -
-
-

English Love Songs

-
By Rishabh Dhawad
-
-
-

" -

- -
-
- -
@@ -1297,12 +1191,13 @@
by Joywin
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png"> heart - by Vinayak Gavariya + by Vinayak + Gavariya

- +
@@ -1327,4 +1222,4 @@
by ana
- + \ No newline at end of file diff --git a/index.js b/index.js index 2ef371a..4efd612 100644 --- a/index.js +++ b/index.js @@ -1,40 +1,53 @@ function searchPlaylist() { - var filter_text = document.getElementById("search_bar").value.toUpperCase(); - var card = document.getElementsByClassName("card"); + var filter_text = document.getElementById("search_bar").value.toUpperCase(); + var card = document.getElementsByClassName("card"); - for (var i = 0; i < card.length; i++) { + for (var i = 0; i < card.length; i++) { - var title = card[i].getElementsByClassName("title")[0]; - var str = title.innerText || title.textContent; + var title = card[i].getElementsByClassName("title")[0]; + var str = title.innerText || title.textContent; - if (str.toUpperCase().indexOf(filter_text) > -1) { + if (str.toUpperCase().indexOf(filter_text) > -1) { - card[i].style.display = ""; - } else { + card[i].style.display = ""; + } else { - card[i].style.display = "none"; - } + card[i].style.display = "none"; } + } } $(document).ready(function () { - $(window).scroll(function () { - if ($(this).scrollTop() > 20) { - $("#toTopBtn").fadeIn(); - } else { - $("#toTopBtn").fadeOut(); - } - }); + $(window).scroll(function () { + if ($(this).scrollTop() > 20) { + $("#toTopBtn").fadeIn(); + } else { + $("#toTopBtn").fadeOut(); + } + }); + + $("#toTopBtn").click(function () { + $("html, body").animate( + { + scrollTop: 0, + }, + 1000 + ); + return false; + }); +}); + +function darkMode() { + var element = document.body; + var content = document.getElementById("DarkModetext"); + element.className = "dark-mode"; + +} +function lightMode() { + var element = document.body; + var content = document.getElementById("DarkModetext"); + element.className = "light-mode"; - $("#toTopBtn").click(function () { - $("html, body").animate( - { - scrollTop: 0, - }, - 1000 - ); - return false; - }); - }); \ No newline at end of file +} diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 0000000..de37581 --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,12 @@ +{ + "name": "PlaylistAdda", + "lockfileVersion": 2, + "requires": true, + "packages": { + "node_modules/theme-toggle": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/theme-toggle/-/theme-toggle-1.0.0.tgz", + "integrity": "sha512-E0fmmAixc/+6TZVxCIey9olz0giPHZxWQOoY0D5LI+1g6B4ExydtAmt+asfZUUXeJwkDMyAy3Dr4n3KunyNgog==" + } + } +} diff --git a/node_modules/theme-toggle/.prettierrc b/node_modules/theme-toggle/.prettierrc new file mode 100644 index 0000000..8f02c18 --- /dev/null +++ b/node_modules/theme-toggle/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "printWidth": 120 +} diff --git a/node_modules/theme-toggle/README.md b/node_modules/theme-toggle/README.md new file mode 100644 index 0000000..062db1e --- /dev/null +++ b/node_modules/theme-toggle/README.md @@ -0,0 +1,66 @@ +# theme-toggle + +[![npm version](https://badge.fury.io/js/theme-toggle.svg)](https://badge.fury.io/js/theme-toggle) + +> **theme-toggle** is a simple component that can help you add different themes to your web app. + +it uses css `invert()` and `hue-rotate()` functions to change the look of your entire html document so It may gives unexpected changes .. in the next version there will be some more customization + +The theme switcher icon is used from [Adam Argyle](https://twitter.com/argyleink)'s [Article](https://web.dev/building-a-theme-switch-component/) + +- [**Demo**](https://gui-challenges.web.app/theme-switch/dist/) of icon + +## Getting started + +This is a simple custom component, you only need to import it (or bu using external link), and add `` custom element where you want to see the toggle button + +## installation + +### npm + +you can Install it via npm + +```shell +npm install theme-toggle +``` + +then import it + +```jsx +import "theme-toggle"; +``` + +now you can use the `` custom element wherever you want + +> `` doesn't have any children element's +> +> `theme` attribute is required, you can see attributes table below + +### cdn + +you can also use a cdn link to use `theme-toggle` in your project + +```html + +``` + +## Settings + +you can use some custom changes to change the default behavior of `theme-toggle`, we are working on adding more customization later + +| Attribute | Values | Required | default | example | +| :-------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: | :-----: | :------------------------------------------------------------: | +| theme | sets the initial theme of your page, and the correct theme icon, there are 2 available values
- _dark_: sets the initial theme to dark, and theme-icon to light
- _light_: sets the initial theme to light, and theme-icon to dark | `YES` | - | `` | +| width | you con control the square container's width using this attribute, it takes number string, do not add units .. by default it uses `px` | `NO` | `2rem` | `` | +| storable | this attributes controls if the current theme is stored so when you refresh the page it loads the last used theme, the theme is storable by default and it accepts 2 different values, `true` or `false` | `NO` | `true` | `` | + +## Contributing + +This tools needs a lot of contribution, and it's open for contributing :) + +1. Fork it! +2. Create your feature branch: `git checkout -b my-new-feature` +3. Add your changes: `git add .` +4. Commit your changes: `git commit -am 'Add some feature'` +5. Push to the branch: `git push origin my-new-feature` +6. Submit a pull request :sunglasses: diff --git a/node_modules/theme-toggle/package.json b/node_modules/theme-toggle/package.json new file mode 100644 index 0000000..2b2eb40 --- /dev/null +++ b/node_modules/theme-toggle/package.json @@ -0,0 +1,25 @@ +{ + "name": "theme-toggle", + "discription": "A simple theme (dark/light) toggle", + "version": "1.0.0", + "repository": { + "type": "git", + "url": "https://github.com/CH4R4F/theme-toggle" + }, + "type": "module", + "main": "./dist/theme-toggle.umd.cjs", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "cssnano": "^5.1.13", + "postcss": "^8.4.16", + "postcss-cli": "^10.0.0", + "postcss-import": "^15.0.0", + "postcss-nesting": "^10.1.10", + "postcss-preset-env": "^7.8.1", + "vite": "^3.1.0" + } +} diff --git a/node_modules/theme-toggle/postcss.config.cjs b/node_modules/theme-toggle/postcss.config.cjs new file mode 100644 index 0000000..fe73384 --- /dev/null +++ b/node_modules/theme-toggle/postcss.config.cjs @@ -0,0 +1,25 @@ +const postcssPresetEnv = require("postcss-preset-env"); +const cssnano = require("cssnano"); +const postcssImport = require("postcss-import"); +const postcssNesting = require("postcss-nesting"); + +module.exports = { + plugins: [ + postcssPresetEnv({ + stage: 0, + features: { + "logical-properties-and-values": false, + "prefers-color-scheme-query": false, + "gap-properties": false, + "custom-properties": false, + "dir-pseudo-class": false, + "focus-within-pseudo-class": false, + "focus-visible-pseudo-class": false, + "color-functional-notation": false, + }, + }), + postcssImport(), + cssnano(), + postcssNesting(), + ], +}; diff --git a/node_modules/theme-toggle/src/index.js b/node_modules/theme-toggle/src/index.js new file mode 100644 index 0000000..0956fc9 --- /dev/null +++ b/node_modules/theme-toggle/src/index.js @@ -0,0 +1,184 @@ +// theme initial template; +import template from "./template"; + +class ThemeToggle extends HTMLElement { + /** + * @var {string} _initialTheme + */ + _initialTheme = ""; + + constructor() { + super(); + + // append the css file to the shadow dom + this.attachShadow({ mode: "open" }); + + // get the initial theme + this._initialTheme = this.initTheme(); + } + + /** + * @returns {string} theme + */ + get theme() { + return this.getAttribute("theme"); + } + + /** + * @return {?string|number} width + */ + get width() { + return this.getAttribute("width"); + } + + /** + * @returns {?string|boolean} storable + */ + get storable() { + return this.getAttribute("storable"); + } + + /** + * @param {string} theme + * @returns {void} + */ + set theme(theme) { + this.setAttribute("theme", theme); + } + + /** + * Get the initial theme + * @returns {string} theme + */ + initTheme() { + let initTheme = null; + const savedTheme = localStorage.getItem("theme"); + if (savedTheme) { + initTheme = savedTheme; + } else { + const theme = this.theme; + // so defalt theme is light + initTheme = theme === "dark" ? "dark" : "light"; + } + + if (initTheme === "dark") { + this.changeTheme("dark"); + } + + return initTheme; + } + + /** + * @param {string} theme + * @returns {void} + */ + changeThemeIcon(theme) { + this.shadowRoot.querySelector("#theme-toggle").setAttribute("data-theme", theme); + this.shadowRoot.querySelector("#theme-toggle").setAttribute("aria-label", theme); + } + + /** + * @returns {array} array of attributes to observe + */ + static get observedAttributes() { + return ["theme", "width", "storable"]; + } + + /** + * @param {string} name + * @param {?string} oldValue + * @param {?string} newValue + * @returns {void} + */ + attributeChangedCallback(name, oldValue, newValue) { + if (name === "theme" && oldValue !== null) { + if (newValue === "dark") { + this.changeThemeIcon("light"); + if (oldValue === "light") { + this.changeTheme("dark"); + } + } else { + this.changeThemeIcon("dark"); + if (oldValue === "dark") { + this.changeTheme("light"); + } + } + } + } + + /** + * @returns {void} + */ + connectedCallback() { + if (!this.theme) { + return; + } + this.render(); + this.theme = this._initialTheme; + + // add event listener + const themeButton = this.shadowRoot.querySelector("#theme-toggle"); + if (themeButton.isConnected) { + themeButton.addEventListener("click", this.toggleTheme); + } + } + + /** + * Toggle the theme + * @returns {void} + */ + toggleTheme = () => { + const theme = this.getAttribute("theme"); + if (theme === "dark") { + this.setAttribute("theme", "light"); + } else { + this.setAttribute("theme", "dark"); + } + }; + + /** + * + * @param {string} theme + * @returns {void} + */ + changeTheme(theme) { + let root = document.documentElement; + const media = document.querySelectorAll("img, video, iframe, embed, picture, svg"); + if (theme === "light") { + root.style.filter = "invert(0) hue-rotate(0deg)"; + media.forEach((el) => { + el.style.filter = "invert(0) hue-rotate(0deg)"; + }); + } else { + root.style.filter = "invert(1) hue-rotate(180deg)"; + media.forEach((el) => { + el.style.filter = "invert(1) hue-rotate(180deg)"; + }); + } + if (this.storable !== "false" && this.storable !== false) { + localStorage.setItem("theme", theme); + } else { + localStorage.removeItem("theme"); + } + } + + /** + * Render the template and append it to the shadow dom + * @returns {void} + */ + render() { + // get the template + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + // button element + const themeToggle = this.shadowRoot.querySelector("#theme-toggle"); + // regex to validate colors + const HEX_REGEX = /^#(?:[0-9a-fA-F]{3}){1,2}$/g; + // set the width if provided + if (this.width && !isNaN(this.width)) { + themeToggle.style.setProperty("--size", `${this.width}px`); + } + } +} + +export default customElements.define("theme-toggle", ThemeToggle); diff --git a/node_modules/theme-toggle/src/style.css b/node_modules/theme-toggle/src/style.css new file mode 100644 index 0000000..2b4efa7 --- /dev/null +++ b/node_modules/theme-toggle/src/style.css @@ -0,0 +1,214 @@ +.theme-toggle { + --ease-3: cubic-bezier(0.25, 0, 0.3, 1); + --ease-out-5: cubic-bezier(0, 0, 0, 1); + --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); + --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25); + --size: 2rem; + --icon-fill: #454d54; + --icon-fill-hover: #22262a; + -webkit-tap-highlight-color: transparent; + aspect-ratio: 1; + background: none; + block-size: var(--size); + border: none; + border-radius: 50%; + cursor: pointer; + inline-size: var(--size); + outline-offset: 5px; + padding: 0; + touch-action: manipulation; +} +.theme-toggle > svg { + stroke-linecap: round; + block-size: 100%; + inline-size: 100%; +} +[data-theme="dark"] .theme-toggle { + --icon-fill: #abb3ba; + --icon-fill-hover: #e2e6e9; +} +@media (hover: none) { + .theme-toggle { + --size: 48px; + } +} +.sun-and-moon > .moon, +.sun-and-moon > .sun, +.sun-and-moon > .sun-beams { + transform-origin: center center; +} +.sun-and-moon > .moon, +.sun-and-moon > .sun { + fill: var(--icon-fill); +} +.theme-toggle:hover > .sun-and-moon > .moon, +.theme-toggle:hover > .sun-and-moon > .sun { + fill: var(--icon-fill-hover); +} +.theme-toggle:focus-visible > .sun-and-moon > .moon { + fill: var(--icon-fill-hover); +} +.theme-toggle:focus-visible > .sun-and-moon > .sun { + fill: var(--icon-fill-hover); +} +.sun-and-moon > .sun-beams { + stroke: var(--icon-fill); + stroke-width: 2px; +} +.theme-toggle:hover .sun-and-moon > .sun-beams { + stroke: var(--icon-fill-hover); +} +.theme-toggle:focus-visible .sun-and-moon > .sun-beams { + stroke: var(--icon-fill-hover); +} +[data-theme="dark"] .sun-and-moon > .sun { + transform: scale(1.75); +} +[data-theme="dark"] .sun-and-moon > .sun-beams { + opacity: 0; +} +[data-theme="dark"] .sun-and-moon > .moon > circle { + transform: translate(-7px); +} +@supports (cx: 1) { + [data-theme="dark"] .sun-and-moon > .moon > circle { + cx: 17; + transform: translate(0); + } +} +@media (prefers-reduced-motion: no-preference) { + .sun-and-moon > .sun { + transition: transform 0.5s var(--ease-elastic-3); + } + .sun-and-moon > .sun-beams { + transition: transform 0.5s var(--ease-elastic-4), opacity 0.5s var(--ease-3); + } + .sun-and-moon .moon > circle { + transition: transform 0.25s var(--ease-out-5); + } + @supports (cx: 1) { + .sun-and-moon .moon > circle { + transition: cx 0.25s var(--ease-out-5); + } + } + [data-theme="dark"] .sun-and-moon > .sun { + transform: scale(1.75); + transition-duration: 0.25s; + transition-timing-function: var(--ease-3); + } + [data-theme="dark"] .sun-and-moon > .sun-beams { + transform: rotate(-25deg); + transition-duration: 0.15s; + } + [data-theme="dark"] .sun-and-moon > .moon > circle { + transition-delay: 0.25s; + transition-duration: 0.5s; + } +} +.theme-toggle { + --ease-3: cubic-bezier(0.25, 0, 0.3, 1); + --ease-out-5: cubic-bezier(0, 0, 0, 1); + --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); + --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25); + --size: 2rem; + --icon-fill: #454d54; + --icon-fill-hover: #22262a; + -webkit-tap-highlight-color: transparent; + aspect-ratio: 1; + background: none; + block-size: var(--size); + border: none; + border-radius: 50%; + cursor: pointer; + inline-size: var(--size); + outline-offset: 5px; + padding: 0; + touch-action: manipulation; +} +.theme-toggle > svg { + stroke-linecap: round; + block-size: 100%; + inline-size: 100%; +} +[data-theme="dark"] .theme-toggle { + --icon-fill: #abb3ba; + --icon-fill-hover: #e2e6e9; +} +@media (hover: none) { + .theme-toggle { + --size: 48px; + } +} +.sun-and-moon > .moon, +.sun-and-moon > .sun, +.sun-and-moon > .sun-beams { + transform-origin: center center; +} +.sun-and-moon > .moon, +.sun-and-moon > .sun { + fill: var(--icon-fill); +} +.theme-toggle:hover > .sun-and-moon > .moon, +.theme-toggle:hover > .sun-and-moon > .sun { + fill: var(--icon-fill-hover); +} +.theme-toggle:focus-visible > .sun-and-moon > .moon { + fill: var(--icon-fill-hover); +} +.theme-toggle:focus-visible > .sun-and-moon > .sun { + fill: var(--icon-fill-hover); +} +.sun-and-moon > .sun-beams { + stroke: var(--icon-fill); + stroke-width: 2px; +} +.theme-toggle:hover .sun-and-moon > .sun-beams { + stroke: var(--icon-fill-hover); +} +.theme-toggle:focus-visible .sun-and-moon > .sun-beams { + stroke: var(--icon-fill-hover); +} +[data-theme="dark"] .sun-and-moon > .sun { + transform: scale(1.75); +} +[data-theme="dark"] .sun-and-moon > .sun-beams { + opacity: 0; +} +[data-theme="dark"] .sun-and-moon > .moon > circle { + transform: translate(-7px); +} +@supports (cx: 1) { + [data-theme="dark"] .sun-and-moon > .moon > circle { + cx: 17; + transform: translate(0); + } +} +@media (prefers-reduced-motion: no-preference) { + .sun-and-moon > .sun { + transition: transform 0.5s var(--ease-elastic-3); + } + .sun-and-moon > .sun-beams { + transition: transform 0.5s var(--ease-elastic-4), opacity 0.5s var(--ease-3); + } + .sun-and-moon .moon > circle { + transition: transform 0.25s var(--ease-out-5); + } + @supports (cx: 1) { + .sun-and-moon .moon > circle { + transition: cx 0.25s var(--ease-out-5); + } + } + [data-theme="dark"] .sun-and-moon > .sun { + transform: scale(1.75); + transition-duration: 0.25s; + transition-timing-function: var(--ease-3); + } + [data-theme="dark"] .sun-and-moon > .sun-beams { + transform: rotate(-25deg); + transition-duration: 0.15s; + } + [data-theme="dark"] .sun-and-moon > .moon > circle { + transition-delay: 0.25s; + transition-duration: 0.5s; + } +} diff --git a/node_modules/theme-toggle/src/template.js b/node_modules/theme-toggle/src/template.js new file mode 100644 index 0000000..75b05fb --- /dev/null +++ b/node_modules/theme-toggle/src/template.js @@ -0,0 +1,27 @@ +const template = document.createElement("template"); +template.innerHTML = ` + + +`; + +export default template; diff --git a/node_modules/theme-toggle/vite.config.js b/node_modules/theme-toggle/vite.config.js new file mode 100644 index 0000000..5a46cb9 --- /dev/null +++ b/node_modules/theme-toggle/vite.config.js @@ -0,0 +1,15 @@ +import { defineConfig } from "vite"; + +export default defineConfig({ + build: { + outDir: "dist", + emptyOutDir: true, + polyfillModulePreload: true, + lib: { + entry: "src/index.js", + name: "theme-toggle", + fileName: "theme-toggle", + }, + minify: "esbuild", + }, +}); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..cb71347 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,24 @@ +{ + "name": "PlaylistAdda", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "theme-toggle": "^1.0.0" + } + }, + "node_modules/theme-toggle": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/theme-toggle/-/theme-toggle-1.0.0.tgz", + "integrity": "sha512-E0fmmAixc/+6TZVxCIey9olz0giPHZxWQOoY0D5LI+1g6B4ExydtAmt+asfZUUXeJwkDMyAy3Dr4n3KunyNgog==" + } + }, + "dependencies": { + "theme-toggle": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/theme-toggle/-/theme-toggle-1.0.0.tgz", + "integrity": "sha512-E0fmmAixc/+6TZVxCIey9olz0giPHZxWQOoY0D5LI+1g6B4ExydtAmt+asfZUUXeJwkDMyAy3Dr4n3KunyNgog==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..e830a8c --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "theme-toggle": "^1.0.0" + } +} diff --git a/style.css b/style.css index 04e7a26..f9c918e 100644 --- a/style.css +++ b/style.css @@ -248,4 +248,16 @@ button:hover { background-color: hsla(var(--cd-color-3-h),var(--cd-color-3-s),var(--cd-color-3-l),0.8); } -/* End Bottom to Top */ \ No newline at end of file +/* for Dark mode */ +.d_mode{ + text-align: right; +} +.dark-mode { + background-color: black; + color: white; +} +.light-mode { + background-color: white; + color: black; +} +/* End Bottom to Top */