Compare commits
12 commits
e42c36756a
...
33e603cf05
| Author | SHA1 | Date | |
|---|---|---|---|
| 33e603cf05 | |||
| 54882773a2 | |||
| dc62b893b5 | |||
| d7d00046b1 | |||
| 23c06bcd3a | |||
| db8cf3f93c | |||
| 779e7f92a3 | |||
| 0b9a604b92 | |||
| 9477160d92 | |||
| 841c76c13a | |||
| 2ac721058f | |||
| 166df1cff1 |
25 changed files with 1037 additions and 844 deletions
107
README.md
Normal file
107
README.md
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
# Character Ref Pages
|
||||
|
||||
Reference pages for all of the OCs (original characters) of [Sebin Nyshkim].
|
||||
|
||||
These reference pages are intended to provide artists with extensive info and reference material for commissions.
|
||||
|
||||
## Technologies
|
||||
|
||||
This project is built using [11ty] with [WebC]. It builds a (mostly) static website that's easy to serve with any webserver, no backend necessary.
|
||||
|
||||
WebC allows for easily composable components that get compiled to standard HTML elements (with the option to have them compiled to native [web components]).
|
||||
|
||||
For normal content pages, Markdown is used. Since Markdown allows the inclusion of HTML in `md` files, this is used to include WebC components in content pages.
|
||||
|
||||
## Get up and running
|
||||
|
||||
After cloning the repo, install the required NPM dependencies:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
11ty comes with an integrated web server with hot reloading for local development. To start it, simply:
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> There currently seems to be an issue with the way hot reloading and transformation works when using WebC and Markdown together in the same project. If the page doesn't update as expected after having made changes, restart the local dev server.
|
||||
|
||||
To build the project, simply:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
This puts the finished page into the `public` directory. All files can be deployed to a webserver as-is.
|
||||
|
||||
## Project structure
|
||||
|
||||
Per the `eleventy.config.js` file, all input files are located in the `src` directory. All other directories defined in the `config` object at the end of the config file are relative to the `src` directory.
|
||||
|
||||
### Layouts
|
||||
|
||||
Pages are mostly comprised of two layouts: `base` and `character`. The `base` layout provides the basic HTML structure with the `<head>` and `<body>` elements. The character pages all use the `character` layout.
|
||||
|
||||
When adding a new character, make sure to add a corresponding directory data file with the same name as the character, i.e. `[character]/[character].11tydata.json` with the following content:
|
||||
|
||||
```json
|
||||
{
|
||||
"layout": "character.webc"
|
||||
}
|
||||
```
|
||||
|
||||
### Components
|
||||
|
||||
WebC components in 11ty encapsulate HTML, CSS and JavaScript in a single file (similar to how Vue.js [SFCs] work). This greatly helps maintainability and separation of concerns.
|
||||
|
||||
The modularized nature of WebC allows for a composable structure of 11ty websites, with their ability to use the `<slot>` element, which this project makes extensive use of. Together with special WebC extensions, like `webc:if` and `webc:for`, markup can be dynamically generated. Additionally, `<script webc:setup>` allows for pre-processing of data passed to a component before transformation into HTML.
|
||||
|
||||
WebC also enables bundling of CSS and JS, causing only the relevant parts of it to be loaded for any given page to reduce load times.
|
||||
|
||||
CSS can be scoped to a WebC component with `<style webc:scoped>` attribute. This gives the component a randomized class name to prevent style collisions across components. Additionally, if a name is passed to `webc:scoped` WebC will instead use that as the class name instead of a randomized string. Using the CSS `:host` selector binds styles to either the randomized or chosen class name. So this:
|
||||
|
||||
```html
|
||||
<style webc:scoped="my-component">
|
||||
:host {
|
||||
background-color: rebeccapurple;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Will transform into:
|
||||
|
||||
```css
|
||||
.my-component {
|
||||
background-color: rebeccapurple;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
> [!WARNING]
|
||||
> Style encapsulation is very strict! In order to account for selector changes *outside* of the component, the nesting operator `&` should be used, as it will be kept as-is and the selector logic will work as expected.
|
||||
|
||||
### Character pages
|
||||
|
||||
The project makes heavy use of 11ty's [data cascade]. For this reason, it is essential to keep data about the characters in their respective directories harmonized, i.e. keeping property, variable and function names in the `[character].11tydata.js` files the same across characters. This way, pulling in data into components and pages stays relatively easy and straight-forward.
|
||||
|
||||
> [!NOTE]
|
||||
> You might be wondering why there's both a `json` and `js` 11ty data file in each of the character's directories. This is because `json` data files cannot hold functions to provide processed data to components in the data cascade that lends itself better to consumption by components. The data defined in `json` files is also not accessible to functions in `js` files. In order to keep page configuration, character data and content separate, this approach was chosen.
|
||||
|
||||
### Image processing
|
||||
|
||||
Images are processed by the 11ty [image plugin]. It comes with its own component `<eleventy-image>`. Images passed to it will get processed into different formats according to the options in `eleventy.config.js`, making the use of responsive images across the site significantly easier and more pleasant. File names in the `img` sub-directory follow the same structure as the character pages: each character has their own sub-directory according to their first name. At minimum, there needs to exist a `avatar.png` file for display on the front page and in the sidebar on the character page. Any other images can be added as needed.
|
||||
|
||||
> [!NOTE]
|
||||
> This site allows characters to have both SFW and NSFW versions of reference images. Setting the `nsfw` attribute on a `<ref-img>` component to `true` causes the component to attempt to load an additional image with the same base name as `src` with an additional suffix of `-nsfw` at the and of the file name.
|
||||
|
||||
[Sebin Nyshkim]: https://sebin-nyshkim.net
|
||||
[11ty]: https://www.11ty.dev/
|
||||
[WebC]: https://www.11ty.dev/docs/languages/webc/
|
||||
[web components]: https://www.webcomponents.org/
|
||||
[SFCs]: https://vuejs.org/guide/scaling-up/sfc.html
|
||||
[data cascade]: https://www.11ty.dev/docs/data-cascade/
|
||||
[image plugin]: https://www.11ty.dev/docs/plugins/image/
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import eleventyPluginNavigation from '@11ty/eleventy-navigation';
|
||||
import eleventyPluginWebc from '@11ty/eleventy-plugin-webc';
|
||||
import { eleventyImagePlugin } from '@11ty/eleventy-img';
|
||||
import htmlminifier from 'html-minifier-terser';
|
||||
|
||||
const IMAGE_TRANSFORM_OPTS = {
|
||||
// Set global default options
|
||||
|
|
@ -31,8 +32,24 @@ export default async function (eleventyConfig) {
|
|||
collection.getFilteredByGlob('./src/jarek/*.md')
|
||||
);
|
||||
|
||||
eleventyConfig.addTransform('minhtml', function (content) {
|
||||
if ((this.page.outputPath || '').endsWith('.html')) {
|
||||
return htmlminifier.minify(content, {
|
||||
// keepClosingSlash: true,
|
||||
removeEmptyElements: true,
|
||||
collapseWhitespace: true,
|
||||
ignoreCustomFragments: [
|
||||
/<(use|path)[^>]*>(?:(?!<\/(use|path)>)[\s\S])*?<\/(use|path)>/,
|
||||
/<div[^>]*class="color-box"[^>]*>(?:(?!<\/div>)[\s\S])*?<\/div>/,
|
||||
/<nav[^>]*class="gallery-nav"[^>]*>.*?<\/nav>/
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
eleventyConfig.addPlugin(eleventyPluginWebc, {
|
||||
components: ['src/components/**/*.webc', 'npm:@11ty/eleventy-img/*.webc']
|
||||
components: ['src/components/**/*.webc', 'npm:@11ty/eleventy-img/*.webc'],
|
||||
useTransform: false
|
||||
});
|
||||
eleventyConfig.addPlugin(eleventyPluginNavigation);
|
||||
eleventyConfig.addPlugin(eleventyImagePlugin, IMAGE_TRANSFORM_OPTS);
|
||||
|
|
|
|||
226
package-lock.json
generated
226
package-lock.json
generated
|
|
@ -12,7 +12,8 @@
|
|||
"@11ty/eleventy": "^3.1.1",
|
||||
"@11ty/eleventy-img": "^6.0.4",
|
||||
"@11ty/eleventy-navigation": "^1.0.4",
|
||||
"@11ty/eleventy-plugin-webc": "^0.11.2"
|
||||
"@11ty/eleventy-plugin-webc": "^0.11.2",
|
||||
"html-minifier-terser": "^7.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/dependency-tree": {
|
||||
|
|
@ -722,6 +723,64 @@
|
|||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.8",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
|
||||
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.2.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.10",
|
||||
"@jridgewell/trace-mapping": "^0.3.24"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/resolve-uri": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/set-array": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
|
||||
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/source-map": {
|
||||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
|
||||
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.25"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
|
||||
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.25",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
|
||||
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
|
|
@ -994,6 +1053,22 @@
|
|||
"node": ">= 10.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/buffer-from": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/camel-case": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
|
||||
"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"pascal-case": "^3.1.2",
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/chokidar": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
|
||||
|
|
@ -1018,6 +1093,18 @@
|
|||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/clean-css": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
|
||||
"integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"source-map": "~0.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||
|
|
@ -1195,6 +1282,16 @@
|
|||
"url": "https://github.com/fb55/domutils?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/dot-case": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
|
||||
"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"no-case": "^3.0.4",
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/duplexer": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
|
||||
|
|
@ -1486,6 +1583,39 @@
|
|||
"js-yaml": "bin/js-yaml.js"
|
||||
}
|
||||
},
|
||||
"node_modules/html-minifier-terser": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-7.2.0.tgz",
|
||||
"integrity": "sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"camel-case": "^4.1.2",
|
||||
"clean-css": "~5.3.2",
|
||||
"commander": "^10.0.0",
|
||||
"entities": "^4.4.0",
|
||||
"param-case": "^3.0.4",
|
||||
"relateurl": "^0.2.7",
|
||||
"terser": "^5.15.1"
|
||||
},
|
||||
"bin": {
|
||||
"html-minifier-terser": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.13.1 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/html-minifier-terser/node_modules/entities": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
|
||||
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
|
||||
"license": "BSD-2-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/htmlparser2": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
|
||||
|
|
@ -1743,6 +1873,15 @@
|
|||
"integrity": "sha512-+dAZZ2mM+/m+vY9ezfoueVvrgnHIGi5FvgSymbIgJOFwiznWyA59mav95L+Mc6xPtL3s9gm5eNTlNtxJLbNM1g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lower-case": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
|
||||
"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/luxon": {
|
||||
"version": "3.6.1",
|
||||
"resolved": "https://registry.npmjs.org/luxon/-/luxon-3.6.1.tgz",
|
||||
|
|
@ -1941,6 +2080,16 @@
|
|||
"node": "^14 || ^16 || >=18"
|
||||
}
|
||||
},
|
||||
"node_modules/no-case": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
|
||||
"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lower-case": "^2.0.2",
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/node-retrieve-globals": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.1.tgz",
|
||||
|
|
@ -2044,6 +2193,16 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/param-case": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
|
||||
"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"dot-case": "^3.0.4",
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-srcset": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
|
||||
|
|
@ -2071,6 +2230,16 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/pascal-case": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
|
||||
"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"no-case": "^3.0.4",
|
||||
"tslib": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
|
||||
|
|
@ -2218,6 +2387,15 @@
|
|||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/relateurl": {
|
||||
"version": "0.2.7",
|
||||
"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
|
||||
"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/reusify": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
|
||||
|
|
@ -2376,6 +2554,15 @@
|
|||
"node": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
|
|
@ -2385,6 +2572,16 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-support": {
|
||||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"source-map": "^0.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
|
|
@ -2421,6 +2618,30 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.43.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
|
||||
"integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
|
||||
"license": "BSD-2-Clause",
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
"acorn": "^8.14.0",
|
||||
"commander": "^2.20.0",
|
||||
"source-map-support": "~0.5.20"
|
||||
},
|
||||
"bin": {
|
||||
"terser": "bin/terser"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/terser/node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.14",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
|
||||
|
|
@ -2462,8 +2683,7 @@
|
|||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD",
|
||||
"optional": true
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/uc.micro": {
|
||||
"version": "2.1.0",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"@11ty/eleventy": "^3.1.1",
|
||||
"@11ty/eleventy-img": "^6.0.4",
|
||||
"@11ty/eleventy-navigation": "^1.0.4",
|
||||
"@11ty/eleventy-plugin-webc": "^0.11.2"
|
||||
"@11ty/eleventy-plugin-webc": "^0.11.2",
|
||||
"html-minifier-terser": "^7.2.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<figure webc:for="ability of abilities" webc:root="override">
|
||||
<figure webc:root="override">
|
||||
<eleventy-image
|
||||
webc:if="img"
|
||||
webc:if="src"
|
||||
class="image"
|
||||
:src="`src/img/${char}/${ability.id}.png`"
|
||||
:alt="`${char}'s ${ability.name}`"
|
||||
:src="`src/img/${$data.firstName.toLowerCase()}/${src}`"
|
||||
:alt="`${$data.firstName.toLowerCase()}'s ${name}`"
|
||||
:width="[250, 500]"
|
||||
sizes="(min-width: 64em) 500px, 250px"
|
||||
></eleventy-image
|
||||
><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
|
||||
<figcaption>
|
||||
<p @text="ability.name"></p>
|
||||
<p @text="ability.description"></p>
|
||||
<p @text="name"></p>
|
||||
<slot></slot>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
298
src/components/icon-sprite.webc
Normal file
298
src/components/icon-sprite.webc
Normal file
|
|
@ -0,0 +1,298 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg webc:root="override">
|
||||
<defs>
|
||||
<symbol id="fa6-solid:whiskey-glass" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M32 32c-9.3 0-18.1 4-24.2 11.1S-1 59.4 .3 68.6l50 342.9c5.7 39.3 39.4 68.5 79.2 68.5l253 0c39.7 0 73.4-29.1 79.2-68.5l50-342.9c1.3-9.2-1.4-18.5-7.5-25.5S489.3 32 480 32L32 32zM87.7 224L69 96l374 0L424.3 224 87.7 224z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:tree" viewBox="0 0 448 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M210.6 5.9L62 169.4c-3.9 4.2-6 9.8-6 15.5C56 197.7 66.3 208 79.1 208l24.9 0L30.6 281.4c-4.2 4.2-6.6 10-6.6 16C24 309.9 34.1 320 46.6 320L80 320 5.4 409.5C1.9 413.7 0 419 0 424.5c0 13 10.5 23.5 23.5 23.5L192 448l0 32c0 17.7 14.3 32 32 32s32-14.3 32-32l0-32 168.5 0c13 0 23.5-10.5 23.5-23.5c0-5.5-1.9-10.8-5.4-15L368 320l33.4 0c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L344 208l24.9 0c12.7 0 23.1-10.3 23.1-23.1c0-5.7-2.1-11.3-6-15.5L237.4 5.9C234 2.1 229.1 0 224 0s-10 2.1-13.4 5.9z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:car" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M135.2 117.4L109.1 192l293.8 0-26.1-74.6C372.3 104.6 360.2 96 346.6 96L165.4 96c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32l181.2 0c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2l0 144 0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L96 400l0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L0 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:helmet-safety" viewBox="0 0 576 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M256 32c-17.7 0-32 14.3-32 32l0 2.3 0 99.6c0 5.6-4.5 10.1-10.1 10.1c-3.6 0-7-1.9-8.8-5.1L157.1 87C83 123.5 32 199.8 32 288l0 64 512 0 0-66.4c-.9-87.2-51.7-162.4-125.1-198.6l-48 83.9c-1.8 3.2-5.2 5.1-8.8 5.1c-5.6 0-10.1-4.5-10.1-10.1l0-99.6 0-2.3c0-17.7-14.3-32-32-32l-64 0zM16.6 384C7.4 384 0 391.4 0 400.6c0 4.7 2 9.2 5.8 11.9C27.5 428.4 111.8 480 288 480s260.5-51.6 282.2-67.5c3.8-2.8 5.8-7.2 5.8-11.9c0-9.2-7.4-16.6-16.6-16.6L16.6 384z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:industry" viewBox="0 0 576 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M64 32C46.3 32 32 46.3 32 64l0 240 0 48 0 80c0 26.5 21.5 48 48 48l416 0c26.5 0 48-21.5 48-48l0-128 0-151.8c0-18.2-19.4-29.7-35.4-21.1L352 215.4l0-63.2c0-18.2-19.4-29.7-35.4-21.1L160 215.4 160 64c0-17.7-14.3-32-32-32L64 32z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:truck" viewBox="0 0 640 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M48 0C21.5 0 0 21.5 0 48L0 368c0 26.5 21.5 48 48 48l16 0c0 53 43 96 96 96s96-43 96-96l128 0c0 53 43 96 96 96s96-43 96-96l32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64 0-32 0-18.7c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7L416 96l0-48c0-26.5-21.5-48-48-48L48 0zM416 160l50.7 0L544 237.3l0 18.7-128 0 0-96zM112 416a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm368-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:boxes-stacked" viewBox="0 0 576 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M248 0L208 0c-26.5 0-48 21.5-48 48l0 112c0 35.3 28.7 64 64 64l128 0c35.3 0 64-28.7 64-64l0-112c0-26.5-21.5-48-48-48L328 0l0 80c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-80zM64 256c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l160 0c35.3 0 64-28.7 64-64l0-128c0-35.3-28.7-64-64-64l-40 0 0 80c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-80-40 0zM352 512l160 0c35.3 0 64-28.7 64-64l0-128c0-35.3-28.7-64-64-64l-40 0 0 80c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-80-40 0c-15 0-28.8 5.1-39.7 13.8c4.9 10.4 7.7 22 7.7 34.2l0 160c0 12.2-2.8 23.8-7.7 34.2C323.2 506.9 337 512 352 512z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:cake-candles" viewBox="0 0 448 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M86.4 5.5L61.8 47.6C58 54.1 56 61.6 56 69.2L56 72c0 22.1 17.9 40 40 40s40-17.9 40-40l0-2.8c0-7.6-2-15-5.8-21.6L105.6 5.5C103.6 2.1 100 0 96 0s-7.6 2.1-9.6 5.5zm128 0L189.8 47.6c-3.8 6.5-5.8 14-5.8 21.6l0 2.8c0 22.1 17.9 40 40 40s40-17.9 40-40l0-2.8c0-7.6-2-15-5.8-21.6L233.6 5.5C231.6 2.1 228 0 224 0s-7.6 2.1-9.6 5.5zM317.8 47.6c-3.8 6.5-5.8 14-5.8 21.6l0 2.8c0 22.1 17.9 40 40 40s40-17.9 40-40l0-2.8c0-7.6-2-15-5.8-21.6L361.6 5.5C359.6 2.1 356 0 352 0s-7.6 2.1-9.6 5.5L317.8 47.6zM128 176c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 48c-35.3 0-64 28.7-64 64l0 71c8.3 5.2 18.1 9 28.8 9c13.5 0 27.2-6.1 38.4-13.4c5.4-3.5 9.9-7.1 13-9.7c1.5-1.3 2.7-2.4 3.5-3.1c.4-.4 .7-.6 .8-.8l.1-.1s0 0 0 0s0 0 0 0s0 0 0 0s0 0 0 0c3.1-3.2 7.4-4.9 11.9-4.8s8.6 2.1 11.6 5.4c0 0 0 0 0 0s0 0 0 0l.1 .1c.1 .1 .4 .4 .7 .7c.7 .7 1.7 1.7 3.1 3c2.8 2.6 6.8 6.1 11.8 9.5c10.2 7.1 23 13.1 36.3 13.1s26.1-6 36.3-13.1c5-3.5 9-6.9 11.8-9.5c1.4-1.3 2.4-2.3 3.1-3c.3-.3 .6-.6 .7-.7l.1-.1c3-3.5 7.4-5.4 12-5.4s9 2 12 5.4l.1 .1c.1 .1 .4 .4 .7 .7c.7 .7 1.7 1.7 3.1 3c2.8 2.6 6.8 6.1 11.8 9.5c10.2 7.1 23 13.1 36.3 13.1s26.1-6 36.3-13.1c5-3.5 9-6.9 11.8-9.5c1.4-1.3 2.4-2.3 3.1-3c.3-.3 .6-.6 .7-.7l.1-.1c2.9-3.4 7.1-5.3 11.6-5.4s8.7 1.6 11.9 4.8c0 0 0 0 0 0s0 0 0 0s0 0 0 0l.1 .1c.2 .2 .4 .4 .8 .8c.8 .7 1.9 1.8 3.5 3.1c3.1 2.6 7.5 6.2 13 9.7c11.2 7.3 24.9 13.4 38.4 13.4c10.7 0 20.5-3.9 28.8-9l0-71c0-35.3-28.7-64-64-64l0-48c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 48-64 0 0-48c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 48-64 0 0-48zM448 394.6c-8.5 3.3-18.2 5.4-28.8 5.4c-22.5 0-42.4-9.9-55.8-18.6c-4.1-2.7-7.8-5.4-10.9-7.8c-2.8 2.4-6.1 5-9.8 7.5C329.8 390 310.6 400 288 400s-41.8-10-54.6-18.9c-3.5-2.4-6.7-4.9-9.4-7.2c-2.7 2.3-5.9 4.7-9.4 7.2C201.8 390 182.6 400 160 400s-41.8-10-54.6-18.9c-3.7-2.6-7-5.2-9.8-7.5c-3.1 2.4-6.8 5.1-10.9 7.8C71.2 390.1 51.3 400 28.8 400c-10.6 0-20.3-2.2-28.8-5.4L0 480c0 17.7 14.3 32 32 32l384 0c17.7 0 32-14.3 32-32l0-85.4z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:mars" viewBox="0 0 448 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M289.8 46.8c3.7-9 12.5-14.8 22.2-14.8l112 0c13.3 0 24 10.7 24 24l0 112c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-33.4-33.4L321 204.2c19.5 28.4 31 62.7 31 99.8c0 97.2-78.8 176-176 176S0 401.2 0 304s78.8-176 176-176c37 0 71.4 11.4 99.8 31l52.6-52.6L295 73c-6.9-6.9-8.9-17.2-5.2-26.2zM400 80s0 0 0 0s0 0 0 0s0 0 0 0zM176 416a112 112 0 1 0 0-224 112 112 0 1 0 0 224z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:arrows-up-down" viewBox="0 0 320 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M182.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L128 109.3l0 293.5L86.6 361.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 402.7l0-293.5 41.4 41.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-96-96z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:weight-hanging" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M224 96a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm122.5 32c3.5-10 5.5-20.8 5.5-32c0-53-43-96-96-96s-96 43-96 96c0 11.2 1.9 22 5.5 32L120 128c-22 0-41.2 15-46.6 36.4l-72 288c-3.6 14.3-.4 29.5 8.7 41.2S33.2 512 48 512l416 0c14.8 0 28.7-6.8 37.8-18.5s12.3-26.8 8.7-41.2l-72-288C433.2 143 414 128 392 128l-45.5 0z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:ruler" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M177.9 494.1c-18.7 18.7-49.1 18.7-67.9 0L17.9 401.9c-18.7-18.7-18.7-49.1 0-67.9l50.7-50.7 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 50.7-50.7c18.7-18.7 49.1-18.7 67.9 0l92.1 92.1c18.7 18.7 18.7 49.1 0 67.9L177.9 494.1z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:heart" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. d-->
|
||||
<path
|
||||
d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:shapes" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M315.4 15.5C309.7 5.9 299.2 0 288 0s-21.7 5.9-27.4 15.5l-96 160c-5.9 9.9-6.1 22.2-.4 32.2s16.3 16.2 27.8 16.2l192 0c11.5 0 22.2-6.2 27.8-16.2s5.5-22.3-.4-32.2l-96-160zM288 312l0 144c0 22.1 17.9 40 40 40l144 0c22.1 0 40-17.9 40-40l0-144c0-22.1-17.9-40-40-40l-144 0c-22.1 0-40 17.9-40 40zM128 512a128 128 0 1 0 0-256 128 128 0 1 0 0 256z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:maximize" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M200 32L56 32C42.7 32 32 42.7 32 56l0 144c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l40-40 79 79-79 79L73 295c-6.9-6.9-17.2-8.9-26.2-5.2S32 302.3 32 312l0 144c0 13.3 10.7 24 24 24l144 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-40-40 79-79 79 79-40 40c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l144 0c13.3 0 24-10.7 24-24l0-144c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2l-40 40-79-79 79-79 40 40c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2l0-144c0-13.3-10.7-24-24-24L312 32c-9.7 0-18.5 5.8-22.2 14.8s-1.7 19.3 5.2 26.2l40 40-79 79-79-79 40-40c6.9-6.9 8.9-17.2 5.2-26.2S209.7 32 200 32z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:star" viewBox="0 0 576 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:eye" viewBox="0 0 576 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:tooth" viewBox="0 0 448 512">
|
||||
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M186.1 52.1C169.3 39.1 148.7 32 127.5 32C74.7 32 32 74.7 32 127.5l0 6.2c0 15.8 3.7 31.3 10.7 45.5l23.5 47.1c4.5 8.9 7.6 18.4 9.4 28.2l36.7 205.8c2 11.2 11.6 19.4 22.9 19.8s21.4-7.4 24-18.4l28.9-121.3C192.2 323.7 207 312 224 312s31.8 11.7 35.8 28.3l28.9 121.3c2.6 11.1 12.7 18.8 24 18.4s20.9-8.6 22.9-19.8l36.7-205.8c1.8-9.8 4.9-19.3 9.4-28.2l23.5-47.1c7.1-14.1 10.7-29.7 10.7-45.5l0-2.1c0-55-44.6-99.6-99.6-99.6c-24.1 0-47.4 8.8-65.6 24.6l-3.2 2.8 19.5 15.2c7 5.4 8.2 15.5 2.8 22.5s-15.5 8.2-22.5 2.8l-24.4-19-37-28.8z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:face-grin-tongue" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M0 256C0 368.9 73.1 464.7 174.5 498.8C165.3 484 160 466.6 160 448l0-47.3c-24-17.5-43.1-41.4-54.8-69.2c-5-11.8 7-22.5 19.3-18.7c39.7 12.2 84.5 19 131.8 19s92.1-6.8 131.8-19c12.3-3.8 24.3 6.9 19.3 18.7c-11.8 28-31.1 52-55.4 69.6l0 46.9c0 18.6-5.3 36-14.5 50.8C438.9 464.7 512 368.9 512 256C512 114.6 397.4 0 256 0S0 114.6 0 256zm176.4-80a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 448l0-45.4c0-14.7-11.9-26.6-26.6-26.6l-2 0c-11.3 0-21.1 7.9-23.6 18.9c-2.8 12.6-20.8 12.6-23.6 0c-2.5-11.1-12.3-18.9-23.6-18.9l-2 0c-14.7 0-26.6 11.9-26.6 26.6l0 45.4c0 35.3 28.7 64 64 64s64-28.7 64-64z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:ear-listen" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M398.3 3.4c-15.8-7.9-35-1.5-42.9 14.3c-7.9 15.8-1.5 34.9 14.2 42.9l.4 .2c.4 .2 1.1 .6 2.1 1.2c2 1.2 5 3 8.7 5.6c7.5 5.2 17.6 13.2 27.7 24.2C428.5 113.4 448 146 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32c0-66-28.5-113.4-56.5-143.7C441.6 33.2 427.7 22.2 417.3 15c-5.3-3.7-9.7-6.4-13-8.3c-1.6-1-3-1.7-4-2.2c-.5-.3-.9-.5-1.2-.7l-.4-.2-.2-.1c0 0 0 0-.1 0c0 0 0 0 0 0L384 32 398.3 3.4zM128.7 227.5c6.2-56 53.7-99.5 111.3-99.5c61.9 0 112 50.1 112 112c0 29.3-11.2 55.9-29.6 75.9c-17 18.4-34.4 45.1-34.4 78l0 6.1c0 26.5-21.5 48-48 48c-17.7 0-32 14.3-32 32s14.3 32 32 32c61.9 0 112-50.1 112-112l0-6.1c0-9.8 5.4-21.7 17.4-34.7C398.3 327.9 416 286 416 240c0-97.2-78.8-176-176-176C149.4 64 74.8 132.5 65.1 220.5c-1.9 17.6 10.7 33.4 28.3 35.3s33.4-10.7 35.3-28.3zM32 512a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM192 352a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0zM208 240c0-17.7 14.3-32 32-32s32 14.3 32 32c0 13.3 10.7 24 24 24s24-10.7 24-24c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 13.3 10.7 24 24 24s24-10.7 24-24z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:dragon" viewBox="0 0 640 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M352 124.5l-51.9-13c-6.5-1.6-11.3-7.1-12-13.8s2.8-13.1 8.7-16.1l40.8-20.4L294.4 28.8c-5.5-4.1-7.8-11.3-5.6-17.9S297.1 0 304 0L416 0l32 0 16 0c30.2 0 58.7 14.2 76.8 38.4l57.6 76.8c6.2 8.3 9.6 18.4 9.6 28.8c0 26.5-21.5 48-48 48l-21.5 0c-17 0-33.3-6.7-45.3-18.7L480 160l-32 0 0 21.5c0 24.8 12.8 47.9 33.8 61.1l106.6 66.6c32.1 20.1 51.6 55.2 51.6 93.1C640 462.9 590.9 512 530.2 512L496 512l-64 0L32.3 512c-3.3 0-6.6-.4-9.6-1.4C13.5 507.8 6 501 2.4 492.1C1 488.7 .2 485.2 0 481.4c-.2-3.7 .3-7.3 1.3-10.7c2.8-9.2 9.6-16.7 18.6-20.4c3-1.2 6.2-2 9.5-2.2L433.3 412c8.3-.7 14.7-7.7 14.7-16.1c0-4.3-1.7-8.4-4.7-11.4l-44.4-44.4c-30-30-46.9-70.7-46.9-113.1l0-45.5 0-57zM512 72.3c0-.1 0-.2 0-.3s0-.2 0-.3l0 .6zm-1.3 7.4L464.3 68.1c-.2 1.3-.3 2.6-.3 3.9c0 13.3 10.7 24 24 24c10.6 0 19.5-6.8 22.7-16.3zM130.9 116.5c16.3-14.5 40.4-16.2 58.5-4.1l130.6 87 0 27.5c0 32.8 8.4 64.8 24 93l-232 0c-6.7 0-12.7-4.2-15-10.4s-.5-13.3 4.6-17.7L171 232.3 18.4 255.8c-7 1.1-13.9-2.6-16.9-9s-1.5-14.1 3.8-18.8L130.9 116.5z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:info" viewBox="0 0 192 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:feather" viewBox="0 0 512 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M278.5 215.6L23 471c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l57-57 68 0c49.7 0 97.9-14.4 139-41c11.1-7.2 5.5-23-7.8-23c-5.1 0-9.2-4.1-9.2-9.2c0-4.1 2.7-7.6 6.5-8.8l81-24.3c2.5-.8 4.8-2.1 6.7-4l22.4-22.4c10.1-10.1 2.9-27.3-11.3-27.3l-32.2 0c-5.1 0-9.2-4.1-9.2-9.2c0-4.1 2.7-7.6 6.5-8.8l112-33.6c4-1.2 7.4-3.9 9.3-7.7C506.4 207.6 512 184.1 512 160c0-41-16.3-80.3-45.3-109.3l-5.5-5.5C432.3 16.3 393 0 352 0s-80.3 16.3-109.3 45.3L139 149C91 197 64 262.1 64 330l0 55.3L253.6 195.8c6.2-6.2 16.4-6.2 22.6 0c5.4 5.4 6.1 13.6 2.2 19.8z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:shoe-prints" viewBox="0 0 640 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M416 0C352.3 0 256 32 256 32l0 128c48 0 76 16 104 32s56 32 104 32c56.4 0 176-16 176-96S512 0 416 0zM128 96c0 35.3 28.7 64 64 64l32 0 0-128-32 0c-35.3 0-64 28.7-64 64zM288 512c96 0 224-48 224-128s-119.6-96-176-96c-48 0-76 16-104 32s-56 32-104 32l0 128s96.3 32 160 32zM0 416c0 35.3 28.7 64 64 64l32 0 0-128-32 0c-35.3 0-64 28.7-64 64z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:dumbbell" viewBox="0 0 640 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M96 64c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32l0 160 0 64 0 160c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-64-32 0c-17.7 0-32-14.3-32-32l0-64c-17.7 0-32-14.3-32-32s14.3-32 32-32l0-64c0-17.7 14.3-32 32-32l32 0 0-64zm448 0l0 64 32 0c17.7 0 32 14.3 32 32l0 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 64c0 17.7-14.3 32-32 32l-32 0 0 64c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-160 0-64 0-160c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32zM416 224l0 64-192 0 0-64 192 0z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:plane" viewBox="0 0 576 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:campground" viewBox="0 0 576 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M377 52c11-13.8 8.8-33.9-5-45s-33.9-8.8-45 5L288 60.8 249 12c-11-13.8-31.2-16-45-5s-16 31.2-5 45l48 60L12.3 405.4C4.3 415.4 0 427.7 0 440.4L0 464c0 26.5 21.5 48 48 48l240 0 240 0c26.5 0 48-21.5 48-48l0-23.6c0-12.7-4.3-25.1-12.3-35L329 112l48-60zM288 448l-119.5 0L288 291.7 407.5 448 288 448z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:gamepad" viewBox="0 0 640 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M192 64C86 64 0 150 0 256S86 448 192 448l256 0c106 0 192-86 192-192s-86-192-192-192L192 64zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24l0 32 32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0 0 32c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-32-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l32 0 0-32z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:laptop-code" viewBox="0 0 640 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M64 96c0-35.3 28.7-64 64-64l384 0c35.3 0 64 28.7 64 64l0 256-64 0 0-256L128 96l0 256-64 0L64 96zM0 403.2C0 392.6 8.6 384 19.2 384l601.6 0c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8L76.8 480C34.4 480 0 445.6 0 403.2zM281 209l-31 31 31 31c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-48-48c-9.4-9.4-9.4-24.6 0-33.9l48-48c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9zM393 175l48 48c9.4 9.4 9.4 24.6 0 33.9l-48 48c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l31-31-31-31c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:bars" viewBox="0 0 448 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:chevron-left" viewBox="0 0 320 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="fa6-solid:chevron-right" viewBox="0 0 320 512">
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="ph:cake-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M208,88H136V79a32.06,32.06,0,0,0,24-31c0-28-26.44-45.91-27.56-46.66a8,8,0,0,0-8.88,0C122.44,2.09,96,20,96,48a32.06,32.06,0,0,0,24,31v9H48a24,24,0,0,0-24,24v23.33a40.84,40.84,0,0,0,8,24.24V200a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V159.57a40.84,40.84,0,0,0,8-24.24V112A24,24,0,0,0,208,88ZM112,48c0-13.57,10-24.46,16-29.79,6,5.33,16,16.22,16,29.79a16,16,0,0,1-32,0Zm104,87.33c0,13.25-10.46,24.31-23.32,24.66A24,24,0,0,1,168,136a8,8,0,0,0-16,0,24,24,0,0,1-48,0,8,8,0,0,0-16,0,24,24,0,0,1-24.68,24C50.46,159.64,40,148.58,40,135.33V112a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:gender-male" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M216,32H168a8,8,0,0,0,0,16h28.69L154.62,90.07a80,80,0,1,0,11.31,11.31L208,59.32V88a8,8,0,0,0,16,0V40A8,8,0,0,0,216,32ZM149.24,197.29a64,64,0,1,1,0-90.53A64.1,64.1,0,0,1,149.24,197.29Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:ruler-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M235.32,96,96,235.31a16,16,0,0,1-22.63,0L20.68,182.63a16,16,0,0,1,0-22.63l29.17-29.17a4,4,0,0,1,5.66,0l34.83,34.83a8,8,0,0,0,11.71-.43,8.18,8.18,0,0,0-.6-11.09L66.82,119.51a4,4,0,0,1,0-5.65l15-15a4,4,0,0,1,5.66,0l34.83,34.83a8,8,0,0,0,11.71-.43,8.18,8.18,0,0,0-.6-11.09L98.83,87.51a4,4,0,0,1,0-5.65l15-15a4,4,0,0,1,5.65,0l34.83,34.83a8,8,0,0,0,11.72-.43,8.18,8.18,0,0,0-.61-11.09L130.83,55.51a4,4,0,0,1,0-5.65L160,20.69a16,16,0,0,1,22.63,0l52.69,52.68A16,16,0,0,1,235.32,96Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:shapes-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M111.59,181.47A8,8,0,0,1,104,192H24a8,8,0,0,1-7.59-10.53l40-120a8,8,0,0,1,15.18,0ZM208,76a52,52,0,1,0-52,52A52.06,52.06,0,0,0,208,76Zm16,68H136a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8h88a8,8,0,0,0,8-8V152A8,8,0,0,0,224,144Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:star-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:eye" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:tooth-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M168,24H88A56,56,0,0,0,32,79.75c0,42.72,8,75.4,14.7,95.28,8.72,25.8,20.62,45.49,32.64,54A15.67,15.67,0,0,0,88.47,232a16.09,16.09,0,0,0,16-14.9c.85-11.52,5-49.11,23.53-49.11s22.68,37.59,23.53,49.11a16.09,16.09,0,0,0,9.18,13.36,15.69,15.69,0,0,0,15.95-1.41c12-8.53,23.92-28.22,32.64-54C216,155.15,224,122.47,224,79.75A56,56,0,0,0,168,24Zm3,56.57A8,8,0,1,1,165,95.42L128,80.61,91,95.42A8,8,0,1,1,85,80.57L106.46,72,85,63.42A8,8,0,1,1,91,48.57l37,14.81,37-14.81A8,8,0,1,1,171,63.42L149.54,72Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:ear" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M216,104a8,8,0,0,1-16,0,72,72,0,0,0-144,0c0,26.7,8.53,34.92,17.57,43.64C82.21,156,92,165.41,92,188a36,36,0,0,0,36,36c10.24,0,18.45-4.16,25.83-13.09a8,8,0,1,1,12.34,10.18C155.81,233.64,143,240,128,240a52.06,52.06,0,0,1-52-52c0-15.79-5.68-21.27-13.54-28.84C52.46,149.5,40,137.5,40,104a88,88,0,0,1,176,0Zm-38.13,57.08A8,8,0,0,0,166.93,164,8,8,0,0,1,152,160c0-9.33,4.82-15.76,10.4-23.2,6.37-8.5,13.6-18.13,13.6-32.8a48,48,0,0,0-96,0,8,8,0,0,0,16,0,32,32,0,0,1,64,0c0,9.33-4.82,15.76-10.4,23.2-6.37,8.5-13.6,18.13-13.6,32.8a24,24,0,0,0,44.78,12A8,8,0,0,0,177.87,161.08Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:info-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:feather-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M211.84,134.81l-59.79,60.47,0,0a15.75,15.75,0,0,1-11.2,4.68H75.32L45.66,229.66a8,8,0,0,1-11.32-11.32l22.59-22.58h0L124.7,128H209A4,4,0,0,1,211.84,134.81ZM216.7,30.57a64,64,0,0,0-85.9,4.14l-9.6,9.48A4,4,0,0,0,120,47v63l55-55a8,8,0,0,1,11.31,11.31L140.71,112h88.38a4,4,0,0,0,3.56-2.16A64.08,64.08,0,0,0,216.7,30.57ZM62.83,167.23,104,126.06V70.76a4,4,0,0,0-6.81-2.84L60.69,104A15.9,15.9,0,0,0,56,115.31V164.4A4,4,0,0,0,62.83,167.23Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:footprints-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M216.06,192v12A36,36,0,0,1,144,204V192a8,8,0,0,1,8-8h56A8,8,0,0,1,216.06,192ZM104,160h-56a8,8,0,0,0-8,8v12A36,36,0,0,0,112,180V168A8,8,0,0,0,104,160ZM76,16C64.36,16,53.07,26.31,44.2,45c-13.93,29.38-18.56,73,.29,96a8,8,0,0,0,6.2,2.93h50.55a8,8,0,0,0,6.2-2.93c18.85-23,14.22-66.65.29-96C98.85,26.31,87.57,16,76,16Zm78.8,152h50.55a8,8,0,0,0,6.2-2.93c18.85-23,14.22-66.65.29-96C202.93,50.31,191.64,40,180,40s-22.89,10.31-31.77,29c-13.93,29.38-18.56,73,.29,96A8,8,0,0,0,154.76,168Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:hand-palm-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M216,104v48a88,88,0,0,1-176,0V64a16,16,0,0,1,32,0v56a8,8,0,0,0,16,0V32a16,16,0,0,1,32,0v80a8,8,0,0,0,16,0V48a16,16,0,0,1,32,0v80.67A48.08,48.08,0,0,0,128,176a8,8,0,0,0,16,0,32,32,0,0,1,32-32,8,8,0,0,0,8-8V104a16,16,0,0,1,32,0Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:barbell-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M200,64V192a16,16,0,0,1-16,16H168a16,16,0,0,1-16-16V136H104v56a16,16,0,0,1-16,16H72a16,16,0,0,1-16-16V64A16,16,0,0,1,72,48H88a16,16,0,0,1,16,16v56h48V64a16,16,0,0,1,16-16h16A16,16,0,0,1,200,64ZM36,72H32A16,16,0,0,0,16,88v32H8.27A8.18,8.18,0,0,0,0,127.47,8,8,0,0,0,8,136h8v32a16,16,0,0,0,16,16h4a4,4,0,0,0,4-4V76A4,4,0,0,0,36,72Zm220,55.47a8.18,8.18,0,0,0-8.25-7.47H240V88a16,16,0,0,0-16-16h-4a4,4,0,0,0-4,4V180a4,4,0,0,0,4,4h4a16,16,0,0,0,16-16V136h8A8,8,0,0,0,256,127.47Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:train-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M184,24H72A32,32,0,0,0,40,56V184a32,32,0,0,0,32,32h8L65.6,235.2a8,8,0,1,0,12.8,9.6L100,216h56l21.6,28.8a8,8,0,1,0,12.8-9.6L176,216h8a32,32,0,0,0,32-32V56A32,32,0,0,0,184,24ZM84,184a12,12,0,1,1,12-12A12,12,0,0,1,84,184Zm36-64H56V80h64Zm52,64a12,12,0,1,1,12-12A12,12,0,0,1,172,184Zm28-64H136V80h64Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:campfire-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M132.19,25.19a8,8,0,0,0-8.38,0A156,156,0,0,0,96.24,48C77.77,67.13,68,87.9,68,108a60,60,0,0,0,120,0C188,60.08,134.47,26.59,132.19,25.19ZM128,152a24,24,0,0,1-24-24c0-24,24-40,24-40s24,16,24,40A24,24,0,0,1,128,152Zm95.62,74.42a8,8,0,0,1-10.05,5.2L128,204.39,42.43,231.62a8,8,0,1,1-4.85-15.25l64-20.37-64-20.38a8,8,0,1,1,4.85-15.24L128,187.6l85.57-27.22a8,8,0,1,1,4.85,15.24l-64,20.38,64,20.37A8,8,0,0,1,223.62,226.42Z"
|
||||
></path>
|
||||
</symbol>
|
||||
<symbol id="ph:game-controller-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M247.44,173.75a.68.68,0,0,0,0-.14L231.05,89.44c0-.06,0-.12,0-.18A60.08,60.08,0,0,0,172,40H83.89a59.88,59.88,0,0,0-59,49.52L8.58,173.61a.68.68,0,0,0,0,.14,36,36,0,0,0,60.9,31.71l.35-.37L109.52,160h37l39.71,45.09c.11.13.23.25.35.37A36.08,36.08,0,0,0,212,216a36,36,0,0,0,35.43-42.25ZM104,112H96v8a8,8,0,0,1-16,0v-8H72a8,8,0,0,1,0-16h8V88a8,8,0,0,1,16,0v8h8a8,8,0,0,1,0,16Zm40-8a8,8,0,0,1,8-8h24a8,8,0,0,1,0,16H152A8,8,0,0,1,144,104Zm84.37,87.47a19.84,19.84,0,0,1-12.9,8.23A20.09,20.09,0,0,1,198,194.31L167.8,160H172a60,60,0,0,0,51-28.38l8.74,45A19.82,19.82,0,0,1,228.37,191.47Z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="ph:devices-fill" viewBox="0 0 256 256">
|
||||
<path
|
||||
d="M224,72H208V64a24,24,0,0,0-24-24H40A24,24,0,0,0,16,64v96a24,24,0,0,0,24,24H152v8a24,24,0,0,0,24,24h48a24,24,0,0,0,24-24V96A24,24,0,0,0,224,72Zm8,120a8,8,0,0,1-8,8H176a8,8,0,0,1-8-8V96a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8Zm-96,16a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h40A8,8,0,0,1,136,208Zm80-96a8,8,0,0,1-8,8H192a8,8,0,0,1,0-16h16A8,8,0,0,1,216,112Z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="game-icons:top-paw" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M17.693 20.982v168.63c47.284 70.756 12.15 122.507 42.633 199.302a40.4 40.4 0 0 0 3.178 6.338c1.044-2.798 2.333-5.434 3.877-7.865c7.127-11.222 18.734-17.934 30.868-20.057c3.033-.53 6.12-.785 9.21-.75c9.27.104 18.56 2.805 26.454 8.414c3.745 2.66 7.097 6.017 9.918 9.96c1.362-4.63 1.842-9.743 1.178-15.31c-3.44-28.83-12.01-46.885-18.106-68.915c-8.08-29.223 9.544-34.714 22.422-11.568c13.213 23.744 28.915 61.117 55.836 103.256c4.75 7.436 11.243 11.896 18.602 13.967c-4.62-21.072 3.372-40.816 18.17-51.707c6.938-5.107 15.317-8.215 24.246-8.948q1.395-.114 2.806-.15c9.494-.245 19.49 2.19 28.957 7.72c.328-6.672-1.21-13.41-5.178-19.866c-25.69-41.814-52.278-61.296-71.25-81.764c-23.602-25.463 8.272-34.155 24.53-20.44c22.78 19.216 39.543 47.34 75.337 75.922c7.955 6.353 16.932 8.802 26.058 8.366c-9.076-20.095-4.538-42.08 8.107-56.727c10.096-11.693 25.555-19.03 42.176-18.583c4.39.118 8.86.78 13.333 2.045c-1.195-8.403-5.125-16.255-12.584-22.703c-38.462-33.25-76.602-44.38-99.284-63.075c-30.98-25.533-19.543-37.388 11.097-29.784c12.636 3.137 32.526 13.325 51.514 16.472c5.185.86 10.06.516 14.574-.756c-16.76-13.554-22.584-32.944-16.925-49.424c5.15-14.995 19.025-26.595 37.815-30.197c-3.163-2.882-7.02-5.2-11.637-6.762c-73.56-24.868-158.803-4.367-227.38-35.04zM407.316 80.31c-5.064.18-9.503 1.06-13.312 2.47l34.062 19.525l-40.328 1.68l23.948 13.968l-29.07 5.21c2.69 2.975 6.277 5.836 10.884 8.48l.113-.118c6.65 2.436 13.867 3.44 20.666 2.668l75.72.28c-16.91-19.202-36.964-34.384-61.658-47.252c-6.42-3.345-13.636-5.677-20.947-6.622c-.024-.098-.054-.192-.08-.29zm-6.242 178.56l20.07 29.253l-37.9-7.432l22.83 28.83l-44.437-8.803c.85 3.574 2.375 7.208 4.646 10.84c7.71 10.59 19.092 19.02 31.31 22.818c31.807 10.036 62.528 25.513 93.16 41.436c-14.386-36.086-36.232-93.072-81.235-114.373l.025-.1c-2.882-1.203-5.712-2.017-8.47-2.468zM286.13 367.84l3.202 32.576l-24.398-18.084l9.334 34.482l-33.278-26.935c-.652 5.13-.044 10.86 2.227 17.073c.077-.014.155-.023.232-.037c4.293 10.994 12.263 20.955 22.02 27.107l71.954 58.118l-26.756-88.435c-1.993-11.377-8.207-22.51-16.78-30.64c-2.6-2.133-5.194-3.864-7.757-5.223zm-164.35 21.525l-2.542 22.867l-17.758-16.105l-5.78 28.08l-14.055-24.052c-1.953 4.123-2.988 9.222-2.374 15.637c4.8 27.664 26.61 54.21 53.94 78.715v-77.405c.508-4.21.35-8.58-.392-12.886c-1.88-6.55-5.404-10.918-9.728-13.99a25 25 0 0 0-1.31-.863z"
|
||||
/>
|
||||
</symbol>
|
||||
<symbol id="game-icons:bat-wing" viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M23.25 19.875c38.22 44.005 38.98 90.112 16 132.344c75.61-33.06 158.24-45.382 238.844-45.407c2.933 0 5.854 0 8.78.03c45.98.49 91.18 4.898 133.938 11.626C295.842 26.31 154.954 21.397 23.25 19.874zm251.5 105.75c-75.736.388-152.785 11.91-223.03 41.563c39.527 25.086 44.946 85.016 30.78 130.156c81.86-82.396 213.783-137.65 326.688-161.72c-43.14-6.38-88.547-10.234-134.438-10zm139.28 28.094C303.25 177.412 172.427 233.127 94.44 312c59.466-5.64 111.354 40.075 96.25 97.844c65.75-107.004 135.848-185.01 223.34-256.124zm11.126 15.06c-84.76 68.95-152.326 143.842-216.187 247c86.224-47.916 190.35-14.365 189.405 76.126h89.53L362.096 328.78l-3.345-4.31l2.156-5.064l64.25-150.625zm10.313 23.407L380.25 321.72l113.875 147.655V435.03c-59.59-92.815-68.082-170.762-58.656-242.842z"
|
||||
/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<style webc:scoped="icon-sprite">
|
||||
:host {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 35 KiB |
|
|
@ -1,353 +1,9 @@
|
|||
<svg
|
||||
webc:if="icon === 'whiskey'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M32 32c-9.3 0-18.1 4-24.2 11.1S-1 59.4 .3 68.6l50 342.9c5.7 39.3 39.4 68.5 79.2 68.5l253 0c39.7 0 73.4-29.1 79.2-68.5l50-342.9c1.3-9.2-1.4-18.5-7.5-25.5S489.3 32 480 32L32 32zM87.7 224L69 96l374 0L424.3 224 87.7 224z"
|
||||
/>
|
||||
<svg webc:root="override">
|
||||
<use :href="`#${icon}`"></use>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'tree'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M210.6 5.9L62 169.4c-3.9 4.2-6 9.8-6 15.5C56 197.7 66.3 208 79.1 208l24.9 0L30.6 281.4c-4.2 4.2-6.6 10-6.6 16C24 309.9 34.1 320 46.6 320L80 320 5.4 409.5C1.9 413.7 0 419 0 424.5c0 13 10.5 23.5 23.5 23.5L192 448l0 32c0 17.7 14.3 32 32 32s32-14.3 32-32l0-32 168.5 0c13 0 23.5-10.5 23.5-23.5c0-5.5-1.9-10.8-5.4-15L368 320l33.4 0c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L344 208l24.9 0c12.7 0 23.1-10.3 23.1-23.1c0-5.7-2.1-11.3-6-15.5L237.4 5.9C234 2.1 229.1 0 224 0s-10 2.1-13.4 5.9z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'car'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M135.2 117.4L109.1 192l293.8 0-26.1-74.6C372.3 104.6 360.2 96 346.6 96L165.4 96c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32l181.2 0c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2l0 144 0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L96 400l0 48c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-48L0 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'helmet-safety'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M256 32c-17.7 0-32 14.3-32 32l0 2.3 0 99.6c0 5.6-4.5 10.1-10.1 10.1c-3.6 0-7-1.9-8.8-5.1L157.1 87C83 123.5 32 199.8 32 288l0 64 512 0 0-66.4c-.9-87.2-51.7-162.4-125.1-198.6l-48 83.9c-1.8 3.2-5.2 5.1-8.8 5.1c-5.6 0-10.1-4.5-10.1-10.1l0-99.6 0-2.3c0-17.7-14.3-32-32-32l-64 0zM16.6 384C7.4 384 0 391.4 0 400.6c0 4.7 2 9.2 5.8 11.9C27.5 428.4 111.8 480 288 480s260.5-51.6 282.2-67.5c3.8-2.8 5.8-7.2 5.8-11.9c0-9.2-7.4-16.6-16.6-16.6L16.6 384z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'industry'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M64 32C46.3 32 32 46.3 32 64l0 240 0 48 0 80c0 26.5 21.5 48 48 48l416 0c26.5 0 48-21.5 48-48l0-128 0-151.8c0-18.2-19.4-29.7-35.4-21.1L352 215.4l0-63.2c0-18.2-19.4-29.7-35.4-21.1L160 215.4 160 64c0-17.7-14.3-32-32-32L64 32z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'truck'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M48 0C21.5 0 0 21.5 0 48L0 368c0 26.5 21.5 48 48 48l16 0c0 53 43 96 96 96s96-43 96-96l128 0c0 53 43 96 96 96s96-43 96-96l32 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l0-64 0-32 0-18.7c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7L416 96l0-48c0-26.5-21.5-48-48-48L48 0zM416 160l50.7 0L544 237.3l0 18.7-128 0 0-96zM112 416a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm368-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'boxes-stacked'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M248 0L208 0c-26.5 0-48 21.5-48 48l0 112c0 35.3 28.7 64 64 64l128 0c35.3 0 64-28.7 64-64l0-112c0-26.5-21.5-48-48-48L328 0l0 80c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-80zM64 256c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l160 0c35.3 0 64-28.7 64-64l0-128c0-35.3-28.7-64-64-64l-40 0 0 80c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-80-40 0zM352 512l160 0c35.3 0 64-28.7 64-64l0-128c0-35.3-28.7-64-64-64l-40 0 0 80c0 8.8-7.2 16-16 16l-48 0c-8.8 0-16-7.2-16-16l0-80-40 0c-15 0-28.8 5.1-39.7 13.8c4.9 10.4 7.7 22 7.7 34.2l0 160c0 12.2-2.8 23.8-7.7 34.2C323.2 506.9 337 512 352 512z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'cake-candles'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M86.4 5.5L61.8 47.6C58 54.1 56 61.6 56 69.2L56 72c0 22.1 17.9 40 40 40s40-17.9 40-40l0-2.8c0-7.6-2-15-5.8-21.6L105.6 5.5C103.6 2.1 100 0 96 0s-7.6 2.1-9.6 5.5zm128 0L189.8 47.6c-3.8 6.5-5.8 14-5.8 21.6l0 2.8c0 22.1 17.9 40 40 40s40-17.9 40-40l0-2.8c0-7.6-2-15-5.8-21.6L233.6 5.5C231.6 2.1 228 0 224 0s-7.6 2.1-9.6 5.5zM317.8 47.6c-3.8 6.5-5.8 14-5.8 21.6l0 2.8c0 22.1 17.9 40 40 40s40-17.9 40-40l0-2.8c0-7.6-2-15-5.8-21.6L361.6 5.5C359.6 2.1 356 0 352 0s-7.6 2.1-9.6 5.5L317.8 47.6zM128 176c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 48c-35.3 0-64 28.7-64 64l0 71c8.3 5.2 18.1 9 28.8 9c13.5 0 27.2-6.1 38.4-13.4c5.4-3.5 9.9-7.1 13-9.7c1.5-1.3 2.7-2.4 3.5-3.1c.4-.4 .7-.6 .8-.8l.1-.1s0 0 0 0s0 0 0 0s0 0 0 0s0 0 0 0c3.1-3.2 7.4-4.9 11.9-4.8s8.6 2.1 11.6 5.4c0 0 0 0 0 0s0 0 0 0l.1 .1c.1 .1 .4 .4 .7 .7c.7 .7 1.7 1.7 3.1 3c2.8 2.6 6.8 6.1 11.8 9.5c10.2 7.1 23 13.1 36.3 13.1s26.1-6 36.3-13.1c5-3.5 9-6.9 11.8-9.5c1.4-1.3 2.4-2.3 3.1-3c.3-.3 .6-.6 .7-.7l.1-.1c3-3.5 7.4-5.4 12-5.4s9 2 12 5.4l.1 .1c.1 .1 .4 .4 .7 .7c.7 .7 1.7 1.7 3.1 3c2.8 2.6 6.8 6.1 11.8 9.5c10.2 7.1 23 13.1 36.3 13.1s26.1-6 36.3-13.1c5-3.5 9-6.9 11.8-9.5c1.4-1.3 2.4-2.3 3.1-3c.3-.3 .6-.6 .7-.7l.1-.1c2.9-3.4 7.1-5.3 11.6-5.4s8.7 1.6 11.9 4.8c0 0 0 0 0 0s0 0 0 0s0 0 0 0l.1 .1c.2 .2 .4 .4 .8 .8c.8 .7 1.9 1.8 3.5 3.1c3.1 2.6 7.5 6.2 13 9.7c11.2 7.3 24.9 13.4 38.4 13.4c10.7 0 20.5-3.9 28.8-9l0-71c0-35.3-28.7-64-64-64l0-48c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 48-64 0 0-48c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 48-64 0 0-48zM448 394.6c-8.5 3.3-18.2 5.4-28.8 5.4c-22.5 0-42.4-9.9-55.8-18.6c-4.1-2.7-7.8-5.4-10.9-7.8c-2.8 2.4-6.1 5-9.8 7.5C329.8 390 310.6 400 288 400s-41.8-10-54.6-18.9c-3.5-2.4-6.7-4.9-9.4-7.2c-2.7 2.3-5.9 4.7-9.4 7.2C201.8 390 182.6 400 160 400s-41.8-10-54.6-18.9c-3.7-2.6-7-5.2-9.8-7.5c-3.1 2.4-6.8 5.1-10.9 7.8C71.2 390.1 51.3 400 28.8 400c-10.6 0-20.3-2.2-28.8-5.4L0 480c0 17.7 14.3 32 32 32l384 0c17.7 0 32-14.3 32-32l0-85.4z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'mars'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M289.8 46.8c3.7-9 12.5-14.8 22.2-14.8l112 0c13.3 0 24 10.7 24 24l0 112c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-33.4-33.4L321 204.2c19.5 28.4 31 62.7 31 99.8c0 97.2-78.8 176-176 176S0 401.2 0 304s78.8-176 176-176c37 0 71.4 11.4 99.8 31l52.6-52.6L295 73c-6.9-6.9-8.9-17.2-5.2-26.2zM400 80s0 0 0 0s0 0 0 0s0 0 0 0zM176 416a112 112 0 1 0 0-224 112 112 0 1 0 0 224z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'arrows-up-down'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M182.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L128 109.3l0 293.5L86.6 361.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 402.7l0-293.5 41.4 41.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-96-96z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'weight-hanging'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M224 96a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm122.5 32c3.5-10 5.5-20.8 5.5-32c0-53-43-96-96-96s-96 43-96 96c0 11.2 1.9 22 5.5 32L120 128c-22 0-41.2 15-46.6 36.4l-72 288c-3.6 14.3-.4 29.5 8.7 41.2S33.2 512 48 512l416 0c14.8 0 28.7-6.8 37.8-18.5s12.3-26.8 8.7-41.2l-72-288C433.2 143 414 128 392 128l-45.5 0z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'ruler'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M177.9 494.1c-18.7 18.7-49.1 18.7-67.9 0L17.9 401.9c-18.7-18.7-18.7-49.1 0-67.9l50.7-50.7 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 50.7-50.7c18.7-18.7 49.1-18.7 67.9 0l92.1 92.1c18.7 18.7 18.7 49.1 0 67.9L177.9 494.1z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'heart'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. d-->
|
||||
<path
|
||||
d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'arrows-up-down'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M182.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L128 109.3l0 293.5L86.6 361.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 402.7l0-293.5 41.4 41.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-96-96z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'shapes'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M315.4 15.5C309.7 5.9 299.2 0 288 0s-21.7 5.9-27.4 15.5l-96 160c-5.9 9.9-6.1 22.2-.4 32.2s16.3 16.2 27.8 16.2l192 0c11.5 0 22.2-6.2 27.8-16.2s5.5-22.3-.4-32.2l-96-160zM288 312l0 144c0 22.1 17.9 40 40 40l144 0c22.1 0 40-17.9 40-40l0-144c0-22.1-17.9-40-40-40l-144 0c-22.1 0-40 17.9-40 40zM128 512a128 128 0 1 0 0-256 128 128 0 1 0 0 256z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'maximize'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M200 32L56 32C42.7 32 32 42.7 32 56l0 144c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l40-40 79 79-79 79L73 295c-6.9-6.9-17.2-8.9-26.2-5.2S32 302.3 32 312l0 144c0 13.3 10.7 24 24 24l144 0c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-40-40 79-79 79 79-40 40c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l144 0c13.3 0 24-10.7 24-24l0-144c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2l-40 40-79-79 79-79 40 40c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2l0-144c0-13.3-10.7-24-24-24L312 32c-9.7 0-18.5 5.8-22.2 14.8s-1.7 19.3 5.2 26.2l40 40-79 79-79-79 40-40c6.9-6.9 8.9-17.2 5.2-26.2S209.7 32 200 32z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'star'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'eye'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'tooth'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M186.1 52.1C169.3 39.1 148.7 32 127.5 32C74.7 32 32 74.7 32 127.5l0 6.2c0 15.8 3.7 31.3 10.7 45.5l23.5 47.1c4.5 8.9 7.6 18.4 9.4 28.2l36.7 205.8c2 11.2 11.6 19.4 22.9 19.8s21.4-7.4 24-18.4l28.9-121.3C192.2 323.7 207 312 224 312s31.8 11.7 35.8 28.3l28.9 121.3c2.6 11.1 12.7 18.8 24 18.4s20.9-8.6 22.9-19.8l36.7-205.8c1.8-9.8 4.9-19.3 9.4-28.2l23.5-47.1c7.1-14.1 10.7-29.7 10.7-45.5l0-2.1c0-55-44.6-99.6-99.6-99.6c-24.1 0-47.4 8.8-65.6 24.6l-3.2 2.8 19.5 15.2c7 5.4 8.2 15.5 2.8 22.5s-15.5 8.2-22.5 2.8l-24.4-19-37-28.8z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'face-grin-tongue'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M0 256C0 368.9 73.1 464.7 174.5 498.8C165.3 484 160 466.6 160 448l0-47.3c-24-17.5-43.1-41.4-54.8-69.2c-5-11.8 7-22.5 19.3-18.7c39.7 12.2 84.5 19 131.8 19s92.1-6.8 131.8-19c12.3-3.8 24.3 6.9 19.3 18.7c-11.8 28-31.1 52-55.4 69.6l0 46.9c0 18.6-5.3 36-14.5 50.8C438.9 464.7 512 368.9 512 256C512 114.6 397.4 0 256 0S0 114.6 0 256zm176.4-80a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 448l0-45.4c0-14.7-11.9-26.6-26.6-26.6l-2 0c-11.3 0-21.1 7.9-23.6 18.9c-2.8 12.6-20.8 12.6-23.6 0c-2.5-11.1-12.3-18.9-23.6-18.9l-2 0c-14.7 0-26.6 11.9-26.6 26.6l0 45.4c0 35.3 28.7 64 64 64s64-28.7 64-64z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'ear-listen'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M398.3 3.4c-15.8-7.9-35-1.5-42.9 14.3c-7.9 15.8-1.5 34.9 14.2 42.9l.4 .2c.4 .2 1.1 .6 2.1 1.2c2 1.2 5 3 8.7 5.6c7.5 5.2 17.6 13.2 27.7 24.2C428.5 113.4 448 146 448 192c0 17.7 14.3 32 32 32s32-14.3 32-32c0-66-28.5-113.4-56.5-143.7C441.6 33.2 427.7 22.2 417.3 15c-5.3-3.7-9.7-6.4-13-8.3c-1.6-1-3-1.7-4-2.2c-.5-.3-.9-.5-1.2-.7l-.4-.2-.2-.1c0 0 0 0-.1 0c0 0 0 0 0 0L384 32 398.3 3.4zM128.7 227.5c6.2-56 53.7-99.5 111.3-99.5c61.9 0 112 50.1 112 112c0 29.3-11.2 55.9-29.6 75.9c-17 18.4-34.4 45.1-34.4 78l0 6.1c0 26.5-21.5 48-48 48c-17.7 0-32 14.3-32 32s14.3 32 32 32c61.9 0 112-50.1 112-112l0-6.1c0-9.8 5.4-21.7 17.4-34.7C398.3 327.9 416 286 416 240c0-97.2-78.8-176-176-176C149.4 64 74.8 132.5 65.1 220.5c-1.9 17.6 10.7 33.4 28.3 35.3s33.4-10.7 35.3-28.3zM32 512a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM192 352a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0zM208 240c0-17.7 14.3-32 32-32s32 14.3 32 32c0 13.3 10.7 24 24 24s24-10.7 24-24c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 13.3 10.7 24 24 24s24-10.7 24-24z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'dragon'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M352 124.5l-51.9-13c-6.5-1.6-11.3-7.1-12-13.8s2.8-13.1 8.7-16.1l40.8-20.4L294.4 28.8c-5.5-4.1-7.8-11.3-5.6-17.9S297.1 0 304 0L416 0l32 0 16 0c30.2 0 58.7 14.2 76.8 38.4l57.6 76.8c6.2 8.3 9.6 18.4 9.6 28.8c0 26.5-21.5 48-48 48l-21.5 0c-17 0-33.3-6.7-45.3-18.7L480 160l-32 0 0 21.5c0 24.8 12.8 47.9 33.8 61.1l106.6 66.6c32.1 20.1 51.6 55.2 51.6 93.1C640 462.9 590.9 512 530.2 512L496 512l-64 0L32.3 512c-3.3 0-6.6-.4-9.6-1.4C13.5 507.8 6 501 2.4 492.1C1 488.7 .2 485.2 0 481.4c-.2-3.7 .3-7.3 1.3-10.7c2.8-9.2 9.6-16.7 18.6-20.4c3-1.2 6.2-2 9.5-2.2L433.3 412c8.3-.7 14.7-7.7 14.7-16.1c0-4.3-1.7-8.4-4.7-11.4l-44.4-44.4c-30-30-46.9-70.7-46.9-113.1l0-45.5 0-57zM512 72.3c0-.1 0-.2 0-.3s0-.2 0-.3l0 .6zm-1.3 7.4L464.3 68.1c-.2 1.3-.3 2.6-.3 3.9c0 13.3 10.7 24 24 24c10.6 0 19.5-6.8 22.7-16.3zM130.9 116.5c16.3-14.5 40.4-16.2 58.5-4.1l130.6 87 0 27.5c0 32.8 8.4 64.8 24 93l-232 0c-6.7 0-12.7-4.2-15-10.4s-.5-13.3 4.6-17.7L171 232.3 18.4 255.8c-7 1.1-13.9-2.6-16.9-9s-1.5-14.1 3.8-18.8L130.9 116.5z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'info'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 192 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'feather'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M278.5 215.6L23 471c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l57-57 68 0c49.7 0 97.9-14.4 139-41c11.1-7.2 5.5-23-7.8-23c-5.1 0-9.2-4.1-9.2-9.2c0-4.1 2.7-7.6 6.5-8.8l81-24.3c2.5-.8 4.8-2.1 6.7-4l22.4-22.4c10.1-10.1 2.9-27.3-11.3-27.3l-32.2 0c-5.1 0-9.2-4.1-9.2-9.2c0-4.1 2.7-7.6 6.5-8.8l112-33.6c4-1.2 7.4-3.9 9.3-7.7C506.4 207.6 512 184.1 512 160c0-41-16.3-80.3-45.3-109.3l-5.5-5.5C432.3 16.3 393 0 352 0s-80.3 16.3-109.3 45.3L139 149C91 197 64 262.1 64 330l0 55.3L253.6 195.8c6.2-6.2 16.4-6.2 22.6 0c5.4 5.4 6.1 13.6 2.2 19.8z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'shoe-prints'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M416 0C352.3 0 256 32 256 32l0 128c48 0 76 16 104 32s56 32 104 32c56.4 0 176-16 176-96S512 0 416 0zM128 96c0 35.3 28.7 64 64 64l32 0 0-128-32 0c-35.3 0-64 28.7-64 64zM288 512c96 0 224-48 224-128s-119.6-96-176-96c-48 0-76 16-104 32s-56 32-104 32l0 128s96.3 32 160 32zM0 416c0 35.3 28.7 64 64 64l32 0 0-128-32 0c-35.3 0-64 28.7-64 64z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'dumbbell'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M96 64c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32l0 160 0 64 0 160c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-64-32 0c-17.7 0-32-14.3-32-32l0-64c-17.7 0-32-14.3-32-32s14.3-32 32-32l0-64c0-17.7 14.3-32 32-32l32 0 0-64zm448 0l0 64 32 0c17.7 0 32 14.3 32 32l0 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 64c0 17.7-14.3 32-32 32l-32 0 0 64c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-160 0-64 0-160c0-17.7 14.3-32 32-32l32 0c17.7 0 32 14.3 32 32zM416 224l0 64-192 0 0-64 192 0z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'bars'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'chevron-left'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
webc:elseif="icon === 'chevron-right'"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 320 512"
|
||||
>
|
||||
<!-- !Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
|
||||
<path
|
||||
d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
<style webc:scoped="icon">
|
||||
:host {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--clr-icon, var(--clr-text));
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 197 B |
|
|
@ -16,10 +16,8 @@
|
|||
</script>
|
||||
|
||||
<div webc:root="override">
|
||||
<div class="message">
|
||||
<div webc:type="11ty" 11ty:type="md">
|
||||
<slot name="message"></slot>
|
||||
</div>
|
||||
<div class="message" webc:type="11ty" @11ty:type="md">
|
||||
<slot name="message"></slot>
|
||||
</div>
|
||||
|
||||
<ref-button class="nsfw-toggle" command="show-modal" commandfor="nsfw-warning">
|
||||
|
|
@ -27,10 +25,8 @@
|
|||
<span class="nsfw-label">Hide NSFW</span>
|
||||
</ref-button>
|
||||
|
||||
<div class="nsfw-content">
|
||||
<div webc:type="11ty" 11ty:type="md">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="nsfw-content" webc:type="11ty" @11ty:type="md" webc:keep>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -96,10 +96,10 @@
|
|||
|
||||
<section aria-label="Image gallery" webc:root="override">
|
||||
<button class="prev" aria-label="Previous Image">
|
||||
<icon icon="chevron-left"></icon>
|
||||
<icon icon="fa6-solid:chevron-left"></icon>
|
||||
</button>
|
||||
<button class="next" aria-label="Next Image">
|
||||
<icon icon="chevron-right"></icon>
|
||||
<icon icon="fa6-solid:chevron-right"></icon>
|
||||
</button>
|
||||
|
||||
<div class="track">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<ul webc:root="override">
|
||||
<li class="job" webc:for="job of jobs">
|
||||
<icon class="icon" :icon="job.icon"></icon>
|
||||
<div class="icon"><icon :@icon="job.icon"></icon></div>
|
||||
<p class="title" @text="job.title"></p>
|
||||
<p class="text" @text="job.desc"></p>
|
||||
</li>
|
||||
|
|
@ -19,7 +19,6 @@
|
|||
@media (min-width: 32em) {
|
||||
--timeline-circle-size: 4rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
:host .job {
|
||||
|
|
@ -28,7 +27,6 @@
|
|||
'icon title'
|
||||
'line text';
|
||||
column-gap: 1em;
|
||||
|
||||
}
|
||||
|
||||
:host .job::before {
|
||||
|
|
@ -55,7 +53,7 @@
|
|||
height: 50%;
|
||||
}
|
||||
|
||||
:host .icon {
|
||||
:host .job > .icon {
|
||||
grid-area: icon;
|
||||
align-self: center;
|
||||
|
||||
|
|
|
|||
73
src/includes/util.js
Normal file
73
src/includes/util.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
const getClientLocale = () => {
|
||||
return navigator.languages.length > 0 ? navigator.languages[0] : 'en-US';
|
||||
};
|
||||
|
||||
const getAge = (dateOfBirth) => {
|
||||
const today = new Date();
|
||||
|
||||
const thisYear = today.getFullYear();
|
||||
const thisMonth = today.getMonth();
|
||||
const thisDay = today.getDate();
|
||||
|
||||
const dobYear = dateOfBirth.getFullYear();
|
||||
const dobMonth = dateOfBirth.getMonth();
|
||||
const dobDay = dateOfBirth.getDate();
|
||||
|
||||
let age = thisYear - dobYear;
|
||||
|
||||
if (thisMonth < dobMonth) age--;
|
||||
if (thisMonth === dobMonth && thisDay < dobDay) age--;
|
||||
|
||||
return age;
|
||||
};
|
||||
|
||||
const toImperial = (cm) => {
|
||||
const realFeet = (cm * 0.3937) / 12;
|
||||
const feet = Math.floor(realFeet);
|
||||
const inches = Math.round((realFeet - feet) * 12);
|
||||
|
||||
return `${feet}'${inches}"`;
|
||||
};
|
||||
|
||||
const toInch = (cm) => {
|
||||
return `${Math.round(cm / 2.45)} in`;
|
||||
};
|
||||
|
||||
const toLbs = (kg) => {
|
||||
const nearExact = kg / 0.45359237;
|
||||
const lbs = Math.floor(nearExact);
|
||||
|
||||
return lbs;
|
||||
};
|
||||
|
||||
const toFahrenheit = (celsius) => {
|
||||
return celsius * 1.8 + 32;
|
||||
};
|
||||
|
||||
const dateFormat = new Intl.DateTimeFormat(getClientLocale(), {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: '2-digit'
|
||||
});
|
||||
|
||||
const getFullName = (...names) => names.join(' ');
|
||||
const getDateOfBirth = (dob) => `${dateFormat.format(dob)} (${getAge(dob)})`;
|
||||
const getHeight = (height) => `${height} cm (${toImperial(height)})`;
|
||||
const getWeight = (weight) => `${weight} kg (${toLbs(weight)} lbs)`;
|
||||
const getTailLength = (length) => `${length / 100} m (${toImperial(length)})`;
|
||||
const getWingspan = (wingspan) => `${wingspan / 100} m (${toImperial(wingspan)})`;
|
||||
|
||||
export {
|
||||
getAge,
|
||||
toImperial,
|
||||
toInch,
|
||||
toLbs,
|
||||
toFahrenheit,
|
||||
dateFormat,
|
||||
getFullName,
|
||||
getDateOfBirth,
|
||||
getHeight,
|
||||
getWeight,
|
||||
getTailLength,
|
||||
getWingspan
|
||||
};
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<script webc:setup>
|
||||
const characters = Object.keys($data.collections).filter((coll) => coll !== 'all');
|
||||
|
||||
const getCharacterName = (name) => $data.collections[name][0].data.getFullName();
|
||||
const getCharacterName = (name) => $data.collections[name][0].data.fullName;
|
||||
const getDescription = (name) => $data.collections[name][0].data.description;
|
||||
const getAvatar = (name) => `src/img/${name}/avatar.png`;
|
||||
const getAltText = (name) => name.charAt(0).toUpperCase() + name.slice(1) + ' Avatar';
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@ eleventyNavigation:
|
|||
|
||||
Jarek's color palette:
|
||||
|
||||
<colors :@colors="$data.getColors()"></colors>
|
||||
<colors :@colors="$data.colors"></colors>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
import { getFullName, getHeight, getWeight, getTailLength } from '../includes/util.js';
|
||||
|
||||
const firstName = 'Jarek',
|
||||
lastName = 'Vakhtang',
|
||||
fullName = getFullName(firstName, lastName),
|
||||
species = 'Krondir',
|
||||
gender = 'male',
|
||||
height = 217,
|
||||
weight = 159,
|
||||
tailLength = 112,
|
||||
colors = {
|
||||
primary: '#C5914E',
|
||||
hair: '#827427',
|
||||
eyes: '#B2B59D',
|
||||
horn: '#DABA8F',
|
||||
penis: '#B39B38'
|
||||
},
|
||||
colors = [
|
||||
{ name: 'Main Fur', value: '#C5914E' },
|
||||
{ name: 'Hair', value: '#827427' },
|
||||
{ name: 'Eyes', value: '#B2B59D' },
|
||||
{ name: 'Horn', value: '#DABA8F' },
|
||||
{ name: 'Penis', value: '#B39B38' }
|
||||
],
|
||||
penis = {
|
||||
shape: 'canid',
|
||||
type: 'grower',
|
||||
|
|
@ -21,47 +24,21 @@ const firstName = 'Jarek',
|
|||
},
|
||||
description = "Don't encroach on his turf, or you'll be sorry!";
|
||||
|
||||
const toImperial = (cm) => {
|
||||
const realFeet = (cm * 0.3937) / 12;
|
||||
const feet = Math.floor(realFeet);
|
||||
const inches = Math.round((realFeet - feet) * 12);
|
||||
|
||||
return `${feet}'${inches}"`;
|
||||
};
|
||||
|
||||
const toLbs = (kg) => {
|
||||
const nearExact = kg / 0.45359237;
|
||||
const lbs = Math.floor(nearExact);
|
||||
|
||||
return lbs;
|
||||
};
|
||||
|
||||
const getFullName = () => `${firstName} ${lastName}`;
|
||||
const getHeight = () => `${height} cm (${toImperial(height)})`;
|
||||
const getWeight = () => `${weight} kg (${toLbs(weight)} lbs)`;
|
||||
const getTailLength = () => `${tailLength / 100} m (${toImperial(tailLength)})`;
|
||||
|
||||
const getTraits = () => [
|
||||
// { icon: 'cake-candles', type: 'Date of Birth', text: getDateOfBirth() },
|
||||
{ icon: 'mars', type: 'Sex/Gender', text: gender },
|
||||
{ icon: 'ruler', type: 'Height', text: getHeight() },
|
||||
{ icon: 'weight-hanging', type: 'Weight', text: getWeight() },
|
||||
{ icon: 'ruler', type: 'Tail Length', text: getTailLength() }
|
||||
];
|
||||
|
||||
const getColors = () => [
|
||||
{ name: 'Main Fur', value: colors.primary },
|
||||
{ name: 'Hair', value: colors.hair },
|
||||
{ name: 'Eyes', value: colors.eyes },
|
||||
{ name: 'Horn', value: colors.horn }
|
||||
// { icon: 'fa6-solid:cake-candles', type: 'Date of Birth', text: getDateOfBirth() },
|
||||
{ icon: 'fa6-solid:mars', type: 'Sex/Gender', text: gender },
|
||||
{ icon: 'fa6-solid:ruler', type: 'Height', text: getHeight(height) },
|
||||
{ icon: 'fa6-solid:weight-hanging', type: 'Weight', text: getWeight(weight) },
|
||||
{ icon: 'fa6-solid:ruler', type: 'Tail Length', text: getTailLength(tailLength) }
|
||||
];
|
||||
|
||||
export default {
|
||||
firstName,
|
||||
fullName,
|
||||
species,
|
||||
gender,
|
||||
colors,
|
||||
description,
|
||||
getFullName,
|
||||
getTraits,
|
||||
getColors
|
||||
getTraits
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ layout: base.webc
|
|||
</template>
|
||||
</popup-modal>
|
||||
|
||||
<icon-sprite></icon-sprite>
|
||||
|
||||
<main :class="firstName.toLowerCase()">
|
||||
<profile>
|
||||
<eleventy-image
|
||||
|
|
@ -20,7 +22,7 @@ layout: base.webc
|
|||
:alt="firstName + ' Avatar'"
|
||||
:width="[500, 1000]"
|
||||
></eleventy-image>
|
||||
<template webc:nokeep slot="name" @text="getFullName()"></template>
|
||||
<template webc:nokeep slot="name" @text="fullName"></template>
|
||||
<template webc:nokeep slot="species" @text="species"></template>
|
||||
<traits :@traits="$data.getTraits()"></traits>
|
||||
</profile>
|
||||
|
|
|
|||
|
|
@ -8,8 +8,18 @@ Since Sebin is a fire dragon there's a myriad of abilities he has at his disposa
|
|||
|
||||
## Attacks
|
||||
|
||||
<abilities
|
||||
:@abilities="attacks"
|
||||
:@img="true"
|
||||
:@char="$data.firstName.toLowerCase()"
|
||||
></abilities>
|
||||
<ability :@src="`attack-fire-breath.png`" name="Fire Breath">
|
||||
Like most fire dragons, Sebin can breathe fire. In order to do this, he takes a deep breath to enrich the oxygen in his lungs with gases, which, together with special glands in his mouth, produce a combustible mixture. The resulting jet of fire, reaching several hundred degrees Celsius, spreads out on its way to its target, scorching everything in its path.
|
||||
</ability>
|
||||
|
||||
<ability :@src="`attack-flame-toss.png`" name="Flame Toss">
|
||||
By spitting fire into his hands, Sebin can form it into a ball and use it as a projectile. His scales are fireproof and can withstand the high temperatures. Due to their high concentration, the projectiles explode upon impact. By combining two fireballs the explosion radius increases dramatically.
|
||||
</ability>
|
||||
|
||||
<ability :@src="`attack-kindled-fist.png`" name="Kindled Fist">
|
||||
Apart from throwing projectiles, Sebin can also use the fireballs to wrap his fists in fire. This allows him to inflict severe burns on his opponent with each blow. In addition, he can release the fire from his fists with aimed blows and hurl it at his opponents.
|
||||
</ability>
|
||||
|
||||
<ability :@src="`attack-burning-twister.png`" name="Burning Twister">
|
||||
A technique used in aerial combat, Sebin uses his fire breath to engulf his body in flames while spinning to become a fire tornado that singes opponents.
|
||||
</ability>
|
||||
|
|
|
|||
|
|
@ -2,53 +2,6 @@
|
|||
eleventyNavigation:
|
||||
key: Anatomy
|
||||
order: 2
|
||||
gallery: [
|
||||
{
|
||||
alt: Sebin looking aloof (but chill),
|
||||
artist: Usurp,
|
||||
href: https://bsky.app/profile/usurpthem.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin getting ready to lift,
|
||||
artist: Ziva,
|
||||
href: https://bsky.app/profile/zivamonstr.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin after a heavy sesh,
|
||||
artist: Rei,
|
||||
href: https://bsky.app/profile/purpledragonrei.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin bringing out the big guns,
|
||||
artist: tandragonsynth,
|
||||
href: https://www.furaffinity.net/user/tandragonsynth
|
||||
},
|
||||
{
|
||||
alt: Sebin flexing,
|
||||
artist: Darknaig,
|
||||
href: https://bsky.app/profile/darknaig.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin showing off the goods,
|
||||
artist: CronoLM,
|
||||
href: https://bsky.app/profile/cronolm.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin soaping up,
|
||||
artist: (o)reo,
|
||||
href: https://bsky.app/profile/oreowoof.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin at the beach,
|
||||
artist: WolfieCanem,
|
||||
href: https://bsky.app/profile/wolfiecanem.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin flexing,
|
||||
artist: sabertoofs,
|
||||
href: https://bsky.app/profile/sabertoofs.bsky.social
|
||||
}
|
||||
]
|
||||
---
|
||||
|
||||
<ref-img
|
||||
|
|
@ -62,10 +15,10 @@ gallery: [
|
|||
:@nsfw="true"
|
||||
></ref-img>
|
||||
|
||||
<colors :@colors="$data.getColors()"></colors>
|
||||
<colors :@colors="$data.colors"></colors>
|
||||
|
||||
<quick-info>
|
||||
<traits :@traits="$data.getTraits('general')"></traits>
|
||||
<traits :@traits="$data.getTraits('anatomy')"></traits>
|
||||
</quick-info>
|
||||
|
||||
Sebin is the offspring of a human and a dragon. Like a human, he is a bipedal plantigrade. Most of his body is covered with red scales. Yellow scales run from the underside of his jaw over his chest and legs to the underside of the tip of his tail. These scales are particularly hard and function like plate armor to better protect vital organs.
|
||||
|
|
@ -140,10 +93,10 @@ An assortment of additional references how Sebin can be drawn.
|
|||
<ref-gallery>
|
||||
<ref-img webc:for="ref of [...Array(9).keys()]"
|
||||
:@src="`ref-muscle-${ref + 1}.png`"
|
||||
:@alt="$data.gallery[ref].alt"
|
||||
:@alt="$data.galleryMuscle[ref].alt"
|
||||
:@width="[500, 1000]"
|
||||
:@href="$data.gallery[ref].href"
|
||||
:@artist="$data.gallery[ref].artist"
|
||||
:@href="$data.galleryMuscle[ref].href"
|
||||
:@artist="$data.galleryMuscle[ref].artist"
|
||||
:@char="$data.firstName.toLowerCase()"
|
||||
:@dropshadow="false"
|
||||
></ref-img>
|
||||
|
|
|
|||
|
|
@ -2,28 +2,6 @@
|
|||
eleventyNavigation:
|
||||
key: Clothing
|
||||
order: 5
|
||||
gallery: [
|
||||
{
|
||||
alt: Sebin's casual outfit,
|
||||
artist: coffeerelated,
|
||||
href: https://bsky.app/profile/sulyyasprings.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin's cold weather outfit,
|
||||
artist: Lara Belém,
|
||||
href: https://bsky.app/profile/la-scarabie.bsky.social
|
||||
},
|
||||
{
|
||||
alt: Sebin's workout attire,
|
||||
artist: Atlas,
|
||||
href: https://twitter.com/turquoize_art
|
||||
},
|
||||
{
|
||||
alt: Sebin in his favorite boxers,
|
||||
artist: Fern,
|
||||
href: https://bsky.app/profile/thenamelesshare.bsky.social
|
||||
}
|
||||
]
|
||||
---
|
||||
|
||||
Sebin knows how to dress!
|
||||
|
|
@ -31,11 +9,11 @@ Sebin knows how to dress!
|
|||
<ref-gallery>
|
||||
<ref-img webc:for="ref of Array(4).keys()"
|
||||
:@src="`ref-clothes-${ref + 1}.png`"
|
||||
:@alt="$data.gallery[ref].alt"
|
||||
:@href="$data.gallery[ref].href"
|
||||
:@alt="$data.galleryClothing[ref].alt"
|
||||
:@href="$data.galleryClothing[ref].href"
|
||||
:@width="[500, 1000]"
|
||||
:@char="$data.firstName.toLowerCase()"
|
||||
:@artist="$data.gallery[ref].artist"
|
||||
:@artist="$data.galleryClothing[ref].artist"
|
||||
:@dropshadow="false"
|
||||
></ref-img>
|
||||
</ref-gallery>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@ Physical strength is not the only thing that plays a big role for Sebin. He is o
|
|||
|
||||
## Hobbies
|
||||
|
||||
<quick-info>
|
||||
<traits :@traits="$data.getTraits('hobbies')"></traits>
|
||||
</quick-info>
|
||||
|
||||
Sebin is passionate about his hobbies. If he notices even the smallest spark of interest in his hobbies you should bring a lot of time, as he will chew your ear off first. Patience is known to be a virtue — one unknown to this dragon.
|
||||
|
||||
When he indulges in his hobbies, he does so with devotion. Every move has to be right and everything has to be in perfect harmony. Once he is in his flow, he must not be disturbed, otherwise he can sometimes become quite eccentric in expressing his dismay of being disrupted, possibly losing a very important train of thought.
|
||||
|
|
|
|||
|
|
@ -24,8 +24,34 @@ Direct body contact with Sebin during overdrive causes 3rd degree burns as he em
|
|||
|
||||
## Attacks
|
||||
|
||||
<abilities
|
||||
:@abilities="overdriveAttacks"
|
||||
:@img="false"
|
||||
:@char="$data.firstName.toLowerCase()"
|
||||
></abilities>
|
||||
<ability name="Fire Breath (improved)">
|
||||
The reach of Sebin's Fire Breath increases as well as the frequency at which he can fire shots from his mouth.
|
||||
</ability>
|
||||
|
||||
<ability name="Flame Toss (improved)">
|
||||
Overdrive Form eliminates the need for Sebin to spit fire into his palms. It instead enables him to fire the shots directly from the palm palm of his hands, as the firey veins crossing his arms act as an orifice to do so. The explosion radius of the burning projectiles that explode on impact is greatly increased.
|
||||
</ability>
|
||||
|
||||
<ability name="Kindled Fist (improved)">
|
||||
As his arms and legs are infused with fire his punches and kicks exert trails of flames while doing so. Landing a punch or kick sears enemies.
|
||||
</ability>
|
||||
|
||||
<ability name="Searing Discus">
|
||||
Overdrive allows Sebin to form rings of fire by igniting flames from his fingertips and swirling them in a circle motion. He can use them for both close quarters or ranged combat.
|
||||
</ability>
|
||||
|
||||
<ability name="Combustion Flare">
|
||||
Clinking both of his wrists against each other like flints unleashes a devestating fire blast from both of his fire-infused hands. A secure foothold is needed to prevent Sebin from being thrown back by the recoil of the attack. Using this technique in the air is therefore highly risky.
|
||||
</ability>
|
||||
|
||||
<ability name="Blazing Pandemonium">
|
||||
A heavy impact into the ground from a great height with both fists, tearing deep cracks in the ground around the impact crater. Combined with Kindled Fist the heat in Sebin's arms are forced through the newly created furrows, transforming the scene into an inferno.
|
||||
</ability>
|
||||
|
||||
<ability name="Scorching Edge">
|
||||
A fiery blade towering several meters into the air that Sebin sends careening towards his enemies from his fire-infused legs with a backflip kick, leaving a swath of destruction in its wake. Upon impact the force of the attack is distributed sideways.
|
||||
</ability>
|
||||
|
||||
<ability name="Circling Fire Shield">
|
||||
A rather defensive technique. By spinning around with stretched out arms Sebin creates fire balls, which he usually hurls towards enemies, that circle around his body diagonally. They act as a shield while he can still move his arms relatively freely. Enemies would be well advised to keep their distance to this spinning shield, as the fire balls will still explode on contact.
|
||||
</ability>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
import {
|
||||
getDateOfBirth,
|
||||
getFullName,
|
||||
getHeight,
|
||||
getTailLength,
|
||||
getWeight,
|
||||
getWingspan,
|
||||
toInch
|
||||
} from '../includes/util.js';
|
||||
|
||||
const firstName = 'Sebin',
|
||||
middleName = 'Antario',
|
||||
lastName = 'Nyshkim',
|
||||
fullName = getFullName(firstName, middleName, lastName),
|
||||
species = 'Anthro Dragon',
|
||||
dateOfBirth = new Date('1993-10-17'),
|
||||
gender = 'male',
|
||||
|
|
@ -11,20 +22,14 @@ const firstName = 'Sebin',
|
|||
weight = 124, // kg
|
||||
tailLength = 104, // cm
|
||||
wingspan = 417, // cm
|
||||
colors = {
|
||||
hairPrimary: '#4b608f',
|
||||
hairSecondary: '#6684c0',
|
||||
eyes: '#31c215',
|
||||
scalesPrimary: '#c64c35',
|
||||
scalesSecondary: '#eda958',
|
||||
eyebrows: '#eda958',
|
||||
tailspikes: '#7f4539',
|
||||
horns: '#413a3a',
|
||||
claws: '#413a3a',
|
||||
nipples: '#413a3a',
|
||||
penis: '#413a3a'
|
||||
},
|
||||
hobbies = ['working out', 'travels', 'camping', 'video games', 'tech'],
|
||||
colors = [
|
||||
{ name: 'Scales', value: '#c64c35' },
|
||||
{ name: 'Chest, Membranes, Facial Spikes', value: '#eda958' },
|
||||
{ name: 'Hair', value: '#4b608f' },
|
||||
{ name: 'Eyes', value: '#31c215' },
|
||||
{ name: 'Horns, Claws, Nipples', value: '#413a3a' },
|
||||
{ name: 'Tail Spikes', value: '#7f4539' }
|
||||
],
|
||||
penis = {
|
||||
shape: 'humanoid',
|
||||
type: 'grower',
|
||||
|
|
@ -33,83 +38,55 @@ const firstName = 'Sebin',
|
|||
girth: 5 // cm
|
||||
},
|
||||
description = 'Learn all about that derg!',
|
||||
attacks = [
|
||||
{
|
||||
id: 'attack-fire-breath',
|
||||
name: 'Fire Breath',
|
||||
description:
|
||||
'Like most fire dragons, Sebin can breathe fire. In order to do this, he takes a deep breath to enrich the oxygen in his lungs with gases, which, together with special glands in his mouth, produce a combustible mixture. The resulting jet of fire, reaching several hundred degrees Celsius, spreads out on its way to its target, scorching everything in its path.'
|
||||
},
|
||||
{
|
||||
id: 'attack-flame-toss',
|
||||
name: 'Flame Toss',
|
||||
description:
|
||||
'By spitting fire into his hands, Sebin can form it into a ball and use it as a projectile. His scales are fireproof and can withstand the high temperatures. Due to their high concentration, the projectiles explode upon impact. By combining two fireballs the explosion radius increases dramatically.'
|
||||
},
|
||||
{
|
||||
id: 'attack-kindled-fist',
|
||||
name: 'Kindled Fist',
|
||||
description:
|
||||
'Apart from throwing projectiles, Sebin can also use the fireballs to wrap his fists in fire. This allows him to inflict severe burns on his opponent with each blow. In addition, he can release the fire from his fists with aimed blows and hurl it at his opponents.'
|
||||
},
|
||||
{
|
||||
id: 'attack-burning-twister',
|
||||
name: 'Burning Twister',
|
||||
description:
|
||||
'A technique used in aerial combat, Sebin uses his fire breath to engulf his body in flames while spinning to become a fire tornado that singes opponents.'
|
||||
}
|
||||
profile = [
|
||||
{ icon: 'fa6-solid:cake-candles', type: 'Date of Birth', text: getDateOfBirth(dateOfBirth) },
|
||||
{ icon: 'fa6-solid:mars', type: 'Sex/Gender', text: `${gender} (${pronouns})` },
|
||||
{ icon: 'fa6-solid:ruler', type: 'Height', text: getHeight(height) },
|
||||
{ icon: 'fa6-solid:weight-hanging', type: 'Weight', text: getWeight(weight) }
|
||||
],
|
||||
overdriveAttacks = [
|
||||
{
|
||||
id: 'attack-fire-breath',
|
||||
name: 'Fire Breath (improved)',
|
||||
description:
|
||||
"The reach of Sebin's Fire Breath increases as well as the frequency at which he can fire shots from his mouth."
|
||||
},
|
||||
{
|
||||
id: 'attack-flame-toss',
|
||||
name: 'Flame Toss (improved)',
|
||||
description:
|
||||
'Overdrive Form eliminates the need for Sebin to spit fire into his palms. It instead enables him to fire the shots directly from the palm palm of his hands, as the firey veins crossing his arms act as an orifice to do so. The explosion radius of the burning projectiles that explode on impact is greatly increased.'
|
||||
},
|
||||
{
|
||||
id: 'attack-kindled-fist',
|
||||
name: 'Kindled Fist (improved)',
|
||||
description:
|
||||
'As his arms and legs are infused with fire his punches and kicks exert trails of flames while doing so. Landing a punch or kick sears enemies.'
|
||||
},
|
||||
{
|
||||
id: 'attack-burning-twister',
|
||||
name: 'Searing Discus',
|
||||
description:
|
||||
'Overdrive allows Sebin to form rings of fire by igniting flames from his fingertips and swirling them in a circle motion. He can use them for both close quarters or ranged combat.'
|
||||
},
|
||||
{
|
||||
id: 'attack-fire-breath',
|
||||
name: 'Combustion Flare',
|
||||
description:
|
||||
'Clinking both of his wrists against each other like flints unleashes a devestating fire blast from both of his fire-infused hands. A secure foothold is needed to prevent Sebin from being thrown back by the recoil of the attack. Using this technique in the air is therefore highly risky.'
|
||||
},
|
||||
{
|
||||
id: 'attack-flame-toss',
|
||||
name: 'Blazing Pandemonium',
|
||||
description:
|
||||
"A heavy impact into the ground from a great height with both fists, tearing deep cracks in the ground around the impact crater. Combined with Kindled Fist the heat in Sebin's arms are forced through the newly created furrows, transforming the scene into an inferno."
|
||||
},
|
||||
{
|
||||
id: 'attack-kindled-fist',
|
||||
name: 'Scorching Edge',
|
||||
description:
|
||||
'A fiery blade towering several meters into the air that Sebin sends careening towards his enemies from his fire-infused legs with a backflip kick, leaving a swath of destruction in its wake. Upon impact the force of the attack is distributed sideways.'
|
||||
},
|
||||
{
|
||||
id: 'attack-burning-twister',
|
||||
name: 'Circling Fire Shield',
|
||||
description:
|
||||
'A rather defensive technique. By spinning around with stretched out arms Sebin creates fire balls, which he usually hurls towards enemies, that circle around his body diagonally. They act as a shield while he can still move his arms relatively freely. Enemies would be well advised to keep their distance to this spinning shield, as the fire balls will still explode on contact.'
|
||||
}
|
||||
hobbies = [
|
||||
{ icon: 'fa6-solid:dumbbell', type: 'Hobby', text: 'working out' },
|
||||
{ icon: 'fa6-solid:plane', type: 'Hobby', text: 'traveling' },
|
||||
{ icon: 'fa6-solid:campground', type: 'Hobby', text: 'camping' },
|
||||
{ icon: 'fa6-solid:gamepad', type: 'Hobby', text: 'video games' },
|
||||
{ icon: 'fa6-solid:laptop-code', type: 'Hobby', text: 'tech' }
|
||||
],
|
||||
anatomy = [
|
||||
{ icon: 'fa6-solid:ruler', type: 'Tail Length', text: getTailLength(tailLength) },
|
||||
{ icon: 'fa6-solid:shoe-prints', type: 'Walk', text: 'plantigrade' },
|
||||
{ icon: 'fa6-solid:info', type: 'Claws', text: 'sharp, hands & feet' },
|
||||
{ icon: 'fa6-solid:info', type: 'Nipples', text: 'yes' }
|
||||
],
|
||||
wings = [
|
||||
{ icon: 'fa6-solid:ruler', type: 'Wingspan', text: getWingspan(wingspan) },
|
||||
{ icon: 'fa6-solid:feather', type: 'Arms', text: 2 },
|
||||
{ icon: 'fa6-solid:feather', type: 'Fingers', text: 3 },
|
||||
{ icon: 'fa6-solid:star', type: 'Special Features', text: 'talon on top' }
|
||||
],
|
||||
head = [
|
||||
{ icon: 'fa6-solid:eye', type: 'Pupils', text: 'round' },
|
||||
{ icon: 'fa6-solid:eye', type: 'Eyebrows', text: 'yellow spikes' },
|
||||
{ icon: 'fa6-solid:info', type: 'Cheeks', text: 'yellow spikes' },
|
||||
{ icon: 'fa6-solid:dragon', type: 'Horns', text: 'curved' },
|
||||
{ icon: 'fa6-solid:info', type: 'Hair', text: 'mid-long, mullet' },
|
||||
{ icon: 'fa6-solid:ear-listen', type: 'Ears', text: 'long, pointy, movable' },
|
||||
{ icon: 'fa6-solid:tooth', type: 'Teeth', text: 'sharp fangs' },
|
||||
{ icon: 'fa6-solid:face-grin-tongue', type: 'Tongue', text: 'pointy tip' }
|
||||
],
|
||||
muscle = [
|
||||
{ icon: 'fa6-solid:dumbbell', type: 'Build', text: 'muscular' },
|
||||
{ icon: 'fa6-solid:dumbbell', type: 'Pecs', text: 'big' },
|
||||
{ icon: 'fa6-solid:dumbbell', type: 'abs', text: 'defined' }
|
||||
],
|
||||
naughty = [
|
||||
{ icon: 'fa6-solid:ruler', type: 'Length', text: `${penis.size} cm (${toInch(penis.size)})` },
|
||||
{ icon: 'fa6-solid:ruler', type: 'Girth', text: `${penis.girth} cm (${toInch(penis.girth)})` },
|
||||
{ icon: 'fa6-solid:shapes', type: 'Shape', text: penis.shape },
|
||||
{ icon: 'fa6-solid:maximize', type: 'Type', text: penis.type },
|
||||
{ icon: 'fa6-solid:star', type: 'Special Features', text: penis.special }
|
||||
],
|
||||
kinks = [
|
||||
// 0 = No, 1 = Maybe, 2 = Yes, 3 = Love
|
||||
{ name: 'Absorption', rating: 0 },
|
||||
{ name: 'Anal', rating: 3, receive: true, give: true },
|
||||
{ name: 'Auto-Fellatio', rating: 2 },
|
||||
|
|
@ -138,11 +115,12 @@ const firstName = 'Sebin',
|
|||
{ name: 'Growth', rating: 3, receive: true },
|
||||
{ name: 'Handjobs', rating: 2, receive: true, give: true },
|
||||
{ name: 'Hotdogging', rating: 2, give: true },
|
||||
{ name: 'Hyper', rating: 3 },
|
||||
{ name: 'Kissing', rating: 2, receive: true, give: true },
|
||||
{ name: 'Macro', rating: 3 },
|
||||
{ name: 'Milking', rating: 2 },
|
||||
{ name: 'Muscle Growth', rating: 3, receive: true, give: true },
|
||||
{ name: 'Muscle Worship', rating: 2, receive: true, give: true },
|
||||
{ name: 'Muscle Worship', rating: 3, receive: true, give: true },
|
||||
{ name: 'Nipple Play', rating: 2, receive: true, give: true },
|
||||
{ name: 'Oral', rating: 3, receive: true, give: true },
|
||||
{ name: 'Rough', rating: 2, receive: true, give: true },
|
||||
|
|
@ -158,142 +136,35 @@ const firstName = 'Sebin',
|
|||
{ name: 'Vore', rating: 0 }
|
||||
];
|
||||
|
||||
const getClientLocale = () => {
|
||||
return navigator.languages.length > 0 ? navigator.languages[0] : 'en-US';
|
||||
};
|
||||
|
||||
const getAge = (dateOfBirth) => {
|
||||
const today = new Date();
|
||||
|
||||
const thisYear = today.getFullYear();
|
||||
const thisMonth = today.getMonth();
|
||||
const thisDay = today.getDate();
|
||||
|
||||
const dobYear = dateOfBirth.getFullYear();
|
||||
const dobMonth = dateOfBirth.getMonth();
|
||||
const dobDay = dateOfBirth.getDate();
|
||||
|
||||
let age = thisYear - dobYear;
|
||||
|
||||
if (thisMonth < dobMonth) age--;
|
||||
if (thisMonth === dobMonth && thisDay < dobDay) age--;
|
||||
|
||||
return age;
|
||||
};
|
||||
|
||||
const toImperial = (cm) => {
|
||||
const realFeet = (cm * 0.3937) / 12;
|
||||
const feet = Math.floor(realFeet);
|
||||
const inches = Math.round((realFeet - feet) * 12);
|
||||
|
||||
return `${feet}'${inches}"`;
|
||||
};
|
||||
|
||||
const toInch = (cm) => {
|
||||
return `${Math.round(cm / 2.45)} in`;
|
||||
};
|
||||
|
||||
const toLbs = (kg) => {
|
||||
const nearExact = kg / 0.45359237;
|
||||
const lbs = Math.floor(nearExact);
|
||||
|
||||
return lbs;
|
||||
};
|
||||
|
||||
const toFahrenheit = (celsius) => {
|
||||
return celsius * 1.8 + 32;
|
||||
};
|
||||
|
||||
const dateFormat = new Intl.DateTimeFormat(getClientLocale(), {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: '2-digit'
|
||||
});
|
||||
|
||||
const getFullName = () => `${firstName} ${middleName} ${lastName}`;
|
||||
const getDateOfBirth = () => `${dateFormat.format(dateOfBirth)} (${getAge(dateOfBirth)})`;
|
||||
const getHeight = () => `${height} cm (${toImperial(height)})`;
|
||||
const getWeight = () => `${weight} kg (${toLbs(weight)} lbs)`;
|
||||
const getTailLength = () => `${tailLength / 100} m (${toImperial(tailLength)})`;
|
||||
const getWingspan = () => `${wingspan / 100} m (${toImperial(wingspan)})`;
|
||||
|
||||
const getTraits = (type) => {
|
||||
switch (type) {
|
||||
case 'general':
|
||||
return [
|
||||
{ icon: 'ruler', type: 'Tail Length', text: getTailLength() },
|
||||
{ icon: 'shoe-prints', type: 'Walk', text: 'plantigrade' },
|
||||
{ icon: 'info', type: 'Claws', text: 'sharp, hands & feet' },
|
||||
{ icon: 'info', type: 'Nipples', text: 'yes' }
|
||||
];
|
||||
|
||||
case 'hobbies':
|
||||
return hobbies;
|
||||
case 'anatomy':
|
||||
return anatomy;
|
||||
case 'wings':
|
||||
return [
|
||||
{ icon: 'ruler', type: 'Wingspan', text: getWingspan() },
|
||||
{ icon: 'feather', type: 'Arms', text: 2 },
|
||||
{ icon: 'feather', type: 'Fingers', text: 3 },
|
||||
{ icon: 'star', type: 'Special Features', text: 'talon on top' }
|
||||
];
|
||||
|
||||
return wings;
|
||||
case 'head':
|
||||
return [
|
||||
{ icon: 'eye', type: 'Pupils', text: 'round' },
|
||||
{ icon: 'eye', type: 'Eyebrows', text: 'yellow spikes' },
|
||||
{ icon: 'info', type: 'Cheeks', text: 'yellow spikes' },
|
||||
{ icon: 'dragon', type: 'Horns', text: 'curved' },
|
||||
{ icon: 'info', type: 'Hair', text: 'mid-long, mullet' },
|
||||
{ icon: 'ear-listen', type: 'Ears', text: 'long, pointy, movable' },
|
||||
{ icon: 'tooth', type: 'Teeth', text: 'sharp fangs' },
|
||||
{ icon: 'face-grin-tongue', type: 'Tongue', text: 'pointy tip' }
|
||||
];
|
||||
|
||||
return head;
|
||||
case 'muscle':
|
||||
return [
|
||||
{ icon: 'dumbbell', type: 'Build', text: 'muscular' },
|
||||
{ icon: 'dumbbell', type: 'Pecs', text: 'big' },
|
||||
{ icon: 'dumbbell', type: 'abs', text: 'defined' }
|
||||
];
|
||||
|
||||
return muscle;
|
||||
case 'naughty':
|
||||
return [
|
||||
{ icon: 'ruler', type: 'Length', text: `${penis.size} cm (${toInch(penis.size)})` },
|
||||
{ icon: 'ruler', type: 'Girth', text: `${penis.girth} cm (${toInch(penis.girth)})` },
|
||||
{ icon: 'shapes', type: 'Shape', text: penis.shape },
|
||||
{ icon: 'maximize', type: 'Type', text: penis.type },
|
||||
{ icon: 'star', type: 'Special Features', text: penis.special }
|
||||
];
|
||||
|
||||
return naughty;
|
||||
default:
|
||||
return [
|
||||
{ icon: 'cake-candles', type: 'Date of Birth', text: getDateOfBirth() },
|
||||
{ icon: 'mars', type: 'Sex/Gender', text: `${gender} (${pronouns})` },
|
||||
{ icon: 'ruler', type: 'Height', text: getHeight() },
|
||||
{ icon: 'weight-hanging', type: 'Weight', text: getWeight() }
|
||||
];
|
||||
return profile;
|
||||
}
|
||||
};
|
||||
|
||||
const getColors = () => [
|
||||
{ name: 'Scales', value: colors.scalesPrimary },
|
||||
{ name: 'Chest, Membranes, Facial Spikes', value: colors.scalesSecondary },
|
||||
{ name: 'Hair', value: colors.hairPrimary },
|
||||
{ name: 'Eyes', value: colors.eyes },
|
||||
{ name: 'Horns, Claws, Nipples', value: colors.horns },
|
||||
{ name: 'Tail Spikes', value: colors.tailspikes }
|
||||
];
|
||||
|
||||
export default {
|
||||
firstName,
|
||||
fullName,
|
||||
species,
|
||||
gender,
|
||||
pronouns,
|
||||
orientation,
|
||||
position,
|
||||
colors,
|
||||
kinks,
|
||||
description,
|
||||
attacks,
|
||||
overdriveAttacks,
|
||||
getFullName,
|
||||
getTraits,
|
||||
getColors
|
||||
getTraits
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,72 @@
|
|||
{
|
||||
"layout": "character.webc"
|
||||
"layout": "character.webc",
|
||||
"galleryMuscle": [
|
||||
{
|
||||
"alt": "Sebin looking aloof (but chill)",
|
||||
"artist": "Usurp",
|
||||
"href": "https://bsky.app/profile/usurpthem.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin getting ready to lift",
|
||||
"artist": "Ziva",
|
||||
"href": "https://bsky.app/profile/zivamonstr.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin after a heavy sesh",
|
||||
"artist": "Rei",
|
||||
"href": "https://bsky.app/profile/purpledragonrei.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin bringing out the big guns",
|
||||
"artist": "tandragonsynth",
|
||||
"href": "https://www.furaffinity.net/user/tandragonsynth"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin flexing",
|
||||
"artist": "Darknaig",
|
||||
"href": "https://bsky.app/profile/darknaig.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin showing off the goods",
|
||||
"artist": "CronoLM",
|
||||
"href": "https://bsky.app/profile/cronolm.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin soaping up",
|
||||
"artist": "(o)reo",
|
||||
"href": "https://bsky.app/profile/oreowoof.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin at the beach",
|
||||
"artist": "WolfieCanem",
|
||||
"href": "https://bsky.app/profile/wolfiecanem.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin flexing",
|
||||
"artist": "sabertoofs",
|
||||
"href": "https://bsky.app/profile/sabertoofs.bsky.social"
|
||||
}
|
||||
],
|
||||
"galleryClothing": [
|
||||
{
|
||||
"alt": "Sebin's casual outfit",
|
||||
"artist": "coffeerelated",
|
||||
"href": "https://bsky.app/profile/sulyyasprings.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin's cold weather outfit",
|
||||
"artist": "Lara Belém",
|
||||
"href": "https://bsky.app/profile/la-scarabie.bsky.social"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin's workout attire",
|
||||
"artist": "Atlas",
|
||||
"href": "https://twitter.com/turquoize_art"
|
||||
},
|
||||
{
|
||||
"alt": "Sebin in his favorite boxers",
|
||||
"artist": "Fern",
|
||||
"href": "https://bsky.app/profile/thenamelesshare.bsky.social"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ eleventyNavigation:
|
|||
:@nsfw="true"
|
||||
></ref-img>
|
||||
|
||||
<colors :@colors="$data.getColors()"></colors>
|
||||
<colors :@colors="$data.colors"></colors>
|
||||
|
||||
Viktor is a bipedal plantigrade Ankylosaurus. His skin is mostly bicolored, with several shades of brown.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { getDateOfBirth, getFullName, getHeight, getWeight } from '../includes/util.js';
|
||||
|
||||
const firstName = 'Viktor',
|
||||
lastName = 'Kraastav',
|
||||
fullName = getFullName(firstName, lastName),
|
||||
species = 'Ankylosaurus',
|
||||
dateOfBirth = new Date('1987-12-08'),
|
||||
gender = 'male',
|
||||
|
|
@ -8,150 +11,47 @@ const firstName = 'Viktor',
|
|||
role = 'bottom',
|
||||
height = 227, // cm
|
||||
weight = 175, // kg
|
||||
color = {
|
||||
front: '#e7c7b1',
|
||||
limbs: '#493428',
|
||||
back: '#422322',
|
||||
spine: '#341c1c',
|
||||
tissue: '#6bb9db',
|
||||
spikes: '#f8ebdd',
|
||||
eyesPrimary: '#a7eef1',
|
||||
eyesSecondary: '#6dabd1'
|
||||
},
|
||||
description = '',
|
||||
jobs = [
|
||||
{
|
||||
title: 'Bartender',
|
||||
icon: 'whiskey',
|
||||
desc: "Viktor's professional career began as a bartender at a pub in his hometown. There he often doubled as a bouncer when a few guests got too drunk and started making a fuss. A defining moment of that job was when someone climbed over the counter and threatened him with a broken bottle. Wrestled to the ground and with a broken bottle in front of his face, he had to make a split-second decision. With a powerful swing of his tail bone, he knocked the attacker down. This experience taught him the importance of effectively defending himself against unpleasant fellows and to eliminate threats before they get close to him ever again."
|
||||
},
|
||||
{
|
||||
title: 'Lumberjack',
|
||||
icon: 'tree',
|
||||
desc: 'After leaving his hometown, Viktor started working as a lumberjack. The club at the end of his tail came very much in handy as a counterweight for each swing of his axe, allowing him to strike efficiently and powerfully, felling even the largest trees with relative ease. His naturally tough scales protected him from splinters from the felled wood. The long-lasting hard physical work toughened his body over the years. Before taking the cut logs to the sawmill, Viktor always took a break to rest in the peace and quiet of the forest. Although he enjoyed the seclusion of the country life for a while, he was longing for the sociability of city life again.'
|
||||
},
|
||||
{
|
||||
title: 'Car Mechanic',
|
||||
icon: 'car',
|
||||
desc: 'Moving into a suburban town, Viktor applied at an auto repair shop, where he learned the ins and outs of fixing cars. He became really good at it and enjoyed breathing new mechanical life into broken down vehicles. However, as time went on, the repair shop faced financial troubles, as it became increasingly difficult to come by spare parts as auto makers would only deal them to certified repair partners and certifications were prohibitively expensive. Viktor had to watch business slowly deteriorate, as skilled coworkers kept getting laid off, until the repair shop closed down for good.'
|
||||
},
|
||||
{
|
||||
title: 'Construction Worker',
|
||||
icon: 'helmet-safety',
|
||||
desc: 'Having taken a liking in physically demanding work, Viktor took on a job as a construction worker. Hard hat perched atop his head and belt tool slung around his waist, he was always ready to lend a hand (or tail if walls or boulders needed a good teardown). Since he had more than enough strength training from his previous jobs, he was often assigned carrying jobs to clear the site and haul building materials. After work was done, Viktor enjoyed the company of his colleagues over an after-work beer until late in the evenings. On one of these evenings, he got a little reckless with a colleague under the veil of the night and both were caught in the act of fooling around with each other on the construction site. In the following weeks, the colleagues kept their distance from Viktor and the evenings together also dissolved very quickly when he joined them. The continued ostracization ultimately prompted him to look for something new.'
|
||||
},
|
||||
{
|
||||
title: 'Welder',
|
||||
icon: 'industry',
|
||||
desc: 'In his job as a welder, Viktor spent his days working shifts in a workshop. In addition to special tools and plasma welders, he also used his powerful tail club to hammer metal parts into shape. He acquired a wide variety of welding techniques to join or repair metal structures. He worked with a wide variety of alloys such as steel, aluminum and titanium. Viktor showed extreme skill in his work with great precision and attention to detail. However, this dedication was a thorn in the side of a jealous colleague who saw Viktor as a rival and schemed against him, sabotaging his work, which ultimately ended in his termination after a customer sued the welding shop for botching the job. Viktor never found out who the culprit was, and the loss of that job still hangs over him.'
|
||||
},
|
||||
{
|
||||
title: 'Delivery Driver',
|
||||
icon: 'truck',
|
||||
desc: "When Viktor was strapped for cash, he took on a job in the gig economy as a driver delivering packages for a large online delivery service. His previous physically demanding jobs allowed him to haul even bulky deliveries to their destination with relative ease. If the shipping center managers hadn't been breathing down his neck constantly, he might have held this job even longer. But after one of the managers tried to show him up in front of the whole team, he snapped and broke their leg with his tail club. Of course, he didn't have to report for duty the next day."
|
||||
},
|
||||
{
|
||||
title: 'Docks Werehouse Worker',
|
||||
icon: 'boxes-stacked',
|
||||
desc: "Currently Viktor works at the docks in the port town he moved to. His main responsibilities include loading and unloading cargo from ships and transporting it to and from warehousing. The hustle and bustle of the port sometimes gets on his nerves. Especially when the crew of docking ships come ashore again after a long time and make it clear that they don't have much contact with \"landlubbers\". Viktor doesn't get particularly impressed by this and foul mouths them right back if he gets the impression they're looking for trouble."
|
||||
}
|
||||
colors = [
|
||||
{ name: 'Front', value: '#e7c7b1' },
|
||||
{ name: 'Arms, legs', value: '#493428' },
|
||||
{ name: 'Back Main', value: '#422322' },
|
||||
{ name: 'Back Spine', value: '#341c1c' },
|
||||
{ name: 'Freckles, tissue', value: '#6bb9db' },
|
||||
{ name: 'Spikes, tail club', value: '#f8ebdd' },
|
||||
{ name: 'Eyes primary', value: '#a7eef1' },
|
||||
{ name: 'Eyes secondary', value: '#6dabd1' }
|
||||
],
|
||||
description = 'Hardened-up, but far from fossilized!',
|
||||
naughty = [
|
||||
{ icon: 'fa6-solid:heart', type: 'Orientation', text: orientation },
|
||||
{ icon: 'fa6-solid:arrows-up-down', type: 'Role', text: role }
|
||||
],
|
||||
anatomy = [
|
||||
{ icon: 'fa6-solid:cake-candles', type: 'Date of Birth', text: getDateOfBirth(dateOfBirth) },
|
||||
{ icon: 'fa6-solid:mars', type: 'Sex/Gender', text: `${gender} (${pronouns})` },
|
||||
{ icon: 'fa6-solid:ruler', type: 'Height', text: getHeight(height) },
|
||||
{ icon: 'fa6-solid:weight-hanging', type: 'Weight', text: getWeight(weight) }
|
||||
];
|
||||
|
||||
const getClientLocale = () => {
|
||||
return navigator.languages.length > 0 ? navigator.languages[0] : 'en-US';
|
||||
};
|
||||
|
||||
const getAge = (dateOfBirth) => {
|
||||
const today = new Date();
|
||||
|
||||
const thisYear = today.getFullYear();
|
||||
const thisMonth = today.getMonth();
|
||||
const thisDay = today.getDate();
|
||||
|
||||
const dobYear = dateOfBirth.getFullYear();
|
||||
const dobMonth = dateOfBirth.getMonth();
|
||||
const dobDay = dateOfBirth.getDate();
|
||||
|
||||
let age = thisYear - dobYear;
|
||||
|
||||
if (thisMonth < dobMonth) age--;
|
||||
if (thisMonth === dobMonth && thisDay < dobDay) age--;
|
||||
|
||||
return age;
|
||||
};
|
||||
|
||||
const toImperial = (cm) => {
|
||||
const realFeet = (cm * 0.3937) / 12;
|
||||
const feet = Math.floor(realFeet);
|
||||
const inches = Math.round((realFeet - feet) * 12);
|
||||
|
||||
return `${feet}'${inches}"`;
|
||||
};
|
||||
|
||||
const toInch = (cm) => {
|
||||
return `${Math.round(cm / 2.45)} in`;
|
||||
};
|
||||
|
||||
const toLbs = (kg) => {
|
||||
const nearExact = kg / 0.45359237;
|
||||
const lbs = Math.floor(nearExact);
|
||||
|
||||
return lbs;
|
||||
};
|
||||
|
||||
const toFahrenheit = (celsius) => {
|
||||
return celsius * 1.8 + 32;
|
||||
};
|
||||
|
||||
const dateFormat = new Intl.DateTimeFormat(getClientLocale(), {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: '2-digit'
|
||||
});
|
||||
|
||||
const getFullName = () => `${firstName} ${lastName}`;
|
||||
const getDateOfBirth = () => `${dateFormat.format(dateOfBirth)} (${getAge(dateOfBirth)})`;
|
||||
const getHeight = () => `${height} cm (${toImperial(height)})`;
|
||||
const getWeight = () => `${weight} kg (${toLbs(weight)} lbs)`;
|
||||
|
||||
const getTraits = (type) => {
|
||||
switch (type) {
|
||||
case 'naughty':
|
||||
return [
|
||||
{ icon: 'heart', type: 'Orientation', text: orientation },
|
||||
{ icon: 'arrows-up-down', type: 'Role', text: role }
|
||||
];
|
||||
return naughty;
|
||||
|
||||
default:
|
||||
return [
|
||||
{ icon: 'cake-candles', type: 'Date of Birth', text: getDateOfBirth() },
|
||||
{ icon: 'mars', type: 'Sex/Gender', text: `${gender} (${pronouns})` },
|
||||
{ icon: 'ruler', type: 'Height', text: getHeight() },
|
||||
{ icon: 'weight-hanging', type: 'Weight', text: getWeight() }
|
||||
];
|
||||
return anatomy;
|
||||
}
|
||||
};
|
||||
|
||||
const getColors = () => [
|
||||
{ name: 'Front', value: color.front },
|
||||
{ name: 'Arms, legs', value: color.limbs },
|
||||
{ name: 'Back Main', value: color.back },
|
||||
{ name: 'Back Spine', value: color.spine },
|
||||
{ name: 'Highlight scales, tissue', value: color.tissue },
|
||||
{ name: 'Spikes, tail club', value: color.spikes },
|
||||
{ name: 'Eyes primary', value: color.eyesPrimary },
|
||||
{ name: 'Eyes secondary', value: color.eyesSecondary }
|
||||
];
|
||||
|
||||
export default {
|
||||
firstName,
|
||||
fullName,
|
||||
species,
|
||||
gender,
|
||||
pronouns,
|
||||
colors,
|
||||
orientation,
|
||||
role,
|
||||
jobs,
|
||||
getFullName,
|
||||
getTraits,
|
||||
getColors
|
||||
description,
|
||||
getTraits
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,40 @@
|
|||
{
|
||||
"layout": "character.webc"
|
||||
"layout": "character.webc",
|
||||
"jobs": [
|
||||
{
|
||||
"title": "Bartender",
|
||||
"icon": "fa6-solid:whiskey-glass",
|
||||
"desc": "Viktor's professional career began as a bartender at a pub in his hometown. There he often doubled as a bouncer when a few guests got too drunk and started making a fuss. A defining moment of that job was when someone climbed over the counter and threatened him with a broken bottle. Wrestled to the ground and with a broken bottle in front of his face, he had to make a split-second decision. With a powerful swing of his tail bone, he knocked the attacker down. This experience taught him the importance of effectively defending himself against unpleasant fellows and to eliminate threats before they get close to him ever again."
|
||||
},
|
||||
{
|
||||
"title": "Lumberjack",
|
||||
"icon": "fa6-solid:tree",
|
||||
"desc": "After leaving his hometown, Viktor started working as a lumberjack. The club at the end of his tail came very much in handy as a counterweight for each swing of his axe, allowing him to strike efficiently and powerfully, felling even the largest trees with relative ease. His naturally tough scales protected him from splinters from the felled wood. The long-lasting hard physical work toughened his body over the years. Before taking the cut logs to the sawmill, Viktor always took a break to rest in the peace and quiet of the forest. Although he enjoyed the seclusion of the country life for a while, he was longing for the sociability of city life again."
|
||||
},
|
||||
{
|
||||
"title": "Car Mechanic",
|
||||
"icon": "fa6-solid:car",
|
||||
"desc": "Moving into a suburban town, Viktor applied at an auto repair shop, where he learned the ins and outs of fixing cars. He became really good at it and enjoyed breathing new mechanical life into broken down vehicles. However, as time went on, the repair shop faced financial troubles, as it became increasingly difficult to come by spare parts as auto makers would only deal them to certified repair partners and certifications were prohibitively expensive. Viktor had to watch business slowly deteriorate, as skilled coworkers kept getting laid off, until the repair shop closed down for good."
|
||||
},
|
||||
{
|
||||
"title": "Construction Worker",
|
||||
"icon": "fa6-solid:helmet-safety",
|
||||
"desc": "Having taken a liking in physically demanding work, Viktor took on a job as a construction worker. Hard hat perched atop his head and belt tool slung around his waist, he was always ready to lend a hand (or tail if walls or boulders needed a good teardown). Since he had more than enough strength training from his previous jobs, he was often assigned carrying jobs to clear the site and haul building materials. After work was done, Viktor enjoyed the company of his colleagues over an after-work beer until late in the evenings. On one of these evenings, he got a little reckless with a colleague under the veil of the night and both were caught in the act of fooling around with each other on the construction site. In the following weeks, the colleagues kept their distance from Viktor and the evenings together also dissolved very quickly when he joined them. The continued ostracization ultimately prompted him to look for something new."
|
||||
},
|
||||
{
|
||||
"title": "Welder",
|
||||
"icon": "fa6-solid:industry",
|
||||
"desc": "In his job as a welder, Viktor spent his days working shifts in a workshop. In addition to special tools and plasma welders, he also used his powerful tail club to hammer metal parts into shape. He acquired a wide variety of welding techniques to join or repair metal structures. He worked with a wide variety of alloys such as steel, aluminum and titanium. Viktor showed extreme skill in his work with great precision and attention to detail. However, this dedication was a thorn in the side of a jealous colleague who saw Viktor as a rival and schemed against him, sabotaging his work, which ultimately ended in his termination after a customer sued the welding shop for botching the job. Viktor never found out who the culprit was, and the loss of that job still hangs over him."
|
||||
},
|
||||
{
|
||||
"title": "Delivery Driver",
|
||||
"icon": "fa6-solid:truck",
|
||||
"desc": "When Viktor was strapped for cash, he took on a job in the gig economy as a driver delivering packages for a large online delivery service. His previous physically demanding jobs allowed him to haul even bulky deliveries to their destination with relative ease. If the shipping center managers hadn't been breathing down his neck constantly, he might have held this job even longer. But after one of the managers tried to show him up in front of the whole team, he snapped and broke their leg with his tail club. Of course, he didn't have to report for duty the next day."
|
||||
},
|
||||
{
|
||||
"title": "Docks Werehouse Worker",
|
||||
"icon": "fa6-solid:boxes-stacked",
|
||||
"desc": "Currently Viktor works at the docks in the port town he moved to. His main responsibilities include loading and unloading cargo from ships and transporting it to and from warehousing. The hustle and bustle of the port sometimes gets on his nerves. Especially when the crew of docking ships come ashore again after a long time and make it clear that they don't have much contact with \"landlubbers\". Viktor doesn't get particularly impressed by this and foul mouths them right back if he gets the impression they're looking for trouble."
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue