├── .eslintignore ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug-failed-test-issue-template.md │ ├── bug_report.md │ └── new-verified-test-issue-template.md └── workflows │ ├── deploy.yml │ └── issue-checker.yml ├── .gitignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── config ├── config.js ├── purgecss.mjs ├── webpack.dev.js ├── webpack.main.js └── webpack.prod.js ├── package-lock.json ├── package.json └── src ├── 404.ejs ├── adblock.ejs ├── assets ├── 404 │ ├── 404_dark.svg │ └── icon.svg ├── adblock │ ├── icon.svg │ └── icon_filled.svg ├── fontlist │ ├── fontlist_circle.svg │ └── icon.svg ├── icon_.svg ├── ko-fi.svg ├── preview_toolz.png ├── toolz │ ├── icon.png │ ├── icon.svg │ └── icon_filled.svg └── units │ └── icon.svg ├── d3host.adblock ├── d3host.txt ├── data ├── adblock_compatibility.json ├── adblock_data.json ├── font_list.js └── icons.js ├── fontlist.ejs ├── index.ejs ├── js ├── 404.js ├── adblock.js ├── components │ ├── alert.js │ ├── aos.js │ ├── carousel.js │ ├── dialog.js │ ├── fade.js │ ├── fontChecker.js │ ├── gotop.js │ ├── localStorage.js │ ├── navbar.js │ ├── pagesRoute.js │ ├── ping.js │ ├── snackbar.js │ ├── themeManager.js │ └── utils.js ├── fontlist.js ├── index.js ├── pagead.js ├── units.js └── widget │ └── ads.js ├── partials ├── adblock │ ├── changelog.ejs │ ├── faq.ejs │ ├── logs.ejs │ ├── results.ejs │ └── settings.ejs ├── footer.ejs ├── gotop.ejs ├── head.ejs ├── header.ejs └── support_me.ejs ├── sass ├── 404.sass ├── _utilities.sass ├── adblock.sass ├── base │ └── _basic.sass ├── components │ ├── _card.sass │ ├── _details.sass │ ├── _dropdown.sass │ ├── _gotop_link.sass │ ├── _modal.sass │ ├── _snackbar.sass │ ├── _tabs.sass │ └── _toast.sass ├── elements │ ├── _button.sass │ ├── _code.sass │ ├── _figure.sass │ ├── _form.sass │ ├── _link.sass │ ├── _table.sass │ └── _typography.sass ├── extra │ ├── _alert.sass │ ├── _aos.sass │ ├── _carousel.sass │ ├── _loading.sass │ ├── _pages.sass │ ├── _tooltip.sass │ └── _wave.sass ├── fontlist.sass ├── index.sass ├── layout │ ├── aside.sass │ ├── container.sass │ ├── footer.sass │ ├── grid.sass │ ├── header.sass │ └── navbar.sass ├── settings │ ├── _colors.sass │ └── _variables.sass ├── theme │ ├── dark.sass │ └── light.sass ├── units.sass └── utilities │ ├── _alignment.sass │ ├── _background.sass │ ├── _border.sass │ ├── _display.sass │ ├── _general.sass │ ├── _margin.sass │ ├── _padding.sass │ ├── _position.sass │ ├── _spacer.sass │ └── _text.sass ├── script └── build_list.js └── units.ejs /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true 5 | }, 6 | extends: ['eslint:recommended', 'prettier'], 7 | plugins: ['prettier'], 8 | globals: { 9 | Atomics: 'readonly', 10 | SharedArrayBuffer: 'readonly' 11 | }, 12 | parserOptions: { 13 | ecmaVersion: 2021, 14 | sourceType: 'module' 15 | }, 16 | rules: { 17 | 'prettier/prettier': 'error', 18 | 'no-unused-vars': 0, 19 | 'no-undef': 0 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-failed-test-issue-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug/Failed Test Issue Template 3 | about: Use this template when reporting a bug or a failed test. Provide details about 4 | the issue, such as the browser, operating system, Adblock solution 5 | title: '' 6 | labels: failed-test 7 | assignees: d3ward 8 | 9 | --- 10 | 11 | 18 | 19 | ### Context 20 | 21 | **Browser**: 22 | 23 | **Operating System**: 24 | 25 | **Adblock Solution**: 26 | 27 | **Description of Issue**: 28 | 29 | 30 | **Screenshots:** 31 | 32 | [Attach screenshots here if applicable] 33 | 34 | ### Logs 35 | 36 | 37 | **Test Result:** 38 | [Describe the result of the test] 39 | 40 | **Test Log:** 41 | [Include the test log if available] 42 | 43 | **Dev Console:** 44 | [Copy and paste any relevant logs or error messages from the developer console] 45 | 46 | ### Confirmation 47 | - [ ] I confirm that I have filled out all the necessary fields with enough detail to allow for the proper investigation and potential resolution of the issue. 48 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: d3ward 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/new-verified-test-issue-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New/Verified Test Issue Template 3 | about: Use this template when documenting a successful or verified test. Provide details 4 | about the browser, operating system, Adblock solution 5 | title: '' 6 | labels: passed-test 7 | assignees: d3ward 8 | 9 | --- 10 | 11 | **Browser:** 12 | **OS:** 13 | **Adblock Solution:** 14 | 15 | **Test Passed Value ( % ):** 16 | 17 | **Description:** 18 | [Provide a detailed description of the configuration used ( DNS , VPN, Lists etc.] 19 | 20 | **Screenshots:** 21 | [Attach any relevant screenshots or examples if available] 22 | 23 | **Test Result Data:** 24 | [Provide exported test result] 25 | 26 | **Test Log:** 27 | [Include the test log if available] 28 | 29 | **Dev Console:** 30 | [Copy and paste any relevant logs from the developer console] 31 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to gh-pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | workflow_dispatch: 8 | 9 | jobs: 10 | gh-pages-deploy: 11 | name: Deploying to gh-pages 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout branch 15 | uses: actions/checkout@v4 16 | 17 | - name: Clean install dependencies 18 | run: npm install 19 | 20 | - name: Build app 21 | run: npm run build 22 | 23 | - name: Purge 24 | run: npm run purge 25 | 26 | - name: deploy 27 | uses: peaceiris/actions-gh-pages@v3.9.3 28 | with: 29 | github_token: ${{ secrets.GITHUB_TOKEN }} 30 | publish_dir: ./dist 31 | env: 32 | ACTIONS_ALLOW_UNSECURE_COMMANDS: 'true' 33 | -------------------------------------------------------------------------------- /.github/workflows/issue-checker.yml: -------------------------------------------------------------------------------- 1 | name: Issue Template Checks 2 | 3 | on: 4 | workflow_dispatch: 5 | 6 | jobs: 7 | check-required-fields: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Checkout repository 11 | uses: actions/checkout@v2 12 | 13 | - name: Comment on Issues Missing Required Fields 14 | uses: actions/github-script@v6 15 | with: 16 | script: | 17 | const issue = context.payload.issue; 18 | const issueLabels = issue.labels.map(label => label.name); 19 | const hasRelevantLabel = issueLabels.includes('failed-test') || issueLabels.includes('verified-test'); 20 | 21 | // Proceed only if the issue has a relevant label 22 | if (!hasRelevantLabel) { 23 | console.log("Issue does not have relevant labels. Skipping."); 24 | return; 25 | } 26 | 27 | const requiredFields = [ 28 | "Browser:", 29 | "OS:", 30 | "Adblock Solution", 31 | "Description of Issue:", 32 | "Test Result:", 33 | ]; 34 | 35 | // Helper function to check if a required field is actually filled 36 | const isFieldMissing = (field) => { 37 | // Regex to find the field and any subsequent text 38 | const fieldRegex = new RegExp(`${field}\\s*:\\s*(.+)`); 39 | const match = issue.body.match(fieldRegex); 40 | 41 | // Check if the field is present and has content after the colon 42 | return !match || match[1].trim().length === 0; 43 | }; 44 | 45 | // Find all missing fields 46 | const missingFields = requiredFields.filter(isFieldMissing); 47 | 48 | // If there are missing fields, post a comment 49 | if (missingFields.length > 0) { 50 | const commentBody = `Hello @${issue.user.login}, it looks like your issue is missing some required information: \n- ${missingFields.join("\n- ")}\nPlease update your issue to include this information.`; 51 | await github.rest.issues.createComment({ 52 | issue_number: issue.number, 53 | owner: context.repo.owner, 54 | repo: context.repo.repo, 55 | body: commentBody 56 | }); 57 | } else { 58 | console.log("Issue contains all required fields."); 59 | } 60 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | /.vscode 4 | .DS_Store 5 | 6 | .env 7 | .env.local 8 | .env.development -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 80, 3 | bracketSpacing: true, 4 | semi: false, 5 | singleQuote: true, 6 | tabWidth: 4, 7 | trailingComma: 'none', 8 | useTabs: true 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚠️ Project Archived 2 | 3 | This project is no longer maintained and has been archived. 4 | Thank you for your support and for being part of this journey. ❤️ 5 | 6 | # Toolz 7 | 8 |

9 | Toolz 11 |

12 | A set of testing and verification tools, with simple and beautiful design 13 | 14 | ## Ad Block Test [Link](https://d3ward.github.io/toolz/adblock) 15 | This tool allows you to check if your adblock solution is blocking enough hosts. With a simple UI and easy UX you can check how much you have blocked. The tool tries to connect to the most common domains for different categories (ads, analytics, bug tracking, social trackers, mix and OEMs). 16 | 17 | If you don't block all the hosts but you want to , you can use 18 | - My hosts txt list -> [d3Host.txt](https://raw.githubusercontent.com/d3ward/toolz/master/src/d3host.txt) 19 | - Compressed adblock version -> [d3Host.adblock](https://raw.githubusercontent.com/d3ward/toolz/master/src/d3host.adblock) 20 | 21 | d3Host list is also included in 22 | - [Blokada](https://blokada.org/) 23 | - [OISD List](https://oisd.nl/) 24 | 25 | 26 | ## Units Test of Viewport [Link](https://d3ward.github.io/toolz/units) 27 | This tool is useful for testing different units for expressing a length in CSS. 28 | One of them is the 'vh', where 100vh should be 100%, but on mobile browsers it isn't. Over the years, there has been a lot of talk about this problem on mobile browsers, mainly on Safari which uses WebKit, but Chromium browsers are affected as well. In addition to the test, there are in-depth studies and solutions available. 29 | 30 | ## Fontlist [Link](https://d3ward.github.io/toolz/fontlist) 31 | This tool allows you to check the list of web safe fonts supported by your browser. These are the fonts that are installed by default on virtually every computer or mobile device. This is what makes them "safe". No matter where you are in the world or what device you are using, a web safe font will always load and display correctly. 32 | 33 | 34 | ## Contributing 35 | 36 | If you have any problems with any of the tools, feel free to share them by opening an issue. 37 | You can also suggest a new test tool to be created or added. Contributions are welcome and encouraged. 38 | 39 | 40 | ## License 41 | 42 | Toolz is licensed under [(CC BY-NC-SA 4.0)](https://creativecommons.org/licenses/by-nc-sa/4.0/) 43 | -------------------------------------------------------------------------------- /config/config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | module.exports = { 3 | src: path.resolve(__dirname, '../src'), 4 | build: path.resolve(__dirname, '../dist'), 5 | public: path.resolve(__dirname, '../src'), 6 | pages: ['index', 'fontlist', 'units', 'adblock', '404'] 7 | } 8 | -------------------------------------------------------------------------------- /config/purgecss.mjs: -------------------------------------------------------------------------------- 1 | import { PurgeCSS } from 'purgecss' 2 | import path from 'path' 3 | import config from './config.js' // Make sure the config file is also compatible with ESM 4 | import fs from 'fs' 5 | import chalk from 'chalk' 6 | 7 | const pages = config.pages 8 | const options = pages.map((page) => { 9 | const css = path.join(config.build, `css/${page}.css`) 10 | const content = [ 11 | path.join(config.build, `${page}.html`), 12 | path.join(config.build, `js/${page}.js`) 13 | ] 14 | return { 15 | css: [css], 16 | content: content 17 | } 18 | }) 19 | 20 | Promise.all(options.map((option) => new PurgeCSS().purge(option))).then( 21 | (results) => { 22 | results.forEach((result, i) => { 23 | const css = result[0].css 24 | const cssFile = path.join(config.build, `css/${pages[i]}.css`) 25 | console.log(chalk.green(`File: ${cssFile}`)) 26 | console.log( 27 | `Original size: ${( 28 | fs.statSync(path.join(config.build, `css/${pages[i]}.css`)) 29 | .size / 1024 30 | ).toFixed(2)}KB` 31 | ) 32 | console.log(`Optimized size: ${(css.length / 1024).toFixed(2)}KB`) 33 | fs.writeFileSync(cssFile, css) 34 | }) 35 | } 36 | ) 37 | -------------------------------------------------------------------------------- /config/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const main = require('./webpack.main') 2 | const { merge } = require('webpack-merge') 3 | const config = require('./config') 4 | 5 | module.exports = merge(main, { 6 | mode: 'development', 7 | devServer: { 8 | static: { 9 | directory: config.dist, 10 | publicPath: '/' 11 | }, 12 | compress: true, 13 | port: 3000, 14 | hot: true, 15 | open: '/toolz/', 16 | historyApiFallback: true 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /config/webpack.main.js: -------------------------------------------------------------------------------- 1 | const HTMLWebpackPlugin = require('html-webpack-plugin') 2 | const CopyWebpackPlugin = require('copy-webpack-plugin') 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 4 | const config = require('./config') 5 | const pages = config.pages 6 | 7 | module.exports = { 8 | context: config.src, 9 | entry: { 10 | ...pages.reduce((acc, page) => { 11 | acc[page] = `./js/${page}.js` 12 | return acc 13 | }, {}) 14 | }, 15 | output: { 16 | filename: 'js/[name].js', 17 | path: config.build, 18 | clean: false, 19 | assetModuleFilename: '[path][name][ext]', 20 | publicPath: '/toolz/' 21 | }, 22 | plugins: [ 23 | new CopyWebpackPlugin({ 24 | patterns: [ 25 | { 26 | from: './assets', 27 | to: 'assets', 28 | globOptions: { 29 | ignore: [ 30 | '*.DS_Store', 31 | '**/css/*.css', 32 | '**/js/*.js', 33 | '**/*.html' 34 | ] 35 | }, 36 | noErrorOnMissing: true 37 | } 38 | ] 39 | }), 40 | new MiniCssExtractPlugin({ 41 | filename: 'css/[name].css', 42 | chunkFilename: '[name].css' 43 | }), 44 | ...pages.map( 45 | (page) => 46 | new HTMLWebpackPlugin({ 47 | template: `./${page}.ejs`, 48 | filename: `${page}.html`, 49 | chunks: [page], 50 | minify: false, 51 | sources: false 52 | }) 53 | ) 54 | ], 55 | module: { 56 | rules: [ 57 | { 58 | test: /\.(png|svg|jpg|jpeg|gif)$/i, 59 | type: 'asset/resource' 60 | }, 61 | { 62 | test: /\.ejs$/i, 63 | use: ['html-loader', 'template-ejs-loader'] 64 | }, 65 | { 66 | test: /\.js$/, 67 | exclude: /node_modules/, 68 | use: 'babel-loader' 69 | }, 70 | { 71 | test: /\.(sa|sc|c)ss$/, 72 | use: [ 73 | MiniCssExtractPlugin.loader, // Extract CSS from commonjs 74 | 'css-loader', // Turn css into commonjs 75 | 'sass-loader' // Turn scss into css 76 | ] 77 | } 78 | ] 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /config/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const main = require('./webpack.main') 2 | const { merge } = require('webpack-merge') 3 | const { CleanWebpackPlugin } = require('clean-webpack-plugin') 4 | const TerserPlugin = require('terser-webpack-plugin') 5 | 6 | module.exports = merge(main, { 7 | mode: 'production', 8 | optimization: { 9 | minimize: true, 10 | minimizer: [ 11 | new TerserPlugin({ 12 | test: /\.js(\?.*)?$/i 13 | }) 14 | ] 15 | }, 16 | plugins: [new CleanWebpackPlugin()] 17 | }) 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "toolz", 3 | "version": "3.1.2", 4 | "description": "A set of accessible web tools", 5 | "scripts": { 6 | "dev": "webpack serve --config config/webpack.dev.js", 7 | "build": "webpack --config config/webpack.prod.js", 8 | "build-list": "node src/script/build_list.js", 9 | "purge": "node config/purgecss.mjs", 10 | "format": "prettier --write '**/*.{js,ts}'", 11 | "lint": "eslint 'src/**/*.{js,ts}' && echo 'Linting complete!'", 12 | "lint-fix": "eslint 'src/**/*.{js,ts}' --fix" 13 | }, 14 | "author": "Eduard Ursu", 15 | "license": "(CC BY-NC-SA 4.0)", 16 | "bugs": { 17 | "url": "https://github.com/d3ward/toolz/issues" 18 | }, 19 | "dependencies": { 20 | "@babel/core": "^7.22.5", 21 | "@babel/preset-env": "^7.22.5", 22 | "babel-loader": "^9.1.2", 23 | "clean-webpack-plugin": "^4.0.0", 24 | "copy-webpack-plugin": "^11.0.0", 25 | "css-loader": "^6.8.1", 26 | "css-minimizer-webpack-plugin": "^5.0.1", 27 | "eslint": "^8.43.0", 28 | "eslint-config-prettier": "^8.8.0", 29 | "eslint-plugin-prettier": "^4.2.1", 30 | "eslint-webpack-plugin": "^4.0.1", 31 | "file-loader": "^6.2.0", 32 | "glob": "^10.3.0", 33 | "glob-all": "^3.3.1", 34 | "html-loader": "^4.2.0", 35 | "html-webpack-plugin": "^5.5.3", 36 | "mini-css-extract-plugin": "^2.7.6", 37 | "node-sass": "^9.0.0", 38 | "postcss": "^8.4.31", 39 | "prettier": "^2.8.8", 40 | "purgecss-webpack-plugin": "^5.0.0", 41 | "reachable-url": "^1.7.1", 42 | "sass": "^1.63.6", 43 | "sass-loader": "^13.3.2", 44 | "style-loader": "^3.3.3", 45 | "webpack-dev-server": "^4.15.1", 46 | "webpack-merge": "^5.9.0" 47 | }, 48 | "devDependencies": { 49 | "ejs": "^3.1.10", 50 | "template-ejs-loader": "^0.9.4", 51 | "webpack": "^5.95.0", 52 | "webpack-cli": "^5.1.4" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/404.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%- include('partials/head.ejs', 5 | { 6 | page: '404', 7 | title:'Toolz by d3ward - 404', 8 | description:'Page not found', 9 | url: 'd3ward.github.io/toolz/', 10 | preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', 11 | keywords:'toolz,web tools,tools,browser testing,font testing,viewport testing,adblock testing, ad blocker testing,performance,toolkit,web design,open source' 12 | }) %> 13 | 14 | 22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 |

Not Found

36 |
Maybe you are looking for one of these toolz !
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 50 | 51 | 52 | 53 | Toolz - Home 54 | 55 |
56 |
57 |
58 |
59 |
60 | 61 |
62 |
63 | 64 | 66 | 68 | 69 |
70 |
Adblock Test
71 |
72 | 73 |
74 |
75 | 76 |
77 |
79 | 81 |
82 |
FontList
83 |
84 |
85 |
86 | 87 |
88 |
90 | 92 |
93 |
Units
94 |
95 | 96 |
97 |
98 |
99 | 100 |
101 | <%- include('partials/footer.ejs') %> 102 | <%- include('partials/gotop.ejs') %> 103 | 104 | 105 | -------------------------------------------------------------------------------- /src/adblock.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%- include('partials/head.ejs', 4 | { 5 | page:'adblock', 6 | title:'Test Ad Block - Toolz', 7 | description:'Project Archived', 8 | url: 'd3ward.github.io/toolz/adblock', 9 | preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', 10 | keywords:'adblock test,ad block test,ad blocker test,adblock,test adblock,analytics,trackers,ads,cosmetic filter,ublock, ublockorigin,adblock extension,script loading' 11 | }) %> 12 | 13 | 14 | <%- include('partials/support_me.ejs') %> 15 | <%- include('partials/header.ejs', {page:'adblock'}) %> 16 | 17 |
18 | 28 | 29 |
30 |
31 |
32 | 33 | This project is no longer maintained and has been archived.
34 | Thank you for being part of this journey and for your support. 35 |
36 |
37 |
38 |
39 | <%- include('partials/footer.ejs') %> 40 | <%- include('partials/gotop.ejs') %> 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/assets/404/404_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/404/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/adblock/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/adblock/icon_filled.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/fontlist/fontlist_circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/fontlist/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon_.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/ko-fi.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/preview_toolz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d3ward/toolz/549acb67d78a940a131ab07c1ef521822a621389/src/assets/preview_toolz.png -------------------------------------------------------------------------------- /src/assets/toolz/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/d3ward/toolz/549acb67d78a940a131ab07c1ef521822a621389/src/assets/toolz/icon.png -------------------------------------------------------------------------------- /src/assets/toolz/icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 16 | 18 | 37 | 41 | 45 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/assets/toolz/icon_filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/units/icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/d3host.adblock: -------------------------------------------------------------------------------- 1 | ! Title: d3Host List by d3ward 2 | ! Expires: 1 days 3 | ! Description: Simple and small list with the most popular advertising, tracking, analytics and social advertising services 4 | ! Homepage: https://github.com/d3ward/toolz 5 | ! License: CC BY-NC-SA 6 | ! Source: https://github.com/d3ward/toolz/blob/master/src/d3host.adblock 7 | 8 | ! This list cover all the tests on https://d3ward.github.io/toolz/adblock 9 | ! Type : Stable 10 | ! Entries : 131 11 | ! Updated On: 23/5/2024 12 | ! Created by: d3ward 13 | 14 | !============ Ads ============= 15 | 16 | ! --- Amazon 17 | ||adtago.s3.amazonaws.com^ 18 | ||analyticsengine.s3.amazonaws.com^ 19 | ||analytics.s3.amazonaws.com^ 20 | ||advice-ads.s3.amazonaws.com^ 21 | 22 | ! --- Google Ads 23 | ||pagead2.googlesyndication.com^ 24 | ||adservice.google.com^ 25 | ||pagead2.googleadservices.com^ 26 | ||afs.googlesyndication.com^ 27 | 28 | ! --- Doubleclick.net 29 | ||stats.g.doubleclick.net^ 30 | ||ad.doubleclick.net^ 31 | ||static.doubleclick.net^ 32 | ||m.doubleclick.net^ 33 | ||mediavisor.doubleclick.net^ 34 | 35 | ! --- Adcolony 36 | ||ads30.adcolony.com^ 37 | ||adc3-launch.adcolony.com^ 38 | ||events3alt.adcolony.com^ 39 | ||wd.adcolony.com^ 40 | 41 | ! --- Media.net 42 | ||static.media.net^ 43 | ||media.net^ 44 | ||adservetx.media.net^ 45 | 46 | 47 | !========= Analytics ========== 48 | 49 | ! --- Google Analytics 50 | ||analytics.google.com^ 51 | ||click.googleanalytics.com^ 52 | ||google-analytics.com^ 53 | ||ssl.google-analytics.com^ 54 | 55 | ! --- Hotjar 56 | ||adm.hotjar.com^ 57 | ||identify.hotjar.com^ 58 | ||insights.hotjar.com^ 59 | ||script.hotjar.com^ 60 | ||surveys.hotjar.com^ 61 | ||careers.hotjar.com^ 62 | ||events.hotjar.io^ 63 | 64 | ! --- MouseFlow 65 | ||mouseflow.com^ 66 | ||cdn.mouseflow.com^ 67 | ||o2.mouseflow.com^ 68 | ||gtm.mouseflow.com^ 69 | ||api.mouseflow.com^ 70 | ||tools.mouseflow.com^ 71 | ||cdn-test.mouseflow.com^ 72 | 73 | ! --- FreshWorks 74 | ||freshmarketer.com^ 75 | ||claritybt.freshmarketer.com^ 76 | ||fwtracks.freshmarketer.com^ 77 | 78 | ! --- Luckyorange 79 | ||luckyorange.com^ 80 | ||api.luckyorange.com^ 81 | ||realtime.luckyorange.com^ 82 | ||cdn.luckyorange.com^ 83 | ||w1.luckyorange.com^ 84 | ||upload.luckyorange.net^ 85 | ||cs.luckyorange.net^ 86 | ||settings.luckyorange.net^ 87 | 88 | ! --- Stats WP Plugin 89 | ||stats.wp.com^ 90 | 91 | 92 | !======= Error Trackers ======= 93 | 94 | ! --- Bugsnag 95 | ||notify.bugsnag.com^ 96 | ||sessions.bugsnag.com^ 97 | ||api.bugsnag.com^ 98 | ||app.bugsnag.com^ 99 | 100 | ! --- Sentry 101 | ||browser.sentry-cdn.com^ 102 | ||app.getsentry.com^ 103 | 104 | 105 | !====== Social Trackers ======= 106 | 107 | ! --- Facebook 108 | ||pixel.facebook.com^ 109 | ||an.facebook.com^ 110 | 111 | ! --- Twitter 112 | ||static.ads-twitter.com^ 113 | ||ads-api.twitter.com^ 114 | 115 | ! --- LinkedIn 116 | ||ads.linkedin.com^ 117 | ||analytics.pointdrive.linkedin.com^ 118 | 119 | ! --- Pinterest 120 | ||ads.pinterest.com^ 121 | ||log.pinterest.com^ 122 | ||analytics.pinterest.com^ 123 | ||trk.pinterest.com^ 124 | 125 | ! --- Reddit 126 | ||events.reddit.com^ 127 | ||events.redditmedia.com^ 128 | 129 | ! --- YouTube 130 | ||ads.youtube.com^ 131 | 132 | ! --- TikTok 133 | ||ads-api.tiktok.com^ 134 | ||analytics.tiktok.com^ 135 | ||ads-sg.tiktok.com^ 136 | ||analytics-sg.tiktok.com^ 137 | ||business-api.tiktok.com^ 138 | ||ads.tiktok.com^ 139 | ||log.byteoversea.com^ 140 | 141 | 142 | !============ Mix ============= 143 | 144 | ! --- Yahoo 145 | ||ads.yahoo.com^ 146 | ||analytics.yahoo.com^ 147 | ||geo.yahoo.com^ 148 | ||udc.yahoo.com^ 149 | ||udcm.yahoo.com^ 150 | ||analytics.query.yahoo.com^ 151 | ||partnerads.ysm.yahoo.com^ 152 | ||log.fc.yahoo.com^ 153 | ||gemini.yahoo.com^ 154 | ||adtech.yahooinc.com^ 155 | 156 | ! --- Yandex 157 | ||extmaps-api.yandex.net^ 158 | ||appmetrica.yandex.ru^ 159 | ||adfstat.yandex.ru^ 160 | ||metrika.yandex.ru^ 161 | ||offerwall.yandex.net^ 162 | ||adfox.yandex.ru^ 163 | 164 | ! --- Unity 165 | ||auction.unityads.unity3d.com^ 166 | ||webview.unityads.unity3d.com^ 167 | ||config.unityads.unity3d.com^ 168 | ||adserver.unityads.unity3d.com^ 169 | 170 | 171 | !============ OEMs ============ 172 | 173 | ! --- Realme 174 | ||iot-eu-logser.realme.com^ 175 | ||iot-logser.realme.com^ 176 | ||bdapi-ads.realmemobile.com^ 177 | ||bdapi-in-ads.realmemobile.com^ 178 | 179 | ! --- Xiaomi 180 | ||api.ad.xiaomi.com^ 181 | ||data.mistat.xiaomi.com^ 182 | ||data.mistat.india.xiaomi.com^ 183 | ||data.mistat.rus.xiaomi.com^ 184 | ||sdkconfig.ad.xiaomi.com^ 185 | ||sdkconfig.ad.intl.xiaomi.com^ 186 | ||tracking.rus.miui.com^ 187 | 188 | ! --- Oppo 189 | ||adsfs.oppomobile.com^ 190 | ||adx.ads.oppomobile.com^ 191 | ||ck.ads.oppomobile.com^ 192 | ||data.ads.oppomobile.com^ 193 | 194 | ! --- Huawei 195 | ||metrics.data.hicloud.com^ 196 | ||metrics2.data.hicloud.com^ 197 | ||grs.hicloud.com^ 198 | ||logservice.hicloud.com^ 199 | ||logservice1.hicloud.com^ 200 | ||logbak.hicloud.com^ 201 | 202 | ! --- OnePlus 203 | ||click.oneplus.cn^ 204 | ||open.oneplus.net^ 205 | 206 | ! --- Samsung 207 | ||samsungads.com^ 208 | ||smetrics.samsung.com^ 209 | ||nmetrics.samsung.com^ 210 | ||samsung-com.112.2o7.net^ 211 | ||analytics-api.samsunghealthcn.com^ 212 | 213 | ! --- Apple 214 | ||iadsdk.apple.com^ 215 | ||metrics.icloud.com^ 216 | ||metrics.mzstatic.com^ 217 | ||api-adservices.apple.com^ 218 | ||books-analytics-events.apple.com^ 219 | ||weather-analytics-events.apple.com^ 220 | ||notes-analytics-events.apple.com^ 221 | 222 | *$3p,domain=d3ward.github.io 223 | /pagead.js$domain=d3ward.github.io 224 | @@*$redirect-rule,domain=d3ward.github.io 225 | d3ward.github.io##.textads -------------------------------------------------------------------------------- /src/d3host.txt: -------------------------------------------------------------------------------- 1 | # Title: d3Host List by d3ward 2 | # Expires: 1 days 3 | # Description: Simple and small list with the most popular advertising, tracking, analytics and social advertising services 4 | # Homepage: https://github.com/d3ward/toolz 5 | # License: CC BY-NC-SA 6 | # Source: https://github.com/d3ward/toolz/blob/master/src/d3host.txt 7 | 8 | # This list cover all the tests on https://d3ward.github.io/toolz/adblock 9 | # Type : Stable 10 | # Entries : 131 11 | # Updated On: 23/5/2024 12 | # Created by: d3ward 13 | 14 | #============ Ads ============= 15 | 16 | # --- Amazon 17 | 0.0.0.0 adtago.s3.amazonaws.com 18 | 0.0.0.0 analyticsengine.s3.amazonaws.com 19 | 0.0.0.0 analytics.s3.amazonaws.com 20 | 0.0.0.0 advice-ads.s3.amazonaws.com 21 | 22 | # --- Google Ads 23 | 0.0.0.0 pagead2.googlesyndication.com 24 | 0.0.0.0 adservice.google.com 25 | 0.0.0.0 pagead2.googleadservices.com 26 | 0.0.0.0 afs.googlesyndication.com 27 | 28 | # --- Doubleclick.net 29 | 0.0.0.0 stats.g.doubleclick.net 30 | 0.0.0.0 ad.doubleclick.net 31 | 0.0.0.0 static.doubleclick.net 32 | 0.0.0.0 m.doubleclick.net 33 | 0.0.0.0 mediavisor.doubleclick.net 34 | 35 | # --- Adcolony 36 | 0.0.0.0 ads30.adcolony.com 37 | 0.0.0.0 adc3-launch.adcolony.com 38 | 0.0.0.0 events3alt.adcolony.com 39 | 0.0.0.0 wd.adcolony.com 40 | 41 | # --- Media.net 42 | 0.0.0.0 static.media.net 43 | 0.0.0.0 media.net 44 | 0.0.0.0 adservetx.media.net 45 | 46 | 47 | #========= Analytics ========== 48 | 49 | # --- Google Analytics 50 | 0.0.0.0 analytics.google.com 51 | 0.0.0.0 click.googleanalytics.com 52 | 0.0.0.0 google-analytics.com 53 | 0.0.0.0 ssl.google-analytics.com 54 | 55 | # --- Hotjar 56 | 0.0.0.0 adm.hotjar.com 57 | 0.0.0.0 identify.hotjar.com 58 | 0.0.0.0 insights.hotjar.com 59 | 0.0.0.0 script.hotjar.com 60 | 0.0.0.0 surveys.hotjar.com 61 | 0.0.0.0 careers.hotjar.com 62 | 0.0.0.0 events.hotjar.io 63 | 64 | # --- MouseFlow 65 | 0.0.0.0 mouseflow.com 66 | 0.0.0.0 cdn.mouseflow.com 67 | 0.0.0.0 o2.mouseflow.com 68 | 0.0.0.0 gtm.mouseflow.com 69 | 0.0.0.0 api.mouseflow.com 70 | 0.0.0.0 tools.mouseflow.com 71 | 0.0.0.0 cdn-test.mouseflow.com 72 | 73 | # --- FreshWorks 74 | 0.0.0.0 freshmarketer.com 75 | 0.0.0.0 claritybt.freshmarketer.com 76 | 0.0.0.0 fwtracks.freshmarketer.com 77 | 78 | # --- Luckyorange 79 | 0.0.0.0 luckyorange.com 80 | 0.0.0.0 api.luckyorange.com 81 | 0.0.0.0 realtime.luckyorange.com 82 | 0.0.0.0 cdn.luckyorange.com 83 | 0.0.0.0 w1.luckyorange.com 84 | 0.0.0.0 upload.luckyorange.net 85 | 0.0.0.0 cs.luckyorange.net 86 | 0.0.0.0 settings.luckyorange.net 87 | 88 | # --- Stats WP Plugin 89 | 0.0.0.0 stats.wp.com 90 | 91 | 92 | #======= Error Trackers ======= 93 | 94 | # --- Bugsnag 95 | 0.0.0.0 notify.bugsnag.com 96 | 0.0.0.0 sessions.bugsnag.com 97 | 0.0.0.0 api.bugsnag.com 98 | 0.0.0.0 app.bugsnag.com 99 | 100 | # --- Sentry 101 | 0.0.0.0 browser.sentry-cdn.com 102 | 0.0.0.0 app.getsentry.com 103 | 104 | 105 | #====== Social Trackers ======= 106 | 107 | # --- Facebook 108 | 0.0.0.0 pixel.facebook.com 109 | 0.0.0.0 an.facebook.com 110 | 111 | # --- Twitter 112 | 0.0.0.0 static.ads-twitter.com 113 | 0.0.0.0 ads-api.twitter.com 114 | 115 | # --- LinkedIn 116 | 0.0.0.0 ads.linkedin.com 117 | 0.0.0.0 analytics.pointdrive.linkedin.com 118 | 119 | # --- Pinterest 120 | 0.0.0.0 ads.pinterest.com 121 | 0.0.0.0 log.pinterest.com 122 | 0.0.0.0 analytics.pinterest.com 123 | 0.0.0.0 trk.pinterest.com 124 | 125 | # --- Reddit 126 | 0.0.0.0 events.reddit.com 127 | 0.0.0.0 events.redditmedia.com 128 | 129 | # --- YouTube 130 | 0.0.0.0 ads.youtube.com 131 | 132 | # --- TikTok 133 | 0.0.0.0 ads-api.tiktok.com 134 | 0.0.0.0 analytics.tiktok.com 135 | 0.0.0.0 ads-sg.tiktok.com 136 | 0.0.0.0 analytics-sg.tiktok.com 137 | 0.0.0.0 business-api.tiktok.com 138 | 0.0.0.0 ads.tiktok.com 139 | 0.0.0.0 log.byteoversea.com 140 | 141 | 142 | #============ Mix ============= 143 | 144 | # --- Yahoo 145 | 0.0.0.0 ads.yahoo.com 146 | 0.0.0.0 analytics.yahoo.com 147 | 0.0.0.0 geo.yahoo.com 148 | 0.0.0.0 udc.yahoo.com 149 | 0.0.0.0 udcm.yahoo.com 150 | 0.0.0.0 analytics.query.yahoo.com 151 | 0.0.0.0 partnerads.ysm.yahoo.com 152 | 0.0.0.0 log.fc.yahoo.com 153 | 0.0.0.0 gemini.yahoo.com 154 | 0.0.0.0 adtech.yahooinc.com 155 | 156 | # --- Yandex 157 | 0.0.0.0 extmaps-api.yandex.net 158 | 0.0.0.0 appmetrica.yandex.ru 159 | 0.0.0.0 adfstat.yandex.ru 160 | 0.0.0.0 metrika.yandex.ru 161 | 0.0.0.0 offerwall.yandex.net 162 | 0.0.0.0 adfox.yandex.ru 163 | 164 | # --- Unity 165 | 0.0.0.0 auction.unityads.unity3d.com 166 | 0.0.0.0 webview.unityads.unity3d.com 167 | 0.0.0.0 config.unityads.unity3d.com 168 | 0.0.0.0 adserver.unityads.unity3d.com 169 | 170 | 171 | #============ OEMs ============ 172 | 173 | # --- Realme 174 | 0.0.0.0 iot-eu-logser.realme.com 175 | 0.0.0.0 iot-logser.realme.com 176 | 0.0.0.0 bdapi-ads.realmemobile.com 177 | 0.0.0.0 bdapi-in-ads.realmemobile.com 178 | 179 | # --- Xiaomi 180 | 0.0.0.0 api.ad.xiaomi.com 181 | 0.0.0.0 data.mistat.xiaomi.com 182 | 0.0.0.0 data.mistat.india.xiaomi.com 183 | 0.0.0.0 data.mistat.rus.xiaomi.com 184 | 0.0.0.0 sdkconfig.ad.xiaomi.com 185 | 0.0.0.0 sdkconfig.ad.intl.xiaomi.com 186 | 0.0.0.0 tracking.rus.miui.com 187 | 188 | # --- Oppo 189 | 0.0.0.0 adsfs.oppomobile.com 190 | 0.0.0.0 adx.ads.oppomobile.com 191 | 0.0.0.0 ck.ads.oppomobile.com 192 | 0.0.0.0 data.ads.oppomobile.com 193 | 194 | # --- Huawei 195 | 0.0.0.0 metrics.data.hicloud.com 196 | 0.0.0.0 metrics2.data.hicloud.com 197 | 0.0.0.0 grs.hicloud.com 198 | 0.0.0.0 logservice.hicloud.com 199 | 0.0.0.0 logservice1.hicloud.com 200 | 0.0.0.0 logbak.hicloud.com 201 | 202 | # --- OnePlus 203 | 0.0.0.0 click.oneplus.cn 204 | 0.0.0.0 open.oneplus.net 205 | 206 | # --- Samsung 207 | 0.0.0.0 samsungads.com 208 | 0.0.0.0 smetrics.samsung.com 209 | 0.0.0.0 nmetrics.samsung.com 210 | 0.0.0.0 samsung-com.112.2o7.net 211 | 0.0.0.0 analytics-api.samsunghealthcn.com 212 | 213 | # --- Apple 214 | 0.0.0.0 iadsdk.apple.com 215 | 0.0.0.0 metrics.icloud.com 216 | 0.0.0.0 metrics.mzstatic.com 217 | 0.0.0.0 api-adservices.apple.com 218 | 0.0.0.0 books-analytics-events.apple.com 219 | 0.0.0.0 weather-analytics-events.apple.com 220 | 0.0.0.0 notes-analytics-events.apple.com 221 | -------------------------------------------------------------------------------- /src/data/adblock_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "Ads": { 3 | "Amazon": [ 4 | "adtago.s3.amazonaws.com", 5 | "analyticsengine.s3.amazonaws.com", 6 | "analytics.s3.amazonaws.com", 7 | "advice-ads.s3.amazonaws.com" 8 | ], 9 | "Google Ads": [ 10 | "pagead2.googlesyndication.com", 11 | "adservice.google.com", 12 | "pagead2.googleadservices.com", 13 | "afs.googlesyndication.com" 14 | ], 15 | "Doubleclick.net": [ 16 | "stats.g.doubleclick.net", 17 | "ad.doubleclick.net", 18 | "static.doubleclick.net", 19 | "m.doubleclick.net", 20 | "mediavisor.doubleclick.net" 21 | ], 22 | "Adcolony":[ 23 | "ads30.adcolony.com", 24 | "adc3-launch.adcolony.com", 25 | "events3alt.adcolony.com", 26 | "wd.adcolony.com" 27 | ], 28 | "Media.net": [ 29 | "static.media.net", 30 | "media.net", 31 | "adservetx.media.net" 32 | ] 33 | }, 34 | "Analytics": { 35 | "Google Analytics": [ 36 | "analytics.google.com", 37 | "click.googleanalytics.com", 38 | "google-analytics.com", 39 | "ssl.google-analytics.com" 40 | ], 41 | "Hotjar": [ 42 | "adm.hotjar.com", 43 | "identify.hotjar.com", 44 | "insights.hotjar.com", 45 | "script.hotjar.com", 46 | "surveys.hotjar.com", 47 | "careers.hotjar.com", 48 | "events.hotjar.io" 49 | ], 50 | "MouseFlow": [ 51 | "mouseflow.com", 52 | "cdn.mouseflow.com", 53 | "o2.mouseflow.com", 54 | "gtm.mouseflow.com", 55 | "api.mouseflow.com", 56 | "tools.mouseflow.com", 57 | "cdn-test.mouseflow.com" 58 | ], 59 | "FreshWorks": [ 60 | "freshmarketer.com", 61 | "claritybt.freshmarketer.com", 62 | "fwtracks.freshmarketer.com" 63 | ], 64 | "Luckyorange": [ 65 | "luckyorange.com", 66 | "api.luckyorange.com", 67 | "realtime.luckyorange.com", 68 | "cdn.luckyorange.com", 69 | "w1.luckyorange.com", 70 | "upload.luckyorange.net", 71 | "cs.luckyorange.net", 72 | "settings.luckyorange.net" 73 | ], 74 | "Stats WP Plugin": [ 75 | "stats.wp.com" 76 | ] 77 | }, 78 | "Error Trackers": { 79 | "Bugsnag": [ 80 | "notify.bugsnag.com", 81 | "sessions.bugsnag.com", 82 | "api.bugsnag.com", 83 | "app.bugsnag.com" 84 | ], 85 | "Sentry": [ 86 | "browser.sentry-cdn.com", 87 | "app.getsentry.com" 88 | ] 89 | }, 90 | "Social Trackers": { 91 | "Facebook": [ 92 | "pixel.facebook.com", 93 | "an.facebook.com" 94 | ], 95 | "Twitter": [ 96 | "static.ads-twitter.com", 97 | "ads-api.twitter.com" 98 | ], 99 | "LinkedIn": [ 100 | "ads.linkedin.com", 101 | "analytics.pointdrive.linkedin.com" 102 | ], 103 | "Pinterest": [ 104 | "ads.pinterest.com", 105 | "log.pinterest.com", 106 | "analytics.pinterest.com", 107 | "trk.pinterest.com" 108 | ], 109 | "Reddit": [ 110 | "events.reddit.com", 111 | "events.redditmedia.com" 112 | ], 113 | "YouTube": [ 114 | "ads.youtube.com" 115 | ], 116 | "TikTok": [ 117 | "ads-api.tiktok.com", 118 | "analytics.tiktok.com", 119 | "ads-sg.tiktok.com", 120 | "analytics-sg.tiktok.com", 121 | "business-api.tiktok.com", 122 | "ads.tiktok.com", 123 | "log.byteoversea.com" 124 | ] 125 | }, 126 | "Mix": { 127 | "Yahoo": [ 128 | "ads.yahoo.com", 129 | "analytics.yahoo.com", 130 | "geo.yahoo.com", 131 | "udc.yahoo.com", 132 | "udcm.yahoo.com", 133 | "analytics.query.yahoo.com", 134 | "partnerads.ysm.yahoo.com", 135 | "log.fc.yahoo.com", 136 | "gemini.yahoo.com", 137 | "adtech.yahooinc.com" 138 | ], 139 | "Yandex": [ 140 | "extmaps-api.yandex.net", 141 | "appmetrica.yandex.ru", 142 | "adfstat.yandex.ru", 143 | "metrika.yandex.ru", 144 | "offerwall.yandex.net", 145 | "adfox.yandex.ru" 146 | ], 147 | "Unity":[ 148 | "auction.unityads.unity3d.com", 149 | "webview.unityads.unity3d.com", 150 | "config.unityads.unity3d.com", 151 | "adserver.unityads.unity3d.com" 152 | ] 153 | }, 154 | "OEMs": { 155 | "Realme": [ 156 | "iot-eu-logser.realme.com", 157 | "iot-logser.realme.com", 158 | "bdapi-ads.realmemobile.com", 159 | "bdapi-in-ads.realmemobile.com" 160 | ], 161 | "Xiaomi": [ 162 | "api.ad.xiaomi.com", 163 | "data.mistat.xiaomi.com", 164 | "data.mistat.india.xiaomi.com", 165 | "data.mistat.rus.xiaomi.com", 166 | "sdkconfig.ad.xiaomi.com", 167 | "sdkconfig.ad.intl.xiaomi.com", 168 | "tracking.rus.miui.com" 169 | ], 170 | "Oppo": [ 171 | "adsfs.oppomobile.com", 172 | "adx.ads.oppomobile.com", 173 | "ck.ads.oppomobile.com", 174 | "data.ads.oppomobile.com" 175 | ], 176 | "Huawei": [ 177 | "metrics.data.hicloud.com", 178 | "metrics2.data.hicloud.com", 179 | "grs.hicloud.com", 180 | "logservice.hicloud.com", 181 | "logservice1.hicloud.com", 182 | "logbak.hicloud.com" 183 | ], 184 | "OnePlus": [ 185 | "click.oneplus.cn", 186 | "open.oneplus.net" 187 | ], 188 | "Samsung": [ 189 | "samsungads.com", 190 | "smetrics.samsung.com", 191 | "nmetrics.samsung.com", 192 | "samsung-com.112.2o7.net", 193 | "analytics-api.samsunghealthcn.com" 194 | ], 195 | "Apple": [ 196 | "iadsdk.apple.com", 197 | "metrics.icloud.com", 198 | "metrics.mzstatic.com", 199 | "api-adservices.apple.com", 200 | "books-analytics-events.apple.com", 201 | "weather-analytics-events.apple.com", 202 | "notes-analytics-events.apple.com" 203 | ] 204 | } 205 | } -------------------------------------------------------------------------------- /src/data/font_list.js: -------------------------------------------------------------------------------- 1 | export const font_list = [ 2 | 'Abadi MT Condensed Light', 3 | 'Albertus Extra Bold', 4 | 'Albertus Medium', 5 | 'Amazone BT', 6 | 'AmerType Md BT', 7 | 'American Typewriter', 8 | 'Andale Mono', 9 | 'Antique Olive', 10 | 'Arial', 11 | 'Arial Black', 12 | 'Arial MT', 13 | 'Arial Narrow', 14 | 'Arial Rounded MT Bold', 15 | 'Arial Unicode MS', 16 | 'Arrus BT', 17 | 'Aurora Cn BT', 18 | 'AvantGarde Bk BT', 19 | 'AvantGarde Md BT', 20 | 'Avenir', 21 | 'Avenir Next', 22 | 'Avenir Next Condensed', 23 | 'Bahnschrift', 24 | 'BankGothic Md BT', 25 | 'Baskerville', 26 | 'Bazooka', 27 | 'Benguiat Bk BT', 28 | 'BernhardFashion BT', 29 | 'BernhardMod BT', 30 | 'Big Caslon', 31 | 'BinnerD', 32 | 'Bodoni 72', 33 | 'Bodoni 72 Oldstyle', 34 | 'Bodoni 72 Smallcaps', 35 | 'Book Antiqua', 36 | 'Bookman Old Style', 37 | 'Boulder', 38 | 'Bradley Hand', 39 | 'Bremen Bd BT', 40 | 'Brush Script MT', 41 | 'CG Omega', 42 | 'CG Times', 43 | 'Calibri', 44 | 'Calisto MT', 45 | 'Calligrapher', 46 | 'Cambria', 47 | 'Cambria Math', 48 | 'Candara', 49 | 'CaslonOpnface BT', 50 | 'Century Gothic', 51 | 'Century Schoolbook', 52 | 'Cezanne', 53 | 'Chalkboard', 54 | 'Chalkboard SE', 55 | 'Chalkduster', 56 | 'Charlesworth', 57 | 'Charter', 58 | 'Charter BT', 59 | 'Charter Bd BT', 60 | 'Chaucer', 61 | 'ChelthmITC Bk BT', 62 | 'Clarendon Condensed', 63 | 'CloisterBlack BT', 64 | 'Cochin', 65 | 'Comic Sans MS', 66 | 'Consolas', 67 | 'Constantia', 68 | 'CopperplGoth Bd BT', 69 | 'Copperplate', 70 | 'Copperplate Gothic Bold', 71 | 'Copperplate Gothic Light', 72 | 'Corbel', 73 | 'Cornerstone', 74 | 'Coronet', 75 | 'Courier', 76 | 'Courier New', 77 | 'Cuckoo', 78 | 'DIN Alternate', 79 | 'DIN Condensed', 80 | 'Dauphin', 81 | 'Denmark', 82 | 'Didot', 83 | 'Ebrima', 84 | 'English 111 Vivace BT', 85 | 'EngraversGothic BT', 86 | 'Exotc350 Bd BT', 87 | 'Franklin Gothic Medium', 88 | 'Fransiscan', 89 | 'Freefrm721 Blk BT', 90 | 'FrnkGothITC Bk BT', 91 | 'Futura', 92 | 'Futura Bk BT', 93 | 'Futura Lt BT', 94 | 'Futura Md BT', 95 | 'Futura ZBlk BT', 96 | 'FuturaBlack BT', 97 | 'Gabriola', 98 | 'Gadugi', 99 | 'Galliard BT', 100 | 'Garamond', 101 | 'Geneva', 102 | 'GeoSlab 703 Lt BT', 103 | 'GeoSlab 703 XBd BT', 104 | 'Geometr231 BT', 105 | 'Geometr231 Hv BT', 106 | 'Geometr231 Lt BT', 107 | 'Georgia', 108 | 'Gill Sans', 109 | 'GoudyHandtooled BT', 110 | 'GoudyOLSt BT', 111 | 'Haettenschweiler', 112 | 'Heather', 113 | 'Helvetica', 114 | 'Helvetica Neue', 115 | 'Herald', 116 | 'Herculanum', 117 | 'Hoefler Text', 118 | 'HoloLens MDL2 Assets', 119 | 'Humanst 521 Cn BT', 120 | 'Humanst521 BT', 121 | 'Humanst521 Lt BT', 122 | 'Impact', 123 | 'Incised901 BT', 124 | 'Incised901 Bd BT', 125 | 'Incised901 Lt BT', 126 | 'Informal011 BT', 127 | 'Ink Free', 128 | 'Javanese Text', 129 | 'Jester', 130 | 'Kabel Bk BT', 131 | 'Kabel Ult BT', 132 | 'Kaufmann BT', 133 | 'Kaufmann Bd BT', 134 | 'Korinna BT', 135 | 'Leelawadee UI', 136 | 'Letter Gothic', 137 | 'Lithograph', 138 | 'Lithograph Light', 139 | 'Long Island', 140 | 'Lucida Console', 141 | 'Lucida Grande', 142 | 'Lucida Handwriting', 143 | 'Lucida Sans', 144 | 'Lucida Sans Unicode', 145 | 'Luminari', 146 | 'Lydian BT', 147 | 'MS Gothic', 148 | 'MS LineDraw', 149 | 'MV Boli', 150 | 'Malgun Gothic', 151 | 'Marigold', 152 | 'Marker Felt', 153 | 'Market', 154 | 'Marlett', 155 | 'Matisse ITC', 156 | 'Menlo', 157 | 'Microsoft Himalaya', 158 | 'Microsoft JhengHei', 159 | 'Microsoft New Tai Lue', 160 | 'Microsoft PhagsPa', 161 | 'Microsoft Sans Serif', 162 | 'Microsoft Tai Le', 163 | 'Microsoft YaHei', 164 | 'Microsoft Yi Baiti', 165 | 'MingLiU-ExtB', 166 | 'Monaco', 167 | 'Mongolian Baiti', 168 | 'Monotype Corsiva', 169 | 'Myanmar Text', 170 | 'News GothicMT', 171 | 'NewsGoth BT', 172 | 'Nirmala UI', 173 | 'Noteworthy', 174 | 'OCR A Extended', 175 | 'Old Century', 176 | 'Onyx BT', 177 | 'Optima', 178 | 'OzHandicraft BT', 179 | 'PTBarnum BT', 180 | 'Palatino', 181 | 'Palatino Linotype', 182 | 'Papyrus', 183 | 'Pegasus', 184 | 'Phosphate', 185 | 'Pickwick', 186 | 'Poster', 187 | 'PosterBodoni BT', 188 | 'Pythagoras', 189 | 'Ribbon131 Bd BT', 190 | 'Rockwell', 191 | 'Savoye LET', 192 | 'Sceptre', 193 | 'Segoe MDL2 Assets', 194 | 'Segoe Print', 195 | 'Segoe Script', 196 | 'Segoe UI', 197 | 'Segoe UI Emoji', 198 | 'Segoe UI Historic', 199 | 'Segoe UI Symbol', 200 | 'Serifa BT', 201 | 'Serifa Th BT', 202 | 'ShelleyVolante BT', 203 | 'Sherwood', 204 | 'SignPainter', 205 | 'Signboard', 206 | 'SimSun', 207 | 'Sitka', 208 | 'Skia', 209 | 'Snell Roundhand', 210 | 'Socket', 211 | 'Souvenir Lt BT', 212 | 'Staccato222 BT', 213 | 'Steamer', 214 | 'Storybook', 215 | 'Subway', 216 | 'Swis721 BlkEx BT', 217 | 'Swiss911 XCm BT', 218 | 'Sylfaen', 219 | 'Symbol', 220 | 'Tahoma', 221 | 'Technical', 222 | 'Teletype', 223 | 'Tempus Sans ITC', 224 | 'Times', 225 | 'Times New Roman', 226 | 'Times New Roman PS', 227 | 'Trattatello', 228 | 'Trebuchet MS', 229 | 'Tristan', 230 | 'Tubular', 231 | 'TypoUpright BT', 232 | 'Unicorn', 233 | 'Univers', 234 | 'Univers Condensed', 235 | 'Vagabond', 236 | 'Verdana', 237 | 'Webdings', 238 | 'Westminster\tAllegro', 239 | 'Wingdings', 240 | 'Yu Gothic', 241 | 'ZapfEllipt BT', 242 | 'ZapfHumnst BT', 243 | 'ZapfHumnst Dm BT', 244 | 'Zapfino', 245 | 'Zurich BlkEx BT', 246 | 'Zurich Ex BT' 247 | ] 248 | -------------------------------------------------------------------------------- /src/fontlist.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%- include('partials/head.ejs', 5 | { 6 | page:'fontlist', 7 | title:'Fontlist - Toolz', 8 | description:'Discover the full list of fonts available on your browser with this comprehensive font testing page.', 9 | url: 'd3ward.github.io/toolz/fontlist', 10 | preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', 11 | keywords:'fonts, available, browser, test, list, web design, typography, font styles, font families, system fonts, custom fonts' 12 | }) %> 13 | 14 | 15 | <%- include('partials/adblock/changelog.ejs') %> 16 | <%- include('partials/support_me.ejs') %> 17 | <%- include('partials/header.ejs', {page:'fontlist'}) %> 18 |
19 |
20 |
21 |
22 | 23 | This project is no longer maintained and has been archived.
24 | Thank you for being part of this journey and for your support. 25 |
26 |
27 |
28 | 29 | 31 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | Font Test 41 |
42 |
43 | Click on below text to edit 44 |

45 | abcde 46 |
12345
47 |

48 |
49 |
50 | 
.custom-font {
 51 |   font-family: Arial;
 52 |   font-weight: 500;
 53 |   font-size: 48px;
 54 |   letter-spacing: 0px;
 55 |   line-height: 1.4;
 56 | }
57 |
58 |
59 |
60 |
61 | 64 |
65 |
66 | 69 | 72 | 75 | 78 |
79 |
80 | 89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | FontList 99 |
100 |

101 | Standard fonts may appear differently on different devices or operating systems, causing 102 | inconsistency in the appearance of text on a webpage.
103 | This testing tool allows you to check over 200+ standard fonts and see which ones are supported 104 | by your browser. 105 | The page displays a list of each supported font.
106 | Users can also customize the sample text and adjust font size and style options to see how the 107 | different fonts look in various settings. This tool is useful for designers, developers, and 108 | anyone looking to experiment with different fonts on their website. 109 |
110 |

111 |
112 |
113 |
114 | 115 |
116 |
117 |
118 |
119 |
120 |
121 | <%- include('partials/footer.ejs') %> 122 | <%- include('partials/gotop.ejs') %> 123 | 124 | 125 | -------------------------------------------------------------------------------- /src/index.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%- include('partials/head.ejs', 4 | { 5 | page: 'toolz', 6 | title:'Toolz by d3ward - Home', 7 | description:'Are you looking for a reliable and comprehensive toolkit for testing browser features? Look no further!'+ 8 | ' Toolz is an open source project that offers a range of tools for testing everything from fonts and'+ 9 | ' viewport units to the efficiency of ad blockers. With this easy-to-use interface and extensive collection of testing tools,'+ 10 | ' you\'ll have everything you need to ensure that your websites, browser and applications are optimized for the best performance and user experience.', 11 | url: 'd3ward.github.io/toolz/', 12 | preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', 13 | keywords:'toolz,web tools,tools,browser testing,font testing,viewport testing,adblock testing, ad blocker testing,performance,toolkit,web design,open source' 14 | }) %> 15 | 16 | 17 | <%- include('partials/support_me.ejs') %> 18 | <%- include('partials/adblock/changelog.ejs') %> 19 | <%- include('partials/header.ejs', {page:'index'}) %> 20 |
21 |
22 |
23 | 24 | This project is no longer maintained and has been archived.
25 | Thank you for being part of this journey and for your support. 26 |
27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |

Toolz

39 |

Collection of browser testing tools.

40 |
41 |
42 |
43 | 44 |
45 |
46 | 47 | 49 | 51 | 52 |
53 |
Adblock Test
54 |
55 | 56 |
57 |
58 | 59 |
60 |
62 | 64 |
65 |
FontList
66 |
67 |
68 |
69 | 70 |
71 |
73 | 75 |
76 |
Units
77 |
78 | 79 |
80 |
81 |
82 | <%- include('partials/footer.ejs') %> 83 | <%- include('partials/gotop.ejs') %> 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /src/js/404.js: -------------------------------------------------------------------------------- 1 | import '../sass/404.sass' 2 | import { themeManager } from './components/themeManager' 3 | import { gotop } from './components/gotop' 4 | import { aos } from './components/aos' 5 | 6 | // Call the function when the DOM is loaded 7 | document.addEventListener('DOMContentLoaded', () => { 8 | new themeManager() 9 | new gotop() 10 | new aos() 11 | }) 12 | -------------------------------------------------------------------------------- /src/js/adblock.js: -------------------------------------------------------------------------------- 1 | import '../sass/adblock.sass' 2 | import packageJSON from '../../package.json' 3 | import { icons } from '../data/icons' 4 | import { navbar } from './components/navbar' 5 | import A11yDialog from './components/dialog' 6 | import { themeManager } from './components/themeManager' 7 | import { gotop } from './components/gotop' 8 | import { aos } from './components/aos' 9 | 10 | import { LocalStorageManager } from './components/localStorage' 11 | 12 | var TZ = new LocalStorageManager('toolz') 13 | const version = packageJSON.version 14 | const tzversion = TZ.get('version') 15 | if (tzversion !== version) { 16 | console.log(version, tzversion) 17 | //Show changelog 18 | //ch_dialog.show() 19 | //Set version 20 | TZ.set('version', version) 21 | } 22 | 23 | document.addEventListener('DOMContentLoaded', function () { 24 | new navbar() 25 | new themeManager() 26 | new gotop() 27 | new aos() 28 | }) 29 | -------------------------------------------------------------------------------- /src/js/components/alert.js: -------------------------------------------------------------------------------- 1 | export function alert(options) { 2 | var t = this 3 | if (!options) options = [] 4 | t.count = 0 5 | t.timeout = options.timeout ? options.timeout : 3000 6 | t.autoClose = options.autoClose ? options.autoClose : true 7 | const close = 8 | '' 9 | t.container = document.querySelector('#nt1') 10 | t.close = ($el) => { 11 | $el.classList.add('animate-out') 12 | setTimeout(() => { 13 | $el.remove() 14 | t.count-- 15 | }, 300) 16 | } 17 | t.setCloseOnClick = ($el) => { 18 | $el.addEventListener('click', function () { 19 | t.close($el) 20 | }) 21 | } 22 | t.setAutocloseTimeout = ($el, timeout) => { 23 | setTimeout(() => { 24 | t.close($el) 25 | }, timeout) 26 | } 27 | t.createItem = (message, type) => { 28 | var $item = document.createElement('div') 29 | $item.classList.add('alert-item') 30 | $item.classList.add(type) 31 | $item.innerHTML = '' + message + '' + close 32 | t.count++ 33 | return $item 34 | } 35 | 36 | t.error = (txt) => { 37 | t.showA(t.createItem(txt, 'error')) 38 | } 39 | t.warn = (txt) => { 40 | t.showA(t.createItem(txt, 'warn')) 41 | } 42 | t.info = (txt) => { 43 | var l = t.createItem(txt, 'info') 44 | t.showA(l) 45 | } 46 | t.success = (txt) => { 47 | var l = t.createItem(txt, 'success') 48 | t.showA(l) 49 | } 50 | t.show = (txt) => { 51 | var l = t.createItem(txt, '') 52 | t.showA(l) 53 | } 54 | t.showA = (l) => { 55 | if (t.autoClose) t.setAutocloseTimeout(l, t.timeout) 56 | t.setCloseOnClick(l) 57 | t.container.append(l) 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/js/components/aos.js: -------------------------------------------------------------------------------- 1 | export function aos() { 2 | let items = document.querySelectorAll('[class*=_aos]') 3 | if (IntersectionObserver && items) { 4 | let callback = function (entries) { 5 | entries.forEach((entry) => { 6 | if ( 7 | entry.isIntersecting && 8 | !entry.target.classList.contains('_aos-done') 9 | ) { 10 | entry.target.classList.add('_aos-done') 11 | } else { 12 | entry.target.classList.remove('_aos-done') 13 | } 14 | }) 15 | } 16 | let observer = new IntersectionObserver(callback, { 17 | root: null, 18 | threshold: 0 19 | }) 20 | items.forEach((item) => { 21 | observer.observe(item) 22 | }) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/js/components/carousel.js: -------------------------------------------------------------------------------- 1 | export function carousel() { 2 | var t = this 3 | t.slides = document.querySelectorAll('.slide') 4 | t.next = document.querySelector('.next-btn') 5 | t.prev = document.querySelector('.prev-btn') 6 | t.dots = document.querySelectorAll('.dot') 7 | t.index = 1 8 | t.next.addEventListener('click', () => { 9 | t.showSlides((t.index += 1)) 10 | }) 11 | t.prev.addEventListener('click', () => { 12 | t.showSlides((t.index += -1)) 13 | }) 14 | t.dots.forEach((element, index) => { 15 | element.addEventListener('click', (index) => { 16 | t.showSlides(index) 17 | }) 18 | }) 19 | t.showSlides = (n) => { 20 | var i 21 | if (n > t.slides.length) t.index = 1 22 | if (n < 1) t.index = slides.length 23 | for (i = 0; i < t.slides.length; i++) { 24 | t.slides[i].style.display = 'none' 25 | } 26 | for (i = 0; i < t.dots.length; i++) { 27 | t.dots[i].className = t.dots[i].className.replace(' active', '') 28 | } 29 | t.slides[t.index - 1].style.display = 'block' 30 | t.dots[t.index - 1].className += ' active' 31 | } 32 | t.showSlides(t.index) 33 | } 34 | -------------------------------------------------------------------------------- /src/js/components/dialog.js: -------------------------------------------------------------------------------- 1 | !(function (t, e) { 2 | 'object' == typeof exports && 'undefined' != typeof module 3 | ? (module.exports = e()) 4 | : 'function' == typeof define && define.amd 5 | ? define(e) 6 | : ((t = 7 | 'undefined' != typeof globalThis 8 | ? globalThis 9 | : t || self).A11yDialog = e()) 10 | })(this, function () { 11 | 'use strict' 12 | var t = [ 13 | 'a[href]:not([tabindex^="-"])', 14 | 'area[href]:not([tabindex^="-"])', 15 | 'input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])', 16 | 'input[type="radio"]:not([disabled]):not([tabindex^="-"])', 17 | 'select:not([disabled]):not([tabindex^="-"])', 18 | 'textarea:not([disabled]):not([tabindex^="-"])', 19 | 'button:not([disabled]):not([tabindex^="-"])', 20 | 'iframe:not([tabindex^="-"])', 21 | 'audio[controls]:not([tabindex^="-"])', 22 | 'video[controls]:not([tabindex^="-"])', 23 | '[contenteditable]:not([tabindex^="-"])', 24 | '[tabindex]:not([tabindex^="-"])' 25 | ] 26 | 27 | function e(t) { 28 | ;(this._show = this.show.bind(this)), 29 | (this._hide = this.hide.bind(this)), 30 | (this._maintainFocus = this._maintainFocus.bind(this)), 31 | (this._bindKeypress = this._bindKeypress.bind(this)), 32 | (this.$el = t), 33 | (this.shown = !1), 34 | (this._id = 35 | this.$el.getAttribute('data-a11y-dialog') || this.$el.id), 36 | (this._previouslyFocused = null), 37 | (this._listeners = {}), 38 | this.create() 39 | } 40 | 41 | function i(t, e) { 42 | return ( 43 | (i = (e || document).querySelectorAll(t)), 44 | Array.prototype.slice.call(i) 45 | ) 46 | var i 47 | } 48 | 49 | function n(t) { 50 | ;(t.querySelector('[autofocus]') || t).focus() 51 | } 52 | 53 | function s() { 54 | i('[data-a11y-dialog]').forEach(function (t) { 55 | new e(t) 56 | }) 57 | } 58 | return ( 59 | (e.prototype.create = function () { 60 | this.$el.setAttribute('aria-hidden', !0), 61 | this.$el.setAttribute('aria-modal', !0), 62 | this.$el.setAttribute('tabindex', -1), 63 | this.$el.hasAttribute('role') || 64 | this.$el.setAttribute('role', 'dialog'), 65 | (this._openers = i( 66 | '[data-a11y-dialog-show="' + this._id + '"]' 67 | )), 68 | this._openers.forEach( 69 | function (t) { 70 | t.addEventListener('click', this._show) 71 | }.bind(this) 72 | ) 73 | const t = this.$el 74 | return ( 75 | (this._closers = i('[data-a11y-dialog-hide]', this.$el) 76 | .filter(function (e) { 77 | return ( 78 | e.closest( 79 | '[aria-modal="true"], [data-a11y-dialog]' 80 | ) === t 81 | ) 82 | }) 83 | .concat(i('[data-a11y-dialog-hide="' + this._id + '"]'))), 84 | this._closers.forEach( 85 | function (t) { 86 | t.addEventListener('click', this._hide) 87 | }.bind(this) 88 | ), 89 | this._fire('create'), 90 | this 91 | ) 92 | }), 93 | (e.prototype.show = function (t) { 94 | return ( 95 | this.shown || 96 | ((document.documentElement.style.overflowY = 'hidden'), 97 | (this._previouslyFocused = document.activeElement), 98 | this.$el.removeAttribute('aria-hidden'), 99 | (this.shown = !0), 100 | n(this.$el), 101 | document.body.addEventListener( 102 | 'focus', 103 | this._maintainFocus, 104 | !0 105 | ), 106 | document.addEventListener('keydown', this._bindKeypress), 107 | this._fire('show', t)), 108 | this 109 | ) 110 | }), 111 | (e.prototype.hide = function (t) { 112 | return this.shown 113 | ? ((document.documentElement.style.overflowY = ''), 114 | (this.shown = !1), 115 | this.$el.setAttribute('aria-hidden', 'true'), 116 | this._previouslyFocused && 117 | this._previouslyFocused.focus && 118 | this._previouslyFocused.focus(), 119 | document.body.removeEventListener( 120 | 'focus', 121 | this._maintainFocus, 122 | !0 123 | ), 124 | document.removeEventListener('keydown', this._bindKeypress), 125 | this._fire('hide', t), 126 | this) 127 | : this 128 | }), 129 | (e.prototype.destroy = function () { 130 | return ( 131 | this.hide(), 132 | this._openers.forEach( 133 | function (t) { 134 | t.removeEventListener('click', this._show) 135 | }.bind(this) 136 | ), 137 | this._closers.forEach( 138 | function (t) { 139 | t.removeEventListener('click', this._hide) 140 | }.bind(this) 141 | ), 142 | this._fire('destroy'), 143 | (this._listeners = {}), 144 | this 145 | ) 146 | }), 147 | (e.prototype.on = function (t, e) { 148 | return ( 149 | void 0 === this._listeners[t] && (this._listeners[t] = []), 150 | this._listeners[t].push(e), 151 | this 152 | ) 153 | }), 154 | (e.prototype.off = function (t, e) { 155 | var i = (this._listeners[t] || []).indexOf(e) 156 | return i > -1 && this._listeners[t].splice(i, 1), this 157 | }), 158 | (e.prototype._fire = function (t, e) { 159 | var i = this._listeners[t] || [], 160 | n = new CustomEvent(t, { 161 | detail: e 162 | }) 163 | this.$el.dispatchEvent(n), 164 | i.forEach( 165 | function (t) { 166 | t(this.$el, e) 167 | }.bind(this) 168 | ) 169 | }), 170 | (e.prototype._bindKeypress = function (e) { 171 | const n = document.activeElement 172 | ;(n && n.closest('[aria-modal="true"]') !== this.$el) || 173 | (this.shown && 174 | 'Escape' === e.key && 175 | 'alertdialog' !== this.$el.getAttribute('role') && 176 | (e.preventDefault(), this.hide(e)), 177 | this.shown && 178 | 'Tab' === e.key && 179 | (function (e, n) { 180 | var s = (function (e) { 181 | return i(t.join(','), e).filter(function (t) { 182 | return !!( 183 | t.offsetWidth || 184 | t.offsetHeight || 185 | t.getClientRects().length 186 | ) 187 | }) 188 | })(e), 189 | o = s.indexOf(document.activeElement) 190 | n.shiftKey && 0 === o 191 | ? (s[s.length - 1].focus(), n.preventDefault()) 192 | : n.shiftKey || 193 | o !== s.length - 1 || 194 | (s[0].focus(), n.preventDefault()) 195 | })(this.$el, e)) 196 | }), 197 | (e.prototype._maintainFocus = function (t) { 198 | !this.shown || 199 | t.target.closest('[aria-modal="true"]') || 200 | t.target.closest('[data-a11y-dialog-ignore-focus-trap]') || 201 | n(this.$el) 202 | }), 203 | 'undefined' != typeof document && 204 | ('loading' === document.readyState 205 | ? document.addEventListener('DOMContentLoaded', s) 206 | : window.requestAnimationFrame 207 | ? window.requestAnimationFrame(s) 208 | : window.setTimeout(s, 16)), 209 | e 210 | ) 211 | }) 212 | -------------------------------------------------------------------------------- /src/js/components/fade.js: -------------------------------------------------------------------------------- 1 | // ** FADE OUT FUNCTION ** 2 | export function fadeOut(el, callback) { 3 | el.style.opacity = 1 4 | ;(function fade() { 5 | if ((el.style.opacity -= 0.1) < 0) { 6 | el.style.display = 'none' 7 | if (callback) callback() 8 | } else { 9 | requestAnimationFrame(fade) 10 | } 11 | })() 12 | } 13 | 14 | // ** FADE IN FUNCTION ** 15 | export function fadeIn(el, display) { 16 | el.style.opacity = 0 17 | el.style.display = display || 'block' 18 | ;(function fade() { 19 | var val = parseFloat(el.style.opacity) 20 | if (!((val += 0.1) > 1)) { 21 | el.style.opacity = val 22 | requestAnimationFrame(fade) 23 | } 24 | })() 25 | } 26 | -------------------------------------------------------------------------------- /src/js/components/fontChecker.js: -------------------------------------------------------------------------------- 1 | export function fontChecker() { 2 | var baseFonts = ['monospace', 'sans-serif', 'serif'] 3 | var testString = 'abcdefghilmnopqrstuvz' 4 | var testSize = '72px' 5 | var h = document.getElementsByTagName('body')[0] 6 | var s = document.createElement('span') 7 | s.style.fontSize = testSize 8 | s.innerHTML = testString 9 | var defaultWidth = {} 10 | var defaultHeight = {} 11 | for (var index in baseFonts) { 12 | s.style.fontFamily = baseFonts[index] 13 | h.appendChild(s) 14 | defaultWidth[baseFonts[index]] = s.offsetWidth //width for the default font 15 | defaultHeight[baseFonts[index]] = s.offsetHeight //height for the defualt font 16 | h.removeChild(s) 17 | } 18 | 19 | this.detect = function (font) { 20 | var detected = false 21 | for (var index in baseFonts) { 22 | s.style.fontFamily = font + ',' + baseFonts[index] // name of the font along with the base font for fallback. 23 | h.appendChild(s) 24 | var matched = 25 | s.offsetWidth != defaultWidth[baseFonts[index]] || 26 | s.offsetHeight != defaultHeight[baseFonts[index]] 27 | h.removeChild(s) 28 | detected = detected || matched 29 | } 30 | return detected 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/js/components/gotop.js: -------------------------------------------------------------------------------- 1 | export function gotop() { 2 | var el = this 3 | el.gt = document.getElementById('gt-link') 4 | el.scrollToTop = function () { 5 | window.scroll({ 6 | top: 0, 7 | left: 0, 8 | behavior: 'smooth' 9 | }) 10 | } 11 | el.listeners = function () { 12 | window.addEventListener('scroll', () => { 13 | let y = window.scrollY 14 | if (y > 0) { 15 | el.gt.classList.remove('hidden') 16 | } else { 17 | el.gt.classList.add('hidden') 18 | } 19 | }) 20 | el.gt.onclick = function (e) { 21 | e.preventDefault() 22 | if ( 23 | document.documentElement.scrollTop || 24 | document.body.scrollTop > 0 25 | ) { 26 | el.scrollToTop() 27 | } 28 | } 29 | } 30 | if (el.gt) { 31 | el.listeners() 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/js/components/localStorage.js: -------------------------------------------------------------------------------- 1 | export class LocalStorageManager { 2 | constructor(name) { 3 | this.LS = null 4 | this.name = name 5 | this.checkLS() 6 | this.init(name) 7 | } 8 | clearAll() { 9 | this.LS.clear() 10 | } 11 | checkLS() { 12 | if (window && window.localStorage) { 13 | this.LS = window.localStorage 14 | // console.log('localStorage is there?') 15 | } else { 16 | console.log('localStorage is there?') 17 | } 18 | } 19 | init(name) { 20 | if (this.LS) { 21 | if (this.LS[name]) { 22 | this.data = JSON.parse(this.LS[name]) 23 | } else { 24 | this.data = {} 25 | } 26 | } 27 | } 28 | 29 | set(uri, data) { 30 | this.data[uri] = data 31 | if (this.LS) { 32 | this.LS[this.name] = JSON.stringify(this.data) 33 | } 34 | } 35 | 36 | get(uri) { 37 | if (this.data[uri]) { 38 | return this.data[uri] 39 | } 40 | return false 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/js/components/navbar.js: -------------------------------------------------------------------------------- 1 | export function navbar() { 2 | var t = this 3 | t.n = document.querySelector('nav') 4 | t.close = function () { 5 | document.body.style.overflow = 'auto' 6 | t.n.classList.remove('active') 7 | } 8 | t.open = function () { 9 | document.body.style.overflow = 'hidden' 10 | t.n.classList.add('active') 11 | } 12 | if (t.n) { 13 | document.querySelector('nav>button').addEventListener('click', () => { 14 | console.log('toggleNav') 15 | if (t.n.classList.contains('active')) t.close() 16 | else t.open() 17 | }) 18 | document 19 | .querySelector('nav>.nav-overlay') 20 | .addEventListener('click', () => { 21 | t.close() 22 | }) 23 | document.querySelectorAll('nav ul > a').forEach((n) => 24 | n.addEventListener('click', () => { 25 | t.close() 26 | }) 27 | ) 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/js/components/pagesRoute.js: -------------------------------------------------------------------------------- 1 | export function pagesRoute() { 2 | var t = this 3 | const notFoundPage = document.querySelector('#notFound') 4 | t.links = Array.from(document.querySelectorAll('[topage]')) 5 | t.scrollTop = () => { 6 | document.querySelector('html').scrollTop = 0 7 | document.querySelector('body').scrollTop = 0 8 | } 9 | t.navigate = (id) => { 10 | //Hide current active page 11 | var activePage = document.querySelector('section.page-active') 12 | if (activePage) activePage.classList.remove('page-active') 13 | var activeLink = document.querySelector('[topage].active') 14 | if (activeLink) activeLink.classList.remove('active') 15 | //Show the next page 16 | var nextPage = document.querySelector(id) 17 | if (nextPage) nextPage.classList.add('page-active') 18 | var nextLink = document.querySelector("[topage='" + id + "']") 19 | if (nextLink) nextLink.classList.add('active') 20 | //Scroll to top 21 | t.scrollTop() 22 | //Set history state 23 | if (history.pushState) history.pushState(null, null, id) 24 | else location.hash = id 25 | } 26 | t.listeners = () => { 27 | t.links.forEach((page) => { 28 | var id = page.getAttribute('topage') 29 | page.addEventListener('click', () => { 30 | t.navigate(id) 31 | }) 32 | }) 33 | } 34 | if (t.links) { 35 | if (window.location.hash) t.navigate(window.location.hash) 36 | t.listeners() 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/js/components/ping.js: -------------------------------------------------------------------------------- 1 | // See LICENSE for usage information 2 | 3 | // The following lines allow the ping function to be loaded via commonjs, AMD, 4 | // and script tags, directly into window globals. 5 | // Thanks to https://github.com/umdjs/umd/blob/master/templates/returnExports.js 6 | ;(function (root, factory) { 7 | if (typeof define === 'function' && define.amd) { 8 | define([], factory) 9 | } else if (typeof module === 'object' && module.exports) { 10 | module.exports = factory() 11 | } else { 12 | root.ping = factory() 13 | } 14 | })(this, function () { 15 | /** 16 | * Creates and loads an image element by url. 17 | * @param {String} url 18 | * @return {Promise} promise that resolves to an image element or 19 | * fails to an Error. 20 | */ 21 | function request_image(url) { 22 | return new Promise(function (resolve, reject) { 23 | var img = new Image() 24 | img.onload = function () { 25 | resolve(img) 26 | } 27 | img.onerror = function () { 28 | reject(url) 29 | } 30 | img.src = 31 | url + 32 | '?random-no-cache=' + 33 | Math.floor((1 + Math.random()) * 0x10000).toString(16) 34 | }) 35 | } 36 | 37 | /** 38 | * Pings a url. 39 | * @param {String} url 40 | * @param {Number} multiplier - optional, factor to adjust the ping by. 0.3 works well for HTTP servers. 41 | * @return {Promise} promise that resolves to a ping (ms, float). 42 | */ 43 | function ping(url, multiplier) { 44 | return new Promise(function (resolve, reject) { 45 | var start = new Date().getTime() 46 | var response = function () { 47 | var delta = new Date().getTime() - start 48 | delta *= multiplier || 1 49 | resolve(delta) 50 | } 51 | request_image(url).then(response).catch(console.log(response)) 52 | 53 | // Set a timeout for max-pings, 5s. 54 | setTimeout(function () { 55 | reject(Error('Timeout')) 56 | }, 5000) 57 | }) 58 | } 59 | 60 | return ping 61 | }) 62 | -------------------------------------------------------------------------------- /src/js/components/snackbar.js: -------------------------------------------------------------------------------- 1 | export function Snackbar(option) { 2 | const t = this 3 | t.snack = document.createElement('div') 4 | t.snack.className = 'snackbar' 5 | t.message = document.createElement('div') 6 | t.snack.appendChild(t.message) 7 | document.body.appendChild(t.snack) 8 | 9 | t.top = option.topPos 10 | t.classNames = option.classNames 11 | t.autoClose = 12 | typeof option.autoClose === 'boolean' ? option.autoClose : false 13 | t.autoCloseTimeout = 14 | option.autoClose && typeof option.autoCloseTimeout === 'number' 15 | ? option.autoCloseTimeout 16 | : 3000 17 | 18 | //Methods 19 | t.reset = function () { 20 | t.message.innerHTML = '' 21 | t.snack.classList.remove(t.classNames) 22 | } 23 | t.show = function (msg, type) { 24 | t.hide() 25 | t.message.innerHTML = msg 26 | t.snack.style.top = t.top 27 | t.snack.classList.add(type || t.classNames) 28 | 29 | if (t.autoClose) { 30 | setTimeout(function () { 31 | t.hide() 32 | }, t.autoCloseTimeout) 33 | } 34 | } 35 | t.hide = function () { 36 | t.snack.style.top = '-100%' 37 | t.reset() 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/js/components/themeManager.js: -------------------------------------------------------------------------------- 1 | export function themeManager() { 2 | //Theme Switcher 3 | var toggles = document.getElementsByClassName('theme-toggle') 4 | 5 | if (window.CSS && CSS.supports('color', 'var(--bg)') && toggles) { 6 | var storedTheme = 7 | localStorage.getItem('theme') || 8 | (window.matchMedia('(prefers-color-scheme: dark)').matches 9 | ? 'dark' 10 | : 'light') 11 | if (storedTheme) 12 | document.documentElement.setAttribute('data-theme', storedTheme) 13 | for (var i = 0; i < toggles.length; i++) { 14 | toggles[i].onclick = function () { 15 | var currentTheme = 16 | document.documentElement.getAttribute('data-theme') 17 | var targetTheme = 'light' 18 | 19 | if (currentTheme === 'light') { 20 | targetTheme = 'dark' 21 | } 22 | 23 | document.documentElement.setAttribute('data-theme', targetTheme) 24 | localStorage.setItem('theme', targetTheme) 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/js/components/utils.js: -------------------------------------------------------------------------------- 1 | //Copy to clipboard the str value 2 | -------------------------------------------------------------------------------- /src/js/fontlist.js: -------------------------------------------------------------------------------- 1 | import '../sass/fontlist.sass' 2 | import packageJSON from '../../package.json' 3 | import { font_list } from '../data/font_list' 4 | import { navbar } from './components/navbar' 5 | import A11yDialog from './components/dialog' 6 | import { themeManager } from './components/themeManager' 7 | import { gotop } from './components/gotop' 8 | import { aos } from './components/aos' 9 | import { Snackbar } from './components/snackbar' 10 | import { fontChecker } from './components/fontChecker' 11 | import { icons } from '../data/icons' 12 | import { LocalStorageManager } from './components/localStorage' 13 | const cd = document.querySelector('#dlg_changelog') 14 | const ch_dialog = new A11yDialog(cd) 15 | var TZ = new LocalStorageManager('toolz') 16 | const version = packageJSON.version 17 | const tzversion = TZ.get('version') 18 | if (tzversion !== version) { 19 | //Show changelog 20 | //ch_dialog.show() 21 | //Set version 22 | //TZ.set('version', version) 23 | } 24 | var snackbar = new Snackbar({ 25 | topPos: '10px', 26 | classNames: 'success', 27 | autoClose: true, 28 | autoCloseTimeout: 2000 29 | }) 30 | const fo = document.getElementById('f_options') 31 | const ft = document.getElementById('font_test') 32 | const r_fw = document.getElementById('r_fw') 33 | const r_fwv = document.getElementById('r_fw_value') 34 | const r_fs = document.getElementById('r_fs') 35 | const r_fsv = document.getElementById('r_fs_value') 36 | const r_ls = document.getElementById('r_ls') 37 | const r_lsv = document.getElementById('r_ls_value') 38 | const r_lh = document.getElementById('r_lh') 39 | const r_lhv = document.getElementById('r_lh_value') 40 | function copyToClip() { 41 | var cssCode = document.getElementById('css-code') 42 | var range = document.createRange() 43 | range.selectNode(cssCode) 44 | window.getSelection().removeAllRanges() 45 | window.getSelection().addRange(range) 46 | document.execCommand('copy') 47 | window.getSelection().removeAllRanges() 48 | snackbar.show('CSS copied to clipboard !') 49 | } 50 | function generateCSS() { 51 | var css = 52 | '.custom-font {\n' + 53 | ' font-family: ' + 54 | fo.value + 55 | ';\n' + 56 | ' font-weight: ' + 57 | r_fwv.innerText + 58 | ';\n' + 59 | ' font-size: ' + 60 | r_fsv.innerText + 61 | ';\n' + 62 | ' letter-spacing: ' + 63 | r_lsv.innerText + 64 | ';\n' + 65 | ' line-height: ' + 66 | r_lhv.innerText + 67 | ';\n' + 68 | '}' 69 | document.getElementById('css-code').innerText = css 70 | } 71 | // Call the function when the DOM is loaded 72 | document.addEventListener('DOMContentLoaded', () => { 73 | new themeManager() 74 | new navbar() 75 | new gotop() 76 | 77 | var total = 0, 78 | available = 0, 79 | notAvalaible = 0 80 | var fc = new fontChecker() 81 | const flist = document.querySelector('#flist') 82 | font_list.forEach((element) => { 83 | total++ 84 | var a = fc.detect(element) 85 | if (a) { 86 | var el = document.createElement('div') 87 | el.innerText = element 88 | el.className = 'card _aos' 89 | var op = document.createElement('option') 90 | op.value = element 91 | op.innerText = element 92 | fo.appendChild(op) 93 | el.style.fontFamily = element 94 | flist.appendChild(el) 95 | available++ 96 | } else { 97 | notAvalaible++ 98 | } 99 | console.log(a) 100 | }) 101 | const r = document.querySelector('#results') 102 | 103 | r.innerHTML = 104 | '' + 105 | total + 106 | ' Tested Fonts ' + 107 | icons['v'] + 108 | ' ' + 109 | available + 110 | ' Detected fonts' + 111 | icons['cdot'] + 112 | ' ' + 113 | notAvalaible + 114 | ' Not available ' 115 | new aos() 116 | 117 | fo.onchange = function () { 118 | ft.style['fontFamily'] = this.value 119 | generateCSS() 120 | } 121 | r_fw.oninput = function () { 122 | ft.style['font-weight'] = this.value 123 | r_fwv.innerText = this.value 124 | generateCSS() 125 | } 126 | 127 | r_fs.oninput = function () { 128 | ft.style['font-size'] = this.value + 'px' 129 | r_fsv.innerText = this.value + 'px' 130 | generateCSS() 131 | } 132 | 133 | r_ls.oninput = function () { 134 | ft.style['letter-spacing'] = this.value + 'px' 135 | r_lsv.innerText = this.value + 'px' 136 | generateCSS() 137 | } 138 | 139 | r_lh.oninput = function () { 140 | ft.style['line-height'] = this.value 141 | r_lhv.innerText = this.value 142 | generateCSS() 143 | } 144 | document 145 | .querySelector('#css_code_copy') 146 | .addEventListener('click', copyToClip) 147 | }) 148 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | import '../sass/index.sass' 2 | import packageJSON from '../../package.json' 3 | import { navbar } from './components/navbar' 4 | import A11yDialog from './components/dialog' 5 | import { themeManager } from './components/themeManager' 6 | import { gotop } from './components/gotop' 7 | import { aos } from './components/aos' 8 | import { LocalStorageManager } from './components/localStorage' 9 | const cd = document.querySelector('#dlg_changelog') 10 | const ch_dialog = new A11yDialog(cd) 11 | var TZ = new LocalStorageManager('toolz') 12 | const version = packageJSON.version 13 | var tzversion = TZ.get('version') 14 | console.log(tzversion, version) 15 | if (tzversion !== version) { 16 | //Show changelog 17 | //ch_dialog.show() 18 | //Set version 19 | //TZ.set('version', version) 20 | } 21 | // Call the function when the DOM is loaded 22 | document.addEventListener('DOMContentLoaded', () => { 23 | new themeManager() 24 | new navbar() 25 | new gotop() 26 | new aos() 27 | }) 28 | -------------------------------------------------------------------------------- /src/js/pagead.js: -------------------------------------------------------------------------------- 1 | const s_test_pagead = true 2 | console.log('s_test_pageads : ', s_test_pagead) 3 | -------------------------------------------------------------------------------- /src/js/units.js: -------------------------------------------------------------------------------- 1 | import '../sass/units.sass' 2 | import packageJSON from '../../package.json' 3 | import { navbar } from './components/navbar' 4 | import A11yDialog from './components/dialog' 5 | import { themeManager } from './components/themeManager' 6 | import { gotop } from './components/gotop' 7 | import { aos } from './components/aos' 8 | import { LocalStorageManager } from './components/localStorage' 9 | const cd = document.querySelector('#dlg_changelog') 10 | const ch_dialog = new A11yDialog(cd) 11 | var TZ = new LocalStorageManager('toolz') 12 | const version = packageJSON.version 13 | const tzversion = TZ.get('version') 14 | if (tzversion !== version) { 15 | //Show changelog 16 | //ch_dialog.show() 17 | //Set version 18 | //TZ.set('version', version) 19 | } 20 | 21 | // Call the function when the DOM is loaded 22 | document.addEventListener('DOMContentLoaded', () => { 23 | new themeManager() 24 | new navbar() 25 | new gotop() 26 | new aos() 27 | }) 28 | 29 | function el(name) { 30 | return document.querySelector(name) 31 | } 32 | 33 | let bars = [] 34 | 35 | function getBars() { 36 | var b = document.querySelectorAll('.bar') 37 | b.forEach((el) => { 38 | bars.push(el) 39 | }) 40 | console.log(bars) 41 | } 42 | 43 | function updateTest() { 44 | let i = window.innerHeight 45 | el('.innerHeightLog>span').innerText = 'innerHeight: ' + i + 'px ' 46 | let vh, svh, dvh, lvh, p 47 | vh = el('.bar.b-vh').clientHeight 48 | svh = el('.bar.b-svh').clientHeight 49 | dvh = el('.bar.b-dvh').clientHeight 50 | lvh = el('.bar.b-lvh').clientHeight 51 | p = el('.bar.b-p').clientHeight 52 | 53 | document.body.style.setProperty('--100vh', vh + 'px') 54 | document.body.style.setProperty('--100svh', svh + 'px') 55 | document.body.style.setProperty('--100dvh', dvh + 'px') 56 | document.body.style.setProperty('--100lvh', lvh + 'px') 57 | document.body.style.setProperty('--100p', p + 'px') 58 | 59 | el('.t-vh>span').innerText = '100vh (' + vh + 'px)' 60 | el('.t-dvh>span').innerText = '100dvh (' + dvh + 'px)' 61 | el('.t-svh>span').innerText = '100svh (' + svh + 'px)' 62 | el('.t-lvh>span').innerText = '100lvh (' + lvh + 'px)' 63 | el('.t-p>span').innerText = '100% (' + p + 'px)' 64 | el('.t-vh').style.background = 65 | vh == i ? 'var(--green)' : vh > i ? 'var(--blue)' : 'var(--orange)' 66 | el('.t-dvh').style.background = 67 | dvh == i ? 'var(--green)' : dvh > i ? 'var(--blue)' : 'var(--orange)' 68 | el('.t-svh').style.background = 69 | svh == i ? 'var(--green)' : svh > i ? 'var(--blue)' : 'var(--orange)' 70 | el('.t-lvh').style.background = 71 | lvh == i ? 'var(--green)' : lvh > i ? 'var(--blue)' : 'var(--orange)' 72 | el('.t-p').style.background = 73 | p == i ? 'var(--green)' : p > i ? 'var(--blue)' : 'var(--orange)' 74 | } 75 | 76 | addEventListener('load', function () { 77 | getBars() 78 | updateTest() 79 | visualViewport.addEventListener('resize', () => { 80 | updateTest() 81 | }) 82 | document.body.addEventListener('resize', updateTest()) 83 | }) 84 | -------------------------------------------------------------------------------- /src/js/widget/ads.js: -------------------------------------------------------------------------------- 1 | var s_test_ads = 's_test_ads' 2 | console.log('Hey there ..... check out ', 'https://youtu.be/dQw4w9WgXcQ') 3 | 4 | var e = document.createElement('div') 5 | e.id = 'ECKckuBYwZaP' 6 | e.style.display = 'none' 7 | document.body.appendChild(e) 8 | -------------------------------------------------------------------------------- /src/partials/adblock/changelog.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/adblock/faq.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/adblock/logs.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/adblock/results.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/adblock/settings.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/footer.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/gotop.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/partials/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <% if (page == 'toolz') { %> 9 | 10 | <% } %> 11 | <% if (page != 'toolz') { %> 12 | 13 | <% } %> 14 | <%= title %> 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/partials/header.ejs: -------------------------------------------------------------------------------- 1 |
2 | 120 |
-------------------------------------------------------------------------------- /src/partials/support_me.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/sass/404.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "./settings/variables" 4 | 5 | @import "./theme/light" 6 | @import "./theme/dark" 7 | $or-50: '#ffffff' 8 | $or-100: '#fdddde' 9 | $or-200: '#fababd' 10 | $or-300: '#f8989d' 11 | $or-400: '#f5757c' 12 | $or-500: '#f3535b' 13 | $or-600: '#d94148' 14 | $or-700: '#bf2f36' 15 | $or-800: '#a41c23' 16 | $or-900: '#8a0a10' 17 | html 18 | --primary: #{$or-500}!important 19 | --primary-h: #{$or-100}!important 20 | --primary-l: #{$or-400}!important 21 | --primary-d: #{$or-800}!important 22 | 23 | [data-theme="dark"] 24 | --primary: #{$or-500} !important 25 | --primary-h: #{$or-800}!important 26 | --primary-l: #{$or-400}!important 27 | --primary-d: #{$or-600}!important 28 | 29 | body 30 | background-color: #f7b42c 31 | background-image: linear-gradient(315deg, #f7b42c 0%, #fc575e 74%) 32 | background-size: 400% 100% 33 | height: auto 34 | 35 | @import "./base/basic" 36 | @import "./extra/aos" 37 | @import "./elements/typography" 38 | 39 | @import "./layout/navbar" 40 | @import "./layout/aside" 41 | @import "./layout/header" 42 | @import "./layout/container" 43 | @import "./layout/grid" 44 | @import "./layout/footer" 45 | 46 | @import "./elements/button" 47 | @import "./components/card" 48 | @import "./elements/form" 49 | @import "./components/dropdown" 50 | @import "./components/modal" 51 | @import "./components/gotop_link" 52 | @import "./elements/code" 53 | @import "./elements/figure" 54 | @import "./components/details" 55 | @import "./elements/table" 56 | @import "./components/tabs" 57 | @import "./extra/tooltip" 58 | @import "./extra/wave" 59 | @import "./extra/pages" 60 | @import "./extra/alert" 61 | 62 | @import "./utilities/alignment" 63 | @import "./utilities/background" 64 | @import "./utilities/border" 65 | @import "./utilities/display" 66 | @import "./utilities/margin" 67 | @import "./utilities/general" 68 | @import "./utilities/padding" 69 | @import "./utilities/spacer" 70 | @import "./utilities/text" -------------------------------------------------------------------------------- /src/sass/_utilities.sass: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------- 2 | // Utilities 3 | // -------------------------------------------------- 4 | 5 | .clearfix { 6 | @include clearfix; 7 | } 8 | -------------------------------------------------------------------------------- /src/sass/adblock.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "./settings/variables" 4 | @import "./theme/light" 5 | @import "./theme/dark" 6 | 7 | @import "./base/basic" 8 | @import "./extra/aos" 9 | @import "./elements/typography" 10 | 11 | @import "./layout/navbar" 12 | @import "./layout/aside" 13 | @import "./layout/header" 14 | @import "./layout/container" 15 | @import "./layout/grid" 16 | @import "./layout/footer" 17 | 18 | @import "./elements/button" 19 | @import "./components/snackbar" 20 | @import "./components/card" 21 | @import "./elements/form" 22 | @import "./elements/code" 23 | @import "./components/dropdown" 24 | @import "./components/modal" 25 | @import "./components/gotop_link" 26 | @import "./components/details" 27 | @import "./elements/table" 28 | @import "./components/tabs" 29 | @import "./extra/tooltip" 30 | @import "./extra/pages" 31 | @import "./extra/alert" 32 | 33 | @import "./utilities/alignment" 34 | @import "./utilities/background" 35 | @import "./utilities/position" 36 | @import "./utilities/border" 37 | @import "./utilities/display" 38 | @import "./utilities/margin" 39 | @import "./utilities/general" 40 | @import "./utilities/padding" 41 | @import "./utilities/spacer" 42 | @import "./utilities/text" 43 | 44 | main 45 | --bg-details: var(--bg3) 46 | #dlg_compatibility 47 | z-index: 52!important 48 | #adb_test 49 | display: none 50 | 51 | footer>div 52 | background: var(--bg2) 53 | .card 54 | border-radius: 12px 55 | box-shadow: none 56 | background: var(--bg2) 57 | .test_block,.test>span 58 | border-radius: var(--radius) 59 | position: relative 60 | min-height: 45px 61 | width: 100% 62 | .test_block 63 | text-align: center 64 | margin: 0 65 | display: flex 66 | align-items: center 67 | justify-content: center 68 | color: #000 69 | #test_log 70 | height: 200px 71 | overflow-y: auto 72 | flex-wrap: nowrap 73 | .test_wrapper 74 | display: flex 75 | flex-direction: column 76 | gap: .5rem 77 | .test_wrapper .col-6 78 | gap: 1rem 79 | display: flex 80 | flex-direction: column 81 | .test_wrapper>div,.test_card 82 | padding: .5rem 83 | border-radius: 12px 84 | background: var(--bg2) 85 | .rwd-table-t 86 | display: flex 87 | gap: .5rem 88 | align-items: center 89 | .badges 90 | display: flex 91 | flex-wrap: wrap 92 | gap: .5rem 93 | >* 94 | padding: 5px 95 | display: flex 96 | align-items: center 97 | gap: 5px 98 | background: var(--bg2) 99 | border-radius: var(--radius) 100 | &.light-green 101 | background: var(--green-h) 102 | color: var(--green-d) 103 | &.light-red 104 | background: var(--red-h) 105 | color: var(--red-d) 106 | &.light-orange 107 | background: var(--orange-h) 108 | color: var(--orange-d) 109 | 110 | .test_wrapper svg,.test_card svg 111 | height: 1.5rem 112 | .test_wrapper>div>div>h5,.test_card>h5,.test>span 113 | text-align: center 114 | margin: 0 115 | display: flex 116 | align-items: center 117 | justify-content: center 118 | .test 119 | background-color: var(--red) 120 | color: #000 121 | border-radius: 8px 122 | display: flex 123 | flex-direction: column 124 | align-items: center 125 | justify-content: center 126 | text-align: center 127 | margin: 10px 128 | min-height: 45px 129 | transition: all 1s 130 | 131 | .test>div>div 132 | height: 45px 133 | width: 100% 134 | border-radius: 8px 135 | background: var(--bg2) 136 | color: var(--txt) 137 | padding: 0.5rem 138 | display: flex 139 | align-items: center 140 | gap: 0.5rem 141 | .test>div>div>span 142 | white-space: nowrap 143 | overflow: hidden 144 | text-overflow: ellipsis 145 | width: 100% 146 | text-align: left 147 | .test>div 148 | position: relative 149 | user-select: none 150 | display: none 151 | flex-direction: column 152 | overflow-x: auto 153 | gap: 0.5rem 154 | padding: 0.5rem 155 | width: 100% 156 | white-space: nowrap 157 | color: #000 158 | .test.show>div 159 | display: flex 160 | 161 | #results 162 | background-color: white 163 | border: 1px solid #ddd 164 | bottom: 1em 165 | font-size: 24px 166 | left: 1em 167 | padding: 4px 8px 168 | position: fixed 169 | .epic_path1, .epic_path 170 | fill: var(--primary) 171 | .epic 172 | width: 250px 173 | height: 250px 174 | 175 | .lt_wrap 176 | display: flex 177 | flex-direction: column 178 | justify-content: center 179 | align-items: center 180 | .lt_particles 181 | width: 15rem 182 | height: 7.5rem 183 | display: flex 184 | justify-content: center 185 | align-items: center 186 | flex-direction: row 187 | grid-gap: 16px 188 | .start .p1 189 | animation: p1 1.6s cubic-bezier(.2, .4, .35, 1) .2s infinite backwards 190 | .start .p2 191 | animation: p2 1.5s cubic-bezier(.2, .4, .35, 1) .2s infinite backwards 192 | .start .p3 193 | animation: p3 1.6s cubic-bezier(.2, .4, .35, 1) .2s infinite backwards 194 | .start .p4 195 | animation: p4 1.4s cubic-bezier(.2, .4, .35, 1) .2s infinite backwards 196 | .start .p5 197 | animation: p5 1.2s cubic-bezier(.2, .4, .35, 1) .2s infinite backwards 198 | .p1,.p2,.p3,.p4,.p5 199 | padding: 4px 200 | height: 32px 201 | width: 32px 202 | border-radius: 50% 203 | .p1 204 | background: var(--blue-h) 205 | color: var(--blue) 206 | .p2 207 | background: var(--green-h) 208 | color: var(--green) 209 | .p3 210 | background: var(--orange-h) 211 | color: var(--orange) 212 | .p5 213 | background: var(--purple-h) 214 | color: var(--purple) 215 | .p4 216 | background: var(--red-h) 217 | color: var(--red) 218 | @keyframes p1 219 | 0% 220 | transform: translateY(0px) translateX(-20px) scale(.8) 221 | opacity: 0 222 | 50% 223 | transform: translateY(40px) translateX(0px) scale(1) 224 | opacity: 1 225 | animation-timing-function: cubic-bezier(1, .4, .35, 1) 226 | 75% 227 | transform: translateY(100px) translateX(10px) scale(1) 228 | opacity: 0 229 | 100% 230 | transform: translateY(0px) translateX(-10px) scale(.8) 231 | opacity: 0 232 | 233 | @keyframes p2 234 | 0% 235 | transform: translateY(0px) translateX(-10px) scale(.8) 236 | opacity: 0 237 | 50% 238 | transform: translateY(50px) translateX(0px) scale(1) 239 | opacity: 1 240 | animation-timing-function: cubic-bezier(1, .4, .35, 1) 241 | 75% 242 | transform: translateY(80px) translateX(5px) scale(1) 243 | opacity: 0 244 | 100% 245 | transform: translateY(0px) translateX(5px) scale(.8) 246 | opacity: 0 247 | 248 | @keyframes p3 249 | 0% 250 | transform: translateY(0px) scale(.8) rotate(45deg) 251 | opacity: 0 252 | 50% 253 | transform: translateY(40px) scale(1) rotate(0deg) 254 | opacity: 1 255 | animation-timing-function: cubic-bezier(1, .4, .35, 1) 256 | 75% 257 | transform: translateY(100px) scale(1) rotate(0deg) 258 | opacity: 0 259 | 100% 260 | transform: translateY(0px) scale(.8) rotate(0deg) 261 | opacity: 0 262 | 263 | @keyframes p4 264 | 0% 265 | transform: translateY(0px) translateX(10px) scale(.8) 266 | opacity: 0 267 | 50% 268 | transform: translateY(60px) translateX(0px) scale(1) 269 | opacity: 1 270 | animation-timing-function: cubic-bezier(1, .4, .35, 1) 271 | 75% 272 | transform: translateY(100px) translateX(0px) scale(1) 273 | opacity: 0 274 | 100% 275 | transform: translateY(0px) translateX(10px) scale(.8) 276 | opacity: 0 277 | 278 | @keyframes p5 279 | 0% 280 | transform: translateY(0px) translateX(20px) scale(.8) 281 | opacity: 0 282 | 50% 283 | transform: translateY(50px) translateX(0px) scale(1) 284 | opacity: 1 285 | animation-timing-function: cubic-bezier(1, .4, .35, 1) 286 | 75% 287 | transform: translateY(90px) translateX(0px) scale(1) 288 | opacity: 0 289 | 100% 290 | transform: translateY(0px) translateX(20px) scale(.8) 291 | opacity: 0 292 | :root 293 | --liquid-percentage: 50% 294 | --liquid-title: "BAD" 295 | --liquid-color: var(--red) 296 | 297 | .r_wrap span 298 | display: flex 299 | align-items: center 300 | gap: 0.5rem 301 | 302 | .lt_template .lt_circle 303 | width: 60px 304 | height: 60px 305 | .template_wrap.row>div 306 | justify-content: center 307 | gap: .5rem 308 | align-items: center 309 | display: flex 310 | flex-direction: column 311 | .lt_value_2 312 | border-radius: 8px 313 | color: var(--white) 314 | padding: .4rem 315 | 316 | .lt_cwrap 317 | position: relative 318 | border-radius: 50rem 319 | background-color: var(--bg2) 320 | 321 | .lt_circle 322 | width: 200px 323 | height: 200px 324 | background: var(--liquid-color) 325 | border: 3px solid var(--black-h) 326 | border-radius: 50% 327 | overflow: hidden 328 | clip-path: border-box 329 | z-index: 5 330 | 331 | .lt_wave 332 | position: relative 333 | top: var(--liquid-percentage) 334 | width: 100% 335 | height: 100% 336 | background: var(--liquid-color) 337 | border-radius: 50% 338 | transition: 3s 339 | 340 | .lt_wave:before, 341 | .lt_wave:after 342 | content: '' 343 | position: absolute 344 | width: 200% 345 | height: 200% 346 | left: 50% 347 | -webkit-transform: translate(-50%, -75%) 348 | transform: translate(-50%, -75%) 349 | background: #000 350 | 351 | .lt_wave:before 352 | border-radius: 45% 353 | background: var(--bg2) 354 | animation: animate_lt_wave 6s linear infinite 355 | 356 | .lt_wave:after 357 | border-radius: 40% 358 | opacity: .5 359 | background: var(--bg2) 360 | animation: animate_lt_wave 10s linear infinite 361 | 362 | @keyframes animate_lt_wave 363 | 0% 364 | transform: translate(-50%, -75%) rotate(0deg) 365 | 100% 366 | transform: translate(-50%, -75%) rotate(360deg) 367 | 368 | .lt_cwrap .lt_value 369 | position: absolute 370 | height: 100% 371 | right: 0 372 | bottom: 0 373 | width: 100% 374 | 375 | .lt_cwrap .lt_value::after, 376 | .lt_cwrap .lt_value::before 377 | content: var(--liquid-title) 378 | position: inherit 379 | left: 100% 380 | margin-left: 10px 381 | bottom: calc(45% - var(--liquid-percentage)) 382 | transform: translateY(50%) 383 | background: var(--liquid-color) 384 | color: var(--white) 385 | padding: 10px 386 | font-size: 20px 387 | font-weight: bold 388 | border-radius: 8px 389 | transition: 3s 390 | 391 | .lt_cwrap .lt_value::after 392 | content: '' 393 | border: 12px solid transparent 394 | border-right-color: var(--liquid-color) 395 | padding: 0 396 | border-radius: 0 397 | background: transparent 398 | transform: translate(-78%, 50%) 399 | 400 | #dlg_faq p 401 | -moz-osx-font-smoothing: grayscale 402 | -webkit-font-smoothing: antialiased!important 403 | margin-top: 1rem 404 | #adb_test_r>span 405 | display: flex 406 | align-items: center 407 | gap: .5rem 408 | -------------------------------------------------------------------------------- /src/sass/base/_basic.sass: -------------------------------------------------------------------------------- 1 | /* ---------------- Basic resets and improvements --------------- */ 2 | *, 3 | *::before, 4 | *::after 5 | box-sizing: border-box 6 | *:focus:not(:focus-visible) 7 | outline: 0 8 | *:focus-visible 9 | outline: .1rem solid var(--focus) 10 | outline-offset: .1rem 11 | html 12 | text-rendering: optimizeLegibility 13 | font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif 14 | font-size: 12pt 15 | color: var(--txt) 16 | background: var(--bg) 17 | body 18 | min-height: 100vh 19 | display: flex 20 | flex-flow: wrap column 21 | gap: .5rem 22 | align-items: center 23 | justify-content: center 24 | 25 | @media (prefers-reduced-motion: no-preference) 26 | scroll-behavior: smooth 27 | body,html 28 | margin: 0 29 | padding: 0 30 | header>*,main>*,footer>* 31 | max-width: 60rem 32 | 33 | ol, ul 34 | list-style: none 35 | display: flex 36 | flex-direction: column 37 | gap: .3rem 38 | .keep-ls 39 | list-style: unset 40 | img 41 | max-width: 100% 42 | 43 | table 44 | border-collapse: collapse 45 | 46 | textarea 47 | white-space: revert 48 | 49 | hr 50 | border: 0 51 | border-top: .1rem solid var(--brd) 52 | 53 | section 54 | overflow-x: hidden 55 | display: flex 56 | flex-direction: column 57 | 58 | .better_r 59 | -webkit-font-smoothing: antialiased!important 60 | -moz-font-smoothing: antialiased!important 61 | font-size: 16px 62 | letter-spacing: .7px 63 | line-height: 1.5 64 | text-align: justify 65 | text-rendering: optimizelegibility!important 66 | -------------------------------------------------------------------------------- /src/sass/components/_card.sass: -------------------------------------------------------------------------------- 1 | /* ------------------- Card ------------------- */ 2 | .card 3 | display: flex 4 | flex-wrap: wrap 5 | flex-direction: column 6 | gap: 1rem 7 | padding: 1rem 8 | background: var(--bg-card) 9 | border-radius: var(--radius) 10 | box-shadow: var(--shadow) 11 | &> * 12 | width: 100% 13 | margin: 0 14 | &> img 15 | height: auto 16 | border-radius: var(--radius) 17 | width: 100% 18 | &.full 19 | width: calc( 100% + 2rem ) 20 | max-width: unset 21 | &.full:first-child 22 | border-radius: var(--radius) var(--radius) 0 0 23 | margin: -1rem -1rem 0 -1rem 24 | &.full:last-child 25 | border-radius: 0 0 var(--radius) var(--radius) 26 | margin: 0 -1rem -1rem -1rem 27 | &>.img-w 28 | padding: 1rem 29 | box-shadow: 0 8px 20px -4px var(--b-shadow) 30 | max-width: 100px 31 | border-radius: 50% 32 | margin: 15px auto 15px 33 | width: 100px 34 | height: 100px 35 | &> img 36 | height: auto 37 | border-radius: 50% 38 | width: 100% 39 | .img-w200 40 | padding: 40px 41 | border-radius: 50% 42 | width: 200px 43 | height: 200px 44 | &> img 45 | height: auto 46 | border-radius: 50% 47 | width: 100% 48 | -------------------------------------------------------------------------------- /src/sass/components/_details.sass: -------------------------------------------------------------------------------- 1 | 2 | /* ------------------ Details ----------------- */ 3 | details 4 | width: 100% 5 | overflow-x: hidden 6 | display: flex 7 | flex-flow: wrap column 8 | border-radius: var(--radius) 9 | background: var(--bg-details) 10 | & > summary 11 | outline-color: initial 12 | padding: .6rem 13 | border-radius: var(--radius) 14 | outline: 0 15 | cursor: pointer 16 | font-weight: 500 17 | &:hover 18 | color: var(--primary) 19 | background-color: var(--bg-details) 20 | & > div 21 | padding: .5rem 22 | details[open] 23 | summary 24 | background-color: var(--bg-details-open) 25 | color: var(--txt-details-open) 26 | details+details 27 | margin-top: .5rem 28 | -------------------------------------------------------------------------------- /src/sass/components/_dropdown.sass: -------------------------------------------------------------------------------- 1 | .dropdown 2 | display: inline-flex 3 | position: relative 4 | padding-bottom: .5rem 5 | &>a,&>button 6 | margin: 0 7 | &:after 8 | content: "" 9 | width: .5rem 10 | height: .5rem 11 | margin-left: 1rem 12 | transform-origin: color 13 | transform: rotate(45deg) 14 | display: block 15 | border: .1875rem solid currentColor 16 | border-bottom: 0 17 | border-left: 0 18 | pointer-events: none 19 | >[data-dropdown-id] 20 | display: none 21 | flex-direction: column 22 | left: 0 23 | list-style: none 24 | width: 14rem 25 | margin: 0 26 | padding: 0 27 | transform-origin: right top 28 | position: absolute 29 | border:1px solid var(--bg2) 30 | border-radius: var(--radius) 31 | background-color: var(--bg) 32 | box-shadow: var(--shadow) 33 | top: 100% 34 | z-index: 20 35 | &>a:hover,&>a.link-active 36 | padding: .3rem 37 | border: 0 38 | background: var(--bg2) 39 | color: var(--primary) 40 | >* 41 | width: 100% 42 | display: flex 43 | margin: 0 44 | border-radius: var(--radius) 45 | padding: .3rem 46 | &.dropdown-active 47 | &>a:after,&>button:after 48 | border-top: 0 49 | border-bottom: .1875rem solid currentColor 50 | &>[data-dropdown-id] 51 | display: flex 52 | -------------------------------------------------------------------------------- /src/sass/components/_gotop_link.sass: -------------------------------------------------------------------------------- 1 | /* ---------------- Go Top Link --------------- */ 2 | .gt-link 3 | transition: all .25s ease-in-out 4 | position: fixed 5 | bottom: 0 6 | right: 0 7 | z-index: 1 8 | min-width: 2.6rem 9 | padding: .4rem 10 | cursor: pointer 11 | visibility: visible 12 | opacity: 1 13 | &.hidden 14 | visibility: hidden 15 | opacity: 0 -------------------------------------------------------------------------------- /src/sass/components/_modal.sass: -------------------------------------------------------------------------------- 1 | 2 | .dialog,.dialog-overlay 3 | position: fixed 4 | top: 0 5 | right: 0 6 | bottom: 0 7 | left: 0 8 | .dialog 9 | display: flex 10 | z-index: 50 11 | padding: .5rem 12 | .dialog[aria-hidden='true'] 13 | display: none 14 | .dialog-overlay 15 | background: rgba(43, 46, 56, 0.9) 16 | 17 | .dialog-content 18 | z-index: 50 19 | margin: auto 20 | display: flex 21 | flex-direction: column 22 | align-items: start 23 | max-block-size: 80vh 24 | max-block-size: 80dvb 25 | border-radius: 0.5em 26 | width: 100% 27 | max-width: 42rem 28 | overflow: hidden 29 | background: var(--bg) 30 | * 31 | margin: 0 32 | >* 33 | padding: 1rem 34 | >footer 35 | border-top: 1px solid var(--brd) 36 | display: flex 37 | gap: .5rem 38 | >header 39 | border-bottom: 1px solid var(--brd) 40 | display: flex 41 | align-items: center 42 | justify-content: space-between 43 | >section 44 | width: 100% 45 | @keyframes dialog-fade-in 46 | from 47 | opacity: 0 48 | 49 | @keyframes dialog-slide-up 50 | from 51 | transform: translateY(10%) 52 | .dialog-sm .dialog-content 53 | max-width: 320px 54 | .dialog-lg .dialog-content 55 | max-width: unset 56 | .dialog-overlay 57 | animation: dialog-fade-in 200ms both 58 | .dialog-content 59 | animation: dialog-fade-in 400ms 200ms both, dialog-slide-up 400ms 200ms both 60 | 61 | @media (prefers-reduced-motion: reduce) 62 | .dialog-close 63 | transition: none 64 | .dialog-content 65 | animation: none 66 | -------------------------------------------------------------------------------- /src/sass/components/_snackbar.sass: -------------------------------------------------------------------------------- 1 | .snackbar 2 | position: fixed 3 | top: -100% 4 | left: 50% 5 | transform: translateX(-50%) 6 | background-color: var(--blue) 7 | border-radius: 10px 8 | width: 400px 9 | font-size: 16px 10 | transition: all .5s 11 | z-index: 9999 12 | box-shadow: var(--shadow) 13 | 14 | @media (max-width: 424px) 15 | .snackbar 16 | width: calc(100% - 20px) 17 | 18 | .snackbar.success 19 | background: var(--blue) 20 | 21 | .snackbar div 22 | color: var(--txt-on-blue) 23 | padding: 20px 30px 24 | text-align: center 25 | -------------------------------------------------------------------------------- /src/sass/components/_tabs.sass: -------------------------------------------------------------------------------- 1 | /* ------------------- Tabs ------------------- */ 2 | .tabs 3 | display: flex 4 | flex-wrap: wrap 5 | background: var(--bg-tabs) 6 | box-shadow: var(--shadow) 7 | border: 2px solid var(--brd-tabs) 8 | border-radius: var(--radius) 9 | margin-bottom: .5rem 10 | > label 11 | order: 1 12 | display: flex 13 | justify-content: center 14 | align-items: center 15 | padding: 0.7rem 1rem 16 | margin-right: 0.2rem 17 | cursor: pointer 18 | border-bottom: 0.2rem solid transparent 19 | font-weight: bold 20 | transition: background ease 0.2s 21 | > div 22 | width: 100% 23 | display: none 24 | padding: 1rem 25 | order: 99 26 | border-radius: var(--radius) 27 | flex-grow: 1 28 | & > * 29 | margin: .4rem 30 | & > input 31 | display: none 32 | &:checked 33 | & + label.ghost 34 | background: var(--bg-btn)!important 35 | color: var(--txt-btn)!important 36 | border-color: var(--bg-btn)!important 37 | & + label 38 | border-color: var(--brd-tabs-l) 39 | & + div 40 | display: block 41 | 42 | -------------------------------------------------------------------------------- /src/sass/components/_toast.sass: -------------------------------------------------------------------------------- 1 | .toast 2 | position: fixed 3 | z-index: 20 4 | bottom: 0 5 | padding: .5rem 6 | display: flex 7 | flex-direction: column 8 | justify-items: center 9 | justify-content: center 10 | gap: .5rem 11 | &[toast-pos^="top"] 12 | bottom: unset 13 | top: 0 14 | flex-direction: column-reverse 15 | .toast-item 16 | --_travel-distance: -5vh 17 | &[toast-pos^="bottom"] 18 | bottom: 0 19 | &[toast-pos$="left"] 20 | left: 0 21 | &[toast-pos$="right"] 22 | right: 0 23 | .toast-item 24 | max-inline-size: min(25ch, 90vw) 25 | border-radius: var(--radius) 26 | color: var(--txt) 27 | background: var(--toast-bg) 28 | --toast-bg: var(--bg2) 29 | --_duration: 3s 30 | --_travel-distance: 5vh 31 | will-change: transform 32 | display: flex 33 | gap: 0.5rem 34 | justify-content: center 35 | align-items: center 36 | flex: 1 37 | padding: 1rem 38 | box-shadow: var(--shadow) 39 | animation: toast-in 500ms ease forwards 1 40 | 41 | &.success 42 | --toast-bg: var(--green-l) 43 | --toast-bg2: var(--green-d) 44 | &.error 45 | --toast-bg: var(--red-l) 46 | --toast-bg2: var(--red-d) 47 | &.warn 48 | --toast-bg: var(--orange-l) 49 | --toast-bg2: var(--orange-d) 50 | &.info 51 | --toast-bg: var(--blue-l) 52 | --toast-bg2: var(--blue-d) 53 | &.toast-out 54 | animation: toast-out .3s ease 55 | &>svg 56 | height: 20px 57 | width: 20px 58 | fill: var(--toast-bg2) 59 | &._closeIcon 60 | border-radius: 3px 61 | margin-left: 2rem 62 | @keyframes toast-out 63 | to 64 | transform: translateY(--_travel-distance) 65 | opacity: 0 66 | 67 | @keyframes toast-in 68 | from 69 | transform: translateY(var(--_travel-distance)) 70 | opacity: 0 71 | -------------------------------------------------------------------------------- /src/sass/elements/_button.sass: -------------------------------------------------------------------------------- 1 | /* ------------------ Buttons ----------------- */ 2 | button, 3 | input[type="button"], 4 | input[type="submit"], 5 | input[type="reset"], 6 | input[type="file"], 7 | input[type="file"]::file-selector-button, 8 | .btn 9 | display: inline-flex 10 | align-items: center 11 | text-align: center 12 | justify-content: center 13 | cursor: pointer 14 | gap: .4rem 15 | line-height: 1.5 16 | font-size: 1rem 17 | border: 0.1rem solid var(--btn-brd) 18 | border-radius: var(--btn-radius) 19 | color: var(--btn-txt) 20 | background-color: var(--btn-bg) 21 | min-width: 100px 22 | cursor: pointer 23 | padding: .4rem .7rem 24 | margin: .4rem 25 | outline-color: var(--primary) 26 | box-shadow: 0 0 0 var(--btn-hs) var(--btn-f) 27 | transition: all 145ms ease 28 | user-select: none 29 | -webkit-touch-callout: none 30 | touch-action: manipulation 31 | -webkit-tap-highlight-color: transparent 32 | input[type="file"]::file-selector-button 33 | margin: 0 .4rem 0 0 34 | input[type="file"] 35 | inline-size: 100% 36 | padding: 0 37 | max-inline-size: max-content 38 | background-color: var(--btn-brd) 39 | border: 0 40 | input[type="file"]::file-selector-button 41 | height: 2.6rem 42 | border-radius: var(--btn-radius) 0 0 var(--btn-radius) 43 | 44 | button, 45 | input[type="button"], 46 | input[type="submit"], 47 | input[type="reset"], 48 | .btn 49 | height: 2.6rem 50 | &:active,&:focus 51 | --btn-hs: .3rem 52 | &:focus-visible 53 | outline: .1rem solid var(--btn-brd) 54 | outline-offset: .1rem 55 | &:not(active):hover 56 | --btn-bg: var(--btn-bg-h) 57 | --btn-brd: var(--btn-bg-h) 58 | 59 | &.mw-auto 60 | min-width: unset 61 | &[disabled] 62 | opacity: .5 63 | pointer-events: none 64 | cursor: not-allowed 65 | &.pill 66 | --btn-radius: 2rem 67 | &.outline 68 | --btn-bg: transparent 69 | color: var(--btn-brd) 70 | border: 2px solid var(--focus) 71 | &.outline:hover 72 | color: var(--btn-txt) 73 | &.fill:hover 74 | background: var(--btn-bg) 75 | color: var(--btn-txt)!important 76 | &>svg 77 | display: block 78 | height: 1.5rem 79 | width: 1.5rem 80 | max-height: 1.7rem 81 | 82 | .group-btn 83 | position: relative 84 | display: flex 85 | margin: .5rem 86 | >* 87 | margin: 0 88 | border-radius: 0 89 | &:first-child 90 | border-top-left-radius: var(--btn-radius) 91 | border-bottom-left-radius: var(--btn-radius) 92 | border-right: 1px 93 | &:last-child 94 | border-top-right-radius: var(--btn-radius) 95 | border-bottom-right-radius: var(--btn-radius) 96 | border-left: 1px 97 | .btn-transparent,._btn_t 98 | --btn-f: var(--primary-l) 99 | --btn-bg-h: transparent 100 | --btn-bg: transparent 101 | .btn-inverted 102 | --btn-f: var(--txt-h) 103 | --btn-brd: var(--txt) 104 | --btn-bg-h: var(--txt-l) 105 | --btn-bg: var(--txt) 106 | --btn-txt: var(--bg) 107 | .btn-black 108 | --btn-f: var(--black-h) 109 | --btn-brd: var(--black) 110 | --btn-bg-h: var(--black-l) 111 | --btn-bg: var(--black-l) 112 | --btn-txt: var(--white) 113 | .btn-white 114 | --btn-f: var(--white-h) 115 | --btn-brd: var(--white-l) 116 | --btn-bg-h: var(--white-l) 117 | --btn-bg: var(--white-l) 118 | --btn-txt: var(--black) 119 | .btn-p 120 | --btn-f: var(--primary-h) 121 | --btn-brd: var(--primary) 122 | --btn-bg: var(--primary) 123 | --btn-bg-h: var(--primary-l) 124 | --btn-txt: var(--txt-on-p) 125 | .btn-blue 126 | --btn-f: var(--blue-h) 127 | --btn-brd: var(--blue) 128 | --btn-bg: var(--blue) 129 | --btn-bg-h: var(--blue-l) 130 | --btn-txt: var(--txt-on-blue) 131 | .btn-red,[type="reset"] 132 | --btn-f: var(--red-h) 133 | --btn-txt: var(--txt-on-red) 134 | --btn-brd: var(--red) 135 | --btn-bg-h: var(--red-l) 136 | --btn-bg: var(--red) 137 | .btn-green 138 | --btn-f: var(--green-h) 139 | --btn-brd: var(--green) 140 | --btn-bg-h: var(--green-l) 141 | --btn-bg: var(--green) 142 | --btn-txt: var(--txt-on-green) 143 | .btn-orange 144 | --btn-f: var(--orange-h) 145 | --btn-brd: var(--orange) 146 | --btn-bg-h: var(--orange-l) 147 | --btn-bg: var(--orange) 148 | --btn-txt: var(--txt-on-orange) 149 | -------------------------------------------------------------------------------- /src/sass/elements/_code.sass: -------------------------------------------------------------------------------- 1 | /* ------------------- Code ------------------- */ 2 | code 3 | color: var(--primary) 4 | background: var(--bg2) 5 | pre 6 | display: flex 7 | box-shadow: var(--shadow) 8 | border-radius: var(--radius)!important 9 | border-left: var(--radius) solid var(--primary) 10 | background-color: var(--bg) 11 | & > code 12 | margin: 0 13 | padding: 1.5rem 1.0rem 14 | background-color: transparent 15 | code, 16 | kbd, 17 | samp 18 | padding: .1rem .3rem 19 | background: var(--bg2) 20 | white-space: pre 21 | font-size: 90% 22 | border-radius: 6px 23 | kbd 24 | border: 1px solid var(--txt) 25 | border-bottom: 3px solid var(--txt) 26 | -------------------------------------------------------------------------------- /src/sass/elements/_figure.sass: -------------------------------------------------------------------------------- 1 | /* ------------- Image and Figure ------------- */ 2 | img 3 | max-width: 100% 4 | border-radius: var(--radius) 5 | &.circle 6 | border-radius: 50% 7 | &.square 8 | border-radius: 0 9 | figure 10 | text-align: center 11 | & > img 12 | display: block 13 | margin: 0.5em auto 14 | figcaption 15 | color: var(--brd) 16 | margin-bottom: 1rem -------------------------------------------------------------------------------- /src/sass/elements/_form.sass: -------------------------------------------------------------------------------- 1 | .field 2 | display: flex 3 | justify-content: center 4 | gap: .5rem 5 | flex-direction: column 6 | [class^="with-icon"] 7 | position: relative 8 | [class^="with-icon"]>svg 9 | position: absolute 10 | top: 50% 11 | transform: translateY(-50%) 12 | .with-icon-left>svg 13 | left: 1rem 14 | .with-icon-right>svg 15 | left: 1rem 16 | .with-icon-left>input 17 | padding-left: 3rem!important 18 | .with-icon-right>input 19 | padding-right: 3rem!important 20 | 21 | input[type="color"] 22 | -webkit-appearance: none 23 | border: none 24 | border-radius: var(--radius) 25 | width: 32px 26 | height: 32px 27 | input[type="color"]::-webkit-color-swatch-wrapper 28 | padding: 0 29 | input[type="color"]::-webkit-color-swatch 30 | border: none 31 | border-radius: var(--radius) 32 | textarea, 33 | input:not([type=color]):not([type=file]):not([type=button]):not([type=range]):not([type=radio]):not([type=checkbox]), 34 | select 35 | display: block 36 | width: 100% 37 | font-size: .875rem 38 | line-height: 1.25rem 39 | height: 2.6rem 40 | padding: .6rem 41 | border: .1rem solid var(--input-brd) 42 | border-radius: var(--radius) 43 | background-color: var(--input-bg) 44 | background-clip: padding-box 45 | color: var(--input-txt) 46 | &:focus 47 | outline: 0 48 | border-color: var(--primary) 49 | box-shadow: 0 0 0 5px var(--primary-h) 50 | &[disabled] 51 | cursor: not-allowed 52 | &:disabled, 53 | &[readonly] 54 | background-color: var(--input-brd) 55 | opacity: 1 56 | select 57 | -webkit-appearance: none 58 | -moz-appearance: none 59 | color: var(--txt) 60 | background-image: url('data:image/svg+xml;utf8,') 61 | background-position: right center 62 | background-size: 18px 18px, 18px 18px, 2px 1.6rem 63 | background-repeat: no-repeat 64 | 65 | fieldset 66 | margin-top: 1rem 67 | border-radius: var(--radius) 68 | border: .1rem solid var(--input-brd) 69 | 70 | @supports (-webkit-appearance: none) or (-moz-appearance: none) 71 | input[type="checkbox"], 72 | input[type="radio"] 73 | --active: var(--primary) 74 | --active-inner: #fff 75 | --focus: 3px var(--primary-h) 76 | --border: var(--input-brd) 77 | --border-hover: var(--primary) 78 | --background: var(--bg) 79 | -webkit-appearance: none 80 | -moz-appearance: none 81 | height: 1.3rem 82 | outline: none 83 | display: inline-block 84 | vertical-align: top 85 | position: relative 86 | margin: 0 87 | cursor: pointer 88 | border: .1rem solid var(--bc, var(--border)) 89 | background: var(--b, var(--background)) 90 | transition: background 0.3s, border-color 0.3s, box-shadow 0.2s 91 | 92 | input[type="checkbox"]:after, 93 | input[type="radio"]:after 94 | content: "" 95 | display: block 96 | left: .1rem 97 | top: .1rem 98 | position: absolute 99 | transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),opacity var(--d-o, 0.2s) 100 | 101 | input[type="checkbox"]:checked, 102 | input[type="radio"]:checked 103 | --b: var(--active) 104 | --bc: var(--active) 105 | --d-o: 0.3s 106 | --d-t: 0.6s 107 | --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2) 108 | 109 | input[type="checkbox"]:disabled, 110 | input[type="radio"]:disabled 111 | --b: var(--disabled) 112 | cursor: not-allowed 113 | opacity: 0.9 114 | 115 | input[type="checkbox"]:disabled:checked, 116 | input[type="radio"]:disabled:checked 117 | --b: var(--disabled-inner) 118 | --bc: var(--border) 119 | 120 | input[type="checkbox"]:disabled + label, 121 | input[type="radio"]:disabled + label 122 | cursor: not-allowed 123 | 124 | input[type="checkbox"]:hover:not(:checked):not(:disabled), 125 | input[type="radio"]:hover:not(:checked):not(:disabled) 126 | --bc: var(--border-hover) 127 | 128 | input[type="checkbox"]:focus, 129 | input[type="radio"]:focus 130 | --bc: var(--active) 131 | box-shadow: 0 0 0 var(--focus) 132 | 133 | input[type="checkbox"]:not(.toggle), 134 | input[type="radio"]:not(.toggle) 135 | width: 1.3rem 136 | 137 | input[type="checkbox"]:not(.toggle):after, 138 | input[type="radio"]:not(.toggle):after 139 | opacity: var(--o, 0) 140 | 141 | input[type="checkbox"]:not(.toggle):checked, 142 | input[type="radio"]:not(.toggle):checked 143 | --o: 1 144 | 145 | input[type="checkbox"] + label, 146 | input[type="radio"] + label 147 | line-height: 1.3rem 148 | display: inline-block 149 | vertical-align: top 150 | cursor: pointer 151 | margin-left: .3rem 152 | 153 | input[type="checkbox"]:not(.toggle) 154 | border-radius: .4rem 155 | 156 | input[type="checkbox"]:not(.toggle):after 157 | width: .4rem 158 | height: .6rem 159 | border: .2rem solid var(--active-inner) 160 | border-top: 0 161 | border-left: 0 162 | left: .4rem 163 | top: .2rem 164 | transform: rotate(var(--r, 20deg)) 165 | 166 | input[type="checkbox"]:not(.toggle):checked 167 | --r: 43deg 168 | 169 | input[type="checkbox"].toggle 170 | width: 38px 171 | border-radius: 11px 172 | 173 | input[type="checkbox"].toggle:after 174 | left: .1rem 175 | top: .1rem 176 | border-radius: 50% 177 | width: .9rem 178 | height: .9rem 179 | background: var(--ab, var(--border)) 180 | transform: translateX(var(--x, 0)) 181 | 182 | input[type="checkbox"].toggle:checked 183 | --ab: var(--active-inner) 184 | --x: 1.1rem 185 | 186 | input[type="checkbox"].toggle:disabled:not(:checked):after 187 | opacity: 0.6 188 | 189 | input[type="radio"] 190 | border-radius: 50% 191 | 192 | input[type="radio"]:after 193 | width: .9rem 194 | height: .9rem 195 | border-radius: 50% 196 | background: var(--active-inner) 197 | opacity: 0 198 | transform: scale(var(--s, 0.7)) 199 | 200 | input[type="radio"]:checked 201 | --s: 0.8 202 | -------------------------------------------------------------------------------- /src/sass/elements/_link.sass: -------------------------------------------------------------------------------- 1 | .link 2 | color: var(--primary) 3 | background-color: transparent 4 | border-color: transparent 5 | &:hover 6 | color: var(--primary-l) 7 | text-decoration: underline 8 | background-color: transparent 9 | &:focus 10 | color: var(--primary-d) 11 | text-decoration: underline 12 | background-color: transparent 13 | box-shadow: 0 0 0 .25rem var(--primary-h) 14 | &:active 15 | color: var(--primary-d) 16 | text-decoration: underline 17 | background-color: transparent 18 | -------------------------------------------------------------------------------- /src/sass/elements/_table.sass: -------------------------------------------------------------------------------- 1 | /* ------------------- Table ------------------ */ 2 | table 3 | width: 100% 4 | padding: 0 5 | border-collapse: collapse 6 | overflow: hidden 7 | border-radius: var(--radius) 8 | box-shadow: var(--fake-brd-table) 9 | caption 10 | padding: 0.5rem 1.5rem 11 | thead 12 | background: var(--primary) 13 | color: var(--txt-r) 14 | th:first-child 15 | border-top-left-radius: var(--radius) 16 | th:last-child 17 | border-top-right-radius: var(--radius) 18 | td,th 19 | padding: 0.5rem 1.5rem 20 | tr 21 | text-align: left 22 | padding: .3rem 23 | border-bottom: 1px solid var(--brd-table) 24 | &:hover 25 | background-color: var(--bbg-table-hover) 26 | &:last-child 27 | border-bottom: none 28 | &:first-child 29 | & > th 30 | border-bottom: 1px solid var(--primary) 31 | tfoot 32 | border-top: 1px solid var(--brd-table) 33 | @media (max-width: 500px) 34 | table, thead, tbody, th, td, tr 35 | display: block 36 | table 37 | border: 0 38 | thead 39 | display: none 40 | caption 41 | display: block 42 | font-size: 1.3em 43 | tr 44 | border-bottom: 2px solid var(--brd-table) 45 | display: block 46 | td 47 | border-bottom: 1px solid var(--brd-table) 48 | font-size: .8em 49 | display: flex 50 | align-items: center 51 | td::before 52 | content: attr(data-column) 53 | text-align: left 54 | width: 45% 55 | font-weight: bold 56 | text-transform: uppercase 57 | td:last-child 58 | border-bottom: 0 59 | 60 | -------------------------------------------------------------------------------- /src/sass/elements/_typography.sass: -------------------------------------------------------------------------------- 1 | /* ------------------ Heading ----------------- */ 2 | 3 | h1, h2, h3, h4, h5, h6 4 | margin-top: 1.5rem 5 | h1 6 | font-size: 2.6em 7 | h2 8 | font-size: 2.0em 9 | h3 10 | font-size: 1.7em 11 | h4 12 | font-size: 1.5em 13 | h5 14 | font-size: 1.2em 15 | h6 16 | font-size: 1em 17 | p 18 | margin-bottom: 1.5rem 19 | p strong, p b 20 | color: var(--txt) 21 | h1 + h2, 22 | h2 + h3, 23 | h3 + h4, 24 | h4 + h5, 25 | h5 + h6 26 | margin: 0 27 | blockquote 28 | border-left: var(--radius) solid var(--primary) 29 | padding: 1rem 1.5rem 30 | q 31 | &:before 32 | content: "\201C" 33 | q 34 | &:before 35 | content: "\2018" 36 | &:after 37 | content: "\2019" 38 | &:after 39 | content: "\201D" 40 | summary 41 | font-weight: bold 42 | cursor: pointer 43 | time 44 | color: var(--txt) 45 | opacity: .7 46 | mark 47 | background-color: var(--primary) 48 | color: var(--txt-r) 49 | padding: .1rem .2rem 50 | font-size: 90% 51 | small, 52 | sub, 53 | sup 54 | font-size: 75% 55 | var 56 | color: var(--yellow) 57 | ins 58 | color: var(--green) 59 | del 60 | color: var(--red) 61 | /* ------------------- Links ------------------ */ 62 | a 63 | color: var(--primary) 64 | text-decoration: none 65 | cursor: pointer -------------------------------------------------------------------------------- /src/sass/extra/_alert.sass: -------------------------------------------------------------------------------- 1 | /* --------------- Toast Message -------------- */ 2 | .alert-item 3 | transition: all .3s 4 | max-width: 200px 5 | padding: .8rem 6 | margin-bottom: .3rem 7 | display: flex 8 | background: var(--primary) 9 | border-radius: var(--radius) 10 | box-shadow: var(--shadow) 11 | animation: fade-in .3s 12 | animation-timing-function: cubic-bezier(.6,.04,.98,.34) 13 | &.animate-out 14 | animation: fade-out .3s 15 | animation-timing-function: cubic-bezier(.6,.04,.98,.34) 16 | &.success 17 | background: var(--green) 18 | &.error 19 | background: var(--red) 20 | &.warn 21 | background: var(--yellow) 22 | &.info 23 | background: var(--blue) 24 | 25 | .alert-container 26 | position: fixed 27 | padding: .3rem 28 | display: flex 29 | align-items: center 30 | flex-direction: column 31 | z-index: 9999 32 | &._top 33 | flex-direction: column-reverse 34 | &._bottom 35 | bottom:0 36 | &._left 37 | left: 0 38 | &._right 39 | right: 0 40 | &._center 41 | left: 50% 42 | transform: translateX(-50%) 43 | 44 | 45 | @keyframes fade-out 46 | from 47 | opacity: 1 48 | transform: scaleY(1) 49 | to 50 | opacity: 0 51 | transform: scaleY(0) 52 | @keyframes fade-in 53 | from 54 | opacity: 0 55 | transform: scaleY(0) 56 | to 57 | opacity: 1 58 | transform: scaleY(1) 59 | 60 | -------------------------------------------------------------------------------- /src/sass/extra/_aos.sass: -------------------------------------------------------------------------------- 1 | /* ------------ Animation On Scroll ----------- */ 2 | [class*=_aos],._aos 3 | opacity: 0 4 | transition: opacity 1s, transform 1.3s 5 | ._aos-zoom 6 | transform: scale(.4) 7 | ._aos-left 8 | transform: translate3d(-100px,0,0) 9 | ._aos-right 10 | transform: translate3d(100px,0,0) 11 | ._aos-top 12 | transform: translate3d(0,-100px, 0) 13 | ._aos-bottom 14 | transform: translate3d(0,100px, 0) 15 | ._aos-done 16 | opacity: 1 17 | transform: translateZ(0) scale(1) 18 | -------------------------------------------------------------------------------- /src/sass/extra/_carousel.sass: -------------------------------------------------------------------------------- 1 | .carousel 2 | position: relative 3 | .slide 4 | display: none 5 | .prev-btn,.next-btn 6 | position: absolute 7 | top: 50% 8 | transform: translateY(-50%) 9 | .prev-btn 10 | left: 0 11 | .next-btn 12 | right: 0 13 | .numbertext 14 | color: #f2f2f2 15 | font-size: 12px 16 | padding: 8px 12px 17 | position: absolute 18 | top: 0 19 | right: 0 20 | .dot 21 | cursor: pointer 22 | height: 15px 23 | width: 15px 24 | margin: 0 2px 25 | background-color: var(--bg2) 26 | border-radius: 50% 27 | display: inline-block 28 | transition: background-color 0.6s ease 29 | .active,.dot:hover 30 | background-color: var(--primary) 31 | -------------------------------------------------------------------------------- /src/sass/extra/_loading.sass: -------------------------------------------------------------------------------- 1 | // Loading ([aria-busy=true]) 2 | 3 | // Cursor 4 | [aria-busy="true"] 5 | cursor: progress 6 | 7 | // Everyting except form elements 8 | [aria-busy="true"]:not(input):not(select):not(textarea) 9 | &::before 10 | display: inline-block 11 | width: 1em 12 | height: 1em 13 | border: 0.1875em solid currentColor 14 | border-radius: 1em 15 | border-right-color: transparent 16 | vertical-align: text-bottom 17 | vertical-align: -.125em // Visual alignment 18 | animation: spinner 0.75s linear infinite 19 | content: '' 20 | opacity: .5 21 | 22 | &:not(:empty) 23 | &::before 24 | margin-right: calc(var(--spacing) * 0.5) 25 | margin-left: 0 26 | margin-inline-end: calc(var(--spacing) * 0.5) 27 | margin-inline-start: 0 28 | &:empty 29 | text-align: center 30 | 31 | // Buttons and links 32 | button, 33 | input[type="submit"], 34 | input[type="button"], 35 | input[type="reset"], 36 | a 37 | &[aria-busy="true"] 38 | pointer-events: none 39 | 40 | // Animation: rotate 41 | @keyframes spinner 42 | to 43 | transform: rotate(360deg) 44 | 45 | -------------------------------------------------------------------------------- /src/sass/extra/_pages.sass: -------------------------------------------------------------------------------- 1 | .pages 2 | > * 3 | display: none 4 | >.page-active 5 | display: flex -------------------------------------------------------------------------------- /src/sass/extra/_tooltip.sass: -------------------------------------------------------------------------------- 1 | /* ------------------ Tooltip ----------------- */ 2 | [data-tooltip] 3 | cursor: pointer 4 | position: relative 5 | text-decoration: none 6 | [data-tooltip]::after 7 | background-color: var(--primary) 8 | color: var(--txt-r) 9 | font-size: 14px 10 | padding: 8px 12px 11 | height: fit-content 12 | width: fit-content 13 | border-radius: 6px 14 | position: absolute 15 | text-align: center 16 | bottom: 0px 17 | left: 50% 18 | content: attr(data-tooltip) 19 | transform: translate(-50%, 110%) scale(0) 20 | transform-origin: top 21 | transition: 0.14s 22 | box-shadow: var(--shadow) 23 | [data-tooltip]:hover 24 | &:after 25 | display: block 26 | transform: translate(-50%, 110%) scale(1) 27 | -------------------------------------------------------------------------------- /src/sass/extra/_wave.sass: -------------------------------------------------------------------------------- 1 | svg.wave 2 | display: block 3 | width: 100% 4 | height: 15em 5 | max-height: 100vh 6 | margin: 0 7 | 8 | > path 9 | fill: var(--primary) 10 | animation: wave 10s linear infinite 11 | 12 | @keyframes wave 13 | 0% 14 | transform: translateX(0) 15 | 100% 16 | transform: translateX(-100%) 17 | -------------------------------------------------------------------------------- /src/sass/fontlist.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "./settings/variables" 4 | @import "./theme/light" 5 | @import "./theme/dark" 6 | html 7 | --primary: var(--orange) !important 8 | --primary-h: var(--orange-h)!important 9 | --primary-l: var(--orange-l)!important 10 | --primary-d: var(--orange-d)!important 11 | --slider-color: var(--primary-l) 12 | --slider-thumb-color: #fff 13 | 14 | body 15 | background-color: var(--primary) 16 | background-image: linear-gradient(315deg, var(--primary)0%, var(--primary-l)74%) 17 | background-size: 200% 100% 18 | height: auto 19 | #flist 20 | display: grid 21 | grid-gap: .5rem 22 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) 23 | 24 | @import "./base/basic" 25 | @import "./extra/aos" 26 | @import "./elements/typography" 27 | @import "./elements/form" 28 | 29 | @import "./layout/navbar" 30 | @import "./layout/header" 31 | @import "./layout/container" 32 | @import "./layout/grid" 33 | @import "./layout/footer" 34 | @import "./elements/code" 35 | @import "./elements/button" 36 | @import "./components/card" 37 | @import "./components/modal" 38 | @import "./components/snackbar" 39 | @import "./components/gotop_link" 40 | @import "./extra/tooltip" 41 | @import "./extra/alert" 42 | 43 | @import "./utilities/alignment" 44 | @import "./utilities/position" 45 | @import "./utilities/background" 46 | @import "./utilities/border" 47 | @import "./utilities/display" 48 | @import "./utilities/margin" 49 | @import "./utilities/general" 50 | @import "./utilities/padding" 51 | @import "./utilities/spacer" 52 | @import "./utilities/text" 53 | 54 | #results>span 55 | display: flex 56 | align-items: center 57 | gap: .5rem 58 | pre 59 | max-width: calc(100vw - 8rem) 60 | overflow: scroll 61 | input[type=range] 62 | -webkit-appearance: none 63 | margin: 10px 0 64 | width: 100% 65 | 66 | input[type=range]:focus 67 | outline: none 68 | 69 | input[type=range]::-webkit-slider-runnable-track 70 | height: 6px 71 | background: #ddd 72 | border-radius: 3px 73 | 74 | input[type=range]::-webkit-slider-thumb 75 | -webkit-appearance: none 76 | height: 20px 77 | width: 20px 78 | background: #fff 79 | border-radius: 50% 80 | border: 1px solid #ccc 81 | margin-top: -8px 82 | 83 | input[type=range]::-webkit-slider-runnable-track 84 | background: var(--slider-color) 85 | 86 | input[type=range]::-webkit-slider-thumb 87 | background: var(--slider-thumb-color) 88 | -------------------------------------------------------------------------------- /src/sass/index.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "./settings/variables" 4 | 5 | @import "./theme/light" 6 | @import "./theme/dark" 7 | $or-50: '#ffffff' 8 | $or-100: '#fdddde' 9 | $or-200: '#fababd' 10 | $or-300: '#f8989d' 11 | $or-400: '#f5757c' 12 | $or-500: '#f3535b' 13 | $or-600: '#d94148' 14 | $or-700: '#bf2f36' 15 | $or-800: '#a41c23' 16 | $or-900: '#8a0a10' 17 | html 18 | --primary: #{$or-500}!important 19 | --primary-h: #{$or-100}!important 20 | --primary-l: #{$or-400}!important 21 | --primary-d: #{$or-800}!important 22 | 23 | [data-theme="dark"] 24 | --primary: #{$or-500} !important 25 | --primary-h: #{$or-800}!important 26 | --primary-l: #{$or-400}!important 27 | --primary-d: #{$or-600}!important 28 | 29 | body 30 | background-color: #f7b42c 31 | background-image: linear-gradient(315deg, #f7b42c 0%, #fc575e 74%) 32 | background-size: 400% 100% 33 | height: auto 34 | 35 | @import "./base/basic" 36 | @import "./extra/aos" 37 | @import "./elements/typography" 38 | 39 | @import "./layout/navbar" 40 | @import "./layout/header" 41 | @import "./layout/container" 42 | @import "./layout/grid" 43 | @import "./layout/footer" 44 | 45 | @import "./elements/button" 46 | @import "./components/card" 47 | @import "./elements/form" 48 | @import "./components/modal" 49 | @import "./components/gotop_link" 50 | @import "./extra/tooltip" 51 | @import "./extra/alert" 52 | 53 | @import "./utilities/alignment" 54 | @import "./utilities/background" 55 | @import "./utilities/position" 56 | @import "./utilities/border" 57 | @import "./utilities/display" 58 | @import "./utilities/margin" 59 | @import "./utilities/general" 60 | @import "./utilities/padding" 61 | @import "./utilities/spacer" 62 | @import "./utilities/text" 63 | -------------------------------------------------------------------------------- /src/sass/layout/aside.sass: -------------------------------------------------------------------------------- 1 | /* ------------ Aside menu on right ----------- */ 2 | aside 3 | position: sticky 4 | top: 6rem 5 | width: 100% 6 | font-size: smaller 7 | background: var(--aside-bg) 8 | padding: .5rem 9 | border-radius: var(--radius) 10 | box-shadow: var(--aside-bs) 11 | ul 12 | padding: .5rem 13 | margin: 0 14 | a 15 | display: flex 16 | align-items: center 17 | justify-content: flex-start 18 | width: 100% 19 | text-decoration: none 20 | padding: 0.5rem 21 | border-radius: var(--radius) 22 | border: 0!important 23 | &:hover,&.active 24 | background: var(--aside-bg-h) 25 | -------------------------------------------------------------------------------- /src/sass/layout/container.sass: -------------------------------------------------------------------------------- 1 | /* ------- Main container and .cnt class ------ */ 2 | .cnt,main 3 | margin: auto 4 | width: 100% 5 | max-width: 60rem 6 | padding: 0 .5rem 7 | &.full 8 | max-width: auto 9 | .links-cnt 10 | display: flex 11 | flex-flow: row wrap 12 | gap: 1rem 13 | ._2-col 14 | display: grid 15 | grid-template-columns: 1fr 1fr 16 | gap: .5rem 17 | margin-top: .5rem -------------------------------------------------------------------------------- /src/sass/layout/footer.sass: -------------------------------------------------------------------------------- 1 | /* ------------------ Footer ------------------ */ 2 | footer 3 | width: 100% 4 | padding: .5rem 5 | footer>div 6 | border-radius: calc(var(--radius) + 0.2rem) 7 | padding: .4rem -------------------------------------------------------------------------------- /src/sass/layout/grid.sass: -------------------------------------------------------------------------------- 1 | /* ----------- Grid columns and row ----------- */ 2 | .grid 3 | flex-wrap: wrap 4 | .row ,.grid 5 | display: flex 6 | align-items: stretch 7 | &>[class*="col"],&>div 8 | flex: 0 0 auto 9 | flex-shrink: 0 10 | width: 100% 11 | max-width: 100% 12 | padding: .5rem 13 | &>[class*="col"]>*,&>div>* 14 | margin: 0 15 | .col,&>div 16 | flex: 1 1 100% 17 | .col-2 18 | width: calc((100%) / (12/2)) 19 | .col-3 20 | width: calc((100%) / (12/3)) 21 | .col-4 22 | width: calc((100%) / (12/4)) 23 | .col-6 24 | width: calc((100%) / (12/6)) 25 | .col-8 26 | width: calc((100%) / (12/8)) 27 | .col-9 28 | width: calc((100%) / (12/9)) 29 | .col-10 30 | width: calc((100%) / (12/10)) 31 | 32 | @media (max-width:40em) 33 | .row:not(.keep-width),.grid:not(.keep-width) 34 | flex-direction: column !important 35 | &>[class*="col"],&>div 36 | width: auto -------------------------------------------------------------------------------- /src/sass/layout/header.sass: -------------------------------------------------------------------------------- 1 | /* ------------------ Header ------------------ */ 2 | header 3 | & + .hero 4 | margin-top: 4rem 5 | .hero 6 | display: flex 7 | flex-direction: column 8 | justify-content: center 9 | align-items: center 10 | padding: 2rem 1rem 11 | text-align: center 12 | border-radius: var(--radius) -------------------------------------------------------------------------------- /src/sass/layout/navbar.sass: -------------------------------------------------------------------------------- 1 | /* ------------------ Navbar ------------------ */ 2 | header 3 | width: 100% 4 | z-index: 2 5 | padding: .5rem .5rem 0 .5rem 6 | top: 0 7 | 8 | nav 9 | display: flex 10 | justify-content: space-between 11 | align-items: center 12 | background: var(--bg-nav) 13 | border-radius: calc( var(--radius) + .2rem) 14 | box-shadow: var(--shadow) 15 | padding: .4rem 16 | width: 100% 17 | margin: auto 18 | max-width: 60rem 19 | >.nav-overlay 20 | display: none 21 | position: fixed 22 | top: 0 23 | left: 0 24 | width: 100% 25 | height: 100% 26 | background: rgba(17, 17, 17, 0.6) 27 | z-index: -1 28 | * 29 | margin: 0 30 | padding: 0 31 | display: flex 32 | align-items: center 33 | >button 34 | display: none 35 | margin: 0 !important 36 | min-width: auto 37 | font-size: 0.875em 38 | padding: .5rem 39 | >svg line 40 | stroke: currentColor 41 | stroke-width: 4 42 | stroke-linecap: round 43 | transform-origin: 12px 12px 44 | transition: all .4s 45 | >a 46 | gap: .5rem 47 | font-size: 1.6rem 48 | padding: 0.4rem 49 | >svg 50 | height: 1.6rem !important 51 | width: 1.6rem !important 52 | a:hover 53 | border: none !important 54 | >ul 55 | flex-direction: row 56 | justify-content: space-between 57 | list-style: none 58 | width: auto 59 | gap: .5rem 60 | >li 61 | gap: .5rem 62 | >li >a,>li .nav-item 63 | padding: .4rem 64 | border-radius: var(--radius) 65 | color: var(--txt) 66 | &:hover,&.active 67 | background: var(--bg-nav-h) 68 | &.active 69 | color: var(--primary) 70 | 71 | @media only screen and ( max-width: 768px ) 72 | nav 73 | &>ul 74 | position: fixed 75 | top: 5rem 76 | padding: .5rem 77 | right: -100% 78 | flex-direction: column 79 | background: var(--bg-nav) 80 | width: calc(100% - 1rem) 81 | border-radius: 10px 82 | text-align: center 83 | transition: .3s 84 | box-shadow: var(--shadow) 85 | &>button 86 | display: flex 87 | cursor: pointer 88 | &.active 89 | &>.nav-overlay 90 | display: flex 91 | >ul 92 | right: .5rem 93 | 94 | >button svg line:nth-child(1) 95 | opacity: 0 96 | transform: translateY(-100%) 97 | >button svg line:nth-child(4) 98 | opacity: 0 99 | transform: translateY(100%) 100 | >button svg line:nth-child(2) 101 | transform: rotate(45deg) 102 | >button svg line:nth-child(3) 103 | transform: rotate(-45deg) 104 | -------------------------------------------------------------------------------- /src/sass/settings/_colors.sass: -------------------------------------------------------------------------------- 1 | //Gray 2 | 3 | $gray-50:#f9fafb 4 | $gray-100:#f3f4f6 5 | $gray-200:#e5e7eb 6 | $gray-300:#d1d5db 7 | $gray-400:#9ca3af 8 | $gray-500:#6b7280 9 | $gray-600:#4b5563 10 | $gray-700:#374151 11 | $gray-800:#1f2937 12 | $gray-900:#111827 13 | //Blue 14 | $blue-50: #E0F1FF 15 | $blue-100: #C2E2FF 16 | $blue-200: #8AC8FF 17 | $blue-300: #4DACFF 18 | $blue-400: #1492FF 19 | $blue-500: #0074D8 20 | $blue-600: #005CAD 21 | $blue-700: #004480 22 | $blue-800: #002E57 23 | $blue-900: #001629 24 | //Green 25 | $green-50: #E9FBF0!default 26 | $green-100: #CFF7DE!default 27 | $green-200: #9FEFBC!default 28 | $green-300: #6FE69B!default 29 | $green-400: #40DE7A!default 30 | $green-500: #22C55E!default 31 | $green-600: #1B9D4B!default 32 | $green-700: #147538!default 33 | $green-800: #0D4E25!default 34 | $green-900: #072713!default 35 | //Red 36 | $red-50: #FFECEB 37 | $red-100: #FFD9D6 38 | $red-200: #FFB3AD 39 | $red-300: #FF8D85 40 | $red-400: #FF675C 41 | $red-500: #FF4132 42 | $red-600: #F51000 43 | $red-700: #B80C00 44 | $red-800: #7A0800 45 | $red-900: #3D0400 46 | //Orange 47 | $orange-50: #FFF4EB 48 | $orange-100: #FFE7D1 49 | $orange-200: #FFCEA3 50 | $orange-300: #FFB675 51 | $orange-400: #FF9D47 52 | $orange-500: #FF851B 53 | $orange-600: #E06900 54 | $orange-700: #A84F00 55 | $orange-800: #703400 56 | $orange-900: #381A00 57 | //Purple 58 | $purple-50: #f7f2fc 59 | $purple-100: #dfccf4 60 | $purple-200: #c7a6ec 61 | $purple-300: #b080e5 62 | $purple-400: #985add 63 | $purple-500: #8034d5 64 | $purple-600: #6b2bb2 65 | $purple-700: #55228f 66 | $purple-800: #40186b 67 | $purple-900: #2a0f48 68 | 69 | $white-0: #fff 70 | $white-50: #fafafa 71 | $white-100:#dbdbdb 72 | 73 | $black-0: #000 74 | $black-50: #101010 75 | $black-100: #4d4d4d 76 | -------------------------------------------------------------------------------- /src/sass/settings/_variables.sass: -------------------------------------------------------------------------------- 1 | // -------------------------------------------------- 2 | // Variables 3 | // -------------------------------------------------- 4 | @import colors 5 | // Typography 6 | $line-height-base: 1.5 !default 7 | $font-size-base: 1rem !default 8 | 9 | // Grid 10 | $grid-columns: 12 !default 11 | $grid-gap: .5rem !default 12 | $grid-gutter: 1.5rem !default 13 | 14 | // Button 15 | $btn-border-width: 2px !default 16 | $btn-border-radius: .5rem !default 17 | $btn-font-size: $font-size-base !default 18 | $btn-line-height: $line-height-base !default 19 | -------------------------------------------------------------------------------- /src/sass/theme/dark.sass: -------------------------------------------------------------------------------- 1 | [data-theme="dark"] 2 | //Color Palette 3 | --blue: #{$blue-500} 4 | --blue-l: #{$blue-400} 5 | --blue-h: #{$blue-800} 6 | --blue-d: #{$blue-600} 7 | --purple: #{$purple-500} 8 | --purple-l: #{$purple-400} 9 | --purple-h: #{$purple-800} 10 | --purple-d: #{$purple-600} 11 | --green: #{$green-500} 12 | --green-h: #{$green-800} 13 | --green-l: #{$green-400} 14 | --green-d: #{$green-300} 15 | --red: #{$red-500} 16 | --red-h: #{$red-800} 17 | --red-l: #{$red-400} 18 | --red-d: #{$red-300} 19 | --orange: #{$orange-500} 20 | --orange-h: #{$orange-800} 21 | --orange-l: #{$orange-400} 22 | --orange-d: #{$orange-600} 23 | --gray: #{$gray-600} 24 | --gray-l: #{$gray-500} 25 | --gray-d: #{$gray-800} 26 | --txt-l:var(--white-l) 27 | --txt-p : var(--white) 28 | --txt-red : var(--white) 29 | --txt-green : var(--white) 30 | --txt-blue : var(--white) 31 | --txt-orange : var(--white) 32 | //Text Colors 33 | --txt: var(--white) 34 | --txt-r: var(--black) 35 | //Background Colors 36 | --bg3: #{$gray-700} 37 | --bg2: #{$gray-800} 38 | --bg: #{$gray-900} 39 | 40 | //Border 41 | --brd: #{$gray-600} 42 | --aside-bg-h: #{$gray-700} 43 | --bg-card: var(--bg) 44 | --bg-details: var(--bg2) 45 | --bg-details2: var(--bg3) 46 | --txt-details-open: var(--txt) 47 | --shadow: none 48 | --b-shadow: var(--black) 49 | 50 | [data-theme="light"] .light-icon,[data-theme="dark"] .dark-icon 51 | display: block !important 52 | .theme-icon 53 | display: none 54 | -------------------------------------------------------------------------------- /src/sass/theme/light.sass: -------------------------------------------------------------------------------- 1 | html , [data-theme='light'] 2 | //Color Palette 3 | --blue: #{$blue-500} 4 | --blue-l: #{$blue-400} 5 | --blue-h: #{$blue-50} 6 | --blue-d: #{$blue-800} 7 | --purple: #{$purple-500} 8 | --purple-l: #{$purple-400} 9 | --purple-h: #{$purple-50} 10 | --purple-d: #{$purple-800} 11 | --green: #{$green-500} 12 | --green-h: #{$green-100} 13 | --green-l: #{$green-400} 14 | --green-d: #{$green-800} 15 | --red: #{$red-500} 16 | --red-h: #{$red-100} 17 | --red-l: #{$red-400} 18 | --red-d: #{$red-800} 19 | --orange: #{$orange-500} 20 | --orange-h: #{$orange-100} 21 | --orange-l: #{$orange-400} 22 | --orange-d: #{$orange-800} 23 | --white: #{$white-50} 24 | --white-h:#{$white-100} 25 | --white-l:#{$white-0} 26 | 27 | --black: #{$black-50} 28 | --black-l: #{$black-0} 29 | --black-h: #{$black-100} 30 | 31 | --txt-on-p: var(--white) 32 | --txt-on-red: var(--white) 33 | --txt-on-green: var(--white) 34 | --txt-on-purple: var(--white) 35 | --txt-on-blue: var(--white) 36 | --txt-on-orange: var(--white) 37 | --gray: #{$gray-200} 38 | --gray-l: #{$gray-100} 39 | --gray-d: #{$gray-400} 40 | //Key Colors 41 | --primary: var(--blue) 42 | --primary-h: var(--blue-h) 43 | --primary-l: var(--blue-l) 44 | --primary-d: var(--blue-d) 45 | --accent: #E3F2FD 46 | --active: #ECEFF1 47 | --focus: var(--primary) 48 | --hover: #ECF4FD 49 | //Text Color 50 | --txt: var(--black) 51 | --txt-l:var(--black-l) 52 | --txt-h:var(--black-h) 53 | --txt-r: var(--white) 54 | //Background Colors 55 | --bg: #{$gray-50} 56 | --bg2: #{$gray-100} 57 | --bg3: #{$gray-200} 58 | //Border 59 | --brd: #{$gray-300} 60 | 61 | //Navbar 62 | --bg-nav: var(--bg) 63 | --bg-nav-h: var(--bg2) 64 | --bb-nav: var(--primary) 65 | //Form 66 | --input-bg: var(--bg) 67 | --input-txt: var(--txt) 68 | --input-focus: var(--primary-t) 69 | --input-brd: var(--brd) 70 | //Buttons 71 | 72 | --btn-bg: var(--bg) 73 | --btn-ac: var(--primary) 74 | --btn-txt: var(--txt) 75 | --btn-brd: var(--brd) 76 | --btn-hs: 0 77 | --btn-f: var(--bg2) 78 | --btn-bg-h: var(--bg3) 79 | --btn-sd: 0 1px var(--btn-brd) 80 | --btn-radius: .5rem 81 | 82 | //Card 83 | --bg-card: var(--bg) 84 | //Details 85 | --bg-details: var(--bg2) 86 | --bg-details-open: var(--primary) 87 | --txt-details-open: var(--white) 88 | //Aside 89 | --aside-bg: transparent 90 | --aside-bg-h: var(--bg3) 91 | --aside-bs: none 92 | 93 | //Tabs 94 | --bg-tabs: var(--bg) 95 | --brd-tabs-l: var(--primary) 96 | --brd-tabs: var(--bg2) 97 | //table 98 | --bg-table: var(--bg) 99 | --fake-brd-table: inset 0 0px 0px 1px var(--bg3) 100 | --bg-table-hover: var(--bg3) 101 | --brd-table: var(--bg3) 102 | --shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px 103 | --b-shadow: #95abbb 104 | --radius: .5rem 105 | -------------------------------------------------------------------------------- /src/sass/units.sass: -------------------------------------------------------------------------------- 1 | @charset "utf-8" 2 | 3 | @import "./settings/variables" 4 | 5 | html 6 | --primary: var(--green) !important 7 | --primary-h: var(--green-h)!important 8 | --primary-l: var(--green-l)!important 9 | --primary-d: var(--green-d)!important 10 | 11 | @import "./theme/light" 12 | @import "./theme/dark" 13 | 14 | @import "./base/basic" 15 | @import "./extra/aos" 16 | @import "./elements/typography" 17 | 18 | @import "./layout/navbar" 19 | @import "./layout/header" 20 | @import "./layout/container" 21 | @import "./layout/grid" 22 | @import "./layout/footer" 23 | 24 | @import "./elements/button" 25 | @import "./components/card" 26 | @import "./elements/form" 27 | @import "./components/modal" 28 | @import "./components/gotop_link" 29 | @import "./extra/tooltip" 30 | @import "./extra/alert" 31 | 32 | @import "./utilities/alignment" 33 | @import "./utilities/background" 34 | @import "./utilities/position" 35 | @import "./utilities/border" 36 | @import "./utilities/display" 37 | @import "./utilities/margin" 38 | @import "./utilities/general" 39 | @import "./utilities/padding" 40 | @import "./utilities/spacer" 41 | @import "./utilities/text" 42 | 43 | 44 | main 45 | padding-top: 6rem 46 | 47 | .test 48 | display: inline-flex 49 | position: relative 50 | align-items: center 51 | justify-content: center 52 | margin: 0 53 | font-size: 18px 54 | font-weight: bold 55 | border-radius: var(--radius) 56 | text-align: center 57 | box-sizing: border-box 58 | background-color: var(--green) 59 | width: 100% 60 | .test.t-vh 61 | height: calc( var(--100vh) / 2 ) 62 | .test.t-svh 63 | height: calc( var(--100svh) / 2 ) 64 | .test.t-dvh 65 | height: calc( var(--100dvh) / 2 ) 66 | .test.t-lvh 67 | height: calc( var(--100lvh) / 2 ) 68 | .test.t-p 69 | height: calc( var(--100p) / 2 ) 70 | 71 | .vtests 72 | gap: .5rem 73 | .vtests>* 74 | padding: 0!important 75 | div.test span 76 | position: absolute 77 | top: 50% 78 | width: 30vh 79 | transform: rotate(-90deg) 80 | 81 | .template 82 | display: none 83 | 84 | div.bar 85 | width: 20px 86 | top: 0px 87 | 88 | .bar > .text 89 | box-sizing: border-box 90 | width: 65vh 91 | background-color: white 92 | opacity: 0.7 93 | height: 20px 94 | padding: 0px 80px 95 | transform: rotate(90deg) 96 | transform-origin: left bottom 0 97 | 98 | .innerHeightLog 99 | position: fixed 100 | display: flex 101 | gap: 0.5rem 102 | align-items: center 103 | top: 80px 104 | left: 0.5rem 105 | padding: 0.5rem 106 | background-color: var(--green) 107 | border-radius: var(--radius) 108 | -------------------------------------------------------------------------------- /src/sass/utilities/_alignment.sass: -------------------------------------------------------------------------------- 1 | /* ------------ Alignement Utility ------------ */ 2 | $alignments: 'center' 'left' 'right' 3 | @each $align in $alignments 4 | ._ta-#{$align} 5 | text-align: #{$align} !important -------------------------------------------------------------------------------- /src/sass/utilities/_background.sass: -------------------------------------------------------------------------------- 1 | /* --------- Background Color Utility --------- */ 2 | $bgcolors: ("primary","black","white","blue","red","green","yellow","orange","gray")!default 3 | @each $var in $bgcolors 4 | ._bg-#{$var} 5 | background-color: var(--#{$var})!important 6 | ._bg 7 | background-color: var(--bg)!important 8 | ._bg2 9 | background-color: var(--bg2)!important 10 | ._bg3 11 | background-color: var(--bg3)!important 12 | -------------------------------------------------------------------------------- /src/sass/utilities/_border.sass: -------------------------------------------------------------------------------- 1 | 2 | /* -------------- Border Utility -------------- */ 3 | ._radius 4 | border-radius: var(--radius) !important 5 | ._radiusless 6 | border-radius: 0 !important 7 | ._brd-none 8 | border: none !important 9 | /* ----------- Border Color Utility ----------- */ 10 | $brdcolors: ("primary","txt-r","txt","black","white","blue","bg","bg2","bg3","red","green","yellow","orange")!default 11 | @each $var in $brdcolors 12 | ._brd-#{$var} 13 | border: 2px solid var(--#{$var})!important -------------------------------------------------------------------------------- /src/sass/utilities/_display.sass: -------------------------------------------------------------------------------- 1 | /* -------------- Display Utility ------------- */ 2 | $displays: 'block' 'flex' 'inline' 'none' 3 | @each $display in $displays 4 | ._d-#{$display} 5 | display: #{$display} !important 6 | 7 | @media only screen and (min-width: 768px) 8 | ._d-m-only 9 | display: none 10 | -------------------------------------------------------------------------------- /src/sass/utilities/_general.sass: -------------------------------------------------------------------------------- 1 | /* ------------- General utilities ------------ */ 2 | ._clearfix 3 | clear: both !important 4 | 5 | ._floatleft 6 | float: left !important 7 | 8 | ._floatright 9 | float: right !important 10 | 11 | ._shadowless 12 | box-shadow: none !important 13 | 14 | ._shadow 15 | box-shadow: var(--shadow) !important 16 | 17 | ._overflowauto 18 | overflow: auto !important 19 | 20 | ._overflowhidden 21 | overflow: hidden !important 22 | 23 | ._f-center 24 | display: flex 25 | flex-flow: wrap 26 | justify-content: center 27 | align-items: center 28 | 29 | ._f-column 30 | display: flex 31 | flex-direction: column 32 | ._f-wrap 33 | display: flex 34 | flex-wrap: wrap 35 | ._icon 36 | display: block 37 | height: 1.4rem 38 | width: 1.4rem 39 | fill: currentColor 40 | margin: 0 auto 41 | 42 | ._ratio32 43 | apsect-ratio: 3/2 44 | 45 | ._fit-cover 46 | object-fit: cover !important 47 | 48 | ._no-select 49 | -webkit-user-select: none 50 | -moz-user-select: none 51 | user-select: none 52 | 53 | ._h-100 54 | height: 100% 55 | 56 | ._cnt-grid-wrap 57 | display: flex 58 | flex-wrap: wrap 59 | gap: .5rem 60 | padding: .5rem 61 | -------------------------------------------------------------------------------- /src/sass/utilities/_margin.sass: -------------------------------------------------------------------------------- 1 | 2 | /* -------------- Margin Utility ------------- */ 3 | 4 | $sizes: ( "0": 0,"05": 0.5rem,"1": 1rem,"2": 2rem,"3": 3rem,"4": 4rem,"5": 5rem) 5 | 6 | @each $size, $value in $sizes 7 | ._m-#{$size} 8 | margin: $value 9 | ._mt-#{$size} 10 | margin-top: $value 11 | ._mr-#{$size} 12 | margin-right: $value 13 | ._mb-#{$size} 14 | margin-bottom: $value 15 | ._ml-#{$size} 16 | margin-left: $value 17 | ._mx-#{$size} 18 | margin-left: $value 19 | margin-right: $value 20 | ._my-#{$size} 21 | margin-top: $value 22 | margin-bottom: $value 23 | -------------------------------------------------------------------------------- /src/sass/utilities/_padding.sass: -------------------------------------------------------------------------------- 1 | /* -------------- Padding Utility ------------- */ 2 | 3 | $sizes: ( "0": 0,"05": 0.5rem,"1": 1rem,"2": 2rem,"3": 3rem,"4": 4rem,"5": 5rem) 4 | 5 | @each $size, $value in $sizes 6 | ._p-#{$size} 7 | padding: $value 8 | ._pt-#{$size} 9 | padding-top: $value 10 | ._pr-#{$size} 11 | padding-right: $value 12 | ._pb-#{$size} 13 | padding-bottom: $value 14 | ._pl-#{$size} 15 | padding-left: $value 16 | ._px-#{$size} 17 | padding-left: $value 18 | padding-right: $value 19 | ._py-#{$size} 20 | padding-top: $value 21 | padding-bottom: $value -------------------------------------------------------------------------------- /src/sass/utilities/_position.sass: -------------------------------------------------------------------------------- 1 | ._sticky 2 | position: sticky !important 3 | ._fixed 4 | position: fixed !important -------------------------------------------------------------------------------- /src/sass/utilities/_spacer.sass: -------------------------------------------------------------------------------- 1 | /* -------------- Spacer Utility -------------- */ 2 | $values: ("0": 0,"1": 1rem, "2": 2rem, "3": 3rem) 3 | 4 | @each $name, $value in $values 5 | [class*="-#{$name}p"] 6 | --spacer-p: #{$value}!important 7 | @each $name, $value in $values 8 | [class*="-#{$name}m"] 9 | --spacer-m: #{$value}!important 10 | -------------------------------------------------------------------------------- /src/sass/utilities/_text.sass: -------------------------------------------------------------------------------- 1 | /* ------------ Text Color Utility ------------ */ 2 | $txtcolors: ("primary","black","white","blue","red","green","yellow","orange")!default 3 | @each $var in $txtcolors 4 | ._txt-#{$var} 5 | color: var(--#{$var})!important 6 | ._txt 7 | color: var(--txt)!important 8 | ._txt-r 9 | color: var(--txt-r)!important 10 | ._mono 11 | font-family: monospace 12 | ._txt-center 13 | text-align: center -------------------------------------------------------------------------------- /src/script/build_list.js: -------------------------------------------------------------------------------- 1 | const https = require('https') 2 | const chalk = require('chalk') 3 | const fs = require('fs') 4 | const path = require('path') 5 | function center(s, max, c) { 6 | return s 7 | .padStart(s.length + Math.floor((max - s.length) / 2), c) 8 | .padEnd(max, c) 9 | } 10 | const header = (entries, date, comment) => { 11 | let ext = comment == '#' ? '.txt' : '.adblock' 12 | return ( 13 | comment + 14 | ' Title: d3Host List by d3ward\n' + 15 | comment + 16 | ' Expires: 1 days\n' + 17 | comment + 18 | ' Description: Simple and small list with the most popular advertising, tracking, analytics and social advertising services\n' + 19 | comment + 20 | ' Homepage: https://github.com/d3ward/toolz\n' + 21 | comment + 22 | ' License: CC BY-NC-SA\n' + 23 | comment + 24 | ' Source: https://github.com/d3ward/toolz/blob/master/src/d3host' + 25 | ext + 26 | '\n\n' + 27 | comment + 28 | ' This list cover all the tests on https://d3ward.github.io/toolz/adblock\n' + 29 | comment + 30 | ' Type : Stable\n' + 31 | comment + 32 | ' Entries : ' + 33 | entries + 34 | '\n' + 35 | comment + 36 | ' Updated On: ' + 37 | date + 38 | '\n' + 39 | comment + 40 | ' Created by: d3ward' 41 | ) 42 | } 43 | function test(obj, comment, pre, post) { 44 | Object.keys(obj).forEach((category) => { 45 | let value = obj[category] 46 | Object.keys(value).forEach((key) => { 47 | let value2 = value[key] 48 | if (value2) 49 | value2.forEach((v) => { 50 | https 51 | .get('https://' + v, (res) => { 52 | if (res.statusCode >= 200 && res.statusCode < 300) 53 | console.log( 54 | chalk.green(`${v}: ${res.statusCode}`) 55 | ) 56 | else if ( 57 | res.statusCode >= 300 && 58 | res.statusCode < 400 59 | ) 60 | console.log( 61 | chalk.blue(`${v}: ${res.statusCode}`) 62 | ) 63 | else if (res.statusCode == 404) 64 | console.log( 65 | chalk.red(`${v}: ${res.statusCode}`) 66 | ) 67 | else 68 | console.log( 69 | chalk.magenta(`${v}: ${res.statusCode}`) 70 | ) 71 | }) 72 | .on('error', (error) => { 73 | console.error(`${v}: ${error.message}`) 74 | }) 75 | }) 76 | }) 77 | }) 78 | } 79 | function build(obj, comment, pre, post) { 80 | let txt = '' 81 | let entries = 0 82 | Object.keys(obj).forEach((category) => { 83 | let value = obj[category] 84 | txt += '\n\n' + comment + center(' ' + category + ' ', 30, '=') + '\n' 85 | Object.keys(value).forEach((key) => { 86 | let value2 = value[key] 87 | txt += '\n' + comment + ' --- ' + key + '\n' 88 | if (value2) 89 | value2.forEach((v) => { 90 | entries++ 91 | txt += pre + v + post + '\n' 92 | }) 93 | }) 94 | }) 95 | if (pre == '||') 96 | txt += 97 | '\n*$3p,domain=d3ward.github.io\n/pagead.js$domain=d3ward.github.io\n@@*$redirect-rule,domain=d3ward.github.io\nd3ward.github.io##.textads' 98 | const date = new Date() 99 | const d = 100 | date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() 101 | return header(entries, d, comment) + txt 102 | } 103 | function write(output, input) { 104 | fs.writeFile(output, input, { encoding: 'utf8' }, function (err) { 105 | if (err) { 106 | return console.error(err) 107 | } 108 | fs.readFile(output, function (err, data) { 109 | if (err) { 110 | return console.error(err) 111 | } 112 | console.log('Created \n' + output) 113 | }) 114 | }) 115 | } 116 | fs.readFile( 117 | path.resolve(__dirname, '../data/adblock_data.json'), 118 | 'utf8', 119 | (err, jsonString) => { 120 | if (err) { 121 | console.log('Error reading file from disk:', err) 122 | return 123 | } 124 | try { 125 | const obj = JSON.parse(jsonString) 126 | test(obj) 127 | write( 128 | path.resolve(__dirname, '../d3host.txt'), 129 | build(obj, '#', '0.0.0.0 ', '') 130 | ) 131 | write( 132 | path.resolve(__dirname, '../d3host.adblock'), 133 | build(obj, '!', '||', '^') 134 | ) 135 | } catch (err) { 136 | console.log('Error parsing JSON string:', err) 137 | } 138 | } 139 | ) 140 | -------------------------------------------------------------------------------- /src/units.ejs: -------------------------------------------------------------------------------- 1 | 2 | <%- include('partials/head.ejs', { 3 | page: 'units' , 4 | title:'Units - Toolz', 5 | description:'Test viewport units of your browser.', 6 | url: 'd3ward.github.io/toolz' , 7 | preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', 8 | keywords:'viewport,toolz,units,css,web tools,testing,' }) %> 9 | 10 | 11 | <%- include('partials/support_me.ejs') %> 12 | <%- include('partials/adblock/changelog.ejs') %> 13 | <%- include('partials/header.ejs', {page:'units'}) %> 14 |
15 |
16 |
17 | 18 | This project is no longer maintained and has been archived.
19 | Thank you for being part of this journey and for your support. 20 |
21 |
22 |
23 | 24 | 25 |
26 |
27 | Units 28 | 29 |
30 |

31 | innerHeight property returns the height of the content area of a window
32 | vh = 1% of the height of the viewport size

33 | 5 Units can be used with CSS to fix mobile issues; if you use a unit that does not match the innerheight, the user visiting your site may not see some absolute or fixed buttons because they are hidden by the navigation bar.
One of the browsers most affected by this problem is Webkit-based, so several units have been introduced over the years to compensate for the problem.
34 | These tests can be used to check the value of each unit. 35 |

36 |
37 |
38 | 39 |
40 |
41 |
100vh
42 |
43 |
44 |
100%
45 |
46 |
47 |
100svh
48 |
49 |
50 |
100lvh
51 |
52 |
53 |
100dvh
54 |
55 |
56 |
57 |
58 |
100vh position:fixed
59 |
60 |
61 |
100lvh position:fixed
62 |
63 |
64 |
100svh position:fixed
65 |
66 |
67 |
100dvh position:fixed
68 |
69 |
70 |
100% position:fixed
71 |
72 |
73 |
100vh position:absolute
74 |
75 |
76 |
100lvh position:absolute
77 |
78 |
79 |
100svh position:absolute
80 |
81 |
82 |
100dvh position:absolute
83 |
84 |
85 |
100% position:absolute
86 |
87 |
88 | 89 |
91 | 92 | 94 | 96 | 97 | 98 |
99 | 100 |
101 | CSS fix 102 | for 103 | 100vh 104 | 100vh in Safari 105 | CSS 100vh Mobile 106 | Browsers 107 | It’s 109 | not a 110 | bug, 111 | it’s a feature 112 | The trick of 113 | Viewport 114 | Units 115 | Avoid 100vh 117 | on Mobile 118 | Web 119 | WebKit Bugzilla 120 | Matt Smith 121 | Solution 122 |
123 | 124 |
125 | <%- include('partials/footer.ejs') %> 126 | <%- include('partials/gotop.ejs') %> 127 | 128 | 129 | 130 | 131 | 132 | 133 | --------------------------------------------------------------------------------