├── .gitattributes ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── index.html ├── netlify.toml ├── package.json ├── pnpm-lock.yaml ├── public ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── favicon-16x16.png ├── favicon-32x32.png └── favicon.ico └── src ├── main.js └── scss ├── components ├── _analogClock.scss ├── _copyright.scss ├── _digitalClock.scss ├── _loader.scss ├── _neonTextEffect.scss ├── _particle.scss └── _scrollbar.scss ├── global ├── _color.scss ├── _font.scss └── _reset.scss ├── keyframes ├── _flicker.scss ├── _loader.scss └── _pulsate.scss ├── media └── _AnalogClock_media.scss ├── style.scss └── utilities └── _margin.scss /.gitattributes: -------------------------------------------------------------------------------- 1 | *.scss linguist-detectable=false 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.toptal.com/developers/gitignore/api/node,visualstudiocode 2 | # Edit at https://www.toptal.com/developers/gitignore?templates=node,visualstudiocode 3 | 4 | ### Node ### 5 | # Logs 6 | logs 7 | *.log 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | lerna-debug.log* 12 | .pnpm-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # Snowpack dependency directory (https://snowpack.dev/) 50 | web_modules/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Optional stylelint cache 62 | .stylelintcache 63 | 64 | # Microbundle cache 65 | .rpt2_cache/ 66 | .rts2_cache_cjs/ 67 | .rts2_cache_es/ 68 | .rts2_cache_umd/ 69 | 70 | # Optional REPL history 71 | .node_repl_history 72 | 73 | # Output of 'npm pack' 74 | *.tgz 75 | 76 | # Yarn Integrity file 77 | .yarn-integrity 78 | 79 | # dotenv environment variable files 80 | .env 81 | .env.development.local 82 | .env.test.local 83 | .env.production.local 84 | .env.local 85 | 86 | # parcel-bundler cache (https://parceljs.org/) 87 | .cache 88 | .parcel-cache 89 | 90 | # Next.js build output 91 | .next 92 | out 93 | 94 | # Nuxt.js build / generate output 95 | .nuxt 96 | dist 97 | 98 | # Gatsby files 99 | .cache/ 100 | # Comment in the public line in if your project uses Gatsby and not Next.js 101 | # https://nextjs.org/blog/next-9-1#public-directory-support 102 | # public 103 | 104 | # vuepress build output 105 | .vuepress/dist 106 | 107 | # vuepress v2.x temp and cache directory 108 | .temp 109 | 110 | # Docusaurus cache and generated files 111 | .docusaurus 112 | 113 | # Serverless directories 114 | .serverless/ 115 | 116 | # FuseBox cache 117 | .fusebox/ 118 | 119 | # DynamoDB Local files 120 | .dynamodb/ 121 | 122 | # TernJS port file 123 | .tern-port 124 | 125 | # Stores VSCode versions used for testing VSCode extensions 126 | .vscode-test 127 | 128 | # yarn v2 129 | .yarn/cache 130 | .yarn/unplugged 131 | .yarn/build-state.yml 132 | .yarn/install-state.gz 133 | .pnp.* 134 | 135 | ### Node Patch ### 136 | # Serverless Webpack directories 137 | .webpack/ 138 | 139 | # Optional stylelint cache 140 | 141 | # SvelteKit build / generate output 142 | .svelte-kit 143 | 144 | ### VisualStudioCode ### 145 | .vscode/* 146 | .vscode/settings.json 147 | .vscode/tasks.json 148 | .vscode/launch.json 149 | .vscode/extensions.json 150 | .vscode/*.code-snippets 151 | 152 | # Local History for Visual Studio Code 153 | .history/ 154 | 155 | # Built Visual Studio Code Extensions 156 | *.vsix 157 | 158 | ### VisualStudioCode Patch ### 159 | # Ignore all local history of files 160 | .history 161 | .ionide 162 | 163 | # Support for Project snippet scope 164 | .vscode/*.code-snippets 165 | 166 | # Ignore code-workspaces 167 | *.code-workspace 168 | 169 | # End of https://www.toptal.com/developers/gitignore/api/node,visualstudiocode 170 | # Local Netlify folder 171 | .netlify 172 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | alitabatabaee20@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Ali t.nazari 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # clock 2 | This web-based clock application serves as an online time tracking tool, 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Clock 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |

