sonika/svelte_learning_project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

poc changes

Browse Source
This commit is contained in:
Sonika 2024-02-19 08:20:23 +05:30
parent 9220b84d2b
commit 4fde04476e
4 changed files with 842 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -2,3 +2,5 @@
npm install npm install
npm run dev npm run dev
<!-- npm cache clean --force -->

727
package-lock.json generated
View File

@ -8,11 +8,13 @@
"name": "svelte-app", "name": "svelte-app",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@smui/common": "^7.0.0-beta.16",
"sirv-cli": "^0.4.4" "sirv-cli": "^0.4.4"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "11.0.2", "@rollup/plugin-commonjs": "11.0.2",
"@rollup/plugin-node-resolve": "^7.0.0", "@rollup/plugin-node-resolve": "^7.0.0",
"@smui/button": "^7.0.0-beta.16",
"rollup": "^1.20.0", "rollup": "^1.20.0",
"rollup-plugin-livereload": "^1.0.0", "rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3", "rollup-plugin-svelte": "^5.0.3",
@ -20,6 +22,19 @@
"svelte": "^3.0.0" "svelte": "^3.0.0"
} }
}, },
"node_modules/@ampproject/remapping": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
"peer": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.0",
"@jridgewell/trace-mapping": "^0.3.9"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
"version": "7.8.3", "version": "7.8.3",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
@ -46,6 +61,223 @@
"js-tokens": "^4.0.0" "js-tokens": "^4.0.0"
} }
}, },
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
"peer": true,
"dependencies": {
"@jridgewell/set-array": "^1.0.1",
"@jridgewell/sourcemap-codec": "^1.4.10",
"@jridgewell/trace-mapping": "^0.3.9"
},
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/resolve-uri": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
"peer": true,
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/set-array": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
"peer": true,
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/@jridgewell/sourcemap-codec": {
"version": "1.4.15",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
"peer": true
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.22",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
"integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
"peer": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@material/animation": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/animation/-/animation-14.0.0.tgz",
"integrity": "sha512-VlYSfUaIj/BBVtRZI8Gv0VvzikFf+XgK0Zdgsok5c1v5DDnNz5tpB8mnGrveWz0rHbp1X4+CWLKrTwNmjrw3Xw==",
"dev": true,
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/@material/base": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/base/-/base-14.0.0.tgz",
"integrity": "sha512-Ou7vS7n1H4Y10MUZyYAbt6H0t67c6urxoCgeVT7M38aQlaNUwFMODp7KT/myjYz2YULfhu3PtfSV3Sltgac9mA==",
"dev": true,
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/@material/button": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/button/-/button-14.0.0.tgz",
"integrity": "sha512-dqqHaJq0peyXBZupFzCjmvScrfljyVU66ZCS3oldsaaj5iz8sn33I/45Z4zPzdR5F5z8ExToHkRcXhakj1UEAA==",
"dev": true,
"dependencies": {
"@material/density": "^14.0.0",
"@material/dom": "^14.0.0",
"@material/elevation": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/focus-ring": "^14.0.0",
"@material/ripple": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/shape": "^14.0.0",
"@material/theme": "^14.0.0",
"@material/tokens": "^14.0.0",
"@material/touch-target": "^14.0.0",
"@material/typography": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/density": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/density/-/density-14.0.0.tgz",
"integrity": "sha512-NlxXBV5XjNsKd8UXF4K/+fOXLxoFNecKbsaQO6O2u+iG8QBfFreKRmkhEBb2hPPwC3w8nrODwXX0lHV+toICQw==",
"dev": true,
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/@material/dom": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/dom/-/dom-14.0.0.tgz",
"integrity": "sha512-8t88XyacclTj8qsIw9q0vEj4PI2KVncLoIsIMzwuMx49P2FZg6TsLjor262MI3Qs00UWAifuLMrhnOnfyrbe7Q==",
"dependencies": {
"@material/feature-targeting": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/elevation": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-14.0.0.tgz",
"integrity": "sha512-Di3tkxTpXwvf1GJUmaC8rd+zVh5dB2SWMBGagL4+kT8UmjSISif/OPRGuGnXs3QhF6nmEjkdC0ijdZLcYQkepw==",
"dev": true,
"dependencies": {
"@material/animation": "^14.0.0",
"@material/base": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/feature-targeting": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-14.0.0.tgz",
"integrity": "sha512-a5WGgHEq5lJeeNL5yevtgoZjBjXWy6+klfVWQEh8oyix/rMJygGgO7gEc52uv8fB8uAIoYEB3iBMOv8jRq8FeA==",
"dependencies": {
"tslib": "^2.1.0"
}
},
"node_modules/@material/focus-ring": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/focus-ring/-/focus-ring-14.0.0.tgz",
"integrity": "sha512-fqqka6iSfQGJG3Le48RxPCtnOiaLGPDPikhktGbxlyW9srBVMgeCiONfHM7IT/1eu80O0Y67Lh/4ohu5+C+VAQ==",
"dev": true,
"dependencies": {
"@material/dom": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0"
}
},
"node_modules/@material/ripple": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-14.0.0.tgz",
"integrity": "sha512-9XoGBFd5JhFgELgW7pqtiLy+CnCIcV2s9cQ2BWbOQeA8faX9UZIDUx/g76nHLZ7UzKFtsULJxZTwORmsEt2zvw==",
"dev": true,
"dependencies": {
"@material/animation": "^14.0.0",
"@material/base": "^14.0.0",
"@material/dom": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/rtl": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-14.0.0.tgz",
"integrity": "sha512-xl6OZYyRjuiW2hmbjV2omMV8sQtfmKAjeWnD1RMiAPLCTyOW9Lh/PYYnXjxUrNa0cRwIIbOn5J7OYXokja8puA==",
"dev": true,
"dependencies": {
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/shape": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/shape/-/shape-14.0.0.tgz",
"integrity": "sha512-o0mJB0+feOv473KckI8gFnUo8IQAaEA6ynXzw3VIYFjPi48pJwrxa0mZcJP/OoTXrCbDzDeFJfDPXEmRioBb9A==",
"dev": true,
"dependencies": {
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/theme": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/theme/-/theme-14.0.0.tgz",
"integrity": "sha512-6/SENWNIFuXzeHMPHrYwbsXKgkvCtWuzzQ3cUu4UEt3KcQ5YpViazIM6h8ByYKZP8A9d8QpkJ0WGX5btGDcVoA==",
"dev": true,
"dependencies": {
"@material/feature-targeting": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/tokens": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/tokens/-/tokens-14.0.0.tgz",
"integrity": "sha512-SXgB9VwsKW4DFkHmJfDIS0x0cGdMWC1D06m6z/WQQ5P5j6/m0pKrbHVlrLzXcRjau+mFhXGvj/KyPo9Pp/Rc8Q==",
"dev": true,
"dependencies": {
"@material/elevation": "^14.0.0"
}
},
"node_modules/@material/touch-target": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-14.0.0.tgz",
"integrity": "sha512-o3kvxmS4HkmZoQTvtzLJrqSG+ezYXkyINm3Uiwio1PTg67pDgK5FRwInkz0VNaWPcw9+5jqjUQGjuZMtjQMq8w==",
"dev": true,
"dependencies": {
"@material/base": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/rtl": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@material/typography": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@material/typography/-/typography-14.0.0.tgz",
"integrity": "sha512-/QtHBYiTR+TPMryM/CT386B2WlAQf/Ae32V324Z7P40gHLKY/YBXx7FDutAWZFeOerq/two4Nd2aAHBcMM2wMw==",
"dev": true,
"dependencies": {
"@material/feature-targeting": "^14.0.0",
"@material/theme": "^14.0.0",
"tslib": "^2.1.0"
}
},
"node_modules/@polka/url": { "node_modules/@polka/url": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
@ -106,6 +338,316 @@
"rollup": "^1.20.0||^2.0.0" "rollup": "^1.20.0||^2.0.0"
} }
}, },
"node_modules/@smui/button": {
"version": "7.0.0-beta.16",
"resolved": "https://registry.npmjs.org/@smui/button/-/button-7.0.0-beta.16.tgz",
"integrity": "sha512-Zci9DIcXhzqjjXXtoowLyUY5+c0way3PtO3MjWsr+BnVjMwItehuGowQZqsBqpsg1PzQ+E8JoSXSKUT+3oAZVg==",
"dev": true,
"dependencies": {
"@material/button": "^14.0.0",
"@material/elevation": "^14.0.0",
"@material/feature-targeting": "^14.0.0",
"@material/ripple": "^14.0.0",
"@material/shape": "^14.0.0",
"@material/theme": "^14.0.0",
"@smui/common": "^7.0.0-beta.16",
"@smui/ripple": "^7.0.0-beta.16",
"svelte2tsx": "^0.6.27"
}
},
"node_modules/@smui/button/node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true,
"peer": true
},
"node_modules/@smui/button/node_modules/acorn": {
"version": "8.11.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
"dev": true,
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/@smui/button/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true,
"peer": true,
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/@smui/button/node_modules/is-reference": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
"dev": true,
"peer": true,
"dependencies": {
"@types/estree": "*"
}
},
"node_modules/@smui/button/node_modules/magic-string": {
"version": "0.30.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
"integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
"dev": true,
"peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@smui/button/node_modules/svelte": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.11.tgz",
"integrity": "sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==",
"dev": true,
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15",
"@jridgewell/trace-mapping": "^0.3.18",
"@types/estree": "^1.0.1",
"acorn": "^8.9.0",
"aria-query": "^5.3.0",
"axobject-query": "^4.0.0",
"code-red": "^1.0.3",
"css-tree": "^2.3.1",
"estree-walker": "^3.0.3",
"is-reference": "^3.0.1",
"locate-character": "^3.0.0",
"magic-string": "^0.30.4",
"periscopic": "^3.1.0"
},
"engines": {
"node": ">=16"
}
},
"node_modules/@smui/button/node_modules/svelte2tsx": {
"version": "0.6.27",
"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.27.tgz",
"integrity": "sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==",
"dev": true,
"dependencies": {
"dedent-js": "^1.0.1",
"pascal-case": "^3.1.1"
},
"peerDependencies": {
"svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
"typescript": "^4.9.4 || ^5.0.0"
}
},
"node_modules/@smui/common": {
"version": "7.0.0-beta.16",
"resolved": "https://registry.npmjs.org/@smui/common/-/common-7.0.0-beta.16.tgz",
"integrity": "sha512-PpqhIAWtE6ZZ6XyIkzHGXdMk+iE4QLFdzYXf20cG13O/0bFjOV5ySk2g+Vq2ZWRJawIjMaPcekbCkkowna4vgg==",
"dependencies": {
"@material/dom": "^14.0.0",
"svelte2tsx": "^0.6.27"
}
},
"node_modules/@smui/common/node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"peer": true
},
"node_modules/@smui/common/node_modules/acorn": {
"version": "8.11.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/@smui/common/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"peer": true,
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/@smui/common/node_modules/is-reference": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
"peer": true,
"dependencies": {
"@types/estree": "*"
}
},
"node_modules/@smui/common/node_modules/magic-string": {
"version": "0.30.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
"integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
"peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@smui/common/node_modules/svelte": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.11.tgz",
"integrity": "sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==",
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15",
"@jridgewell/trace-mapping": "^0.3.18",
"@types/estree": "^1.0.1",
"acorn": "^8.9.0",
"aria-query": "^5.3.0",
"axobject-query": "^4.0.0",
"code-red": "^1.0.3",
"css-tree": "^2.3.1",
"estree-walker": "^3.0.3",
"is-reference": "^3.0.1",
"locate-character": "^3.0.0",
"magic-string": "^0.30.4",
"periscopic": "^3.1.0"
},
"engines": {
"node": ">=16"
}
},
"node_modules/@smui/common/node_modules/svelte2tsx": {
"version": "0.6.27",
"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.27.tgz",
"integrity": "sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==",
"dependencies": {
"dedent-js": "^1.0.1",
"pascal-case": "^3.1.1"
},
"peerDependencies": {
"svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
"typescript": "^4.9.4 || ^5.0.0"
}
},
"node_modules/@smui/ripple": {
"version": "7.0.0-beta.16",
"resolved": "https://registry.npmjs.org/@smui/ripple/-/ripple-7.0.0-beta.16.tgz",
"integrity": "sha512-HULlv8zdEOvexw9Ob7senmk8cAuHZ3usaCruWclOSVBesKHDIODRpIusFCnoFv2Gk4PVjsDRCIvk1lzRWRjEUQ==",
"dev": true,
"dependencies": {
"@material/dom": "^14.0.0",
"@material/ripple": "^14.0.0",
"@smui/common": "^7.0.0-beta.16",
"svelte2tsx": "^0.6.27"
}
},
"node_modules/@smui/ripple/node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true,
"peer": true
},
"node_modules/@smui/ripple/node_modules/acorn": {
"version": "8.11.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
"dev": true,
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/@smui/ripple/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true,
"peer": true,
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/@smui/ripple/node_modules/is-reference": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
"dev": true,
"peer": true,
"dependencies": {
"@types/estree": "*"
}
},
"node_modules/@smui/ripple/node_modules/magic-string": {
"version": "0.30.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
"integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
"dev": true,
"peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@smui/ripple/node_modules/svelte": {
"version": "4.2.11",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.11.tgz",
"integrity": "sha512-YIQk3J4X89wOLhjsqIW8tqY3JHPuBdtdOIkASP2PZeAMcSW9RsIjQzMesCrxOF3gdWYC0mKknlKF7OqmLM+Zqg==",
"dev": true,
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15",
"@jridgewell/trace-mapping": "^0.3.18",
"@types/estree": "^1.0.1",
"acorn": "^8.9.0",
"aria-query": "^5.3.0",
"axobject-query": "^4.0.0",
"code-red": "^1.0.3",
"css-tree": "^2.3.1",
"estree-walker": "^3.0.3",
"is-reference": "^3.0.1",
"locate-character": "^3.0.0",
"magic-string": "^0.30.4",
"periscopic": "^3.1.0"
},
"engines": {
"node": ">=16"
}
},
"node_modules/@smui/ripple/node_modules/svelte2tsx": {
"version": "0.6.27",
"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.6.27.tgz",
"integrity": "sha512-E1uPW1o6VsbRz+nUk3fznZ2lSmCITAJoNu8AYefWSvIwE2pSB01i5sId4RMbWNzfcwCQl1DcgGShCPcldl4rvg==",
"dev": true,
"dependencies": {
"dedent-js": "^1.0.1",
"pascal-case": "^3.1.1"
},
"peerDependencies": {
"svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
"typescript": "^4.9.4 || ^5.0.0"
}
},
"node_modules/@types/estree": { "node_modules/@types/estree": {
"version": "0.0.39", "version": "0.0.39",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@ -164,12 +706,30 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/aria-query": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
"peer": true,
"dependencies": {
"dequal": "^2.0.3"
}
},
"node_modules/async-limiter": { "node_modules/async-limiter": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==", "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
"dev": true "dev": true
}, },
"node_modules/axobject-query": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
"integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
"peer": true,
"dependencies": {
"dequal": "^2.0.3"
}
},
"node_modules/binary-extensions": { "node_modules/binary-extensions": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
@ -241,6 +801,46 @@
"fsevents": "~2.1.2" "fsevents": "~2.1.2"
} }
}, },
"node_modules/code-red": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
"peer": true,
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15",
"@types/estree": "^1.0.1",
"acorn": "^8.10.0",
"estree-walker": "^3.0.3",
"periscopic": "^3.1.0"
}
},
"node_modules/code-red/node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"peer": true
},
"node_modules/code-red/node_modules/acorn": {
"version": "8.11.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/code-red/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"peer": true,
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -270,6 +870,33 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/css-tree": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
"peer": true,
"dependencies": {
"mdn-data": "2.0.30",
"source-map-js": "^1.0.1"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
}
},
"node_modules/dedent-js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ=="
},
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"peer": true,
"engines": {
"node": ">=6"
}
},
"node_modules/escape-string-regexp": { "node_modules/escape-string-regexp": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@ -469,6 +1096,20 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/locate-character": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
"peer": true
},
"node_modules/lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
"dependencies": {
"tslib": "^2.0.3"
}
},
"node_modules/magic-string": { "node_modules/magic-string": {
"version": "0.25.7", "version": "0.25.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@ -478,6 +1119,12 @@
"sourcemap-codec": "^1.4.4" "sourcemap-codec": "^1.4.4"
} }
}, },
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
"peer": true
},
"node_modules/merge-stream": { "node_modules/merge-stream": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -503,6 +1150,15 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/no-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
"dependencies": {
"lower-case": "^2.0.2",
"tslib": "^2.0.3"
}
},
"node_modules/normalize-path": { "node_modules/normalize-path": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@ -518,12 +1174,56 @@
"integrity": "sha512-hwZhzGGG/GQ7igxAVFOEun2N4fWul31qE9nfBdCnZGQCB5+L7tN9xZ+94B4aUpLOJx/of3zZs5XsuubayQYQjA==", "integrity": "sha512-hwZhzGGG/GQ7igxAVFOEun2N4fWul31qE9nfBdCnZGQCB5+L7tN9xZ+94B4aUpLOJx/of3zZs5XsuubayQYQjA==",
"dev": true "dev": true
}, },
"node_modules/pascal-case": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
"dependencies": {
"no-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"node_modules/path-parse": { "node_modules/path-parse": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
"dev": true "dev": true
}, },
"node_modules/periscopic": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
"peer": true,
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^3.0.0",
"is-reference": "^3.0.0"
}
},
"node_modules/periscopic/node_modules/@types/estree": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"peer": true
},
"node_modules/periscopic/node_modules/estree-walker": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"peer": true,
"dependencies": {
"@types/estree": "^1.0.0"
}
},
"node_modules/periscopic/node_modules/is-reference": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
"peer": true,
"dependencies": {
"@types/estree": "*"
}
},
"node_modules/picomatch": { "node_modules/picomatch": {
"version": "2.2.2", "version": "2.2.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
@ -694,6 +1394,15 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"peer": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/source-map-support": { "node_modules/source-map-support": {
"version": "0.5.19", "version": "0.5.19",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
@ -769,6 +1478,24 @@
"node": ">=8.0" "node": ">=8.0"
} }
}, },
"node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/typescript": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
},
"node_modules/ws": { "node_modules/ws": {
"version": "6.2.1", "version": "6.2.1",
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",

2
package.json
View File

@ -9,6 +9,7 @@
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "11.0.2", "@rollup/plugin-commonjs": "11.0.2",
"@rollup/plugin-node-resolve": "^7.0.0", "@rollup/plugin-node-resolve": "^7.0.0",
"@smui/button": "^7.0.0-beta.16",
"rollup": "^1.20.0", "rollup": "^1.20.0",
"rollup-plugin-livereload": "^1.0.0", "rollup-plugin-livereload": "^1.0.0",
"rollup-plugin-svelte": "^5.0.3", "rollup-plugin-svelte": "^5.0.3",
@ -16,6 +17,7 @@
"svelte": "^3.0.0" "svelte": "^3.0.0"
}, },
"dependencies": { "dependencies": {
"@smui/common": "^7.0.0-beta.16",
"sirv-cli": "^0.4.4" "sirv-cli": "^0.4.4"
} }
} }

