diff --git a/package-lock.json b/package-lock.json index dbf056d..75e9137 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1026,9 +1026,9 @@ "devOptional": true }, "node_modules/@types/react": { - "version": "18.2.35", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.35.tgz", - "integrity": "sha512-LG3xpFZ++rTndV+/XFyX5vUP7NI9yxyk+MQvBDq+CVs8I9DLSc3Ymwb1Vmw5YDoeNeHN4PDZa3HylMKJYT9PNQ==", + "version": "18.2.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz", + "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==", "devOptional": true, "dependencies": { "@types/prop-types": "*", @@ -1037,9 +1037,9 @@ } }, "node_modules/@types/react-dom": { - "version": "18.2.14", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.14.tgz", - "integrity": "sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==", + "version": "18.2.15", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.15.tgz", + "integrity": "sha512-HWMdW+7r7MR5+PZqJF6YFNSCtjz1T0dsvo/f1BV6HkV+6erD/nA7wd9NM00KVG83zf2nJ7uATPO9ttdIPvi3gg==", "dev": true, "dependencies": { "@types/react": "*" @@ -1114,15 +1114,15 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "6.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.9.1.tgz", - "integrity": "sha512-C7AK2wn43GSaCUZ9do6Ksgi2g3mwFkMO3Cis96kzmgudoVaKyt62yNzJOktP0HDLb/iO2O0n2lBOzJgr6Q/cyg==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz", + "integrity": "sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "6.9.1", - "@typescript-eslint/types": "6.9.1", - "@typescript-eslint/typescript-estree": "6.9.1", - "@typescript-eslint/visitor-keys": "6.9.1", + "@typescript-eslint/scope-manager": "6.10.0", + "@typescript-eslint/types": "6.10.0", + "@typescript-eslint/typescript-estree": "6.10.0", + "@typescript-eslint/visitor-keys": "6.10.0", "debug": "^4.3.4" }, "engines": { @@ -1142,13 +1142,13 @@ } }, "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": { - "version": "6.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.9.1.tgz", - "integrity": "sha512-38IxvKB6NAne3g/+MyXMs2Cda/Sz+CEpmm+KLGEM8hx/CvnSRuw51i8ukfwB/B/sESdeTGet1NH1Wj7I0YXswg==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.10.0.tgz", + "integrity": "sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.9.1", - "@typescript-eslint/visitor-keys": "6.9.1" + "@typescript-eslint/types": "6.10.0", + "@typescript-eslint/visitor-keys": "6.10.0" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -1159,9 +1159,9 @@ } }, "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": { - "version": "6.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.9.1.tgz", - "integrity": "sha512-BUGslGOb14zUHOUmDB2FfT6SI1CcZEJYfF3qFwBeUrU6srJfzANonwRYHDpLBuzbq3HaoF2XL2hcr01c8f8OaQ==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.10.0.tgz", + "integrity": "sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -1172,13 +1172,13 @@ } }, "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": { - "version": "6.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.9.1.tgz", - "integrity": "sha512-U+mUylTHfcqeO7mLWVQ5W/tMLXqVpRv61wm9ZtfE5egz7gtnmqVIw9ryh0mgIlkKk9rZLY3UHygsBSdB9/ftyw==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.10.0.tgz", + "integrity": "sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.9.1", - "@typescript-eslint/visitor-keys": "6.9.1", + "@typescript-eslint/types": "6.10.0", + "@typescript-eslint/visitor-keys": "6.10.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -1199,12 +1199,12 @@ } }, "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": { - "version": "6.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.9.1.tgz", - "integrity": "sha512-MUaPUe/QRLEffARsmNfmpghuQkW436DvESW+h+M52w0coICHRfD6Np9/K6PdACwnrq1HmuLl+cSPZaJmeVPkSw==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.10.0.tgz", + "integrity": "sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.9.1", + "@typescript-eslint/types": "6.10.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { diff --git a/src/Generator.tsx b/src/Generator.tsx index dcf0b3c..afe7fb9 100644 --- a/src/Generator.tsx +++ b/src/Generator.tsx @@ -1,5 +1,81 @@ -import React from "react"; +import React, { ChangeEvent } from "react"; +import "@styles/Generator.scss"; export default function Generator() { - return
Generator
; + const [outputUrl, setOutputUrl] = React.useState("sdlgkhfldskgjhdkjfghlkdfsjghlkjdshg"); + const copiedTooltipRef = React.useRef(null); + + const [showChannelName, setShowChannelName] = React.useState(true); + + function copy() { + navigator.clipboard.writeText(outputUrl); + + if (copiedTooltipRef.current) { + copiedTooltipRef.current.style.animation = "tooltipAnimation 200ms"; + copiedTooltipRef.current.style.opacity = "1"; + + setTimeout(() => { + if (copiedTooltipRef.current) { + copiedTooltipRef.current.style.opacity = "0"; + copiedTooltipRef.current.style.animation = ""; + } + }, 1000); + } + } + + return ( +
+
+

+ {outputUrl} +

+ +
+ Copied! +
+
+
+
+

Configurations

+ +
+ ) => { + setShowChannelName(e.target.checked); + }} + /> + +
+ +
+ ) => { + setShowChannelName(e.target.checked); + }} + /> + +
+ +
+ ) => { + setShowChannelName(e.target.checked); + }} + /> + +
+
+ +
s
+
+
+ ); } diff --git a/src/styles/Generator.scss b/src/styles/Generator.scss new file mode 100644 index 0000000..00f71c7 --- /dev/null +++ b/src/styles/Generator.scss @@ -0,0 +1,222 @@ +// Breakpoints +$breakpoint-1: 760px; +$breakpoint-2: 565px; + +body { + padding: 0; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + width: 100vw; + background-color: #232528; +} + +@keyframes tooltipAnimation { + 0% { + opacity: 0; + transform: translateY(-10px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.generator { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 50px; + color: white; + + button { + background-color: #202024; + color: #fff; + font-weight: bold; + border: 2px solid #31f399; + border-radius: 5px; + padding: 10px 20px; + cursor: pointer; + transition: all 300ms ease-in-out; + &:hover { + background-color: #42d486; + color: #202024; + } + } + + .output { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + column-gap: 20px; + position: relative; + height: 20px; + + .url { + white-space: nowrap; + overflow: auto; + font-weight: bold; + width: 500px; + padding: 5px 10px; + background-color: #313136; + border-radius: 5px; + text-align: center; + + @media screen and (max-width: $breakpoint-1) { + width: 300px; + } + + @media screen and (max-width: $breakpoint-2) { + width: 200px; + } + } + .copy { + padding: 5px 10px; + border: 2px solid #31f39973; + transition: all 100ms ease-in-out; + + &:hover { + border-color: #42d486; + background-color: transparent; + color: #fff; + } + } + + .copiedTooltip { + opacity: 0; + position: absolute; + right: -90px; + background-color: #31f399; + color: #202024; + padding: 5px 10px; + border-radius: 5px; + font-size: 0.8rem; + font-weight: bold; + } + } + .configuration { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; + flex: 1; + gap: 30px; + + h1 { + font-size: 1.2rem; + text-align: center; + } + + .options { + display: flex; + flex-direction: column; + align-items: left; + justify-content: center; + height: 100%; + width: 100%; + border-right: 5px solid rgb(131, 131, 131); + gap: 10px; + } + + .viewer { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; + background-color: #fff; + } + + .option { + display: flex; + flex-direction: row; + align-items: center; + justify-content: left; + column-gap: 10px; + + input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 20px; + height: 20px; + border: 2px solid #31f399; + border-radius: 5px; + background-color: #202024; + outline: none; + transition: all 200ms ease-in-out; + position: relative; + color: white; + text-align: center; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + + // make it a cross when checked + &:checked { + &:after { + content: ""; + position: absolute; + width: 10px; + height: 2px; + background-color: #31f399; + transform: rotate(45deg); + } + &:before { + content: ""; + position: absolute; + width: 10px; + height: 2px; + background-color: #31f399; + transform: rotate(-45deg); + } + + &:after, + &:before { + top: 7px; + left: 3px; + } + } + cursor: pointer; + } + + input[type="number"] { + width: 50px; + cursor: text; + } + + label { + cursor: pointer; + } + } + } +} + +// custom dark themed scrollbar +::-webkit-scrollbar { + width: 5px; + height: 15px; +} + +::-webkit-scrollbar-track { + background: #363638; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb { + background: #31f39973; + border-radius: 10px; +} + +::-webkit-scrollbar-thumb:hover { + background: #48ee95; +} diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss index 951bf25..74ff59e 100644 --- a/src/styles/Viewer.scss +++ b/src/styles/Viewer.scss @@ -3,6 +3,7 @@ flex-direction: column; gap: 0 0; padding: 1rem; + font-size: 3rem; .channelNameContainer { display: flex; diff --git a/src/styles/index.scss b/src/styles/index.scss index b07f00f..b68e07f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,5 +1,5 @@ * { font-family: Arial, Helvetica, sans-serif; font-weight: bold; - font-size: 3rem; + font-size: 1rem; }