welcome to clock.js

22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
: :
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 42 |
43 |
44 |
45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | # example netlify.toml 2 | [build] 3 | command = "vite build" 4 | functions = "netlify/functions" 5 | publish = "dist" 6 | 7 | ## Uncomment to use this redirect for Single Page Applications like create-react-app. 8 | ## Not needed for static site generators. 9 | #[[redirects]] 10 | # from = "/*" 11 | # to = "/index.html" 12 | # status = 200 13 | 14 | ## (optional) Settings for Netlify Dev 15 | ## https://github.com/netlify/cli/blob/main/docs/netlify-dev.md#project-detection 16 | #[dev] 17 | # command = "yarn start" # Command to start your dev server 18 | # port = 3000 # Port that the dev server will be listening on 19 | # publish = "dist" # Folder with the static content for _redirect file 20 | 21 | ## more info on configuring this file: https://docs.netlify.com/configure-builds/file-based-configuration/ 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "clock", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "devDependencies": { 12 | "sass": "^1.63.3", 13 | "vite": "^4.3.9" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: '6.1' 2 | 3 | settings: 4 | autoInstallPeers: true 5 | excludeLinksFromLockfile: false 6 | 7 | devDependencies: 8 | sass: 9 | specifier: ^1.63.3 10 | version: 1.63.3 11 | vite: 12 | specifier: ^4.3.9 13 | version: 4.3.9(sass@1.63.3) 14 | 15 | packages: 16 | 17 | /@esbuild/android-arm64@0.17.19: 18 | resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==} 19 | engines: {node: '>=12'} 20 | cpu: [arm64] 21 | os: [android] 22 | requiresBuild: true 23 | dev: true 24 | optional: true 25 | 26 | /@esbuild/android-arm@0.17.19: 27 | resolution: {integrity: sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==} 28 | engines: {node: '>=12'} 29 | cpu: [arm] 30 | os: [android] 31 | requiresBuild: true 32 | dev: true 33 | optional: true 34 | 35 | /@esbuild/android-x64@0.17.19: 36 | resolution: {integrity: sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==} 37 | engines: {node: '>=12'} 38 | cpu: [x64] 39 | os: [android] 40 | requiresBuild: true 41 | dev: true 42 | optional: true 43 | 44 | /@esbuild/darwin-arm64@0.17.19: 45 | resolution: {integrity: sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==} 46 | engines: {node: '>=12'} 47 | cpu: [arm64] 48 | os: [darwin] 49 | requiresBuild: true 50 | dev: true 51 | optional: true 52 | 53 | /@esbuild/darwin-x64@0.17.19: 54 | resolution: {integrity: sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==} 55 | engines: {node: '>=12'} 56 | cpu: [x64] 57 | os: [darwin] 58 | requiresBuild: true 59 | dev: true 60 | optional: true 61 | 62 | /@esbuild/freebsd-arm64@0.17.19: 63 | resolution: {integrity: sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==} 64 | engines: {node: '>=12'} 65 | cpu: [arm64] 66 | os: [freebsd] 67 | requiresBuild: true 68 | dev: true 69 | optional: true 70 | 71 | /@esbuild/freebsd-x64@0.17.19: 72 | resolution: {integrity: sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==} 73 | engines: {node: '>=12'} 74 | cpu: [x64] 75 | os: [freebsd] 76 | requiresBuild: true 77 | dev: true 78 | optional: true 79 | 80 | /@esbuild/linux-arm64@0.17.19: 81 | resolution: {integrity: sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==} 82 | engines: {node: '>=12'} 83 | cpu: [arm64] 84 | os: [linux] 85 | requiresBuild: true 86 | dev: true 87 | optional: true 88 | 89 | /@esbuild/linux-arm@0.17.19: 90 | resolution: {integrity: sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==} 91 | engines: {node: '>=12'} 92 | cpu: [arm] 93 | os: [linux] 94 | requiresBuild: true 95 | dev: true 96 | optional: true 97 | 98 | /@esbuild/linux-ia32@0.17.19: 99 | resolution: {integrity: sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==} 100 | engines: {node: '>=12'} 101 | cpu: [ia32] 102 | os: [linux] 103 | requiresBuild: true 104 | dev: true 105 | optional: true 106 | 107 | /@esbuild/linux-loong64@0.17.19: 108 | resolution: {integrity: sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==} 109 | engines: {node: '>=12'} 110 | cpu: [loong64] 111 | os: [linux] 112 | requiresBuild: true 113 | dev: true 114 | optional: true 115 | 116 | /@esbuild/linux-mips64el@0.17.19: 117 | resolution: {integrity: sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==} 118 | engines: {node: '>=12'} 119 | cpu: [mips64el] 120 | os: [linux] 121 | requiresBuild: true 122 | dev: true 123 | optional: true 124 | 125 | /@esbuild/linux-ppc64@0.17.19: 126 | resolution: {integrity: sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==} 127 | engines: {node: '>=12'} 128 | cpu: [ppc64] 129 | os: [linux] 130 | requiresBuild: true 131 | dev: true 132 | optional: true 133 | 134 | /@esbuild/linux-riscv64@0.17.19: 135 | resolution: {integrity: sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==} 136 | engines: {node: '>=12'} 137 | cpu: [riscv64] 138 | os: [linux] 139 | requiresBuild: true 140 | dev: true 141 | optional: true 142 | 143 | /@esbuild/linux-s390x@0.17.19: 144 | resolution: {integrity: sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==} 145 | engines: {node: '>=12'} 146 | cpu: [s390x] 147 | os: [linux] 148 | requiresBuild: true 149 | dev: true 150 | optional: true 151 | 152 | /@esbuild/linux-x64@0.17.19: 153 | resolution: {integrity: sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==} 154 | engines: {node: '>=12'} 155 | cpu: [x64] 156 | os: [linux] 157 | requiresBuild: true 158 | dev: true 159 | optional: true 160 | 161 | /@esbuild/netbsd-x64@0.17.19: 162 | resolution: {integrity: sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==} 163 | engines: {node: '>=12'} 164 | cpu: [x64] 165 | os: [netbsd] 166 | requiresBuild: true 167 | dev: true 168 | optional: true 169 | 170 | /@esbuild/openbsd-x64@0.17.19: 171 | resolution: {integrity: sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==} 172 | engines: {node: '>=12'} 173 | cpu: [x64] 174 | os: [openbsd] 175 | requiresBuild: true 176 | dev: true 177 | optional: true 178 | 179 | /@esbuild/sunos-x64@0.17.19: 180 | resolution: {integrity: sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==} 181 | engines: {node: '>=12'} 182 | cpu: [x64] 183 | os: [sunos] 184 | requiresBuild: true 185 | dev: true 186 | optional: true 187 | 188 | /@esbuild/win32-arm64@0.17.19: 189 | resolution: {integrity: sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==} 190 | engines: {node: '>=12'} 191 | cpu: [arm64] 192 | os: [win32] 193 | requiresBuild: true 194 | dev: true 195 | optional: true 196 | 197 | /@esbuild/win32-ia32@0.17.19: 198 | resolution: {integrity: sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==} 199 | engines: {node: '>=12'} 200 | cpu: [ia32] 201 | os: [win32] 202 | requiresBuild: true 203 | dev: true 204 | optional: true 205 | 206 | /@esbuild/win32-x64@0.17.19: 207 | resolution: {integrity: sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==} 208 | engines: {node: '>=12'} 209 | cpu: [x64] 210 | os: [win32] 211 | requiresBuild: true 212 | dev: true 213 | optional: true 214 | 215 | /anymatch@3.1.3: 216 | resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} 217 | engines: {node: '>= 8'} 218 | dependencies: 219 | normalize-path: 3.0.0 220 | picomatch: 2.3.1 221 | dev: true 222 | 223 | /binary-extensions@2.2.0: 224 | resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} 225 | engines: {node: '>=8'} 226 | dev: true 227 | 228 | /braces@3.0.2: 229 | resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==} 230 | engines: {node: '>=8'} 231 | dependencies: 232 | fill-range: 7.0.1 233 | dev: true 234 | 235 | /chokidar@3.5.3: 236 | resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} 237 | engines: {node: '>= 8.10.0'} 238 | dependencies: 239 | anymatch: 3.1.3 240 | braces: 3.0.2 241 | glob-parent: 5.1.2 242 | is-binary-path: 2.1.0 243 | is-glob: 4.0.3 244 | normalize-path: 3.0.0 245 | readdirp: 3.6.0 246 | optionalDependencies: 247 | fsevents: 2.3.2 248 | dev: true 249 | 250 | /esbuild@0.17.19: 251 | resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==} 252 | engines: {node: '>=12'} 253 | hasBin: true 254 | requiresBuild: true 255 | optionalDependencies: 256 | '@esbuild/android-arm': 0.17.19 257 | '@esbuild/android-arm64': 0.17.19 258 | '@esbuild/android-x64': 0.17.19 259 | '@esbuild/darwin-arm64': 0.17.19 260 | '@esbuild/darwin-x64': 0.17.19 261 | '@esbuild/freebsd-arm64': 0.17.19 262 | '@esbuild/freebsd-x64': 0.17.19 263 | '@esbuild/linux-arm': 0.17.19 264 | '@esbuild/linux-arm64': 0.17.19 265 | '@esbuild/linux-ia32': 0.17.19 266 | '@esbuild/linux-loong64': 0.17.19 267 | '@esbuild/linux-mips64el': 0.17.19 268 | '@esbuild/linux-ppc64': 0.17.19 269 | '@esbuild/linux-riscv64': 0.17.19 270 | '@esbuild/linux-s390x': 0.17.19 271 | '@esbuild/linux-x64': 0.17.19 272 | '@esbuild/netbsd-x64': 0.17.19 273 | '@esbuild/openbsd-x64': 0.17.19 274 | '@esbuild/sunos-x64': 0.17.19 275 | '@esbuild/win32-arm64': 0.17.19 276 | '@esbuild/win32-ia32': 0.17.19 277 | '@esbuild/win32-x64': 0.17.19 278 | dev: true 279 | 280 | /fill-range@7.0.1: 281 | resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==} 282 | engines: {node: '>=8'} 283 | dependencies: 284 | to-regex-range: 5.0.1 285 | dev: true 286 | 287 | /fsevents@2.3.2: 288 | resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} 289 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} 290 | os: [darwin] 291 | requiresBuild: true 292 | dev: true 293 | optional: true 294 | 295 | /glob-parent@5.1.2: 296 | resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} 297 | engines: {node: '>= 6'} 298 | dependencies: 299 | is-glob: 4.0.3 300 | dev: true 301 | 302 | /immutable@4.3.0: 303 | resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==} 304 | dev: true 305 | 306 | /is-binary-path@2.1.0: 307 | resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} 308 | engines: {node: '>=8'} 309 | dependencies: 310 | binary-extensions: 2.2.0 311 | dev: true 312 | 313 | /is-extglob@2.1.1: 314 | resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} 315 | engines: {node: '>=0.10.0'} 316 | dev: true 317 | 318 | /is-glob@4.0.3: 319 | resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} 320 | engines: {node: '>=0.10.0'} 321 | dependencies: 322 | is-extglob: 2.1.1 323 | dev: true 324 | 325 | /is-number@7.0.0: 326 | resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} 327 | engines: {node: '>=0.12.0'} 328 | dev: true 329 | 330 | /nanoid@3.3.6: 331 | resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} 332 | engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} 333 | hasBin: true 334 | dev: true 335 | 336 | /normalize-path@3.0.0: 337 | resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} 338 | engines: {node: '>=0.10.0'} 339 | dev: true 340 | 341 | /picocolors@1.0.0: 342 | resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} 343 | dev: true 344 | 345 | /picomatch@2.3.1: 346 | resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} 347 | engines: {node: '>=8.6'} 348 | dev: true 349 | 350 | /postcss@8.4.24: 351 | resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==} 352 | engines: {node: ^10 || ^12 || >=14} 353 | dependencies: 354 | nanoid: 3.3.6 355 | picocolors: 1.0.0 356 | source-map-js: 1.0.2 357 | dev: true 358 | 359 | /readdirp@3.6.0: 360 | resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} 361 | engines: {node: '>=8.10.0'} 362 | dependencies: 363 | picomatch: 2.3.1 364 | dev: true 365 | 366 | /rollup@3.25.1: 367 | resolution: {integrity: sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==} 368 | engines: {node: '>=14.18.0', npm: '>=8.0.0'} 369 | hasBin: true 370 | optionalDependencies: 371 | fsevents: 2.3.2 372 | dev: true 373 | 374 | /sass@1.63.3: 375 | resolution: {integrity: sha512-ySdXN+DVpfwq49jG1+hmtDslYqpS7SkOR5GpF6o2bmb1RL/xS+wvPmegMvMywyfsmAV6p7TgwXYGrCZIFFbAHg==} 376 | engines: {node: '>=14.0.0'} 377 | hasBin: true 378 | dependencies: 379 | chokidar: 3.5.3 380 | immutable: 4.3.0 381 | source-map-js: 1.0.2 382 | dev: true 383 | 384 | /source-map-js@1.0.2: 385 | resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} 386 | engines: {node: '>=0.10.0'} 387 | dev: true 388 | 389 | /to-regex-range@5.0.1: 390 | resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} 391 | engines: {node: '>=8.0'} 392 | dependencies: 393 | is-number: 7.0.0 394 | dev: true 395 | 396 | /vite@4.3.9(sass@1.63.3): 397 | resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} 398 | engines: {node: ^14.18.0 || >=16.0.0} 399 | hasBin: true 400 | peerDependencies: 401 | '@types/node': '>= 14' 402 | less: '*' 403 | sass: '*' 404 | stylus: '*' 405 | sugarss: '*' 406 | terser: ^5.4.0 407 | peerDependenciesMeta: 408 | '@types/node': 409 | optional: true 410 | less: 411 | optional: true 412 | sass: 413 | optional: true 414 | stylus: 415 | optional: true 416 | sugarss: 417 | optional: true 418 | terser: 419 | optional: true 420 | dependencies: 421 | esbuild: 0.17.19 422 | postcss: 8.4.24 423 | rollup: 3.25.1 424 | sass: 1.63.3 425 | optionalDependencies: 426 | fsevents: 2.3.2 427 | dev: true 428 | -------------------------------------------------------------------------------- /public/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Silent-Watcher/clock/e9ce986b14e4135f82857de522e1bc67f8458c3a/public/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Silent-Watcher/clock/e9ce986b14e4135f82857de522e1bc67f8458c3a/public/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Silent-Watcher/clock/e9ce986b14e4135f82857de522e1bc67f8458c3a/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Silent-Watcher/clock/e9ce986b14e4135f82857de522e1bc67f8458c3a/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Silent-Watcher/clock/e9ce986b14e4135f82857de522e1bc67f8458c3a/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Silent-Watcher/clock/e9ce986b14e4135f82857de522e1bc67f8458c3a/public/favicon.ico -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | let loader = document.getElementById('preLoader_Wrapper'); 3 | window.addEventListener('load', () => { 4 | loader.hidden = true; 5 | }); 6 | // digital clock inputs 7 | const digitalHour = document.getElementById('digital_hour'); 8 | const digitalMinute = document.getElementById('digital_minute'); 9 | const digitalSecond = document.getElementById('digital_second'); 10 | const timeStatus = document.getElementById('status'); 11 | // 12 | 13 | function getToday() { 14 | const weekday = [ 15 | 'Sunday', 16 | 'Monday', 17 | 'Tuesday', 18 | 'Wednesday', 19 | 'Thursday', 20 | 'Friday', 21 | 'Saturday', 22 | ]; 23 | let date = new Date(); 24 | // 25 | let dayValue = weekday[date.getDay()]; 26 | let yearValue = date.getFullYear(); 27 | let monthValue = date.getMonth(); 28 | // 29 | let dayInput = document.getElementById('day'); 30 | let monthInput = document.getElementById('month'); 31 | let yearInput = document.getElementById('year'); 32 | // 33 | dayInput.innerHTML = dayValue; 34 | monthInput.innerHTML = monthValue; 35 | yearInput.innerHTML = yearValue; 36 | // 37 | } 38 | 39 | function runDigitalClock() { 40 | let date = new Date(); 41 | let second = date.getSeconds(); 42 | let hour = date.getHours(); 43 | let minute = date.getMinutes(); 44 | if (hour > 12) { 45 | hour -= 12; 46 | timeStatus.innerHTML = 'pm'; 47 | } else { 48 | timeStatus.innerHTML = 'am'; 49 | } 50 | if (hour < 10) { 51 | hour = `0${hour}`; 52 | } 53 | if (minute < 10) { 54 | minute = `0${minute}`; 55 | } 56 | if (second < 10) { 57 | second = `0${second}`; 58 | } 59 | digitalHour.textContent = hour; 60 | digitalMinute.innerHTML = minute; 61 | digitalSecond.innerHTML = second; 62 | } 63 | 64 | function runAnalogClock() { 65 | let date = new Date(); 66 | let second = date.getSeconds(); 67 | let hour = date.getHours(); 68 | let minute = date.getMinutes(); 69 | const analogHour = document.getElementById('hourHand'); 70 | const analogMinute = document.getElementById('minuteHand'); 71 | const analogSecond = document.getElementById('secondHand'); 72 | analogSecond.style.transform = `rotate(${second * 6}deg)`; 73 | analogMinute.style.transform = `rotate(${minute * 6}deg)`; 74 | analogHour.style.transform = `rotate(${hour * 30}deg)`; 75 | } 76 | 77 | setInterval(() => { 78 | runDigitalClock(); 79 | runAnalogClock(); 80 | }, 1000); 81 | 82 | getToday(); 83 | 84 | // particle effect 85 | particlesJS('particles-js', { 86 | particles: { 87 | number: { value: 25, density: { enable: true, value_area: 800 } }, 88 | color: { value: '#ffffff' }, 89 | shape: { 90 | type: 'circle', 91 | stroke: { width: 0, color: '#000000' }, 92 | polygon: { nb_sides: 5 }, 93 | image: { src: '', width: 100, height: 100 }, 94 | }, 95 | opacity: { 96 | value: 0.5, 97 | random: false, 98 | anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }, 99 | }, 100 | size: { 101 | value: 3, 102 | random: true, 103 | anim: { enable: false, speed: 40, size_min: 0.1, sync: false }, 104 | }, 105 | line_linked: { 106 | enable: true, 107 | distance: 150, 108 | color: '#ffffff', 109 | opacity: 0.4, 110 | width: 1, 111 | }, 112 | move: { 113 | enable: true, 114 | speed: 6, 115 | direction: 'none', 116 | random: false, 117 | straight: false, 118 | out_mode: 'out', 119 | bounce: false, 120 | attract: { enable: false, rotateX: 600, rotateY: 1200 }, 121 | }, 122 | }, 123 | interactivity: { 124 | detect_on: 'canvas', 125 | events: { 126 | onhover: { enable: true, mode: 'repulse' }, 127 | onclick: { enable: true, mode: 'push' }, 128 | resize: true, 129 | }, 130 | modes: { 131 | grab: { distance: 400, line_linked: { opacity: 1 } }, 132 | bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, 133 | repulse: { distance: 200, duration: 0.4 }, 134 | push: { particles_nb: 4 }, 135 | remove: { particles_nb: 2 }, 136 | }, 137 | }, 138 | retina_detect: true, 139 | }); 140 | -------------------------------------------------------------------------------- /src/scss/components/_analogClock.scss: -------------------------------------------------------------------------------- 1 | #analog_clock{ 2 | width: 300px; 3 | height: 300px; 4 | box-shadow: inset 0px 0px 2px 0px #0fa; 5 | &::after{ 6 | content: ''; 7 | display: block; 8 | width: 10px; 9 | height: 10px; 10 | background-color: #000000; 11 | border-radius: 50%; 12 | z-index: 11; 13 | box-shadow: 0 0 .2rem #fff, 14 | 0 0 .2rem #fff, 15 | 0 0 2rem #0fa, 16 | 0 0 0.8rem #0fa, 17 | 0 0 2.8rem #0fa, 18 | inset 0 0 1.3rem #0fa; 19 | } 20 | .hand{ 21 | $rotation : 0; 22 | bottom: 50%; 23 | position: absolute; 24 | left: 50%; 25 | border-radius: 20px 20px 0 0 ; 26 | transform-origin: bottom; 27 | transform: translate(-50%) rotate(calc(1deg * $rotation)); 28 | z-index: 10; 29 | } 30 | #minuteHand{ 31 | width: 5px; 32 | height: 40%; 33 | background-color: #fff; 34 | } 35 | #secondHand{ 36 | width: 3px; 37 | height: 45%; 38 | background-color: transparent; 39 | box-shadow: 0 0 .2rem #fff, 40 | 0 0 .2rem #fff, 41 | 0 0 2rem #0fa, 42 | 0 0 0.8rem #0fa, 43 | 0 0 2.8rem #0fa, 44 | inset 0 0 1.3rem #0fa; 45 | } 46 | #hourHand{ 47 | width: 5px; 48 | height: 25%; 49 | background-color: #fff; 50 | } 51 | } -------------------------------------------------------------------------------- /src/scss/components/_copyright.scss: -------------------------------------------------------------------------------- 1 | #copyright{ 2 | z-index: 1; 3 | color: #f5f5f5; 4 | padding-top: 30px; 5 | > span { 6 | color: #0fa; 7 | } 8 | > a { 9 | cursor: pointer; 10 | color: #0fa; 11 | transition:all .5s ease; 12 | &:hover{ 13 | color: #09b37a; 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /src/scss/components/_digitalClock.scss: -------------------------------------------------------------------------------- 1 | #digitalClock_heading{ 2 | margin-bottom: 100px; 3 | animation: pulsate 0.11s ease-in-out infinite alternate; 4 | } -------------------------------------------------------------------------------- /src/scss/components/_loader.scss: -------------------------------------------------------------------------------- 1 | #preLoader_Wrapper{ 2 | position: absolute; 3 | width: 100vw; 4 | height: 100vh; 5 | background-color: #161c2d; 6 | z-index: 1000; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | flex-direction: column; 11 | #preLoader{ 12 | z-index: 1001; 13 | width: 100px; 14 | height: 100px; 15 | border-radius: 100%; 16 | border: 5px solid #fff; 17 | border-top: 5px solid #05d48f; 18 | box-shadow: 0 0 .2rem #fff, 19 | 0 0 .2rem #fff, 20 | 0 0 2rem #0fa, 21 | 0 0 0.8rem #0fa, 22 | 0 0 2.8rem #0fa, 23 | inset 0 0 1.3rem #0fa; 24 | animation: loader 1s linear infinite; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/components/_neonTextEffect.scss: -------------------------------------------------------------------------------- 1 | .neonText { 2 | color: #fff; 3 | text-shadow: 4 | 0 0 7px #fff, 5 | 0 0 10px #fff, 6 | 0 0 21px #fff, 7 | 0 0 42px #0fa, 8 | 0 0 82px #0fa, 9 | 0 0 92px #0fa, 10 | 0 0 102px #0fa, 11 | 0 0 151px #0fa; 12 | } -------------------------------------------------------------------------------- /src/scss/components/_particle.scss: -------------------------------------------------------------------------------- 1 | canvas { 2 | display: block; 3 | vertical-align: bottom; 4 | } /* ---- particles.js container ---- */ 5 | #particles-js { 6 | position: absolute; 7 | width: 100%; 8 | height: 100%; 9 | background-repeat: no-repeat; 10 | background-size: cover; 11 | // background-position: 50% 50%; 12 | } /* ---- stats.js ---- */ 13 | .count-particles { 14 | border-radius: 0 0 3px 3px; 15 | } -------------------------------------------------------------------------------- /src/scss/components/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | ::-webkit-scrollbar { 2 | background-color: $scroll_dark_bg; 3 | width: 5px; 4 | } 5 | ::-webkit-scrollbar-thumb { 6 | background: $scroll_handle; 7 | border-radius: 20px; 8 | } -------------------------------------------------------------------------------- /src/scss/global/_color.scss: -------------------------------------------------------------------------------- 1 | $scroll_dark_bg: #232323; 2 | $scroll_handle : #0fa; -------------------------------------------------------------------------------- /src/scss/global/_font.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Edu+SA+Beginner&family=Edu+TAS+Beginner&family=Edu+VIC+WA+NT+Beginner&family=Source+Sans+Pro:wght@300&display=swap'); -------------------------------------------------------------------------------- /src/scss/global/_reset.scss: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: 'DM Sans'; 3 | } -------------------------------------------------------------------------------- /src/scss/keyframes/_flicker.scss: -------------------------------------------------------------------------------- 1 | @keyframes flicker { 2 | 0%, 18%, 22%, 25%, 53%, 57%, 100% { 3 | text-shadow: 4 | 0 0 4px #fff, 5 | 0 0 11px #fff, 6 | 0 0 19px #fff, 7 | 0 0 40px #0fa, 8 | 0 0 80px #0fa, 9 | 0 0 90px #0fa, 10 | 0 0 100px #0fa, 11 | 0 0 150px #0fa; 12 | } 13 | 20%, 24%, 55% { 14 | text-shadow: none; 15 | } 16 | } 17 | //animation: flicker 4s infinite alternate; 18 | -------------------------------------------------------------------------------- /src/scss/keyframes/_loader.scss: -------------------------------------------------------------------------------- 1 | @keyframes loader { 2 | 0%{ 3 | transform: rotate(0); 4 | } 5 | 100%{ 6 | transform: rotate(360deg); 7 | } 8 | } -------------------------------------------------------------------------------- /src/scss/keyframes/_pulsate.scss: -------------------------------------------------------------------------------- 1 | @keyframes pulsate { 2 | 100% { 3 | /* Larger blur radius */ 4 | text-shadow: 5 | 0 0 4px #fff, 6 | 0 0 11px #fff, 7 | 0 0 19px #fff, 8 | 0 0 40px #0fa, 9 | 0 0 80px #0fa, 10 | 0 0 90px #0fa, 11 | 0 0 100px #0fa, 12 | 0 0 150px #0fa; 13 | } 14 | 0% { 15 | /* A slightly smaller blur radius */ 16 | text-shadow: 17 | 0 0 4px #fff, 18 | 0 0 10px #fff, 19 | 0 0 18px #fff, 20 | 0 0 38px #0fa, 21 | 0 0 73px #0fa, 22 | 0 0 80px #0fa, 23 | 0 0 94px #0fa, 24 | 0 0 140px #0fa; 25 | } 26 | } 27 | // animation: pulsate 0.11s ease-in-out infinite alternate; -------------------------------------------------------------------------------- /src/scss/media/_AnalogClock_media.scss: -------------------------------------------------------------------------------- 1 | @media (max-width:360px) { 2 | #analog_clock{ 3 | width:150px!important; 4 | height:150px!important; 5 | } 6 | } -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import 'global/font'; 2 | @import 'global/color'; 3 | @import 'utilities/margin'; 4 | @import 'global/reset'; 5 | // @import 'keyframes/loader'; 6 | @import 'components/particle'; 7 | @import 'components/analogClock'; 8 | @import 'components/digitalClock'; 9 | @import 'components/scrollbar'; 10 | @import 'keyframes/pulsate'; 11 | // @import 'components/loader'; 12 | @import 'components/copyright'; 13 | @import 'media/AnalogClock_media.scss'; 14 | -------------------------------------------------------------------------------- /src/scss/utilities/_margin.scss: -------------------------------------------------------------------------------- 1 | .mt-6{ 2 | margin-top: 100px; 3 | } --------------------------------------------------------------------------------