254
src/App.svelte
View File

@ -1,166 +1,128 @@
<script> <script>
let people = [
{ first: 'Hans', last: 'Emil' },
{ first: 'Max', last: 'Mustermann' },
{ first: 'Roman', last: 'Tisch' }
];
let strength = 0; let prefix = '';
let validations = [] let first = '';
let last = '';
let i = 0;
function validatePassword(e) { $: filteredPeople = prefix
const password = e.target.value ? people.filter((person) => {
const name = `${person.last}, ${person.first}`;
return name.toLowerCase().startsWith(prefix.toLowerCase());
})
: people;
validations = [ $: selected = filteredPeople[i];
(password.length > 5),
(password.search(/[A-Z]/) > -1),
(password.search(/[0-9]/) > -1),
(password.search(/[&+,:;=?@#-]/) > -1)
]
strength = validations.reduce((acc, cur) => acc + cur ) $: reset_inputs(selected);
function create() {
people = people.concat({ first, last });
i = people.length - 1;
first = last = '';
} }
function update() {
selected.first = first;
selected.last = last;
people = people;
}
function remove() {
const index = people.indexOf(selected);
people = [...people.slice(0, index), ...people.slice(index + 1)];
first = last = '';
i = Math.min(i, filteredPeople.length - 2);
}
function reset_inputs(person) {
first = person ? person.first : '';
last = person ? person.last : '';
}
</script> </script>
<div class="center-container">
<div class="container">
<input placeholder="filter prefix" bind:value={prefix} />
<select bind:value={i} size={5}>
{#each filteredPeople as person, i}
<option value={i}>{person.last}, {person.first}</option>
{/each}
</select>
<label><input bind:value={first} placeholder="first" /></label>
<label><input bind:value={last} placeholder="last" /></label>
<div class="buttons">
<button on:click={create} disabled={!first || !last}>create</button>
<button on:click={update} disabled={!first || !last || !selected}>update</button>
<button on:click={remove} disabled={!selected}>delete</button>
</div>
</div>
</div>
<style> <style>
form { .center-container {
--text-color: #afafaf;
max-width: 500px;
}
.field {
width: 100%;
position: relative;
border-bottom: 2px dashed var(--text-color);
margin: 4rem auto 1rem;
/* transition: 500ms; */
}
.label {
color: var(--text-color);
font-size: 1.2rem;
}
.input {
outline: none;
border: none;
overflow: hidden;
margin: 0;
width: 100%;
padding: 0.25rem 0;
background: none;
color: white;
font-size: 1.2rem;
font-weight: bold;
/* transition: border 500ms; */
}
.input:valid {
color: yellowgreen;
}
input:invalid {
color: orangered;
}
/* border animation */
.field::after {
content: "";
position: relative;
display: block;
height: 4px;
width: 100%;
background: #d16dff;
transform: scaleX(0);
transform-origin: 0%;
/* opacity: 0; */
transition: transform 500ms ease;
top: 2px;
}
.field:focus-within {
border-color: transparent;
}
.field:focus-within::after {
transform: scaleX(1);
opacity: 1;
}
/* label animation */
.label {
z-index: -1;
position: absolute;
transform: translateY(-2rem);
transform-origin: 0%;
transition: transform 400ms;
}
.field:focus-within .label,
.input:not(:placeholder-shown) + .label {
transform: scale(0.8) translateY(-5rem);
opacity: 1;
}
/* strength meter */
.strength {
display: flex; display: flex;
height: 20px; justify-content: center;
align-items: center;
height: 100vh;
background-color: #ffffff;
margin: 0;
}
.container {
width: 500px; /* Increase width for a bigger dialog box */
padding: 40px; /* Increase padding for more spacing inside the dialog box */
background-color: #ffffff; /* Change background color to white */
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 16px; /* Increase margin bottom for more spacing between elements */
color: #333;
}
input[type="text"],
select {
width: 100%; width: 100%;
padding: 12px; /* Increase padding for larger input fields */
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 24px; /* Increase margin bottom for more spacing between elements */
font-size: 16px;
} }
.bar { .button-group {
margin-right: 5px; display: flex;
height: 100%; justify-content: space-between;
width: 25%;
transition: box-shadow 500ms;
box-shadow: inset 0px 20px #1f1f1f;
} }
.bar-show { button {
box-shadow: none; padding: 12px 24px; /* Increase padding for larger buttons */
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #007bff;
color: #fff;
font-size: 16px;
transition: background-color 0.3s ease;
} }
.bar-1 { button:hover {
background: linear-gradient(to right, red, orangered) background-color: #0056b3;
} }
.bar-2 {
background: linear-gradient(to right, orangered, yellow)
}
.bar-3 {
background: linear-gradient(to right, yellow, yellowgreen)
}
.bar-4 {
background: linear-gradient(to right, yellowgreen, green)
}
</style> </style>
<main>
<form>
<div class="field">
<input type="email" name="email" class="input" placeholder=""/>
<label for="email" class="label">Email</label>
</div>
<div class="field">
<input type="password" name="password" class="input" placeholder="" on:input={validatePassword}/>
<label for="password" class="label">Password</label>
</div>
<div class="strength">
<span class="bar bar-1" class:bar-show={strength > 0}/>
<span class="bar bar-2" class:bar-show={strength > 1}/>
<span class="bar bar-3" class:bar-show={strength > 1}/>
<span class="bar bar-4" class:bar-show={strength > 3}/>
</div>
<ul>
<li> {validations[0] ? '✔️' : '❌'} must be at least 5 characters</li>
<li> {validations[1] ? '✔️' : '❌'} must contain a capital letter</li>
<li> {validations[2] ? '✔️' : '❌'} must contain a number</li>
<li> {validations[3] ? '✔️' : '❌'} must contain one of $&+,:;=?@#-</li>
</ul>
</form>
</main>