├── static
    ├── ads.txt
    ├── robots.txt
    ├── favicon.png
    ├── coffeefont.ttf
    ├── logo-192.png
    ├── logo-512.png
    ├── Screenshot1.png
    ├── Screenshot2.png
    ├── Screenshot3.png
    ├── social
    │   ├── test.png
    │   └── test.svg
    ├── icons
    │   ├── mstile-144x144.png
    │   ├── mstile-150x150.png
    │   ├── mstile-310x150.png
    │   ├── mstile-310x310.png
    │   └── mstile-70x70.png
    ├── .well-known
    │   └── brave-rewards-verification.txt
    ├── manifest.json
    ├── pickr-1725151604.min.css
    └── global-1725151604.min.css
├── src
    ├── client.js
    ├── routes
    │   ├── stores.js
    │   ├── _layout.svelte
    │   ├── [slug].json.js
    │   ├── _error.svelte
    │   ├── index.json.js
    │   ├── privacy-policy.svelte
    │   ├── changelog.svelte
    │   ├── api.svelte
    │   ├── _constants.js
    │   ├── _lang.js
    │   └── downloads.svelte
    ├── server.js
    ├── components
    │   ├── ShinyButton.svelte
    │   ├── StickyFooter.svelte
    │   ├── Logo.svelte
    │   ├── LangSelect.svelte
    │   ├── Footer.svelte
    │   ├── Nav.svelte
    │   └── SimpleAutocomplete.svelte
    ├── service-worker.js
    ├── template.html
    └── css
    │   ├── pickr.css
    │   └── global.css
├── .gitignore
├── LICENSE.md
├── README.md
├── rollup.config.js
├── package.json
└── nodejs
    └── htmlGenerator.mjs


/static/ads.txt:
--------------------------------------------------------------------------------
1 | google.com, pub-2799761399763923, DIRECT, f08c47fec0942fa0


--------------------------------------------------------------------------------
/static/robots.txt:
--------------------------------------------------------------------------------
1 | Sitemap: https://pattern.monster/sitemap.xml
2 | User-agent: * 
3 | Crawl-Delay: 20


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/static/coffeefont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/coffeefont.ttf


--------------------------------------------------------------------------------
/static/logo-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/logo-192.png


--------------------------------------------------------------------------------
/static/logo-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/logo-512.png


--------------------------------------------------------------------------------
/static/Screenshot1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/Screenshot1.png


--------------------------------------------------------------------------------
/static/Screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/Screenshot2.png


--------------------------------------------------------------------------------
/static/Screenshot3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/Screenshot3.png


--------------------------------------------------------------------------------
/static/social/test.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/social/test.png


--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
1 | import * as sapper from '@sapper/app';
2 | 
3 | sapper.start({
4 | 	target: document.querySelector('#sapper')
5 | });


--------------------------------------------------------------------------------
/static/icons/mstile-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/icons/mstile-144x144.png


--------------------------------------------------------------------------------
/static/icons/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/icons/mstile-150x150.png


--------------------------------------------------------------------------------
/static/icons/mstile-310x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/icons/mstile-310x150.png


--------------------------------------------------------------------------------
/static/icons/mstile-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/icons/mstile-310x310.png


--------------------------------------------------------------------------------
/static/icons/mstile-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catchspider2002/svelte-svg-patterns/HEAD/static/icons/mstile-70x70.png


--------------------------------------------------------------------------------
/src/routes/stores.js:
--------------------------------------------------------------------------------
1 | import { writable } from "svelte/store";
2 | 
3 | export const themeStore = writable("light");
4 | export const langStore = writable("en");


--------------------------------------------------------------------------------
/static/.well-known/brave-rewards-verification.txt:
--------------------------------------------------------------------------------
1 | This is a Brave Rewards publisher verification file.
2 | 
3 | Domain: pattern.monster
4 | Token: 7fe51d23d94af1ce16b38b6c624cd36bb8f5b9adce319cd70e4c8f26b365aeb1
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | /node_modules/
 3 | /src/node_modules/@sapper/
 4 | yarn-error.log
 5 | /cypress/screenshots/
 6 | /__sapper__/
 7 | Samples.md
 8 | createScreenshot.js
 9 | create*
10 | airtable.js
11 | /static/archive
12 | /static/social
13 | /static/screenshots
14 | redbubble
15 | SVGtoPNG.js
16 | test-worker/
17 | *.pattern.monster/
18 | src/css/*-*
19 | *.env


--------------------------------------------------------------------------------
/src/routes/_layout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Nav from "../components/Nav.svelte";
 3 | 
 4 |   // import { onMount } from "svelte";
 5 |   export let segment;
 6 | </script>
 7 | 
 8 | <!-- <Nav {segment} on:theme={sayHello} /> -->
 9 | <Nav {segment} />
10 | 
11 | <main>
12 |   <slot />
13 | </main>
14 | 
15 | <style>
16 |   main {
17 |     position: relative;
18 |     background-color: var(--main-bg-color);
19 |     margin: 0 auto;
20 |     box-sizing: border-box;
21 |     display: grid;
22 |     min-height: calc(100vh - 3.2em);
23 |     grid-template-rows: 1fr auto;
24 |   }
25 | </style>
26 | 


--------------------------------------------------------------------------------
/static/social/test.svg:
--------------------------------------------------------------------------------
1 | <svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='20' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='black'/><g transform='translate(0,0)' stroke-width='1' stroke='none' fill='white'><path d='M10-20l10 10V0L10-10zM10 0l10 10v10L10 10zM10 0L0 10v10l10-10zM10 20L0 30v10l10-10zM10-20L0-10V0l10-10zM10 20l10 10v10L10 30zM30-10L40 0v10L30 0zM30 10l10 10v10L30 20zM30 10L20 20v10l10-10zM30-10L20 0v10L30 0z'/></g></pattern></defs><rect width='100%' height='100%' fill='url(#a)'/></svg>


--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
 1 | require("dotenv").config();
 2 | 
 3 | import sirv from "sirv";
 4 | import polka from "polka";
 5 | import compression from "compression";
 6 | import * as sapper from "@sapper/server";
 7 | 
 8 | const { PORT, NODE_ENV, SUPABASE_URL, SUPABASE_KEY } = process.env;
 9 | const dev = NODE_ENV === "development";
10 | 
11 | polka() // You can also use Express
12 |   .use(
13 |     compression({ threshold: 0 }),
14 |     sirv("static", { dev }),
15 |     sapper.middleware({
16 |       session: () => ({
17 |         SUPABASE_URL,
18 |         SUPABASE_KEY,
19 |       }),
20 |     })
21 |   )
22 |   .listen(PORT, (err) => {
23 |     if (err) console.log("error", err);
24 |   });
25 | 


--------------------------------------------------------------------------------
/src/routes/[slug].json.js:
--------------------------------------------------------------------------------
 1 | import patterns from './_index.js';
 2 | 
 3 | const lookup = new Map();
 4 | patterns.forEach(post => {
 5 | 	lookup.set(post.slug, JSON.stringify(post));
 6 | });
 7 | 
 8 | export function get(req, res, next) {
 9 | 	// the `slug` parameter is available because
10 | 	// this file is called [slug].json.js
11 | 	const { slug } = req.params;
12 | 
13 | 	if (lookup.has(slug)) {
14 | 		res.writeHead(200, {
15 | 			'Content-Type': 'application/json'
16 | 		});
17 | 
18 | 		res.end(lookup.get(slug));
19 | 	} else {
20 | 		res.writeHead(404, {
21 | 			'Content-Type': 'application/json'
22 | 		});
23 | 
24 | 		res.end(JSON.stringify({
25 | 			message: `Not found`
26 | 		}));
27 | 	}
28 | }
29 | 


--------------------------------------------------------------------------------
/src/routes/_error.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let status;
 3 |   export let error;
 4 | 
 5 |   const dev = process.env.NODE_ENV === "development";
 6 | </script>
 7 | 
 8 | <style>
 9 |   h1,
10 |   p {
11 |     margin: 0 auto;
12 |   }
13 | 
14 |   h1 {
15 |     font-size: 4em;
16 |     font-weight: 700;
17 |     margin: 0 0 0.5em 0;
18 |   }
19 | 
20 |   p {
21 |     margin: 1em auto;
22 |   }
23 | 
24 |   @media (max-width: 480px) {
25 |     h1 {
26 |       font-size: 2.8em;
27 |     }
28 |   }
29 | </style>
30 | 
31 | <svelte:head>
32 |   <title>{status}</title>
33 | </svelte:head>
34 | 
35 | <h1>{status}</h1>
36 | 
37 | <p>{error.message}</p>
38 | 
39 | {#if dev && error.stack}
40 |   <pre>{error.stack}</pre>
41 | {/if}
42 | 


--------------------------------------------------------------------------------
/src/routes/index.json.js:
--------------------------------------------------------------------------------
 1 | import index from "./_index.js";
 2 | 
 3 | const contents = JSON.stringify(
 4 |   index
 5 |     // .sort(function (x, y) {
 6 |     //   let a = x.title.toUpperCase(),
 7 |     //     b = y.title.toUpperCase();
 8 |     //   return a == b ? 0 : a > b ? 1 : -1;
 9 |     // })
10 |     .map((pattern) => {
11 |       return {
12 |         title: pattern.title,
13 |         slug: pattern.slug,
14 |         width: pattern.width,
15 |         height: pattern.height,
16 |         colors: pattern.colors,
17 |         path: pattern.path,
18 |         mode: pattern.mode,
19 |         tags: pattern.tags,
20 |         creationDate: pattern.creationDate,
21 |       };
22 |     })
23 | );
24 | 
25 | export function get(req, res) {
26 |   res.writeHead(200, {
27 |     "Content-Type": "application/json",
28 |   });
29 | 
30 |   res.end(contents);
31 | }
32 | 


--------------------------------------------------------------------------------
/static/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "background_color": "#1a202c",
 3 |   "theme_color": "#44337a",
 4 |   "name": "Pattern Monster",
 5 |   "short_name": "Pattern Monster",
 6 |   "display": "minimal-ui",
 7 |   "start_url": "/",
 8 |   "categories": ["utilities"],
 9 |   "icons": [
10 |     {
11 |       "src": "logo-192.png",
12 |       "sizes": "192x192",
13 |       "type": "image/png"
14 |     },
15 |     {
16 |       "src": "logo-512.png",
17 |       "sizes": "512x512",
18 |       "type": "image/png"
19 |     }
20 |   ],
21 |   "screenshots": [
22 |     {
23 |       "src": "Screenshot1.png",
24 |       "sizes": "2400x1800",
25 |       "type": "image/png"
26 |     },
27 |     {
28 |       "src": "Screenshot2.png",
29 |       "sizes": "2400x1800",
30 |       "type": "image/png"
31 |     },
32 |     {
33 |       "src": "Screenshot3.png",
34 |       "sizes": "2400x1800",
35 |       "type": "image/png"
36 |     }
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 - 2023 pattern.monster
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/src/components/ShinyButton.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import lang from "../routes/_lang.js";
 3 |   let strings = lang.strings;
 4 | </script>
 5 | 
 6 | <a
 7 |   href="https://pro.pattern.monster/pricing"
 8 |   target="_blank"
 9 |   title="Pattern Monster Pro"
10 |   class="shiny">{strings.upgradePro}</a
11 | >
12 | 
13 | <style>
14 |   .shiny {
15 |     display: grid;
16 |     place-content: center;
17 |     background: gold;
18 |     color: black;
19 |     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
20 |     background: linear-gradient(
21 |       -45deg,
22 |       gold 50%,
23 |       rgb(255, 249, 215) 60%,
24 |       gold 70%
25 |     );
26 |     background-size: 600% 100%;
27 |     animation: shine 20s infinite;
28 |     animation-delay: 0s;
29 |     animation-timing-function: linear;
30 |     padding: 0.5rem 0.8rem;
31 |     border-radius: 0.75rem;
32 |     overflow: hidden;
33 |     height: 2.6rem;
34 |     font-size: 0.9rem;
35 |     font-weight: 600;
36 |   }
37 | 
38 |   @keyframes shine {
39 |     0% {
40 |       background-position-x: 400%;
41 |     }
42 |     50% {
43 |       background-position-x: 0%;
44 |     }
45 |     100% {
46 |       background-position-x: -400%;
47 |     }
48 |   }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/routes/privacy-policy.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Footer from "../components/Footer.svelte";
 3 |   import lang from "./_lang.js";
 4 |   let strings = lang.strings;
 5 | 
 6 |   import Constants from "./_constants.js";
 7 |   let page = "privacy-policy";
 8 |   let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page);
 9 | </script>
10 | 
11 | <svelte:head>
12 |   <title>{title}</title>
13 |   <link rel="canonical" href={url} />
14 |   {#if versions}
15 |     {#each versions as version}
16 |       <link rel="alternate" href={version.website} hreflang={version.lang} />
17 |     {/each}
18 |   {/if}
19 |   <meta name="description" content={desc} />
20 |   <meta name="keywords" content={keywords} />
21 | 
22 |   <!-- Open Graph / Facebook -->
23 |   <meta property="og:url" content={url} />
24 |   <meta property="og:title" content={title} />
25 |   <meta property="og:description" content={desc} />
26 |   <meta property="og:image" content={image} />
27 | 
28 |   <!-- Twitter -->
29 |   <meta name="twitter:url" content={url} />
30 |   <meta name="twitter:title" content={title} />
31 |   <meta name="twitter:description" content={desc} />
32 |   <meta name="twitter:image" content={image} />
33 |   <meta name="twitter:image:src" content={image} />
34 |   <meta name="twitter:image:alt" content={title} />
35 | </svelte:head>
36 | 
37 | <div class="secondary-text-color pattern-bg p-8">
38 |   <h1 class="text-center mt-6 p-2 mb-2 font-semibold text-4xl uppercase">{strings.privacy}</h1>
39 |   <p class="text-center pt-2 pb-6">{strings.privacyFull}</p>
40 | </div>
41 | 
42 | <Footer />
43 | 


--------------------------------------------------------------------------------
/src/components/StickyFooter.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   let links = [
 3 |     {
 4 |       prefix:
 5 |         "Boost your profile picture on Tinder, LinkedIn, Twitter, Instagram or elsewhere with ",
 6 |       title: "photoAI.me",
 7 |       suffix: "",
 8 |       link: "https://app.photoai.me/?via=naveen-cs",
 9 |     },
10 |     // {
11 |     //   prefix: "Save money and use AI to redesign your interior with ",
12 |     //   title: "InteriorAI.com",
13 |     //   suffix: " from your laptop or phone",
14 |     //   link: "https://interiorai.com?via=naveen-cs",
15 |     // },
16 |     {
17 |       prefix:
18 |         "Professional business headshots, without a physical photo shoot - ",
19 |       title: "HeadshotPro.com",
20 |       suffix: "",
21 |       link: "https://www.headshotpro.com?via=naveen-cs",
22 |     },
23 |     {
24 |       prefix: "Chat with any PDF with ",
25 |       title: "PDF.ai",
26 |       suffix: " - ask questions, get summaries, find information, and more",
27 |       link: "https://pdf.ai?via=naveen-cs",
28 |     },
29 |     {
30 |       prefix: "Write 100 high quality tweets with ",
31 |       title: "TweetHunter.io",
32 |       suffix: " in less than 1 hour",
33 |       link: "https://tweethunter.io/?via=naveen-cs",
34 |     },
35 |     // https://www.opus.pro/
36 |     // https://www.cometly.com/
37 |     // https://www.uplisting.io/
38 |     // https://pallyy.com/
39 |   ];
40 | 
41 |   let link = links[Math.floor(Math.random() * links.length)];
42 | </script>
43 | 
44 | <div class="bottomSticky">
45 |   <div>
46 |     {link.prefix}
47 |     <a
48 |       href={link.link}
49 |       rel="noopener noreferrer"
50 |       target="_blank"
51 |       title={link.title}
52 |       >{link.title}
53 |     </a>
54 |     {link.suffix}
55 |   </div>
56 | </div>
57 | 


--------------------------------------------------------------------------------
/src/routes/changelog.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Footer from "../components/Footer.svelte";
 3 |   import lang from "./_lang.js";
 4 |   let strings = lang.strings;
 5 | 
 6 |   import Constants from "./_constants.js";
 7 |   import Values from "./_values.js";
 8 |   let page = "changelog";
 9 |   let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page);
10 | </script>
11 | 
12 | <svelte:head>
13 |   <title>{title}</title>
14 |   <link rel="canonical" href={url} />
15 |   {#if versions}
16 |     {#each versions as version}
17 |       <link rel="alternate" href={version.website} hreflang={version.lang} />
18 |     {/each}
19 |   {/if}
20 |   <meta name="description" content={desc} />
21 |   <meta name="keywords" content={keywords} />
22 | 
23 |   <!-- Open Graph / Facebook -->
24 |   <meta property="og:url" content={url} />
25 |   <meta property="og:title" content={title} />
26 |   <meta property="og:description" content={desc} />
27 |   <meta property="og:image" content={image} />
28 | 
29 |   <!-- Twitter -->
30 |   <meta name="twitter:url" content={url} />
31 |   <meta name="twitter:title" content={title} />
32 |   <meta name="twitter:description" content={desc} />
33 |   <meta name="twitter:image" content={image} />
34 |   <meta name="twitter:image:src" content={image} />
35 |   <meta name="twitter:image:alt" content={title} />
36 | </svelte:head>
37 | 
38 | <div class="secondary-text-color pattern-bg p-2">
39 |   <div class="container mx-auto">
40 |     <h1 class="text-center mt-12 p-2 mb-2 font-semibold text-4xl uppercase">{strings.changelog}</h1>
41 |     <div>
42 |       <ul id="logs">
43 |         {#each Values.changeLog as log}
44 |           <li class="versionHeader font-semibold gray-text list-none bg-none -mx-8 mb-4 mt-12">{log.date}</li>
45 |           {#each log.updates as logData}
46 |             <li class="px-4 mb-2 list-circle indent-0 leading-loose">{@html logData}</li>
47 |           {/each}
48 |         {/each}
49 |       </ul>
50 |     </div>
51 |   </div>
52 | </div>
53 | 
54 | <Footer />
55 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Pattern Monster - SVG Pattern Generator
 2 | 
 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/catchspider2002/svelte-svg-patterns)
 4 | [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 5 | ![GitHub last commit](https://img.shields.io/github/last-commit/catchspider2002/svelte-svg-patterns)
 6 | ![Website](https://img.shields.io/website?up_message=online&url=https%3A%2F%2Fpattern.monster%2F)
 7 | 
 8 | <div align="center">
 9 |   <img src="https://giguom.com/pattern.monster/images/pattern.monster.png" alt="pattern.monster" />
10 | </div>
11 | <br /><br />
12 |   
13 | Create seamless patterns in SVG to use as website backgrounds, header images, stationery design and package design
14 | 
15 | 320+ patterns available
16 | 
17 | ## Features:
18 | 
19 | ✔ Customize foreground and background colors
20 | 
21 | ✔ Modify stroke width for supported patterns
22 | 
23 | ✔ Change the angle to generate unique images
24 | 
25 | ✔ Copy CSS and SVG code directly to your clipboard for web projects
26 | 
27 | ✔ Download a tileable SVG or a high resolution seamless PNG image for print projects
28 | 
29 | ✔ Filter patterns by stroke / fill or by number of colors
30 | 
31 | ✔ Search for patterns
32 | 
33 | ✔ Sort patterns alphabetically or by date updated 
34 | 
35 | # License
36 | 
37 | MIT License
38 | 
39 | Copyright (c) 2020 - 2023 pattern.monster
40 | 
41 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
42 | 
43 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
44 | 
45 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import resolve from "@rollup/plugin-node-resolve";
 2 | import replace from "@rollup/plugin-replace";
 3 | import commonjs from "@rollup/plugin-commonjs";
 4 | import svelte from "rollup-plugin-svelte";
 5 | import { terser } from "rollup-plugin-terser";
 6 | import config from "sapper/config/rollup.js";
 7 | import pkg from "./package.json";
 8 | import json from '@rollup/plugin-json';
 9 | 
10 | const mode = process.env.NODE_ENV;
11 | const dev = mode === "development";
12 | const legacy = !!process.env.SAPPER_LEGACY_BUILD;
13 | 
14 | // const onwarn = (warning, onwarn) => (warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) || onwarn(warning);
15 | const onwarn = (warning, onwarn) =>
16 |   (warning.code === "MISSING_EXPORT" && /'preload'/.test(warning.message)) ||
17 |   (warning.code === "CIRCULAR_DEPENDENCY" && /[/\\]@sapper[/\\]/.test(warning.message)) ||
18 |   onwarn(warning);
19 | 
20 | export default {
21 |   client: {
22 |     input: config.client.input(),
23 |     output: config.client.output(),
24 |     plugins: [
25 |       replace({
26 |         "process.browser": true,
27 |         "process.env.NODE_ENV": JSON.stringify(mode),
28 |       }),
29 |       json(),
30 |       svelte({
31 |         dev,
32 |         hydratable: true,
33 |         emitCss: true,
34 |       }),
35 |       resolve({
36 |         browser: true,
37 |         dedupe: ["svelte"],
38 |       }),
39 |       commonjs(),
40 | 
41 |       !dev &&
42 |         terser({
43 |           module: true,
44 |         }),
45 |     ],
46 | 
47 |     preserveEntrySignatures: false,
48 |     onwarn,
49 |   },
50 | 
51 |   server: {
52 |     input: config.server.input(),
53 |     output: config.server.output(),
54 |     plugins: [
55 |       replace({
56 |         "process.browser": false,
57 |         "process.env.NODE_ENV": JSON.stringify(mode),
58 |       }),
59 |       svelte({
60 |         generate: "ssr",
61 |         dev,
62 |       }),
63 |       resolve({
64 |         dedupe: ["svelte"],
65 |       }),
66 |       commonjs(),
67 |     ],
68 |     external: Object.keys(pkg.dependencies).concat(require("module").builtinModules || Object.keys(process.binding("natives"))),
69 | 
70 |     preserveEntrySignatures: "strict",
71 |     onwarn,
72 |   },
73 | 
74 |   serviceworker: {
75 |     input: config.serviceworker.input(),
76 |     output: config.serviceworker.output(),
77 |     plugins: [
78 |       resolve(),
79 |       replace({
80 |         "process.browser": true,
81 |         "process.env.NODE_ENV": JSON.stringify(mode),
82 |       }),
83 |       commonjs(),
84 |       !dev && terser(),
85 |     ],
86 | 
87 |     preserveEntrySignatures: false,
88 |     onwarn,
89 |   },
90 | };
91 | 


--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
 1 | import { timestamp, files, shell, routes } from '@sapper/service-worker';
 2 | 
 3 | const ASSETS = `cache${timestamp}`;
 4 | 
 5 | // `shell` is an array of all the files generated by the bundler,
 6 | // `files` is an array of everything in the `static` directory
 7 | const to_cache = shell.concat(files);
 8 | const cached = new Set(to_cache);
 9 | 
10 | self.addEventListener('install', event => {
11 | 	event.waitUntil(
12 | 		caches
13 | 			.open(ASSETS)
14 | 			.then(cache => cache.addAll(to_cache))
15 | 			.then(() => {
16 | 				self.skipWaiting();
17 | 			})
18 | 	);
19 | });
20 | 
21 | self.addEventListener('activate', event => {
22 | 	event.waitUntil(
23 | 		caches.keys().then(async keys => {
24 | 			// delete old caches
25 | 			for (const key of keys) {
26 | 				if (key !== ASSETS) await caches.delete(key);
27 | 			}
28 | 
29 | 			self.clients.claim();
30 | 		})
31 | 	);
32 | });
33 | 
34 | self.addEventListener('fetch', event => {
35 | 	if (event.request.method !== 'GET' || event.request.headers.has('range')) return;
36 | 
37 | 	const url = new URL(event.request.url);
38 | 
39 | 	// don't try to handle e.g. data: URIs
40 | 	if (!url.protocol.startsWith('http')) return;
41 | 
42 | 	// ignore dev server requests
43 | 	if (url.hostname === self.location.hostname && url.port !== self.location.port) return;
44 | 
45 | 	// always serve static files and bundler-generated assets from cache
46 | 	if (url.host === self.location.host && cached.has(url.pathname)) {
47 | 		event.respondWith(caches.match(event.request));
48 | 		return;
49 | 	}
50 | 
51 | 	// for pages, you might want to serve a shell `service-worker-index.html` file,
52 | 	// which Sapper has generated for you. It's not right for every
53 | 	// app, but if it's right for yours then uncomment this section
54 | 	/*
55 | 	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
56 | 		event.respondWith(caches.match('/service-worker-index.html'));
57 | 		return;
58 | 	}
59 | 	*/
60 | 
61 | 	if (event.request.cache === 'only-if-cached') return;
62 | 
63 | 	// for everything else, try the network first, falling back to
64 | 	// cache if the user is offline. (If the pages never change, you
65 | 	// might prefer a cache-first approach to a network-first one.)
66 | 	event.respondWith(
67 | 		caches
68 | 			.open(`offline${timestamp}`)
69 | 			.then(async cache => {
70 | 				try {
71 | 					const response = await fetch(event.request);
72 | 					cache.put(event.request, response.clone());
73 | 					return response;
74 | 				} catch(err) {
75 | 					const response = await cache.match(event.request);
76 | 					if (response) return response;
77 | 
78 | 					throw err;
79 | 				}
80 | 			})
81 | 	);
82 | });
83 | 


--------------------------------------------------------------------------------
/src/template.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |       <html lang="en">
 3 |         <head>
 4 |           <meta charset="utf-8" />
 5 |           <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 6 |       
 7 |           %sapper.base%
 8 |           <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
 9 |           <link rel="sitemap" type="application/xml" href="https://pattern.monster/sitemap.xml" />
10 |           <link rel="icon" type="image/png" href="favicon.png" />
11 |           <link rel="apple-touch-icon" href="logo-512.png" />
12 |           <link rel="stylesheet" href="global-1725151604.min.css" />
13 |           <link rel="preload" href="pickr-1725151604.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
14 |           <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet" />
15 |       
16 |           <meta name="author" content="Naveen CS" />
17 |           <meta name="theme-color" content="#44337a" />
18 |           <meta name="google" content="notranslate" />
19 |           <meta name="robots" content="index,follow" />
20 |           <meta name="format-detection" content="telephone=no" />
21 |           <meta name="mobile-web-app-capable" content="yes" />
22 |           <meta name="apple-mobile-web-app-capable" content="yes" />
23 |           <meta name="msapplication-TileColor" content="#44337a" />
24 |           <meta name="msapplication-TileImage" content="/icons/mstile-144x144.png" />
25 |           <meta name="msapplication-square70x70logo" content="/icons/mstile-70x70.png" />
26 |           <meta name="msapplication-square150x150logo" content="/icons/mstile-150x150.png" />
27 |           <meta name="msapplication-wide310x150logo" content="/icons/mstile-310x150.png" />
28 |           <meta name="msapplication-square310x310logo" content="/icons/mstile-310x310.png" />
29 |           <meta property="og:site_name" content="Pattern.Monster" />
30 |           <meta property="og:type" content="website" />
31 |           <meta name="twitter:site" content="@pattern_monster" />
32 |           <meta name="twitter:card" content="summary_large_image" />
33 |       
34 |           %sapper.styles%
35 |           %sapper.head%
36 |           <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2799761399763923"
37 |      crossorigin="anonymous"></script>
38 |         </head>
39 |         <body>
40 |           <div id="sapper">%sapper.html%</div>
41 |       
42 |           %sapper.scripts%
43 |           <!-- Cloudflare Web Analytics -->
44 |           <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "477d2f960abf4a47b775638d604c616a"}'></script>
45 |           <!-- End Cloudflare Web Analytics -->
46 |         </body>
47 |       </html>


--------------------------------------------------------------------------------
/src/components/Logo.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let className = "",
 3 |     color = "var(--secondary-color)";
 4 | </script>
 5 | 
 6 | <div class="logoHome {className}" style="color: {color}">
 7 |   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1.5em" height="1.5em" viewBox="0 0 128 128" data-inline="false">
 8 |     <g transform="translate(0 -3)" style="fill: {color}">
 9 |       <path
10 |         d="M64.01 30.39c-34.48 0-51.26 20.65-51.26 46.11 0 4.45.71 8.74 2.03 12.81 2.48 7.64 6.49 15.25 6.23 23.48-.15 4.94-2.97 7.47-6.43
11 |         10.44-1.07.92-1.27 2.42.08 3.19 3.1 1.78 8.32-.19 11.33-1.4 2.69-1.08 5.21-2.93 7.31-5.08 1.08-1.1 2.08-2.27 3.07-3.44.82-.96
12 |         2.18-3.42 3.74-2.72 3.4 1.53-.58 7.86-2.3 9.38-.7.62-1.65 1.18-1.97 2.12-.36 1.03.37 1.93 1.3 2.3 2.6 1.04 8.28-.72 10.88-2.46
13 |         1.86-1.25 3.41-2.85 4.71-4.68.81-1.14 2.21-4.74 4.02-4.31 3.32.8 1.92 6.03 2.14 8.3.11 1.16.78 2.32 1.94 2.77 2.52.99 4.74-.79
14 |         6.22-2.63 1.65-2.05 2.44-4.32 3.73-6.54 1.03-1.79 2.83-2.16 4.12-.31 1.88 2.69 3.04 5.25 6.03 6.96 2.46 1.4 5.3 2.27 8.14 2.29 1.25
15 |         0 6.79-.66 4.92-3.11-.82-1.06-2.39-1.32-3.46-2.11-1.76-1.31-2.57-3.48-2.63-5.62-.08-3.05 2.87-2.27 4.32-.8 2.35 2.38 3.75 5.76 6.78
16 |         7.39 3.63 1.95 9.29 2.9 13.29 1.67 1.36-.42 2.92-1.01
17 |         3.01-2.65.09-1.55-1.23-1.92-2.47-2.27-1.59-.44-2.69-.84-3.91-2.06-.92-.88-1.42-2.08-1.63-3.33-.43-2.59.02-5.5.48-7.83.82-4.19
18 |         2.31-8.22 3.78-12.21.47-1.29.95-2.58 1.4-3.87 1.5-4.32 2.32-8.9 2.32-13.67 0-25.47-16.78-46.11-51.26-46.11zM43.928 67.25a8.75 6.789
19 |         0 01.072 0 8.75 6.789 0 018.75 6.79A8.75 6.789 0 0144 80.827a8.75 6.789 0 01-8.75-6.789 8.75 6.789 0 018.678-6.789zm40 0a8.75 6.789
20 |         0 01.072 0 8.75 6.789 0 018.75 6.79A8.75 6.789 0 0184 80.827a8.75 6.789 0 01-8.75-6.789 8.75 6.789 0 018.678-6.789zM71.88
21 |         92.57c1.31.05 2.599 1.13 2.969 2.38 1.19 3.97-4.71 6.17-7.54 6.9-4.06
22 |         1.04-8.94.39-12.08-2.58-.8-.75-1.55-1.9-1.61-3.03-.05-.86.27-1.71.86-2.33 1.24-1.3 2.99-1.29 4.39-.3 1.54 1.1 2.6 2.45 4.61 2.64
23 |         1.66.15 3.33-.52 4.67-1.46 1.16-.81 2.16-2.28 3.73-2.22z" />
24 |       <path
25 |         d="M102.26 27.7s-1.19-1.83-3.65-2.22c-3.06-.48-6.08.07-7.05 4.51-.96 4.42-1.45 10.11 3.49 14.08l-7.6 2.13-6.51-7.89s2.52.96
26 |         2.86-.91c.42-2.29.42-4.36.97-7.87.58-3.67 1.73-7.51 5.25-9.54 1.92-1.11 4.98-1.74 5.99-2.55.78-.63.99-2.65 1.33-4.84l5.42 4.16 1.7
27 |         7.4z" />
28 |       <circle r="11.93" cy="18.02" cx="107.39" />
29 |       <path
30 |         d="M25.74 27.7s1.19-1.83 3.65-2.22c3.06-.48 6.08.07 7.05 4.51.96 4.42 1.46 10.11-3.49 14.08l7.6 2.13
31 |         6.51-7.89s-2.52.96-2.86-.91c-.42-2.29-.42-4.36-.97-7.87-.59-3.67-1.73-7.51-5.25-9.54-1.92-1.11-4.98-1.74-5.99-2.55-.78-.63-.99-2.65-1.33-4.84l-5.42
32 |         4.16-1.7 7.4z" />
33 |       <circle r="11.93" cy="18.02" cx="20.61" />
34 |     </g>
35 |   </svg>
36 |   <span>PATTERN MONSTER</span>
37 | </div>
38 | 


--------------------------------------------------------------------------------
/src/routes/api.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import Footer from "../components/Footer.svelte";
  3 |   import lang from "./_lang.js";
  4 |   let strings = lang.strings;
  5 | 
  6 |   import Constants from "./_constants.js";
  7 |   import Index from "./_index.js";
  8 |   let page = "api";
  9 |   let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page);
 10 | 
 11 |   let array = Index;
 12 | 
 13 |   // Holds table sort state.  Initialized to reflect table sorted by id column ascending.
 14 |   let sortBy = { col: "id", ascending: true };
 15 | 
 16 |   $: sort = (column) => {
 17 |     if (sortBy.col == column) {
 18 |       sortBy.ascending = !sortBy.ascending;
 19 |     } else {
 20 |       sortBy.col = column;
 21 |       sortBy.ascending = true;
 22 |     }
 23 | 
 24 |     // Modifier to sorting function for ascending or descending
 25 |     let sortModifier = sortBy.ascending ? 1 : -1;
 26 | 
 27 |     let sort = (a, b) => (a[column] < b[column] ? -1 * sortModifier : a[column] > b[column] ? 1 * sortModifier : 0);
 28 | 
 29 |     array = array.sort(sort);
 30 |   };
 31 | 
 32 |   let checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" class="icon mx-auto" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"></path></svg>`;
 33 | </script>
 34 | 
 35 | <svelte:head>
 36 |   <title>{title}</title>
 37 |   <link rel="canonical" href={url} />
 38 |   {#if versions}
 39 |     {#each versions as version}
 40 |       <link rel="alternate" href={version.website} hreflang={version.lang} />
 41 |     {/each}
 42 |   {/if}
 43 |   <meta name="description" content={desc} />
 44 |   <meta name="keywords" content={keywords} />
 45 | 
 46 |   <!-- Open Graph / Facebook -->
 47 |   <meta property="og:url" content={url} />
 48 |   <meta property="og:title" content={title} />
 49 |   <meta property="og:description" content={desc} />
 50 |   <meta property="og:image" content={image} />
 51 | 
 52 |   <!-- Twitter -->
 53 |   <meta name="twitter:url" content={url} />
 54 |   <meta name="twitter:title" content={title} />
 55 |   <meta name="twitter:description" content={desc} />
 56 |   <meta name="twitter:image" content={image} />
 57 |   <meta name="twitter:image:src" content={image} />
 58 |   <meta name="twitter:image:alt" content={title} />
 59 | </svelte:head>
 60 | 
 61 | <div class="secondary-text-color pattern-bg p-8">
 62 |   <div class="container mx-auto">
 63 |     <h1 class="text-center mt-6 p-2 mb-2 font-semibold text-4xl uppercase">API</h1>
 64 |     <div>
 65 |       <table class="mx-auto">
 66 |         <thead>
 67 |           <tr>
 68 |             <th on:click={sort("title")}>Title</th>
 69 |             <th on:click={sort("slug")}>Name</th>
 70 |             <th on:click={sort("mode")}>Mode</th>
 71 |             <th on:click={sort("mode")}>Stroke Join</th>
 72 |             <th on:click={sort("colors")}>Max Colors</th>
 73 |             <th on:click={sort("maxStroke")}>Max Stroke</th>
 74 |             <th on:click={sort("maxScale")}>Max Scale</th>
 75 |             <th on:click={sort("maxSpacing")}>Max Spacing</th>
 76 |           </tr>
 77 |         </thead>
 78 |         <tbody>
 79 |           {#each array as item}
 80 |             <tr>
 81 |               <td>{item.title}</td>
 82 |               <td>{item.slug}</td>
 83 |               <td>{item.mode == "stroke-join" ? "stroke" : item.mode}</td>
 84 |               <td>{@html item.mode == "stroke-join" ? checkIcon : ""}</td>
 85 |               <td class="text-end">{item.colors}</td>
 86 |               <td class="text-end">{item.maxStroke}</td>
 87 |               <td class="text-end">{item.maxScale}</td>
 88 |               <td class="text-center">{item.maxSpacing.toString().replace(",", "|")}</td>
 89 |             </tr>
 90 |           {/each}
 91 |         </tbody>
 92 |       </table>
 93 |     </div>
 94 |   </div>
 95 | </div>
 96 | 
 97 | <Footer />
 98 | 
 99 | <style>
100 |   table,
101 |   th,
102 |   td {
103 |     border: 1px solid rgba(var(--blockquote-color), 0.5);
104 |     border-collapse: collapse;
105 |   }
106 |   td {
107 |     padding: 0.75rem 1rem;
108 |   }
109 |   th {
110 |     position: sticky;
111 |     top: 2.8em;
112 |     background-color: var(--card-bg);
113 |     padding: 1rem 0.5rem;
114 |   }
115 |   th {
116 |     cursor: pointer;
117 |   }
118 | </style>
119 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "https://pattern.monster",
 3 |   "description": "SVG Patterns",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "sapper dev",
 7 |     "build": "sapper build --legacy",
 8 |     "export": "sapper export --entry \"index api features confirmed herringbone-7 herringbone-8 flower-1 flower-2 flower-3 flower-4 flower-5 flower-6 flower-7 plus-1 plus-2 plus-3 plus-4 circles-1 circles-2 circles-3 circles-4 circles-5 circles-6 circles-7 concentric-circles-1 concentric-circles-2 concentric-circles-3 adjointed-circles adjointed-diamonds diamonds-1 diamonds-2 diamonds-3 hexagon-1 hexagon-2 hexagon-3 hexagon-4 hexagon-5 hexagon-6 hexagon-7 hexagon-8 overlapping-hexagons squares-and-squares-1 squares-and-squares-2 squares-and-diamonds squares-and-circles-1 squares-and-circles-2 squares-and-plus-1 squares-and-plus-2 squares-and-stars-1 squares-and-stars-2 stars-and-lines-1 stars-and-lines-2 triangles-1 triangles-2 triangles-3 triangles-4 triangles-5 triangles-6 triangles-7 triangles-8 triangles-9 triangles-10 inverted-triangles checkerboard japanese-pattern-1 japanese-pattern-2 japanese-pattern-3 japanese-pattern-4 japanese-pattern-5 japanese-pattern-6 eyes-1 eyes-2 eyes-3 eyes-4 jigsaw railroad octagons-1 octagons-2 lines-1 lines-2 scales-1 scales-2 scales-3 scales-4 leaves-1 leaves-2 leaves-3 leaves-4 leaves-5 leaves-6 leaves-7 leaves-8 pipes zebra memphis-1 memphis-2 memphis-3 memphis-4 memphis-5 memphis-6 greek-key chinese-1 chinese-2 chinese-3 chinese-4 chinese-9 chinese-5 chinese-6 chinese-7 chinese-8 new-1 new-2 new-3 new-4 new-5 new-6 new-7 new-8 new-9 new-10 new-11 new-12 new-13 new-14 new-15 new-16 new-17 double-bubble-1 double-bubble-2 stars-1 stars-2 stars-3 stars-4 stars-5 stars-6 semicircles-1 songket-1 christmas-tree-1 candy-cane-1 christmas-bells-1 christmas-pattern-1 christmas-pattern-2 christmas-pattern-3 snowflakes-1 christmas-tree-balls santa-claus christmas-gift cubes-1 cubes-2 cubes-3 stained-glass tiles-1 rectangles-and-squares-1 mexican-pattern-1 mexican-pattern-2 ethnic-pattern-1 ethnic-pattern-2 ethnic-pattern-3 plaid-pattern-1 plaid-pattern-2 plaid-pattern-3 plaid-pattern-4 doodle-1 doodle-2 batik-1 batik-2 batik-3 batik-4 batik-5 batik-6 african-1 african-2 african-3 african-4 triangles-11 hexagon-9 tiles-2 tiles-3 tribal-1 tribal-2 waves-8 leaves-9 blobs african-5 triangles-12 squares-and-triangles-1 tribal-3 circles-8 triangles-13 triangles-14 triangles-15 triangles-16 circles-9 concentric-circles-4 concentric-circles-5 concentric-circles-6 stripes-1 stripes-2 chevron-4 chevron-5 terrazzo-1 geometric-1 halloween-1 halloween-2 halloween-3 halloween-4 halloween-5 halloween-6 hexagon-10 hexagon-11 squares-1 squares-2 sprinkles-1 cubes-4 geometric-2 geometric-3 geometric-4 circles-10 circles-11 circles-12 triangles-17 triangles-18 geometric-5 geometric-6 squiggle-1 moroccan-1 moroccan-2 japanese-pattern-7 waves-9 christmas-pattern-4 christmas-pattern-5 plaid-pattern-5 plaid-pattern-6 circles-13 circles-14 interlocked-hexagons-1 interlocked-hexagons-2 interlocked-hexagons-3 lanterns-1 leaves-10 lines-3 rope-1 waves-10 waves-11 lines-4 lines-5 lines-6 plus-5 plus-6 scales-5 scales-6 scales-7 scales-8 scales-9 triangles-19 triangles-20 batik-7 circles-15 circles-16 circles-17 circles-and-diamonds diamonds-4 diamonds-5 diamonds-6 geometric-7 geometric-8 geometric-9 geometric-10 waves-12 waves-13 waves-14 waves-15 double-bubble-3 double-bubble-4 patches squares-3 squares-4 squares-5 squares-6 triangles-21 triangles-22 triangles-23 tribal-4 tribal-5 chinese-10 chinese-11 diamonds-7 diamonds-8 diamonds-9 waves-16 waves-17 waves-18 waves-19 waves-20 diamonds-10 diamonds-11 diamonds-12 diamonds-13 chinese-12 chinese-13 chinese-14 egyptian-1 egyptian-2 egyptian-3 circles-19 circles-20 egyptian-4 egyptian-6 waves-22 squares-and-circles-3 japanese-pattern-8 circles-22 diamonds-14 diamonds-15\"",
 9 |     "start": "node __sapper__/build",
10 |     "test": "run-p --race dev cy:run"
11 |   },
12 |   "dependencies": {
13 |     "@rollup/plugin-json": "^4.1.0",
14 |     "@simonwep/pickr": "^1.8.2",
15 |     "compression": "^1.7.4",
16 |     "dayjs": "^1.11.9",
17 |     "dotenv": "^16.3.1",
18 |     "polka": "next",
19 |     "prettier": "^2.8.8",
20 |     "save-svg-as-png": "^1.4.17",
21 |     "sirv": "^1.0.7"
22 |   },
23 |   "devDependencies": {
24 |     "@rollup/plugin-commonjs": "^16.0.0",
25 |     "@rollup/plugin-node-resolve": "^10.0.0",
26 |     "@rollup/plugin-replace": "^2.3.4",
27 |     "npm-run-all": "^4.1.5",
28 |     "rollup": "^2.33.3",
29 |     "rollup-plugin-svelte": "^6.1.1",
30 |     "rollup-plugin-terser": "^7.0.2",
31 |     "sapper": "^0.29.1",
32 |     "svelte": "^3.59.1",
33 |     "fs-extra": "^11.1.1",
34 |     "@node-minify/clean-css": "^8.0.6",
35 |     "@node-minify/core": "^8.0.6",
36 |     "read-excel-file": "^5.6.1",
37 |     "glob": "^8.1.0",
38 |     "tinycolor2": "^1.6.0",
39 |     "sharp": "^0.32.3",
40 |     "convert-svg-to-png": "^0.6.4"
41 |   }
42 | }


--------------------------------------------------------------------------------
/src/components/LangSelect.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { langStore } from "../routes/stores.js";
  3 |   import Constants from "../routes/_constants.js";
  4 |   import lang from "../routes/_lang.js";
  5 |   let strings = lang.strings;
  6 |   let toClose = false;
  7 | 
  8 |   let language = $langStore || "en";
  9 |   let languageList = Constants.strings.versions;
 10 |   // console.log(languageList)
 11 | 
 12 |   // Helper function to get the script used in a language
 13 |   function getScript(lang) {
 14 |     return Intl.PluralRules.supportedLocalesOf(lang, { type: "cardinal" })[0];
 15 |   }
 16 | 
 17 |   languageList.sort((lang1, lang2) => {
 18 |     if (lang1.name === "English") {
 19 |       return -1; // Keep English at the first position
 20 |     } else if (lang2.name === "English") {
 21 |       return 1; // Move English to a later position
 22 |     } else {
 23 |       const script1 = getScript(lang1.lang);
 24 |       const script2 = getScript(lang2.lang);
 25 | 
 26 |       if (script1 === "Arabic" && script2 !== "Arabic") {
 27 |         return 1; // Move Arabic to a later position
 28 |       } else if (script1 !== "Arabic" && script2 === "Arabic") {
 29 |         return -1; // Keep Arabic at the last position
 30 |       } else if (script1 === "Hans" && script2 !== "Hans") {
 31 |         return 1; // Move Chinese to a later position
 32 |       } else if (script1 !== "Hans" && script2 === "Hans") {
 33 |         return -1; // Keep Chinese at the last position
 34 |       } else {
 35 |         return lang1.name.localeCompare(lang2.name); // Sort the remaining languages by name
 36 |       }
 37 |     }
 38 |   });
 39 | 
 40 |   const languageName = languageList.find(({ lang }) => lang === language).name;
 41 | 
 42 |   function toggle(e) {
 43 |     e.stopPropagation();
 44 |     let menu = this.nextSibling;
 45 |     // let menu = document.getElementById('langMenu')
 46 |     // document.getElementById("shopMenu").style.display = "none";
 47 | 
 48 |     while (menu && menu.nodeType != 1) {
 49 |       menu = menu.nextSibling;
 50 |     }
 51 |     if (!menu) return;
 52 |     if (menu.style.display !== "block") {
 53 |       menu.style.display = "block";
 54 |       if (toClose) toClose.style.display = "none";
 55 |       toClose = menu;
 56 |     } else closeAll();
 57 |   }
 58 |   function closeAll() {
 59 |     toClose.style.display = "none";
 60 |     toClose = false;
 61 |   }
 62 | 
 63 |   function closeWindow(event) {
 64 |     if (toClose) closeAll.call(event.target);
 65 |   }
 66 | </script>
 67 | 
 68 | <!-- https://codepen.io/vlastapolach/pen/EXdLMy -->
 69 | <svelte:window on:click={closeWindow} />
 70 | 
 71 | <div class="menu">
 72 |   <button
 73 |     class="menuButton flex items-center"
 74 |     title={strings.translate}
 75 |     on:click={toggle}
 76 |   >
 77 |     <svg
 78 |       xmlns="http://www.w3.org/2000/svg"
 79 |       width="2em"
 80 |       height="2em"
 81 |       viewBox="0 0 24 24"
 82 |       stroke-width="1.5"
 83 |       stroke="currentColor"
 84 |       fill="none"
 85 |       stroke-linecap="round"
 86 |       stroke-linejoin="round"
 87 |     >
 88 |       <path d="M5 7h7m-2 -2v2a5 8 0 0 1 -5 8m1 -4a7 4 0 0 0 6.7 4" />
 89 |       <path d="M11 19l4 -9l4 9m-.9 -2h-6.2" />
 90 |     </svg>
 91 |     <span class="dropDownName">{languageName}</span>
 92 |     <svg
 93 |       xmlns="http://www.w3.org/2000/svg"
 94 |       width="1.5em"
 95 |       height="1.5em"
 96 |       viewBox="0 0 24 24"
 97 |       stroke-width="1.5"
 98 |       stroke="currentColor"
 99 |       fill="none"
100 |       stroke-linecap="round"
101 |       stroke-linejoin="round"
102 |     >
103 |       <polyline points="6 9 12 15 18 9" />
104 |     </svg>
105 |   </button>
106 |   <ul id="langMenu" class="menuItems p-0">
107 |     {#each languageList as lang}
108 |       <li>
109 |         <a
110 |           class="px-4 py-3 {lang.name === languageName ? 'selectedLang' : ''}"
111 |           href={lang.website}>{lang.name}</a
112 |         >
113 |       </li>
114 |     {/each}
115 |     <li class="translateLink">
116 |       <a
117 |         class="px-4 py-3"
118 |         href="https://crwd.in/pattern-monster"
119 |         target="_blank"
120 |         rel="noopener noreferrer">{strings.translate}</a
121 |       >
122 |     </li>
123 |   </ul>
124 | </div>
125 | 
126 | <style>
127 |   .menu {
128 |     display: grid;
129 |     margin: 0 auto;
130 |     justify-items: end;
131 |     font-size: 1em;
132 |   }
133 |   .translateLink {
134 |     border-top: 2px solid var(--secondary-color);
135 |   }
136 | 
137 |   /* .menu:focus,
138 |   .menu:active {
139 |     outline: 1px solid #fff; */
140 |   /* outline-offset: -4px; */
141 |   /* } */
142 |   /* .menu:hover {
143 |     border-radius: var(--border-radius);
144 |     background-color: var(--gray-800);
145 |   } */
146 |   .menuButton {
147 |     font-weight: 500;
148 |     border-radius: var(--border-radius);
149 |   }
150 |   .menuButton > span {
151 |     padding: 0 0.5em;
152 |   }
153 |   .menuButton:hover {
154 |     border-radius: var(--border-radius);
155 |     background-color: var(--gray-800);
156 |   }
157 |   .menuButton:active,
158 |   .menuButton:focus {
159 |     /* outline: none; */
160 |     background-color: var(--gray-800);
161 |     outline: 1px solid #fff;
162 |   }
163 | 
164 |   .menuItems {
165 |     z-index: 20;
166 |     overflow-y: auto;
167 |     max-height: 75vh;
168 |     display: none;
169 |     min-width: 160px;
170 |     margin-top: 3em;
171 |     position: fixed;
172 |     list-style: none;
173 |     background-color: var(--main-bg-color);
174 |     border: 1px solid var(--main-bg-color);
175 |     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
176 |     -webkit-background-clip: padding-box;
177 |     background-clip: padding-box;
178 |     border-radius: var(--border-radius);
179 |     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%),
180 |       0 4px 6px -2px rgb(0 0 0 / 5%);
181 |     /* --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
182 |     --tw-ring-offset-shadow: 0 0 #0000;
183 |     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); */
184 |     /* padding: 0; */
185 |   }
186 |   .menuItems a {
187 |     text-decoration: none;
188 |     /* padding: 0; */
189 |   }
190 |   .menuItems li a {
191 |     color: var(--gray-300);
192 |   }
193 |   .menuItems li a.selectedLang {
194 |     color: var(--secondary-color);
195 |     background-color: var(--gray-800);
196 |   }
197 |   .menuItems li a:hover {
198 |     background-color: var(--gray-700);
199 |   }
200 | </style>
201 | 


--------------------------------------------------------------------------------
/src/routes/_constants.js:
--------------------------------------------------------------------------------
  1 | const strings = {
  2 |   website: "https://pattern.monster",
  3 |   title: "Pattern Monster",
  4 |   description:
  5 |     "A simple online pattern generator to create repeatable SVG patterns.",
  6 |   description2: "Speed up your website without compromising on image quality.",
  7 |   description3: 
  8 |     "Perfect for website backgrounds, apparel, branding, packaging design and more.",
  9 |   keywords:
 10 |     "svg patterns, patterns, svg backgrounds, vector wallpaper, pattern generator, pattern maker",
 11 |   pages: [
 12 |     {
 13 |       page: "index",
 14 |       title: "SVG Pattern Generator",
 15 |       keywords: "",
 16 |       description: "",
 17 |       image: "",
 18 |     },
 19 |     {
 20 |       page: "changelog",
 21 |       title: "Changelog",
 22 |       keywords: "changelog",
 23 |       description: "Changelog for Pattern Monster.",
 24 |       image: "",
 25 |     },
 26 |     {
 27 |       page: "downloads",
 28 |       title: "Downloads",
 29 |       keywords: "downloads",
 30 |       description: "Downloads for Pattern Monster.",
 31 |       image: "",
 32 |     },
 33 |     {
 34 |       page: "features",
 35 |       title: "Features",
 36 |       keywords: "features",
 37 |       description: "Features for Pattern Monster.",
 38 |       image: "",
 39 |     },
 40 |     {
 41 |       page: "privacy-policy",
 42 |       title: "Privacy Policy",
 43 |       keywords: "privacy policy",
 44 |       description: "Privacy Policy for Pattern Monster.",
 45 |       image: "",
 46 |     },
 47 |     {
 48 |       page: "api",
 49 |       title: "API",
 50 |       keywords: "api",
 51 |       description: "API for Pattern Monster.",
 52 |       image: "",
 53 |     },
 54 |   ],
 55 |   versions: [{"lang":"en","name":"English","website":"https://pattern.monster"},{"lang":"de","name":"Deutsch","website":"https://de.pattern.monster"},{"lang":"pl","name":"Polski","website":"https://pl.pattern.monster"},{"lang":"tr","name":"Türkçe","website":"https://tr.pattern.monster"},{"lang":"es","name":"Español","website":"https://es.pattern.monster"},{"lang":"it","name":"Italiano","website":"https://it.pattern.monster"},{"lang":"ro","name":"Română","website":"https://ro.pattern.monster"},{"lang":"fr","name":"Français","website":"https://fr.pattern.monster"},{"lang":"ar","name":"العربية","website":"https://ar.pattern.monster"},{"lang":"pt","name":"Português","website":"https://pt.pattern.monster"},{"lang":"zh-cn","name":"中文(简体)","website":"https://cn.pattern.monster"},{"lang":"nl","name":"Nederlands","website":"https://nl.pattern.monster"},{"lang":"sv","name":"Svenska","website":"https://sv.pattern.monster"},{"lang":"uk","name":"Українська","website":"https://uk.pattern.monster"},{"lang":"ru","name":"Русский","website":"https://ru.pattern.monster"},{"lang":"hu","name":"Magyar","website":"https://hu.pattern.monster"},{"lang":"af","name":"Afrikaans","website":"https://af.pattern.monster"},{"lang":"ca","name":"Català","website":"https://ca.pattern.monster"},{"lang":"zh-tw","name":"中文 (繁體)","website":"https://tw.pattern.monster"},{"lang":"cs","name":"Čeština","website":"https://cs.pattern.monster"},{"lang":"da","name":"Dansk","website":"https://da.pattern.monster"},{"lang":"fi","name":"Suomi","website":"https://fi.pattern.monster"},{"lang":"ja","name":"日本語","website":"https://ja.pattern.monster"},{"lang":"ko","name":"한국어","website":"https://ko.pattern.monster"}],
 56 |   langs:[{"id":"af","name":"Afrikaans","code":"af","translation":100,"approval":100},{"id":"ar","name":"Arabic","code":"ar","translation":100,"approval":100},{"id":"ca","name":"Catalan","code":"ca","translation":100,"approval":100},{"id":"zh-CN","name":"Chinese Simplified","code":"zh-cn","translation":100,"approval":100},{"id":"zh-TW","name":"Chinese Traditional","code":"zh-tw","translation":100,"approval":100},{"id":"cs","name":"Czech","code":"cs","translation":100,"approval":100},{"id":"da","name":"Danish","code":"da","translation":100,"approval":100},{"id":"nl","name":"Dutch","code":"nl","translation":100,"approval":100},{"id":"fi","name":"Finnish","code":"fi","translation":100,"approval":100},{"id":"fr","name":"French","code":"fr","translation":100,"approval":100},{"id":"de","name":"German","code":"de","translation":100,"approval":100},{"id":"el","name":"Greek","code":"el","translation":100,"approval":100},{"id":"he","name":"Hebrew","code":"he","translation":100,"approval":100},{"id":"hu","name":"Hungarian","code":"hu","translation":100,"approval":100},{"id":"id","name":"Indonesian","code":"id","translation":78,"approval":78},{"id":"it","name":"Italian","code":"it","translation":100,"approval":100},{"id":"ja","name":"Japanese","code":"ja","translation":100,"approval":100},{"id":"ko","name":"Korean","code":"ko","translation":100,"approval":100},{"id":"nb","name":"Norwegian Bokmal","code":"nb","translation":2,"approval":2},{"id":"nn-NO","name":"Norwegian Nynorsk","code":"nn-no","translation":2,"approval":2},{"id":"pl","name":"Polish","code":"pl","translation":100,"approval":100},{"id":"pt-PT","name":"Portuguese","code":"pt","translation":9,"approval":5},{"id":"pt-BR","name":"Portuguese, Brazilian","code":"pt-br","translation":100,"approval":100},{"id":"ro","name":"Romanian","code":"ro","translation":100,"approval":100},{"id":"ru","name":"Russian","code":"ru","translation":100,"approval":100},{"id":"sr","name":"Serbian (Cyrillic)","code":"sr","translation":2,"approval":2},{"id":"es-ES","name":"Spanish","code":"es","translation":100,"approval":100},{"id":"sv-SE","name":"Swedish","code":"sv","translation":100,"approval":100},{"id":"tr","name":"Turkish","code":"tr","translation":100,"approval":100},{"id":"uk","name":"Ukrainian","code":"uk","translation":100,"approval":100},{"id":"vi","name":"Vietnamese","code":"vi","translation":78,"approval":78}]
 57 | };
 58 | 
 59 | const pageDetails = (page) => {
 60 |   let imagePrefix = "https://giguom.com/pattern.monster/images/";
 61 |   let pageValues =
 62 |     strings.pages.filter((currentPage) => currentPage.page === page)[0] ||
 63 |     strings.pages.filter((currentPage) => currentPage.page === "index")[0];
 64 | 
 65 |   let website = strings.website;
 66 |   let title = strings.title + " - " + strings.pages[0].title;
 67 |   let url = website;
 68 |   let keywords = strings.keywords;
 69 |   let desc = strings.description + " " + strings.description3;
 70 |   let image =
 71 |     pageValues.image == "" ? imagePrefix + "/TwitterBG2.png" : pageValues.image;
 72 | 
 73 |   let versions = strings.versions.map((version) => {
 74 |     return {
 75 |       lang: version.lang,
 76 |       website: version.website + (page === "index" ? "" : "/" + page + "/"),
 77 |     };
 78 |   });
 79 | 
 80 |   if (page != "index") {
 81 |     title =
 82 |       pageValues.title + " - " + strings.title + " | " + strings.pages[0].title;
 83 |     url = website + "/" + page + "/";
 84 |     desc =
 85 |       pageValues.description +
 86 |       " " +
 87 |       strings.description +
 88 |       " " +
 89 |       strings.description3;
 90 |     keywords = pageValues.keywords + ", " + strings.keywords;
 91 |   }
 92 | 
 93 |   return { title, url, keywords, desc, image, versions };
 94 | };
 95 | 
 96 | let lightColors = [
 97 |   "hsla(0,0%,100%,1)",
 98 |   "hsla(258.5,59.4%,59.4%,1)",
 99 |   "hsla(339.6,82.2%,51.6%,1)",
100 |   "hsla(198.7,97.6%,48.4%,1)",
101 |   "hsla(47,80.9%,61%,1)",
102 | ];
103 | let darkColors = [
104 |   "hsla(240,6.7%,17.6%,1)",
105 |   "hsla(47,80.9%,61%,1)",
106 |   "hsla(4.1,89.6%,58.4%,1)",
107 |   "hsla(186.8,100%,41.6%,1)",
108 |   "hsla(258.5,59.4%,59.4%,1)",
109 | ];
110 | 
111 | export default { strings, pageDetails, lightColors, darkColors };
112 |         


--------------------------------------------------------------------------------
/src/routes/_lang.js:
--------------------------------------------------------------------------------
1 | const strings = {"searchPattern":"Search for patterns","pressFocus":"Press '/' to focus","title":"SVG Pattern Generator","heading":"Customizable <span>SVG patterns</span> for your projects","keywords":"svg patterns, patterns, svg backgrounds, vector wallpaper, pattern generator, pattern maker","patterns":"patterns","license":"MIT License","free":"Free","description":"A simple online pattern generator to create repeatable SVG patterns.","description2":"Speed up your website without compromising on image quality.","description3":"Perfect for website backgrounds, apparel, branding, packaging design and more.","filter":"Filter","sort":"Sort","filterMode":"Filter by Mode","filterColors":"Filter by Colors","allModes":"All modes","stroke":"Stroke","fill":"Fill","allColors":"All colors","colors":"colors","latest":"Latest","oldest":"Oldest","alphabetical":"Alphabetical","updateDate":"Updated Date","changeTheme":"Change Theme","changelog":"Changelog","features":"Features","downloads":"Downloads","translate":"Translate","privacy":"Privacy Policy","privacyFull":"This app does not collect or store any user data","signUp":"Sign up for project updates and get free patterns delivered monthly to your inbox","email":"Your email address","sendPatterns":"Send me the patterns","zoom":"Zoom","hSpacing":"Horizontal Spacing","vSpacing":"Vertical Spacing","hPosition":"Horizontal Position","vPosition":"Vertical Position","angle":"Angle","inspire":"Inspire Me","random":"Random Pattern","reset":"Reset","copy":"Copy","copyCSS":"Copy CSS","copySVG":"Copy SVG","download":"Download","downloadSVG":"Download as SVG file","downloadPNG":"Download as PNG file","dimensions":"Dimensions","width":"Width","height":"Height","hide":"Hide UI","lock":"Lock","unlock":"Unlock","checkOut":"If you love creating SVG patterns and backgrounds, you should check this out.","generate":"Generate fully customizable SVG patterns for free.","patternsCount":"300+ patterns available at https://pattern.monster","square":"Square","rounded":"Rounded","join":"Join Mode","tweet":"Share your tweet","waves":"Waves","chevron":"Chevron","straightLines":"Straight Lines","crossSection":"Cross Section","brickWall":"Brick Wall","herringbone":"Herringbone","flower":"Flower","plus":"Plus","circles":"Circles","concentricCircles":"Concentric Circles","adjointedCircles":"Adjointed Circles","adjointedDiamonds":"Adjointed Diamonds","diamonds":"Diamonds","hexagon":"Hexagon","overlappingHexagons":"Overlapping Hexagons","squaresSquares":"Squares & Squares","squaresDiamonds":"Squares & Diamonds","squaresCircles":"Squares & Circles","squaresPlus":"Squares & Plus","squaresStars":"Squares & Stars","starsLines":"Stars & Lines","triangles":"Triangles","invertedTriangles":"Inverted Triangles","checkerboard":"Checkerboard","japanesePattern":"Japanese Pattern","eyes":"Eyes","jigsaw":"Jigsaw","railroad":"Railroad","octagons":"Octagons","lines":"Lines","scales":"Scales","leaves":"Leaves","pipes":"Pipes","zebra":"Zebra","memphisPattern":"Memphis Pattern","greekKey":"Greek Key","chinesePattern":"Chinese Pattern","newPattern":"New Pattern","doubleBubble":"Double Bubble","stars":"Stars","semicircles":"Semicircles","songketPattern":"Songket Pattern","cubes":"Cubes","stainedGlass":"Stained Glass","tiles":"Tiles","rectanglesSquares":"Rectangles & Squares","mexicanPattern":"Mexican Pattern","ethnicPattern":"Ethnic Pattern","plaidPattern":"Plaid Pattern","doodlePattern":"Doodle Pattern","batikPattern":"Batik Pattern","curves":"Curves","rhombus":"Rhombus","stripes":"Stripes","squares":"Squares","clouds":"Clouds","africanPattern":"African Pattern","arabicPattern":"Arabic Pattern","abstractPattern":"Abstract Pattern","geometricPattern":"Geometric Pattern","tribalPattern":"Tribal Pattern","apiAccess":"Are you looking to integrate patterns with your new or existing projects? Be the first to know when API access opens up!","firstName":"First name","email2":"Email address","waitlist":"Join the waitlist","buyCoffee":"Buy me a coffee","openSource":"Open Source","feature1":"Create amazing SVG patterns in seconds","explore":"Explore patterns","feature2":"Handy tool for developers and designers.","feature3":"Unleash your creativity to produce visually stunning patterns.","tweak":"Tweak Colors","feature4":"Customize foreground and background colors easily","modify":"Modify Stroke","feature5":"Adjust the stroke width on supported patterns","alterAngle":"Alter Angle","feature6":"Change the angle to generate unique images","copyCode":"Copy Code","feature7":"Copy CSS and SVG code directly to your clipboard for web projects","downloadOptions":"Download Options","feature8":"Download a tileable SVG or a high resolution seamless PNG image for print","feature9":"Copy the pattern to set the website background with great results.","feature10":"Choose from a variety of patterns and shapes which cover a host of styles, from the cool, quirky and edgy, to the more luxurious designs.","feature11":"Make vector patterns like a pro","feature12":"A pattern maker app to create abstract and cool patterns.","feature13":"Save time by making royalty free SVG backgrounds for your projects.","feature14":"Easy to use tool to generate your desired image.","feature15":"Ideal for branding and logo design projects, business cards, creating custom tees and apparel, posters, flyers, web design projects, or your social media posts, Instagram stories and blogs.","knowMore":"Know more","feature16":"Create beautiful print assets from a wealth of versatile and useful patterns without any design skills.","feature17":"Ideal for branding projects, fabrics, packaging, fashion apparel, posters, wrapping paper, posters or calendars.","christmasTree":"Christmas Tree","candyCane":"Candy Cane","christmasBells":"Christmas Bells","christmasPattern":"Christmas Pattern","snowflakes":"Snowflakes","christmasTreeBalls":"Christmas Tree Balls","santaClaus":"Santa Claus","christmasGift":"Christmas Gift","blobs":"Blobs","viewMore":"View More","shop":"Shop","halloweenPattern":"Halloween Pattern","terrazzo":"Terrazzo","sprinkles":"Sprinkles","squiggle":"Squiggle","moroccanPattern":"Moroccan Pattern","interlockedHexagons":"Interlocked Hexagons","lanterns":"Lanterns","circlesDiamonds":"Circles & Diamonds","egyptianPattern":"Egyptian Pattern","squaresTriangles":"Squares & Triangles","rope":"Rope","circlesHexagons":"Circles & Hexagons","login":"Sign In","logout":"Sign Out","signInEmail":"Sign in with your email below","signInUpgrade":"Sign in to upgrade","checkEmail":"Check your email for the magic link","sendLink":"Send magic link","sending":"Sending","saving":"Saving","save":"Save","unlockPotential":"Unlock Your Potential","choosePlan":"Choose Your Plan","pricing":"Pricing","pricingPlan":"Pricing Plan","monthly":"Monthly","yearly":"Yearly","lifetime":"Lifetime","month":"month","year":"year","shortTermCommitment":"Short Term Commitment.","renewsMonthly":"Renews monthly.","getFreeMonths":"Get 4 months free.","renewsYearly":"Renews yearly.","onetimePurchase":"One-time Purchase.","lifetimeAccess":"Lifetime Access.","termsOfService":"Terms of Service","refundPolicy":"Refund Policy","allFutureUpdates":"All future updates","supportMyWork":"Support my work","settings":"Settings","welcome":"Welcome to Pattern Monster Pro!","purchaseSuccessful":"Your purchase was successful and your account has been upgraded.","readyExplore":"Ready to explore your new features?","clickBelow":"Click the button below to return to the home page and start creating.","done":"Done","loggedIn":"You are already logged in","name":"Name","or":"OR","signInGoogle":"Sign in with Google","currentBillingCycle":"Current billing cycle","updatePaymentMethod":"Update Payment Method","cancelSubscription":"Cancel Subscription","startProPlan":"Start Pro Plan","whatsIncluded":"What's Included","noAds":"Remove ads","premiumPatterns":"Premium Patterns","upgradePro":"Upgrade to Pro"};export default { strings };


--------------------------------------------------------------------------------
/src/routes/downloads.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import Footer from "../components/Footer.svelte";
  3 |   import lang from "./_lang.js";
  4 |   let strings = lang.strings;
  5 | 
  6 |   import Constants from "./_constants.js";
  7 |   let page = "downloads";
  8 |   let { title, url, keywords, desc, image, versions } =
  9 |     Constants.pageDetails(page);
 10 | 
 11 |   export let newPosts = [
 12 |     "Christmas Joy",
 13 |     "Retro Christmas",
 14 |     "Winter Sky",
 15 |     "Winter Forest",
 16 |     "Winter Rains",
 17 |     "Holiday Cheers",
 18 |     "Rosy Flamingo",
 19 |     "Speckled Eggs",
 20 |     "Scooping Ice Cream",
 21 |     "Icy Gradient",
 22 |     "Velvet Petals",
 23 |     "Emerald Garden",
 24 |     "Mango Mojito",
 25 |     "Rosy Dew",
 26 |     "Zesty Lime",
 27 |     "Ocean Floor",
 28 |     "Electric Summer",
 29 |     "Asian Inspiration",
 30 |     "Floating Ice",
 31 |     "Blushing Pink",
 32 |     "Crisp Citrus",
 33 |     "Berry Blues",
 34 |     "Garden Fresh",
 35 |     "Spicy Neutrals",
 36 |     "Arctic Sunrise",
 37 |     "Neon Night",
 38 |     "Hazy Morning",
 39 |     "Mediterranean Noon",
 40 |     "Sea Breeze",
 41 |     "Desert Night",
 42 |     "Bamboo Beach",
 43 |     "Volcano Floor",
 44 |     "Arctic Camouflage",
 45 |     "Barren Rock",
 46 |     "Pacific Sunset",
 47 |     "Vintage Wrapper",
 48 |     "Tropic Popsicles",
 49 |     "Natural Environment",
 50 |     "Vibrant Vibes",
 51 |     "Exotic Orchid",
 52 |     "Citrus Peel",
 53 |     "Bold Geometry",
 54 |     "Succulent Garden",
 55 |     "Summer Getaway",
 56 |     "Royal Bouquet",
 57 |     "Caffe Latte",
 58 |     "Aqua Splash",
 59 |     "Petal Party",
 60 |     "Night Sky",
 61 |     "Crystal River",
 62 |     "Dusty Grass",
 63 |     "Deep Relief",
 64 |     "Juicy Peach",
 65 |     "Spring Pastels",
 66 |     "Night Party",
 67 |     "Snowy Mint",
 68 |     "Beach Day",
 69 |     "Dense Water",
 70 |     "Heaven Peach",
 71 |     "Summer Splash",
 72 |     "Cosmic Fusion",
 73 |     "Harvest Gold",
 74 |     "Alchemist Lab",
 75 |     "Dark Salmon",
 76 |     "Rare Wind",
 77 |     "Frozen Berry",
 78 |     "Shady Water",
 79 |     "Backdoor Casual",
 80 |     "Summer Games",
 81 |     "Cheeky Marguerita",
 82 |     "Rich Metal",
 83 |     "Secret Romance",
 84 |     "Evening Night",
 85 |     "Beauty Bush",
 86 |     "Plum Bath",
 87 |     "Jungle Day",
 88 |     "Fresh Oasis",
 89 |     "Faraway River",
 90 |     // "Sand Strike",
 91 |     // "Morpheus Den",
 92 |     // "Mars Party",
 93 |     // "Morning Salad",
 94 |     // "Teen Notebook",
 95 |     // "Party Bliss",
 96 |     // "Lemon Gate",
 97 |     // "Plum Plate",
 98 |     // "Fruit Blend",
 99 |   ];
100 |   const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
101 | 
102 |   const diffDays = Math.round(
103 |     Math.abs((new Date() - new Date(2020, 11, 19)) / oneDay)
104 |   );
105 | 
106 |   let imagePrefix = "https://giguom.com/pattern.monster/images/";
107 | </script>
108 | 
109 | <svelte:head>
110 |   <title>{title}</title>
111 |   <link rel="canonical" href={url} />
112 |   {#if versions}
113 |     {#each versions as version}
114 |       <link rel="alternate" href={version.website} hreflang={version.lang} />
115 |     {/each}
116 |   {/if}
117 |   <meta name="description" content={desc} />
118 |   <meta name="keywords" content={keywords} />
119 | 
120 |   <!-- Open Graph / Facebook -->
121 |   <meta property="og:url" content={url} />
122 |   <meta property="og:title" content={title} />
123 |   <meta property="og:description" content={desc} />
124 |   <meta property="og:image" content={image} />
125 | 
126 |   <!-- Twitter -->
127 |   <meta name="twitter:url" content={url} />
128 |   <meta name="twitter:title" content={title} />
129 |   <meta name="twitter:description" content={desc} />
130 |   <meta name="twitter:image" content={image} />
131 |   <meta name="twitter:image:src" content={image} />
132 |   <meta name="twitter:image:alt" content={title} />
133 |   <script defer src="https://gumroad.com/js/gumroad.js"></script>
134 | </svelte:head>
135 | <div class="outer">
136 |   <h1 class="text-center mt-0">{strings.downloads}</h1>
137 | 
138 |   <div class="downloadGrid">
139 |     {#each newPosts as post, i}
140 |       {#if i < diffDays}
141 |         <div class="elementGrid">
142 |           <img
143 |             loading="lazy"
144 |             src={imagePrefix +
145 |               "downloads/" +
146 |               post.toLowerCase().replace(/ /g, "-") +
147 |               "_Twitter.png"}
148 |             alt={post}
149 |             title={post}
150 |           />
151 |           <h2>{post} patterns</h2>
152 |           <a
153 |             class="button-gumroad"
154 |             href={"https://gum.co/" +
155 |               post.toLowerCase().replace(/ /g, "-") +
156 |               "?wanted=true"}
157 |             target="_blank"
158 |             rel="noopener noreferrer"
159 |           >
160 |             <span class="logo" />
161 |             <span>{strings.download}</span></a
162 |           >
163 |           <!-- <a
164 |             class="gumroad-button"
165 |             href={"https://gum.co/" + post.toLowerCase().replace(/ /g, "-") + "?wanted=true"}
166 |             target="_blank"
167 |             data-gumroad-single-product="true">{strings.download}</a
168 |           > -->
169 |         </div>
170 |       {/if}
171 |     {/each}
172 |   </div>
173 | </div>
174 | 
175 | <Footer />
176 | 
177 | <style>
178 |   h1 {
179 |     font-size: 2em;
180 |     font-weight: 600;
181 |     padding: 0.5em;
182 |     color: var(--secondary-text-color);
183 |     margin-bottom: 0.5em;
184 |     text-transform: uppercase;
185 |   }
186 |   h2 {
187 |     font-weight: 600;
188 |     font-size: 1em;
189 |     text-transform: uppercase;
190 |     letter-spacing: 0.05em;
191 |   }
192 |   .outer {
193 |     background-color: var(--pattern-bg);
194 |     color: var(--secondary-text-color);
195 |     padding: 2em;
196 |   }
197 |   .downloadGrid {
198 |     display: grid;
199 |     gap: 5em;
200 |     grid-template-columns: 1fr 1fr 1fr 1fr;
201 |     padding-bottom: 3em;
202 |   }
203 |   .elementGrid {
204 |     background-color: var(--svg-bg);
205 |     display: grid;
206 |     gap: 0.75em;
207 |     justify-items: center;
208 |     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
209 |       0 4px 6px -2px rgba(0, 0, 0, 0.05);
210 |     border-radius: var(--border-radius);
211 |     overflow: hidden;
212 |     padding-bottom: 2em;
213 |   }
214 |   .button-gumroad {
215 |     background-color: white;
216 |     background-image: url(https://app.gumroad.com/button/button_bar.jpg);
217 |     background-repeat: repeat-x;
218 |     border-radius: 4px;
219 |     box-shadow: rgb(0 0 0 / 40%) 0 0 2px;
220 |     color: #999;
221 |     display: flex;
222 |     font-family: -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue",
223 |       Helvetica, Arial, sans-serif;
224 |     font-size: 16px;
225 |     font-style: normal;
226 |     font-weight: 500;
227 |     line-height: 44px;
228 |     padding: 0 7.5px;
229 |     text-decoration: none;
230 |     align-items: center;
231 |   }
232 |   .button-gumroad span {
233 |     padding: 0 7.5px;
234 |   }
235 |   .logo {
236 |     background-image: url(https://app.gumroad.com/button/button_logo.png);
237 |     background-size: cover;
238 |     height: 17px;
239 |     width: 16px;
240 |     display: inline-block;
241 |     /* margin-bottom: -3px; */
242 |     margin: 0 7.5px;
243 |   }
244 | 
245 |   @media (max-width: 2400px) {
246 |     .downloadGrid {
247 |       grid-template-columns: 1fr 1fr 1fr;
248 |     }
249 |   }
250 | 
251 |   @media (max-width: 1280px) {
252 |     .downloadGrid {
253 |       grid-template-columns: 1fr 1fr;
254 |     }
255 |   }
256 | 
257 |   @media (max-width: 768px) {
258 |     .downloadGrid {
259 |       grid-template-columns: 1fr;
260 |     }
261 |   }
262 | </style>
263 | 


--------------------------------------------------------------------------------
/static/pickr-1725151604.min.css:
--------------------------------------------------------------------------------
1 | /*! Pickr 1.7.2 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pickr .pcr-button{position:relative;height:3em;width:3em;padding:.5em;cursor:pointer;border:2px solid var(--secondary-text-color);border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;color:var(--pcr-color);background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:0;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:inherit;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;padding:0;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:0 0;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{-webkit-filter:brightness(1.05);filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{-webkit-filter:brightness(0.975);filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;width:100%;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{-webkit-filter:brightness(0.925);filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-interaction:first-child{width:100%}.pcr-interaction:not(:first-child){flex:1}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:-webkit-grab;cursor:grab}.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette:active{cursor:-webkit-grabbing;cursor:grabbing}.pcr-app[data-theme=monolith]{width:14.25em;max-width:95vw;padding:.8em}.pcr-app[data-theme=monolith] .pcr-selection{display:flex;flex-direction:column;justify-content:space-between;flex-grow:1}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:100%;height:1em;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:.5em}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;transition:background-color .3s,box-shadow .3s;border-radius:.15em 0 0 .15em;z-index:2}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 .15em .15em 0}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-current-color,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-preview .pcr-last-color{background:currentColor;width:50%;height:100%}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity{height:.5em;margin-top:.75em}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=monolith] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,.25em}


--------------------------------------------------------------------------------
/src/components/Footer.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import Constants from "../routes/_constants.js";
  3 |   import Values from "../routes/_values.js";
  4 |   import lang from "../routes/_lang.js";
  5 |   let strings = lang.strings;
  6 |   // import { onMount, onDestroy } from "svelte";
  7 | 
  8 |   let show = false;
  9 |   // const timeoutId = setTimeout(() => {
 10 |   //   show = true;
 11 | 
 12 |   //   let element = document.querySelector('[aria-label="Your email address"]');
 13 |   //   console.log(element);
 14 |   //   element.setAttribute("placeholder", "Username");
 15 |   // }, 400);
 16 |   // onDestroy(() => clearTimeout(timeoutId));
 17 | 
 18 |   // let timeoutId;
 19 |   // onMount(async () => {
 20 |   //   timeoutId = setTimeout(() => {
 21 |   //     show = true;
 22 | 
 23 |   //     let element = document.querySelector('[aria-label="Your email address"]');
 24 |   //     if (element) element.setAttribute("placeholder", strings.email);
 25 | 
 26 |   //     let sendButton = document.querySelector(".subscribe-bottom span");
 27 |   //     if (sendButton) sendButton.innerHTML = strings.sendPatterns;
 28 |   //   }, 400);
 29 |   // });
 30 |   // onDestroy(() => clearTimeout(timeoutId));
 31 | </script>
 32 | 
 33 | <footer>
 34 |   <div
 35 |     class="footerOuter grid grid-flow-row md:grid-flow-col container mx-auto justify-center items-center pb-5 pt-2 main-bg white-text"
 36 |   >
 37 |     <!-- <a name="subscribe" />
 38 |     <div class="subscribe-bottom grid mx-auto p-6 max-w-lg">
 39 |       <p class="text-center pb-5">{strings.signUp}</p>
 40 |       <script
 41 |         async
 42 |         data-uid="1f3a13ab3c"
 43 |         src="https://crafty-artist-9316.ck.page/1f3a13ab3c/index.js"
 44 |       >
 45 |       </script>
 46 |     </div> -->
 47 |     <div class="grid justify-center px-6">
 48 |       <div class="flex flex-wrap justify-center p-4 -mx-3">
 49 |         <a class="secondary-link my-2 mx-3" href="changelog/"
 50 |           >{strings.changelog}</a
 51 |         >
 52 |         <a class="secondary-link my-2 mx-3" href="features/"
 53 |           >{strings.features}</a
 54 |         >
 55 |         <a class="secondary-link my-2 mx-3" href="privacy-policy/"
 56 |           >{strings.privacy}</a
 57 |         >
 58 |       </div>
 59 |       <div class="grid grid-flow-col gap-6 justify-center pt-2 pb-4">
 60 |         <a
 61 |           class="secondary-link"
 62 |           rel="noopener noreferrer"
 63 |           title="GitHub"
 64 |           target="_blank"
 65 |           href="https://github.com/catchspider2002/svelte-svg-patterns"
 66 |         >
 67 |           <svg
 68 |             class="icon"
 69 |             xmlns="http://www.w3.org/2000/svg"
 70 |             viewBox="0 0 24 24"
 71 |           >
 72 |             <path d={Values.icons.github} />
 73 |           </svg></a
 74 |         >
 75 |         <a
 76 |           class="secondary-link"
 77 |           rel="noopener noreferrer"
 78 |           title="Twitter"
 79 |           target="_blank"
 80 |           href="https://twitter.com/Pattern_Monster"
 81 |         >
 82 |           <svg
 83 |             class="icon"
 84 |             xmlns="http://www.w3.org/2000/svg"
 85 |             viewBox="0 0 24 24"
 86 |           >
 87 |             <path d={Values.icons.x} />
 88 |           </svg></a
 89 |         >
 90 |         <a
 91 |           class="secondary-link"
 92 |           rel="noopener noreferrer"
 93 |           title="Instagram"
 94 |           target="_blank"
 95 |           href="https://www.instagram.com/pattern.monster/"
 96 |         >
 97 |           <svg
 98 |             class="icon"
 99 |             xmlns="http://www.w3.org/2000/svg"
100 |             viewBox="0 0 24 24"
101 |           >
102 |             <path d={Values.icons.instagram} />
103 |           </svg></a
104 |         >
105 |         <a
106 |           class="secondary-link"
107 |           rel="noopener noreferrer"
108 |           title="Facebook"
109 |           target="_blank"
110 |           href="https://www.facebook.com/pattern.monster/"
111 |         >
112 |           <svg
113 |             class="icon"
114 |             xmlns="http://www.w3.org/2000/svg"
115 |             viewBox="0 0 24 24"
116 |           >
117 |             <path d={Values.icons.facebook} />
118 |           </svg></a
119 |         >
120 |         <a
121 |           class="secondary-link"
122 |           rel="noopener noreferrer"
123 |           title="Pinterest"
124 |           target="_blank"
125 |           href="https://www.pinterest.com/patternmonster/"
126 |         >
127 |           <svg
128 |             class="icon"
129 |             xmlns="http://www.w3.org/2000/svg"
130 |             viewBox="0 0 24 24"
131 |           >
132 |             <path d={Values.icons.pinterest} />
133 |           </svg></a
134 |         >
135 |       </div>
136 | 
137 |       <a
138 |         rel="noopener noreferrer"
139 |         title={strings.buyCoffee}
140 |         class="bmcCta secondary-link block lg:hidden"
141 |         target="_blank"
142 |         href="https://www.buymeacoffee.com/naveencs"
143 |       >
144 |         <div
145 |           class="flex items-center"
146 |           style="background-color: #805ad5; padding: 0.65rem 1rem; border-radius: 0.75rem;"
147 |         >
148 |           <svg
149 |             style="height: 42px;"
150 |             fill="none"
151 |             xmlns="http://www.w3.org/2000/svg"
152 |             viewBox="0 0 67.64 97.92"
153 |             ><path
154 |               d="M36.18 45.23c-3.52 1.5-7.51 3.23-12.7 3.23a24 24 0 0 1-6.4-.89l3.59 36.74a6.14 6.14 0 0 0 6.12 5.63s5.07.26 6.76.26c1.83 0 7.29-.26 7.29-.26a6.14 6.14 0 0 0 6.12-5.63l3.83-40.6a16.3 16.3 0 0 0-5.4-.97c-3.36 0-6.08 1.16-9.21 2.5z"
155 |               fill="#ffc800"
156 |             /><path
157 |               d="m67.34 26.17-.54-2.72c-.48-2.43-1.58-4.74-4.08-5.62-.8-.28-1.72-.4-2.33-.99-.62-.58-.8-1.49-.94-2.33l-.78-4.62c-.23-1.33-.42-2.8-1.03-4.03-.8-1.63-2.43-2.58-4.06-3.2-.83-.33-1.7-.59-2.55-.8C46.95.77 42.67.38 38.48.15c-5.03-.28-10.08-.2-15.1.25-3.73.34-7.67.75-11.22 2.04A9.5 9.5 0 0 0 8.54 4.5a3.92 3.92 0 0 0-.72 4.67 6.05 6.05 0 0 0 2.82 2.37c1.47.66 3 1.16 4.58 1.5 4.39.96 8.93 1.34 13.4 1.5 4.98.2 9.96.04 14.9-.48 1.22-.14 2.44-.3 3.66-.49 1.44-.22 2.36-2.1 1.93-3.4-.5-1.56-1.86-2.17-3.4-1.93l-.68.1-.16.02a95.5 95.5 0 0 1-4.8.47 107.24 107.24 0 0 1-19.14-.4l-.47-.07h-.1l-.48-.08a50.9 50.9 0 0 1-2.96-.53.44.44 0 0 1 0-.87h.02a47.95 47.95 0 0 1 3.42-.6c.54-.03 1.08-.13 1.6-.2a102.3 102.3 0 0 1 22.2.1l.57.08.38.05c1.09.16 2.17.36 3.25.6 1.6.34 3.66.45 4.37 2.2.22.56.33 1.18.45 1.76l.16.75v.04l1.14 5.27a.95.95 0 0 1-.15.75.97.97 0 0 1-.66.4h-.01l-.23.04-.23.03a128.48 128.48 0 0 1-6.45.68 149.64 149.64 0 0 1-12.9.52 151.25 151.25 0 0 1-19.17-1.24l-.51-.07-1.2-.17c-1.32-.2-2.63-.45-3.96-.66a6.9 6.9 0 0 0-4.58.66 6.66 6.66 0 0 0-2.76 2.86c-.62 1.3-.8 2.7-1.08 4.08-.28 1.4-.72 2.88-.55 4.3a6.87 6.87 0 0 0 5.59 6.13 161.9 161.9 0 0 0 46.27 1.53 1.98 1.98 0 0 1 2.19 2.17l-.3 2.85a1089465 1089465 0 0 1-4.15 40.42c-.17 1.67-.2 3.4-.5 5.04-.5 2.6-2.27 4.2-4.83 4.78-2.35.54-4.76.82-7.17.84-2.67.01-5.34-.1-8.01-.1-2.86.02-6.35-.24-8.55-2.36-1.94-1.87-2.2-4.79-2.47-7.3l-1.04-10.04-1.94-18.59-1.25-12.02-.07-.6c-.15-1.43-1.16-2.84-2.76-2.77-1.37.06-2.93 1.23-2.77 2.77l.93 8.92 1.92 18.44 1.64 15.72.3 3.01c.6 5.5 4.8 8.44 9.99 9.27 3.03.5 6.14.6 9.2.64 3.95.06 7.93.22 11.8-.5 5.75-1.05 10.06-4.89 10.68-10.84l.53-5.15 1.75-17.05 1.9-18.58.87-8.5a1.98 1.98 0 0 1 1.6-1.75c1.64-.32 3.2-.87 4.38-2.12 1.86-1.99 2.23-4.58 1.57-7.2zm-61.8 1.84c.03 0-.02.2-.04.3 0-.15 0-.28.05-.3zm.16 1.23c.02 0 .06.04.1.1zm.16.2c.06.1.09.16 0 0zm.32.26.02.03a.21.21 0 0 0-.03-.03zm55.13-.38c-.6.56-1.48.82-2.36.95a166.3 166.3 0 0 1-29.81 1.9A200.69 200.69 0 0 1 7.9 30.12c-.7-.1-1.44-.23-1.92-.74-.9-.96-.46-2.9-.22-4.06.2-1.06.62-2.48 1.88-2.63 1.98-.23 4.28.6 6.23.9a136.85 136.85 0 0 0 37.57.3c1.84-.26 3.67-.54 5.5-.87 1.62-.3 3.42-.84 4.4.84.67 1.15.76 2.68.66 3.98a2.2 2.2 0 0 1-.7 1.48z"
158 |               fill="#0d0c22"
159 |             /></svg
160 |           >
161 |           <span class="coffee test-xl">{strings.buyCoffee}</span>
162 |         </div>
163 |         <!-- {@html Constants.bmcFooter} -->
164 |       </a>
165 |       <div class="footer flex flex-wrap justify-center light-text p-2">
166 |         Made with&nbsp;
167 |         <span style="color:#ff5454">❤</span>
168 |         &nbsp;by&nbsp;<a
169 |           rel="noopener noreferrer"
170 |           class="secondary-text secondary-link"
171 |           href="https://twitter.com/MrNaveenCS">Naveen CS</a
172 |         >
173 |       </div>
174 |     </div>
175 |   </div>
176 | 
177 |   <section
178 |     class="container mx-auto pb-6 mb-4 pt-2 px-4 flex flex-wrap place-content-center"
179 |   >
180 |     {#each Constants.strings.langs as lang}
181 |       <a
182 |         class="langOuter"
183 |         target="_blank"
184 |         rel="noopener noreferrer"
185 |         href="https://crowdin.com/project/pattern-monster"
186 |         ><span>{lang.name}</span>
187 |         {#if lang.approval == 100}
188 |           <span class="brightgreen">{lang.approval}%</span>
189 |         {:else if lang.approval > 79}
190 |           <span class="green">{lang.approval}%</span>
191 |         {:else if lang.approval > 64}
192 |           <span class="yellow">{lang.approval}%</span>
193 |         {:else if lang.approval > 49}
194 |           <span class="orange">{lang.approval}%</span>
195 |         {:else}
196 |           <span class="red">{lang.approval}%</span>
197 |         {/if}
198 |       </a>
199 |     {/each}
200 |   </section>
201 | </footer>
202 | 


--------------------------------------------------------------------------------
/src/css/pickr.css:
--------------------------------------------------------------------------------
  1 | /*! Pickr 1.7.2 MIT | https://github.com/Simonwep/pickr */
  2 | .pickr {
  3 |   position: relative;
  4 |   overflow: visible;
  5 |   transform: translateY(0);
  6 | }
  7 | .pickr * {
  8 |   box-sizing: border-box;
  9 |   outline: none;
 10 |   border: none;
 11 |   -webkit-appearance: none;
 12 |   -moz-appearance: none;
 13 |   appearance: none;
 14 | }
 15 | .pickr .pcr-button {
 16 |   position: relative;
 17 |   height: 3em;
 18 |   width: 3em;
 19 |   padding: 0.5em;
 20 |   cursor: pointer;
 21 |   border: 2px solid var(--secondary-text-color);
 22 |   /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; */
 23 |   border-radius: 0.15em;
 24 |   background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>')
 25 |     no-repeat 50%;
 26 |   color: var(--pcr-color);
 27 |   background-size: 0;
 28 |   transition: all 0.3s;
 29 | }
 30 | .pickr .pcr-button:before {
 31 |   background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
 32 |   background-size: 0.5em;
 33 |   z-index: -1;
 34 |   z-index: auto;
 35 | }
 36 | .pickr .pcr-button:after,
 37 | .pickr .pcr-button:before {
 38 |   position: absolute;
 39 |   content: "";
 40 |   top: 0;
 41 |   left: 0;
 42 |   width: 100%;
 43 |   height: 100%;
 44 |   border-radius: 0.15em;
 45 | }
 46 | .pickr .pcr-button:after {
 47 |   transition: background 0.3s;
 48 |   background: currentColor;
 49 | }
 50 | .pickr .pcr-button.clear {
 51 |   background-size: 70%;
 52 | }
 53 | .pickr .pcr-button.clear:before {
 54 |   opacity: 0;
 55 | }
 56 | .pickr .pcr-button.clear:focus {
 57 |   box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px currentColor;
 58 | }
 59 | .pickr .pcr-button.disabled {
 60 |   cursor: not-allowed;
 61 | }
 62 | .pcr-app *,
 63 | .pickr * {
 64 |   box-sizing: border-box;
 65 |   outline: none;
 66 |   border: none;
 67 |   -webkit-appearance: none;
 68 |   -moz-appearance: none;
 69 |   appearance: none;
 70 | }
 71 | .pcr-app button.pcr-active,
 72 | .pcr-app button:focus,
 73 | .pcr-app input.pcr-active,
 74 | .pcr-app input:focus,
 75 | .pickr button.pcr-active,
 76 | .pickr button:focus,
 77 | .pickr input.pcr-active,
 78 | .pickr input:focus {
 79 |   box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px currentColor;
 80 | }
 81 | .pcr-app .pcr-palette,
 82 | .pcr-app .pcr-slider,
 83 | .pickr .pcr-palette,
 84 | .pickr .pcr-slider {
 85 |   transition: box-shadow 0.3s;
 86 | }
 87 | .pcr-app .pcr-palette:focus,
 88 | .pcr-app .pcr-slider:focus,
 89 | .pickr .pcr-palette:focus,
 90 | .pickr .pcr-slider:focus {
 91 |   box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(0, 0, 0, 0.25);
 92 | }
 93 | .pcr-app {
 94 |   position: fixed;
 95 |   display: flex;
 96 |   flex-direction: column;
 97 |   z-index: 10000;
 98 |   border-radius: 0.1em;
 99 |   background: #fff;
100 |   opacity: 0;
101 |   visibility: hidden;
102 |   transition: opacity 0.3s, visibility 0s 0.3s;
103 |   font-family: inherit;
104 |   /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; */
105 |   box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
106 |   left: 0;
107 |   top: 0;
108 | }
109 | .pcr-app.visible {
110 |   transition: opacity 0.3s;
111 |   visibility: visible;
112 |   opacity: 1;
113 | }
114 | .pcr-app .pcr-swatches {
115 |   display: flex;
116 |   flex-wrap: wrap;
117 |   margin-top: 0.75em;
118 | }
119 | .pcr-app .pcr-swatches.pcr-last {
120 |   margin: 0;
121 | }
122 | @supports (display: grid) {
123 |   .pcr-app .pcr-swatches {
124 |     display: grid;
125 |     align-items: center;
126 |     grid-template-columns: repeat(auto-fit, 1.75em);
127 |   }
128 | }
129 | .pcr-app .pcr-swatches > button {
130 |   font-size: 1em;
131 |   position: relative;
132 |   width: calc(1.75em - 5px);
133 |   height: calc(1.75em - 5px);
134 |   border-radius: 0.15em;
135 |   /* cursor: pointer; */
136 |   padding: 0;
137 |   margin: 2.5px;
138 |   flex-shrink: 0;
139 |   justify-self: center;
140 |   transition: all 0.15s;
141 |   overflow: hidden;
142 |   background: transparent;
143 |   z-index: 1;
144 | }
145 | .pcr-app .pcr-swatches > button:before {
146 |   position: absolute;
147 |   content: "";
148 |   top: 0;
149 |   left: 0;
150 |   width: 100%;
151 |   height: 100%;
152 |   background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
153 |   background-size: 6px;
154 |   border-radius: 0.15em;
155 |   z-index: -1;
156 | }
157 | .pcr-app .pcr-swatches > button:after {
158 |   content: "";
159 |   position: absolute;
160 |   top: 0;
161 |   left: 0;
162 |   width: 100%;
163 |   height: 100%;
164 |   /* background: currentColor; */
165 |   background-color: var(--pcr-color);
166 |   border: 1px solid rgba(0, 0, 0, 0.05);
167 |   border-radius: 0.15em;
168 |   box-sizing: border-box;
169 | }
170 | .pcr-app .pcr-swatches > button:hover {
171 |   -webkit-filter: brightness(1.05);
172 |   filter: brightness(1.05);
173 | }
174 | .pcr-app .pcr-swatches > button:not(.pcr-active) {
175 |   box-shadow: none;
176 | }
177 | .pcr-app .pcr-interaction {
178 |   display: flex;
179 |   flex-wrap: wrap;
180 |   align-items: center;
181 |   margin: 0 -0.2em;
182 | }
183 | .pcr-app .pcr-interaction > * {
184 |   margin: 0 0.2em;
185 | }
186 | .pcr-app .pcr-interaction input {
187 |   letter-spacing: 0.07em;
188 |   font-size: 0.75em;
189 |   text-align: center;
190 |   cursor: pointer;
191 |   color: #75797e;
192 |   background: #f1f3f4;
193 |   border-radius: 0.15em;
194 |   transition: all 0.15s;
195 |   padding: 0.45em 0.5em;
196 |   margin-top: 0.75em;
197 | }
198 | .pcr-app .pcr-interaction input:hover {
199 |   -webkit-filter: brightness(0.975);
200 |   filter: brightness(0.975);
201 | }
202 | .pcr-app .pcr-interaction input:focus {
203 |   box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(66, 133, 244, 0.75);
204 | }
205 | .pcr-app .pcr-interaction .pcr-result {
206 |   color: #75797e;
207 |   text-align: left;
208 |   flex: 1 1 8em;
209 |   min-width: 8em;
210 |   width: 100%;
211 |   transition: all 0.2s;
212 |   border-radius: 0.15em;
213 |   background: #f1f3f4;
214 |   cursor: text;
215 | }
216 | .pcr-app .pcr-interaction .pcr-result::-moz-selection {
217 |   background: #4285f4;
218 |   color: #fff;
219 | }
220 | .pcr-app .pcr-interaction .pcr-result::selection {
221 |   background: #4285f4;
222 |   color: #fff;
223 | }
224 | .pcr-app .pcr-interaction .pcr-type.active {
225 |   color: #fff;
226 |   background: #4285f4;
227 | }
228 | .pcr-app .pcr-interaction .pcr-cancel,
229 | .pcr-app .pcr-interaction .pcr-clear,
230 | .pcr-app .pcr-interaction .pcr-save {
231 |   width: auto;
232 |   color: #fff;
233 | }
234 | .pcr-app .pcr-interaction .pcr-cancel:hover,
235 | .pcr-app .pcr-interaction .pcr-clear:hover,
236 | .pcr-app .pcr-interaction .pcr-save:hover {
237 |   -webkit-filter: brightness(0.925);
238 |   filter: brightness(0.925);
239 | }
240 | .pcr-app .pcr-interaction .pcr-save {
241 |   background: #4285f4;
242 | }
243 | .pcr-app .pcr-interaction .pcr-cancel,
244 | .pcr-app .pcr-interaction .pcr-clear {
245 |   background: #f44250;
246 | }
247 | .pcr-app .pcr-interaction .pcr-cancel:focus,
248 | .pcr-app .pcr-interaction .pcr-clear:focus {
249 |   box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.85), 0 0 0 3px rgba(244, 66, 80, 0.75);
250 | }
251 | .pcr-interaction:first-child {
252 |   width: 100%;
253 | }
254 | 
255 | .pcr-interaction:not(:first-child) {
256 |   flex: 1;
257 | }
258 | .pcr-app .pcr-selection .pcr-picker {
259 |   position: absolute;
260 |   height: 18px;
261 |   width: 18px;
262 |   border: 2px solid #fff;
263 |   border-radius: 100%;
264 |   -webkit-user-select: none;
265 |   -moz-user-select: none;
266 |   -ms-user-select: none;
267 |   user-select: none;
268 | }
269 | .pcr-app .pcr-selection .pcr-color-chooser,
270 | .pcr-app .pcr-selection .pcr-color-opacity,
271 | .pcr-app .pcr-selection .pcr-color-palette {
272 |   position: relative;
273 |   -webkit-user-select: none;
274 |   -moz-user-select: none;
275 |   -ms-user-select: none;
276 |   user-select: none;
277 |   display: flex;
278 |   flex-direction: column;
279 |   cursor: -webkit-grab;
280 |   cursor: grab;
281 | }
282 | .pcr-app .pcr-selection .pcr-color-chooser:active,
283 | .pcr-app .pcr-selection .pcr-color-opacity:active,
284 | .pcr-app .pcr-selection .pcr-color-palette:active {
285 |   cursor: -webkit-grabbing;
286 |   cursor: grabbing;
287 | }
288 | .pcr-app[data-theme="monolith"] {
289 |   width: 14.25em;
290 |   max-width: 95vw;
291 |   padding: 0.8em;
292 | }
293 | .pcr-app[data-theme="monolith"] .pcr-selection {
294 |   display: flex;
295 |   flex-direction: column;
296 |   justify-content: space-between;
297 |   flex-grow: 1;
298 | }
299 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-preview {
300 |   position: relative;
301 |   z-index: 1;
302 |   width: 100%;
303 |   height: 1em;
304 |   display: flex;
305 |   flex-direction: row;
306 |   justify-content: space-between;
307 |   margin-bottom: 0.5em;
308 | }
309 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-preview:before {
310 |   position: absolute;
311 |   content: "";
312 |   top: 0;
313 |   left: 0;
314 |   width: 100%;
315 |   height: 100%;
316 |   background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
317 |   background-size: 0.5em;
318 |   border-radius: 0.15em;
319 |   z-index: -1;
320 | }
321 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-preview .pcr-last-color {
322 |   cursor: pointer;
323 |   transition: background-color 0.3s, box-shadow 0.3s;
324 |   border-radius: 0.15em 0 0 0.15em;
325 |   z-index: 2;
326 | }
327 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-preview .pcr-current-color {
328 |   border-radius: 0 0.15em 0.15em 0;
329 | }
330 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-preview .pcr-current-color,
331 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-preview .pcr-last-color {
332 |   background: currentColor;
333 |   width: 50%;
334 |   height: 100%;
335 | }
336 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-palette {
337 |   width: 100%;
338 |   height: 8em;
339 |   z-index: 1;
340 | }
341 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-palette .pcr-palette {
342 |   border-radius: 0.15em;
343 |   width: 100%;
344 |   height: 100%;
345 | }
346 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-palette .pcr-palette:before {
347 |   position: absolute;
348 |   content: "";
349 |   top: 0;
350 |   left: 0;
351 |   width: 100%;
352 |   height: 100%;
353 |   background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
354 |   background-size: 0.5em;
355 |   border-radius: 0.15em;
356 |   z-index: -1;
357 | }
358 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-chooser,
359 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-opacity {
360 |   height: 0.5em;
361 |   margin-top: 0.75em;
362 | }
363 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-chooser .pcr-picker,
364 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-opacity .pcr-picker {
365 |   top: 50%;
366 |   transform: translateY(-50%);
367 | }
368 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-chooser .pcr-slider,
369 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-opacity .pcr-slider {
370 |   flex-grow: 1;
371 |   border-radius: 50em;
372 | }
373 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-chooser .pcr-slider {
374 |   background: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
375 | }
376 | .pcr-app[data-theme="monolith"] .pcr-selection .pcr-color-opacity .pcr-slider {
377 |   background: linear-gradient(90deg, transparent, #000),
378 |     url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
379 |   background-size: 100%, 0.25em;
380 | }
381 | 


--------------------------------------------------------------------------------
/static/global-1725151604.min.css:
--------------------------------------------------------------------------------
1 | :root{--main-bg-color:rgb(42, 42, 48);--accent-color:#44337a;--pattern-bg:rgb(235, 235, 235);--card-bg:rgb(245, 245, 245);--input-bg:#ffffff;--secondary-color:#ffc800;--accent-text:#805ad5;--accent-hover:#805ad5aa;--accent-text-color:#ffffff;--secondary-text-color:#000000;--accent-color-hover:rgba(68, 51, 122, 0.8);--secondary-color-hover:rgba(255, 200, 0, 0.8);--border-radius:4px;--blockquote-color:103,106,109;--gray-300:#e2e8f0;--gray-400:#cbd5e0;--gray-500:#a0aec0;--gray-600:#718096;--gray-700:#4a5568;--gray-800:#2d3748;--gray-900:#1a202c;--font:"Nunito",sans-serif;--svg-bg:white;--gray-bg:var(--gray-400);--gray-text:var(--gray-600);--input-background:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='300px' height='300px' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round'><path fill='none' stroke='%231a202c' stroke-width='1' d='m 6,9 6,6 6,-6'/></svg>"),linear-gradient(to bottom, var(--card-bg) 0%, var(--card-bg) 100%);--notification-list-padding:0.5em 1em 0.5em 2.5em;--notification-header-padding:1.5em 1em 0.5em 1.5em;--notification-header-margin:1em -0.8em 0 -2.5em}[data-theme=dark]{--pattern-bg:rgb(24, 24, 30);--card-bg:rgb(42, 42, 48);--input-bg:rgb(62, 62, 48);--accent-text-color:#000000;--secondary-text-color:#ffffff;--accent-text:#ecc94b;--accent-hover:#ecc94baa;--svg-bg:rgb(42, 42, 48);--gray-bg:var(--gray-700);--gray-text:var(--gray-500);--blockquote-color:148,146,143;--input-background:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='300px' height='300px' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round'><path fill='none' stroke='%23f7fafc' stroke-width='1' d='m 6,9 6,6 6,-6'/></svg>"),linear-gradient(to bottom, var(--card-bg) 0%, var(--card-bg) 100%)}[dir=rtl]{--notification-list-padding:0.5em 2.5em 0.5em 1em;--notification-header-padding:1.5em 1.5em 0.5em 1em;--notification-header-margin:1em -2.5em 0 -0.8em}*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--accent-color)}img,video{max-width:100%;height:auto}audio,canvas,embed,iframe,img,object,svg,video{display:block}@font-face{font-family:Coffee;src:local("Coffee"),local("coffee"),url("https://giguom.com/pattern.monster/fonts/coffeefont.ttf");font-weight:400;font-display:swap}.coffee{font-family:Coffee,"Arial Narrow Bold",sans-serif;margin-left:.6rem;font-size:.9rem;font-weight:500;color:#fff}html{font-family:var(--font);font-display:swap}body{background-color:var(--main-bg-color);margin:0;line-height:1.5;color:var(--accent-color);font-size:19px}.closed{display:none}h1{font-weight:400;font-size:3.2em;margin-top:.5rem;line-height:1em}h1>span{color:var(--accent-text)}h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}h2{font-size:1.6em;color:var(--dark-text);margin-bottom:.5rem}a{color:inherit;text-decoration:none}a:hover{color:var(--secondary-color)}input{font-family:var(--font);font-display:swap;background-color:var(--input-bg)}input[type=number]{color:var(--secondary-text-color);line-height:1.25;padding:.5rem;font-size:1rem;width:80px;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;border-radius:var(--border-radius);background-color:var(--gray-bg)}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=range]{width:100%;margin:7.3px 0;background-color:transparent;-webkit-appearance:none}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{background:var(--accent-text);border-radius:var(--border-radius);width:100%;height:4px;cursor:pointer}input[type=range]::-moz-range-track{background:var(--accent-text);border-radius:var(--border-radius);width:100%;height:4px;cursor:pointer}input[type=range]:focus::-webkit-slider-runnable-track{background:var(--accent-hover)}input[type=range]::-webkit-slider-thumb{margin-top:-10.5px;width:28px;height:28px;background:var(--pattern-bg);border:4px solid var(--accent-text);border-radius:var(--border-radius);cursor:pointer;-webkit-appearance:none}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--pattern-bg);border:4px solid var(--accent-text);border-radius:var(--border-radius);cursor:pointer}button{display:inline-block;border:none;padding:.375rem .75rem;margin:0;text-decoration:none;background-color:var(--secondary-color);border-radius:var(--border-radius);color:var(--main-bg-color);font-family:var(--font);font-display:swap;font-size:1em;cursor:pointer;text-align:center;transition:background 250ms ease-in-out,transform 150ms ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}button:focus,button:hover{background-color:var(--secondary-color-hover)}button:focus{outline:1px solid #fff}button:active{transform:scale(.99)}.accent-text{color:var(--accent-color)}.secondary-text{color:var(--secondary-color)}.accent-bg{background-color:var(--accent-color)}.secondary-bg{background-color:var(--secondary-color)}.main-bg{background-color:var(--main-bg-color)}.light-text{color:var(--gray-300)}.dark-text{color:var(--gray-900)}.gray-text{color:var(--gray-text)}.white-text{color:#fff}.secondary-text-color{color:var(--secondary-text-color)}.pattern-bg{background-color:var(--pattern-bg)}.secondary-link{color:var(--secondary-color)}.secondary-link:hover{color:var(--secondary-color-hover)}.p-0{padding:0}.p-2{padding:.5rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.pt-2{padding-top:.5rem}.pt-12{padding-top:3rem}.pt-20{padding-top:4rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pb-6{padding-bottom:1.5rem}.pb-20{padding-bottom:4rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-24{padding-top:6rem;padding-bottom:6rem}.mr-5{margin-right:1.25rem}.mt-0{margin-top:0}.mt-2{margin-top:.5rem}.mt-6{margin-top:1.5rem}.mt-12{margin-top:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.-mx-8{margin-left:-2rem;margin-right:-2rem}.-mx-3{margin-left:-.75rem;margin-right:-.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.font-semibold{font-weight:600}.font-normal{font-weight:400}.text-center{text-align:center}.text-start{text-align:start}.text-end{text-align:end}.text-sm{font-size:.85em}.test-xl{font-size:1.25rem;line-height:1.75rem}.text-4xl{font-size:2em}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.container{max-width:1280px}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.grid{display:grid}.grid-flow-col{grid-auto-flow:column}.grid-flow-row{grid-auto-flow:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.place-content-start{place-content:start}.place-content-center{place-content:center}.text-balance{text-wrap:balance}.capitalize{text-transform:capitalize}.list-none{list-style-type:none}.list-circle{list-style-type:circle}.leading-loose{line-height:2}.bg-none{background-image:none}.indent-0{text-indent:0}.max-w-lg{max-width:32rem}.brandName{line-height:1}nav{position:sticky;top:0;z-index:5;background-color:var(--main-bg-color);height:3.2em;font-weight:300;padding:.4em 1em;display:grid;grid-auto-flow:column;grid-template-columns:1fr auto;align-items:center;font-size:.9em;place-content:center}.rightLinks{gap:.5em}.iconButton,.rightLinks a:not(.bmc),nav>a{padding:.5em .8em}.iconButton{background-color:transparent}.iconButton:active,.iconButton:focus,.iconButton:hover,.rightLinks a:active:not(.shiny),.rightLinks a:focus:not(.shiny),.rightLinks a:hover:not(.shiny),nav>a:hover{border-radius:var(--border-radius);background-color:var(--gray-800)}.logo,.logoHome{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;font-weight:700;letter-spacing:.05em;font-size:1em}.logoHome{padding-top:2rem;padding-bottom:1rem}.icon{width:1.5em;height:1.5em;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}nav button{color:var(--secondary-color);background-color:transparent;padding:.25em}nav button:hover{background-color:transparent}[aria-current]{position:relative;display:inline-block}[aria-current]::after{position:absolute;content:"";width:calc(100% - 1em);display:block;bottom:-1px}nav a{text-decoration:none;display:block;color:var(--secondary-color)}.logoOuter{grid-auto-flow:column;justify-content:start;gap:.75em;padding:0 .8em}.bellIcon,.gitHubIcon{position:relative;padding-right:.8em}.bellIcon{padding-left:.8em;margin-left:-.8em}.dropDownName{display:inline}.bellCount,.starsCount{position:absolute;font-size:.75em;font-weight:600;line-height:1;top:-.3em;right:0;color:var(--main-bg-color);background-color:var(--secondary-color);border-radius:var(--border-radius);padding:.25em .25em .1em}.bellCount{color:#fff;background-color:red;right:.9em}.notifications{z-index:20;display:none;width:80vw;max-width:360px;top:4.2em;position:fixed;font-size:.85em;border:1px solid var(--accent-text);box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-background-clip:padding-box;background-clip:padding-box;color:var(--secondary-text-color);border-radius:var(--border-radius);overflow:hidden;box-shadow:0 10px 15px -3px rgb(0 0 0 / 10%),0 4px 6px -2px rgb(0 0 0 / 5%)}.notifications h3{background-color:var(--accent-text);color:var(--accent-text-color);padding:.7em 1em;margin:0}.notifications a{display:inline;color:var(--accent-text);text-underline-offset:0.15em;text-decoration:underline;text-decoration-thickness:0.15em}.notifications a:hover{color:var(--accent-hover)}.viewLink{margin:0;background-color:var(--card-bg);padding-top:.5em}.viewLink a{text-decoration:none;display:grid;grid-auto-flow:column;place-content:start;border-top:1px solid var(--gray-text);padding:1.25em 1em;gap:.5em;font-size:1.1em}.notifications ul{padding:var(--notification-list-padding);overflow:auto;max-height:65vh;margin:0;background-color:var(--card-bg)}.notifications li{padding-bottom:.5em;color:var(--gray-text)}.notifications li.versionHeader{list-style:none;margin:var(--notification-header-margin);font-weight:600;border-top:1px solid var(--gray-text);padding:var(--notification-header-padding);font-size:1.1em;color:var(--secondary-text-color)}.notifications li:first-child{margin-top:0;border-top:0;padding-top:1em}button.bellIcon:active,button.bellIcon:focus,button.bellIcon:hover{background-color:transparent}.footerOuter{font-size:.9em;grid-template-columns:1fr;background-color:var(--main-bg-color)}.bmcCta{margin:.5em .5em 1em;justify-self:center}.bmc:focus,.bmc:hover,.bmcCta:focus,.bmcCta:hover,.shiny:focus,.shiny:hover{opacity:.85}#logs>li>a{color:var(--accent-text);border-bottom:2px solid var(--accent-text);padding-bottom:.125em}#logs>li>a:hover{color:var(--accent-hover);border-bottom:2px solid var(--accent-hover)}@media (max-width:1440px){body{font-size:18px}}@media (max-width:1280px){.container{max-width:1024px}.logoHome{padding-top:2rem}}@media (max-width:1024px){.container{max-width:768px}.bmc{display:none}}@media (max-width:768px){body{font-size:16px}.container{max-width:640px}nav{padding:.6em .5em}.logo,.logoHome{justify-self:center}}@media (max-width:640px){.container{width:100%}.tweetNav{display:none}.downloadsButton,.dropDownName,.gitHubIcon{display:none}}@media (max-width:450px){nav{padding:.3em .5em}.iconButton,.rightLinks a:not(.bmc),nav>a{padding:.3em .8em}}@media (max-width:420px){.brandName{display:none}}.block{display:block}.inline-block{display:inline-block}@media (min-width:768px){.md\:.grid-flow-col{grid-auto-flow:column}}@media (min-width:1024px){.lg\:hidden{display:none}}.brightgreen{background-color:#34d399;color:rgba(0,0,0,.8)}.green{background-color:#bef264;color:rgba(0,0,0,.8)}.yellow{background-color:#facc15;color:rgba(0,0,0,.8)}.orange{background-color:#f97316;color:rgba(255,255,255,.8)}.red{background-color:#ef4444;color:rgba(255,255,255,.8)}.langOuter{display:inline-grid;grid-auto-flow:column;font-size:.75em;place-content:start;justify-items:center;letter-spacing:.05em;color:#fff;font-weight:600;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:.45em;cursor:pointer}.langOuter:active,.langOuter:hover,.langOuter:visited{color:#fff}.langOuter>span:first-child{padding:1px 6px;border-radius:4px 0 0 4px;background-color:#555}.langOuter>span:last-child{padding:1px 6px;border-radius:0 4px 4px 0}@media (pointer:fine){*{scrollbar-width:auto;scrollbar-color:rgba(var(--blockquote-color),0.5) rgba(var(--blockquote-color),0.2)}::-webkit-scrollbar{height:14px;width:14px}::-webkit-scrollbar-track{background-color:rgba(var(--blockquote-color),.2)}::-webkit-scrollbar-thumb{background-color:rgba(var(--blockquote-color),.5)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.bottomSticky{--sticky-gradient:linear-gradient(-45deg, #86efac, #67e8f9, #a5b4fc);position:sticky;bottom:0;right:0;left:0;background:var(--sticky-gradient);background-size:400% 400%;animation:gradient 10s ease infinite;font-size:.8em;padding:.5em;display:flex}.bottomSticky div{place-content:center;align-items:center;margin:0 auto}.bottomSticky a{color:#000;font-weight:700;text-underline-offset:0.2em;text-decoration:underline;text-decoration-thickness:0.15em}


--------------------------------------------------------------------------------
/src/components/Nav.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   export let segment;
  3 |   import { fly, scale, fade } from "svelte/transition";
  4 |   // import { createEventDispatcher } from "svelte";
  5 |   import { onMount } from "svelte";
  6 |   // import Constants from "../routes/_constants.js";
  7 |   import Values from "../routes/_values.js";
  8 |   import { themeStore } from "../routes/stores.js";
  9 |   import LangSelect from "./LangSelect.svelte";
 10 |   import ShinyButton from "./ShinyButton.svelte";
 11 |   import lang from "../routes/_lang.js";
 12 |   let strings = lang.strings;
 13 |   let visible = true;
 14 |   let bellCount = "0";
 15 | 
 16 |   let starsCount = 569;
 17 | 
 18 |   // const dispatch = createEventDispatcher();
 19 | 
 20 |   // const triggerEvent = () => {
 21 |   //   dispatch("hello", "Rock");
 22 |   // };
 23 |   let dark = Values.icons.dark;
 24 |   let light = Values.icons.light;
 25 |   let theme = light;
 26 |   let toClose = false;
 27 | 
 28 |   let defaultNewTheme, latestUpdate;
 29 |   onMount(async () => {
 30 |     defaultNewTheme = localStorage.getItem("defaultNewTheme");
 31 | 
 32 |     if (!defaultNewTheme) {
 33 |       defaultNewTheme = "light";
 34 |       theme = light;
 35 | 
 36 |       localStorage.setItem("defaultNewTheme", defaultNewTheme);
 37 |     }
 38 | 
 39 |     if (defaultNewTheme === "dark") theme = dark;
 40 |     else theme = light;
 41 | 
 42 |     document.documentElement.setAttribute("data-theme", defaultNewTheme);
 43 |     themeStore.set(defaultNewTheme);
 44 |     userAction();
 45 | 
 46 |     latestUpdate = localStorage.getItem("latestUpdate");
 47 | 
 48 |     if (!latestUpdate) {
 49 |       // console.log("No latest update");
 50 |       latestUpdate = Values.changeLog[0].date;
 51 |       bellCount = "3";
 52 |     } else {
 53 |       const index = Values.changeLog.findIndex((element) => {
 54 |         if (element.date === latestUpdate) return true;
 55 |       });
 56 |       // console.log(index);
 57 |       bellCount = index > 3 ? "3+" : index.toString();
 58 |     }
 59 | 
 60 |     // console.log(latestUpdate);
 61 |     // localStorage.setItem("latestUpdate", "June 8, 2021");
 62 |   });
 63 | 
 64 |   function changeTheme() {
 65 |     if (defaultNewTheme === "dark") {
 66 |       theme = dark;
 67 |       defaultNewTheme = "light";
 68 |     } else {
 69 |       theme = light;
 70 |       defaultNewTheme = "dark";
 71 |     }
 72 | 
 73 |     // theme = theme === dark ? light : dark;
 74 |     // themeColor = themeColor === "dark" ? "light" : "dark";
 75 |     localStorage.setItem("defaultNewTheme", defaultNewTheme);
 76 |     document.documentElement.setAttribute("data-theme", defaultNewTheme);
 77 |     themeStore.set(defaultNewTheme);
 78 | 
 79 |     // dispatch("theme", themeColor);
 80 |   }
 81 | 
 82 |   const userAction = async () => {
 83 |     const response = await fetch(
 84 |       "https://api.github.com/search/repositories?q=svelte-svg-patterns"
 85 |     );
 86 |     const myJson = await response.json();
 87 |     starsCount = myJson.items[0].stargazers_count;
 88 |   };
 89 | 
 90 |   function showNotifications(e) {
 91 |     visible = false;
 92 |     localStorage.setItem("latestUpdate", Values.changeLog[0].date);
 93 |     e.stopPropagation();
 94 |     let menu = this.nextSibling;
 95 | 
 96 |     while (menu && menu.nodeType != 1) {
 97 |       menu = menu.nextSibling;
 98 |     }
 99 |     if (!menu) return;
100 |     if (menu.style.display !== "grid") {
101 |       menu.style.display = "grid";
102 |       if (toClose) toClose.style.display = "none";
103 |       toClose = menu;
104 |     } else closeAll();
105 |   }
106 | 
107 |   function closeAll() {
108 |     toClose.style.display = "none";
109 |     toClose = false;
110 |   }
111 | 
112 |   function closeWindow(event) {
113 |     if (toClose) closeAll.call(event.target);
114 |   }
115 | </script>
116 | 
117 | <svelte:window on:click={closeWindow} />
118 | <!-- <div class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gray-50 px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
119 |   <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
120 |     <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
121 |   </div>
122 |   <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl" aria-hidden="true">
123 |     <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30" style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
124 |   </div>
125 |   <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
126 |     <p class="text-sm leading-6 text-gray-900">
127 |       <strong class="font-semibold">GeneriCon 2023</strong><svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg>Join us in Denver from June 7 – 9 to see what’s coming next.
128 |     </p>
129 |     <a href="#" class="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">Register now <span aria-hidden="true">&rarr;</span></a>
130 |   </div>
131 |   <div class="flex flex-1 justify-end">
132 |     <button type="button" class="-m-3 p-3 focus-visible:outline-offset-[-4px]">
133 |       <span class="sr-only">Dismiss</span>
134 |       <svg class="h-5 w-5 text-gray-900" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
135 |         <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
136 |       </svg>
137 |     </button>
138 |   </div>
139 | </div> -->
140 | 
141 | <nav>
142 |   <div class="logoOuter grid items-center">
143 |     <a
144 |       aria-current={segment === undefined ? "page" : undefined}
145 |       href="."
146 |       class="justify-self-start"
147 |     >
148 |       <div class="logo" style="color: var(--secondary-color)">
149 |         <svg
150 |           xmlns="http://www.w3.org/2000/svg"
151 |           aria-hidden="true"
152 |           width="1.5em"
153 |           height="1.5em"
154 |           viewBox="0 0 128 128"
155 |           data-inline="false"
156 |         >
157 |           <g transform="translate(0 -3)" style="fill: var(--secondary-color)">
158 |             <path
159 |               d="M64.01 30.39c-34.48 0-51.26 20.65-51.26 46.11 0 4.45.71 8.74 2.03 12.81 2.48 7.64 6.49 15.25 6.23 23.48-.15 4.94-2.97 7.47-6.43
160 |                 10.44-1.07.92-1.27 2.42.08 3.19 3.1 1.78 8.32-.19 11.33-1.4 2.69-1.08 5.21-2.93 7.31-5.08 1.08-1.1 2.08-2.27 3.07-3.44.82-.96
161 |                 2.18-3.42 3.74-2.72 3.4 1.53-.58 7.86-2.3 9.38-.7.62-1.65 1.18-1.97 2.12-.36 1.03.37 1.93 1.3 2.3 2.6 1.04 8.28-.72 10.88-2.46
162 |                 1.86-1.25 3.41-2.85 4.71-4.68.81-1.14 2.21-4.74 4.02-4.31 3.32.8 1.92 6.03 2.14 8.3.11 1.16.78 2.32 1.94 2.77 2.52.99 4.74-.79
163 |                 6.22-2.63 1.65-2.05 2.44-4.32 3.73-6.54 1.03-1.79 2.83-2.16 4.12-.31 1.88 2.69 3.04 5.25 6.03 6.96 2.46 1.4 5.3 2.27 8.14 2.29 1.25
164 |                 0 6.79-.66 4.92-3.11-.82-1.06-2.39-1.32-3.46-2.11-1.76-1.31-2.57-3.48-2.63-5.62-.08-3.05 2.87-2.27 4.32-.8 2.35 2.38 3.75 5.76 6.78
165 |                 7.39 3.63 1.95 9.29 2.9 13.29 1.67 1.36-.42 2.92-1.01
166 |                 3.01-2.65.09-1.55-1.23-1.92-2.47-2.27-1.59-.44-2.69-.84-3.91-2.06-.92-.88-1.42-2.08-1.63-3.33-.43-2.59.02-5.5.48-7.83.82-4.19
167 |                 2.31-8.22 3.78-12.21.47-1.29.95-2.58 1.4-3.87 1.5-4.32 2.32-8.9 2.32-13.67 0-25.47-16.78-46.11-51.26-46.11zM43.928 67.25a8.75 6.789
168 |                 0 01.072 0 8.75 6.789 0 018.75 6.79A8.75 6.789 0 0144 80.827a8.75 6.789 0 01-8.75-6.789 8.75 6.789 0 018.678-6.789zm40 0a8.75 6.789
169 |                 0 01.072 0 8.75 6.789 0 018.75 6.79A8.75 6.789 0 0184 80.827a8.75 6.789 0 01-8.75-6.789 8.75 6.789 0 018.678-6.789zM71.88
170 |                 92.57c1.31.05 2.599 1.13 2.969 2.38 1.19 3.97-4.71 6.17-7.54 6.9-4.06
171 |                 1.04-8.94.39-12.08-2.58-.8-.75-1.55-1.9-1.61-3.03-.05-.86.27-1.71.86-2.33 1.24-1.3 2.99-1.29 4.39-.3 1.54 1.1 2.6 2.45 4.61 2.64
172 |                 1.66.15 3.33-.52 4.67-1.46 1.16-.81 2.16-2.28 3.73-2.22z"
173 |             />
174 |             <path
175 |               d="M102.26 27.7s-1.19-1.83-3.65-2.22c-3.06-.48-6.08.07-7.05 4.51-.96 4.42-1.45 10.11 3.49 14.08l-7.6 2.13-6.51-7.89s2.52.96
176 |                 2.86-.91c.42-2.29.42-4.36.97-7.87.58-3.67 1.73-7.51 5.25-9.54 1.92-1.11 4.98-1.74 5.99-2.55.78-.63.99-2.65 1.33-4.84l5.42 4.16 1.7
177 |                 7.4z"
178 |             />
179 |             <circle r="11.93" cy="18.02" cx="107.39" />
180 |             <path
181 |               d="M25.74 27.7s1.19-1.83 3.65-2.22c3.06-.48 6.08.07 7.05 4.51.96 4.42 1.46 10.11-3.49 14.08l7.6 2.13
182 |                 6.51-7.89s-2.52.96-2.86-.91c-.42-2.29-.42-4.36-.97-7.87-.59-3.67-1.73-7.51-5.25-9.54-1.92-1.11-4.98-1.74-5.99-2.55-.78-.63-.99-2.65-1.33-4.84l-5.42
183 |                 4.16-1.7 7.4z"
184 |             />
185 |             <circle r="11.93" cy="18.02" cx="20.61" />
186 |           </g>
187 |         </svg>
188 |         <div class="brandName">PATTERN MONSTER</div>
189 |       </div>
190 |     </a>
191 |     <div class="logPopup" />
192 | 
193 |     <button
194 |       class="bellIcon menuButton"
195 |       title={strings.changelog}
196 |       on:click={showNotifications}
197 |     >
198 |       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
199 |         <path
200 |           d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"
201 |         />
202 |         <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
203 |       </svg>
204 |       {#if visible && parseInt(bellCount) > 0}
205 |         <span
206 |           transition:scale={{ duration: 2000 }}
207 |           id="bellCount"
208 |           class="bellCount">{bellCount}</span
209 |         >
210 |       {/if}
211 |     </button>
212 |     <div class="notifications">
213 |       <h3>{strings.changelog}</h3>
214 |       <ul>
215 |         {#each Values.changeLog.slice(0, 3) as log}
216 |           <li class="versionHeader">{log.date}</li>
217 |           {#each log.updates as logData}
218 |             <li>{@html logData}</li>
219 |           {/each}
220 |         {/each}
221 |       </ul>
222 |       <div class="viewLink">
223 |         <a href="changelog">{strings.viewMore} </a>
224 |       </div>
225 |     </div>
226 |   </div>
227 | 
228 |   <div class="rightLinks grid grid-flow-col items-center justify-self-end">
229 |     <ShinyButton />
230 |     <a
231 |       rel="noopener noreferrer"
232 |       title={strings.buyCoffee}
233 |       class="bmc"
234 |       target="_blank"
235 |       href="https://www.buymeacoffee.com/naveencs"
236 |     >
237 |       <div
238 |         class="flex items-center"
239 |         style="background-color: #805ad5; padding: 0.5rem 0.8rem; border-radius: 0.75rem;"
240 |       >
241 |         <svg
242 |           style="height: 24px;"
243 |           fill="none"
244 |           xmlns="http://www.w3.org/2000/svg"
245 |           viewBox="0 0 67.64 97.92"
246 |           ><path
247 |             d="M36.18 45.23c-3.52 1.5-7.51 3.23-12.7 3.23a24 24 0 0 1-6.4-.89l3.59 36.74a6.14 6.14 0 0 0 6.12 5.63s5.07.26 6.76.26c1.83 0 7.29-.26 7.29-.26a6.14 6.14 0 0 0 6.12-5.63l3.83-40.6a16.3 16.3 0 0 0-5.4-.97c-3.36 0-6.08 1.16-9.21 2.5z"
248 |             fill="#ffc800"
249 |           /><path
250 |             d="m67.34 26.17-.54-2.72c-.48-2.43-1.58-4.74-4.08-5.62-.8-.28-1.72-.4-2.33-.99-.62-.58-.8-1.49-.94-2.33l-.78-4.62c-.23-1.33-.42-2.8-1.03-4.03-.8-1.63-2.43-2.58-4.06-3.2-.83-.33-1.7-.59-2.55-.8C46.95.77 42.67.38 38.48.15c-5.03-.28-10.08-.2-15.1.25-3.73.34-7.67.75-11.22 2.04A9.5 9.5 0 0 0 8.54 4.5a3.92 3.92 0 0 0-.72 4.67 6.05 6.05 0 0 0 2.82 2.37c1.47.66 3 1.16 4.58 1.5 4.39.96 8.93 1.34 13.4 1.5 4.98.2 9.96.04 14.9-.48 1.22-.14 2.44-.3 3.66-.49 1.44-.22 2.36-2.1 1.93-3.4-.5-1.56-1.86-2.17-3.4-1.93l-.68.1-.16.02a95.5 95.5 0 0 1-4.8.47 107.24 107.24 0 0 1-19.14-.4l-.47-.07h-.1l-.48-.08a50.9 50.9 0 0 1-2.96-.53.44.44 0 0 1 0-.87h.02a47.95 47.95 0 0 1 3.42-.6c.54-.03 1.08-.13 1.6-.2a102.3 102.3 0 0 1 22.2.1l.57.08.38.05c1.09.16 2.17.36 3.25.6 1.6.34 3.66.45 4.37 2.2.22.56.33 1.18.45 1.76l.16.75v.04l1.14 5.27a.95.95 0 0 1-.15.75.97.97 0 0 1-.66.4h-.01l-.23.04-.23.03a128.48 128.48 0 0 1-6.45.68 149.64 149.64 0 0 1-12.9.52 151.25 151.25 0 0 1-19.17-1.24l-.51-.07-1.2-.17c-1.32-.2-2.63-.45-3.96-.66a6.9 6.9 0 0 0-4.58.66 6.66 6.66 0 0 0-2.76 2.86c-.62 1.3-.8 2.7-1.08 4.08-.28 1.4-.72 2.88-.55 4.3a6.87 6.87 0 0 0 5.59 6.13 161.9 161.9 0 0 0 46.27 1.53 1.98 1.98 0 0 1 2.19 2.17l-.3 2.85a1089465 1089465 0 0 1-4.15 40.42c-.17 1.67-.2 3.4-.5 5.04-.5 2.6-2.27 4.2-4.83 4.78-2.35.54-4.76.82-7.17.84-2.67.01-5.34-.1-8.01-.1-2.86.02-6.35-.24-8.55-2.36-1.94-1.87-2.2-4.79-2.47-7.3l-1.04-10.04-1.94-18.59-1.25-12.02-.07-.6c-.15-1.43-1.16-2.84-2.76-2.77-1.37.06-2.93 1.23-2.77 2.77l.93 8.92 1.92 18.44 1.64 15.72.3 3.01c.6 5.5 4.8 8.44 9.99 9.27 3.03.5 6.14.6 9.2.64 3.95.06 7.93.22 11.8-.5 5.75-1.05 10.06-4.89 10.68-10.84l.53-5.15 1.75-17.05 1.9-18.58.87-8.5a1.98 1.98 0 0 1 1.6-1.75c1.64-.32 3.2-.87 4.38-2.12 1.86-1.99 2.23-4.58 1.57-7.2zm-61.8 1.84c.03 0-.02.2-.04.3 0-.15 0-.28.05-.3zm.16 1.23c.02 0 .06.04.1.1zm.16.2c.06.1.09.16 0 0zm.32.26.02.03a.21.21 0 0 0-.03-.03zm55.13-.38c-.6.56-1.48.82-2.36.95a166.3 166.3 0 0 1-29.81 1.9A200.69 200.69 0 0 1 7.9 30.12c-.7-.1-1.44-.23-1.92-.74-.9-.96-.46-2.9-.22-4.06.2-1.06.62-2.48 1.88-2.63 1.98-.23 4.28.6 6.23.9a136.85 136.85 0 0 0 37.57.3c1.84-.26 3.67-.54 5.5-.87 1.62-.3 3.42-.84 4.4.84.67 1.15.76 2.68.66 3.98a2.2 2.2 0 0 1-.7 1.48z"
251 |             fill="#0d0c22"
252 |           /></svg
253 |         >
254 |         <span class="coffee">{strings.buyCoffee}</span>
255 |       </div>
256 |     </a>
257 |     <LangSelect />
258 |     <a
259 |       class="tweetNav"
260 |       rel="noopener noreferrer"
261 |       title={strings.tweet}
262 |       target="_blank"
263 |       href="https://twitter.com/intent/tweet?text=If%20you%20love%20creating%20SVG%20patterns%20and%20backgrounds%2C%20you%20should%20check%20this%20out.%20Generate%20fully%20customizable%20SVG%20patterns%20for%20free.%0A%0A320%2b%20patterns%20available%20at%20https%3A%2F%2Fpattern.monster%0A%0Avia%20%40Pattern_Monster%0A%0A%23svgpatterns%20%23patterns%20%23svgbackgrounds%20%23PatternMonster"
264 |     >
265 |       Tweet
266 |     </a>
267 | 
268 |     <a
269 |       class="gitHubIcon"
270 |       rel="noopener noreferrer"
271 |       title="GitHub"
272 |       target="_blank"
273 |       href="https://github.com/catchspider2002/svelte-svg-patterns"
274 |     >
275 |       <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
276 |         <path d={Values.icons.github} />
277 |       </svg>
278 |       <span class="starsCount">{starsCount}</span>
279 |     </a>
280 |     <button
281 |       class="iconButton"
282 |       aria-label={strings.changeTheme}
283 |       title={strings.changeTheme}
284 |       on:click={() => changeTheme()}
285 |     >
286 |       <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
287 |         {#if theme === light}
288 |           <path transition:fly={{ y: 100, duration: 300 }} d={theme} />
289 |         {:else}
290 |           <path transition:fly={{ y: -100, duration: 300 }} d={theme} />
291 |         {/if}
292 |       </svg>
293 |     </button>
294 |   </div>
295 | </nav>
296 | 


--------------------------------------------------------------------------------
/src/components/SimpleAutocomplete.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   // the list of items  the user can select from
  3 |   export let items = [];
  4 | 
  5 |   // field of each item that's used for the labels in the list
  6 |   export let labelFieldName = undefined;
  7 |   export let keywordsFieldName = labelFieldName;
  8 |   export let valueFieldName = undefined;
  9 |   export let ariaLabel;
 10 | 
 11 |   export let labelFunction = function (item) {
 12 |     if (item === undefined || item === null) {
 13 |       return "";
 14 |     }
 15 |     return labelFieldName ? item[labelFieldName] : item;
 16 |   };
 17 | 
 18 |   export let keywordsFunction = function (item) {
 19 |     if (item === undefined || item === null) {
 20 |       return "";
 21 |     }
 22 |     return keywordsFieldName ? item[keywordsFieldName] : labelFunction(item);
 23 |   };
 24 | 
 25 |   export let valueFunction = function (item) {
 26 |     if (item === undefined || item === null) {
 27 |       return item;
 28 |     }
 29 |     return valueFieldName ? item[valueFieldName] : item;
 30 |   };
 31 | 
 32 |   export let keywordsCleanFunction = function (keywords) {
 33 |     return keywords;
 34 |   };
 35 | 
 36 |   export let textCleanFunction = function (userEnteredText) {
 37 |     return userEnteredText;
 38 |   };
 39 | 
 40 |   export let searchFunction = false;
 41 | 
 42 |   export let beforeChange = function (oldSelectedItem, newSelectedItem) {
 43 |     return true;
 44 |   };
 45 |   export let onChange = function (newSelectedItem) {};
 46 | 
 47 |   export let selectFirstIfEmpty = false;
 48 | 
 49 |   export let minCharactersToSearch = 1;
 50 |   export let maxItemsToShowInList = 0;
 51 |   export let noResultsText = "No results found";
 52 | 
 53 |   const uniqueId = "sautocomplete-" + Math.floor(Math.random() * 1000);
 54 | 
 55 |   function safeStringFunction(theFunction, argument) {
 56 |     if (typeof theFunction !== "function") {
 57 |       console.error("Not a function: " + theFunction + ", argument: " + argument);
 58 |     }
 59 |     let originalResult;
 60 |     try {
 61 |       originalResult = theFunction(argument);
 62 |     } catch (error) {
 63 |       console.warn("Error executing Autocomplete function on value: " + argument + " function: " + theFunction);
 64 |     }
 65 |     let result = originalResult;
 66 |     if (result === undefined || result === null) {
 67 |       result = "";
 68 |     }
 69 |     if (typeof result !== "string") {
 70 |       result = result.toString();
 71 |     }
 72 |     return result;
 73 |   }
 74 | 
 75 |   function safeLabelFunction(item) {
 76 |     // console.log("labelFunction: " + labelFunction);
 77 |     // console.log("safeLabelFunction, item: " + item);
 78 |     return safeStringFunction(labelFunction, item);
 79 |   }
 80 | 
 81 |   function safeKeywordsFunction(item) {
 82 |     // console.log("safeKeywordsFunction");
 83 |     const keywords = safeStringFunction(keywordsFunction, item);
 84 |     let result = safeStringFunction(keywordsCleanFunction, keywords);
 85 |     result = result.toLowerCase().trim();
 86 |     if (debug) {
 87 |       console.log("Extracted keywords: '" + result + "' from item: " + JSON.stringify(item));
 88 |     }
 89 |     return result;
 90 |   }
 91 | 
 92 |   // the text displayed when no option is selected
 93 |   export let placeholder = undefined;
 94 |   // apply a className to the control
 95 |   export let className = undefined;
 96 | 
 97 |   // apply a className to the input control
 98 |   export let inputClassName = undefined;
 99 | 
100 |   // apply a id to the input control
101 |   export let inputId = undefined;
102 | 
103 |   // generate an HTML input with this name, containing the current value
104 |   export let name = undefined;
105 | 
106 |   // apply a className to the dropdown div
107 |   export let dropdownClassName = undefined;
108 | 
109 |   // option to hide the dropdown arrow
110 |   export let hideArrow = false;
111 | 
112 |   // option to show clear selection button
113 |   export let showClear = false;
114 | 
115 |   // adds the disabled tag to the HTML input
116 |   export let disabled = false;
117 |   // add the title to the HTML input
118 |   export let title = undefined;
119 |   export let debug = false;
120 | 
121 |   // selected item state
122 |   export let selectedItem = undefined;
123 |   export let value = undefined;
124 |   let text;
125 |   let filteredTextLength = 0;
126 | 
127 |   function onSelectedItemChanged() {
128 |     value = valueFunction(selectedItem);
129 |     text = safeLabelFunction(selectedItem);
130 |     onChange(selectedItem);
131 |   }
132 | 
133 |   $: selectedItem, onSelectedItemChanged();
134 | 
135 |   // HTML elements
136 |   let input;
137 |   let list;
138 | 
139 |   // UI state
140 |   let opened = false;
141 |   let highlightIndex = -1;
142 | 
143 |   $: showList = opened && ((items && items.length > 0) || filteredTextLength > 0);
144 | 
145 |   // view model
146 |   let filteredListItems;
147 | 
148 |   let listItems = [];
149 | 
150 |   function prepareListItems() {
151 |     let tStart;
152 |     if (debug) {
153 |       tStart = performance.now();
154 |       console.log("prepare items to search");
155 |       console.log("items: " + JSON.stringify(items));
156 |     }
157 | 
158 |     if (!Array.isArray(items)) {
159 |       console.warn("Autocomplete items / search function did not return array but", items);
160 |       items = [];
161 |     }
162 | 
163 |     const length = items ? items.length : 0;
164 |     listItems = new Array(length);
165 | 
166 |     if (length > 0) {
167 |       items.forEach((item, i) => {
168 |         const listItem = getListItem(item);
169 |         if (listItem == undefined) {
170 |           console.log("Undefined item for: ", item);
171 |         }
172 |         listItems[i] = listItem;
173 |       });
174 |     }
175 | 
176 |     if (debug) {
177 |       const tEnd = performance.now();
178 |       console.log(listItems.length + " items to search prepared in " + (tEnd - tStart) + " milliseconds");
179 |     }
180 |   }
181 | 
182 |   function getListItem(item) {
183 |     return {
184 |       // keywords representation of the item
185 |       keywords: safeKeywordsFunction(item),
186 |       // item label
187 |       label: safeLabelFunction(item),
188 |       // store reference to the origial item
189 |       item: item,
190 |     };
191 |   }
192 | 
193 |   $: items, prepareListItems();
194 | 
195 |   function prepareUserEnteredText(userEnteredText) {
196 |     if (userEnteredText === undefined || userEnteredText === null) {
197 |       return "";
198 |     }
199 | 
200 |     const textFiltered = userEnteredText.replace(/[&/\\#,+()$~%.'":*?<>{}]/g, " ").trim();
201 | 
202 |     filteredTextLength = textFiltered.length;
203 | 
204 |     if (minCharactersToSearch > 1) {
205 |       if (filteredTextLength < minCharactersToSearch) {
206 |         return "";
207 |       }
208 |     }
209 | 
210 |     const cleanUserEnteredText = textCleanFunction(textFiltered);
211 |     const textFilteredLowerCase = cleanUserEnteredText.toLowerCase().trim();
212 | 
213 |     if (debug) {
214 |       console.log("Change user entered text '" + userEnteredText + "' into '" + textFilteredLowerCase + "'");
215 |     }
216 |     return textFilteredLowerCase;
217 |   }
218 | 
219 |   async function search() {
220 |     let tStart;
221 |     if (debug) {
222 |       tStart = performance.now();
223 |       console.log("Searching user entered text: '" + text + "'");
224 |     }
225 | 
226 |     const textFiltered = prepareUserEnteredText(text);
227 | 
228 |     if (textFiltered === "") {
229 |       filteredListItems = listItems;
230 |       closeIfMinCharsToSearchReached();
231 |       if (debug) {
232 |         console.log("User entered text is empty set the list of items to all items");
233 |       }
234 |       return;
235 |     }
236 | 
237 |     if (searchFunction) {
238 |       items = await searchFunction(textFiltered);
239 |       prepareListItems();
240 |     }
241 | 
242 |     const searchWords = textFiltered.split(" ");
243 | 
244 |     let tempfilteredListItems = listItems.filter((listItem) => {
245 |       if (!listItem) {
246 |         return false;
247 |       }
248 |       const itemKeywords = listItem.keywords;
249 | 
250 |       let matches = 0;
251 |       searchWords.forEach((searchWord) => {
252 |         if (itemKeywords.includes(searchWord)) {
253 |           matches++;
254 |         }
255 |       });
256 | 
257 |       return matches >= searchWords.length;
258 |     });
259 | 
260 |     const hlfilter = highlightFilter(textFiltered, ["label"]);
261 |     const filteredListItemsHighlighted = tempfilteredListItems.map(hlfilter);
262 | 
263 |     filteredListItems = filteredListItemsHighlighted;
264 |     closeIfMinCharsToSearchReached();
265 |     if (debug) {
266 |       const tEnd = performance.now();
267 |       console.log("Search took " + (tEnd - tStart) + " milliseconds, found " + filteredListItems.length + " items");
268 |     }
269 |   }
270 | 
271 |   // $: text, search();
272 | 
273 |   function selectListItem(listItem) {
274 |     if (debug) {
275 |       console.log("selectListItem");
276 |     }
277 |     if ("undefined" === typeof listItem) {
278 |       if (debug) {
279 |         console.log(`listItem ${i} is undefined. Can not select.`);
280 |       }
281 |       return false;
282 |     }
283 |     const newSelectedItem = listItem.item;
284 |     if (beforeChange(selectedItem, newSelectedItem)) {
285 |       selectedItem = newSelectedItem;
286 |     }
287 |     return true;
288 |   }
289 | 
290 |   function selectItem() {
291 |     if (debug) {
292 |       console.log("selectItem");
293 |     }
294 |     const listItem = filteredListItems[highlightIndex];
295 |     if (selectListItem(listItem)) {
296 |       close();
297 |     }
298 |   }
299 | 
300 |   function up() {
301 |     if (debug) {
302 |       console.log("up");
303 |     }
304 | 
305 |     open();
306 |     if (highlightIndex > 0) highlightIndex--;
307 |     highlight();
308 |   }
309 | 
310 |   function down() {
311 |     if (debug) {
312 |       console.log("down");
313 |     }
314 | 
315 |     open();
316 |     if (highlightIndex < filteredListItems.length - 1) highlightIndex++;
317 |     highlight();
318 |   }
319 | 
320 |   function highlight() {
321 |     if (debug) {
322 |       console.log("highlight");
323 |     }
324 | 
325 |     const query = ".selected";
326 |     if (debug) {
327 |       console.log("Seaching DOM element: " + query + " in " + list);
328 |     }
329 |     const el = list.querySelector(query);
330 |     if (el) {
331 |       if (typeof el.scrollIntoViewIfNeeded === "function") {
332 |         if (debug) {
333 |           console.log("Scrolling selected item into view");
334 |         }
335 |         el.scrollIntoViewIfNeeded();
336 |       } else {
337 |         if (debug) {
338 |           console.warn("Could not scroll selected item into view, scrollIntoViewIfNeeded not supported");
339 |         }
340 |       }
341 |     } else {
342 |       if (debug) {
343 |         console.warn("Selected item not found to scroll into view");
344 |       }
345 |     }
346 |   }
347 | 
348 |   function onListItemClick(listItem) {
349 |     if (debug) {
350 |       console.log("onListItemClick");
351 |     }
352 | 
353 |     if (selectListItem(listItem)) {
354 |       close();
355 |     }
356 |   }
357 | 
358 |   function onDocumentClick(e) {
359 |     if (debug) {
360 |       console.log("onDocumentClick: " + JSON.stringify(e.target));
361 |     }
362 |     if (e.target.closest("." + uniqueId)) {
363 |       if (debug) {
364 |         console.log("onDocumentClick inside");
365 |       }
366 |       // resetListToAllItemsAndOpen();
367 |       highlight();
368 |     } else {
369 |       if (debug) {
370 |         console.log("onDocumentClick outside");
371 |       }
372 |       close();
373 |     }
374 |   }
375 | 
376 |   function onKeyDown(e) {
377 |     if (debug) {
378 |       console.log("onKeyDown");
379 |     }
380 | 
381 |     let key = e.key;
382 |     if (key === "Tab" && e.shiftKey) key = "ShiftTab";
383 |     const fnmap = {
384 |       Tab: opened ? down.bind(this) : null,
385 |       ShiftTab: opened ? up.bind(this) : null,
386 |       ArrowDown: down.bind(this),
387 |       ArrowUp: up.bind(this),
388 |       Escape: onEsc.bind(this),
389 |     };
390 |     const fn = fnmap[key];
391 |     if (typeof fn === "function") {
392 |       e.preventDefault();
393 |       fn(e);
394 |     }
395 |   }
396 | 
397 |   function onKeyPress(e) {
398 |     if (debug) {
399 |       console.log("onKeyPress");
400 |     }
401 | 
402 |     if (e.key === "Enter") {
403 |       e.preventDefault();
404 |       selectItem();
405 |     }
406 |   }
407 | 
408 |   function onInput(e) {
409 |     if (debug) {
410 |       console.log("onInput");
411 |     }
412 | 
413 |     text = e.target.value;
414 |     search();
415 |     highlightIndex = 0;
416 |     open();
417 |   }
418 | 
419 |   function onInputClick() {
420 |     if (debug) {
421 |       console.log("onInputClick");
422 |     }
423 |     resetListToAllItemsAndOpen();
424 |   }
425 | 
426 |   function onEsc(e) {
427 |     if (debug) {
428 |       console.log("onEsc");
429 |     }
430 | 
431 |     //if (text) return clear();
432 |     e.stopPropagation();
433 |     if (opened) {
434 |       input.focus();
435 |       close();
436 |     }
437 |   }
438 | 
439 |   function onFocus() {
440 |     if (debug) {
441 |       console.log("onFocus");
442 |     }
443 | 
444 |     resetListToAllItemsAndOpen();
445 |   }
446 | 
447 |   function resetListToAllItemsAndOpen() {
448 |     if (debug) {
449 |       console.log("resetListToAllItemsAndOpen");
450 |     }
451 | 
452 |     filteredListItems = listItems;
453 | 
454 |     open();
455 | 
456 |     // find selected item
457 |     if (selectedItem) {
458 |       if (debug) {
459 |         console.log("Searching currently selected item: " + JSON.stringify(selectedItem));
460 |       }
461 |       for (let i = 0; i < listItems.length; i++) {
462 |         const listItem = listItems[i];
463 |         if ("undefined" === typeof listItem) {
464 |           if (debug) {
465 |             console.log(`listItem ${i} is undefined. Skipping.`);
466 |           }
467 |           continue;
468 |         }
469 |         if (debug) {
470 |           console.log("Item " + i + ": " + JSON.stringify(listItem));
471 |         }
472 |         if (selectedItem == listItem.item) {
473 |           highlightIndex = i;
474 |           if (debug) {
475 |             console.log("Found selected item: " + i + ": " + JSON.stringify(listItem));
476 |           }
477 |           highlight();
478 |           break;
479 |         }
480 |       }
481 |     }
482 |   }
483 | 
484 |   function open() {
485 |     if (debug) {
486 |       console.log("open");
487 |     }
488 | 
489 |     // check if the search text has more than the min chars required
490 |     if (isMinCharsToSearchReached()) {
491 |       return;
492 |     }
493 | 
494 |     opened = true;
495 |   }
496 | 
497 |   function close() {
498 |     if (debug) {
499 |       console.log("close");
500 |     }
501 |     opened = false;
502 | 
503 |     if (!text && selectFirstIfEmpty) {
504 |       highlightFilter = 0;
505 |       selectItem();
506 |     }
507 |   }
508 | 
509 |   function isMinCharsToSearchReached() {
510 |     return minCharactersToSearch > 1 && filteredTextLength < minCharactersToSearch;
511 |   }
512 | 
513 |   function closeIfMinCharsToSearchReached() {
514 |     if (isMinCharsToSearchReached()) {
515 |       close();
516 |     }
517 |   }
518 | 
519 |   function clear() {
520 |     if (debug) {
521 |       console.log("clear");
522 |     }
523 | 
524 |     text = "";
525 |     selectedItem = undefined;
526 | 
527 |     setTimeout(() => {
528 |       input.focus();
529 |       close();
530 |     });
531 |   }
532 | 
533 |   function onBlur() {
534 |     if (debug) {
535 |       console.log("onBlur");
536 |     }
537 |     close();
538 |   }
539 |   // 'item number one'.replace(/(it)(.*)(nu)(.*)(one)/ig, '<b>$1</b>$2 <b>$3</b>$4 <b>$5</b>')
540 |   function highlightFilter(q, fields) {
541 |     const qs = "(" + q.trim().replace(/\s/g, ")(.*)(") + ")";
542 |     const reg = new RegExp(qs, "ig");
543 |     let n = 1;
544 |     const len = qs.split(")(").length + 1;
545 |     let repl = "";
546 |     for (; n < len; n++) repl += n % 2 ? `<b>$${n}</b>` : `$${n}`;
547 | 
548 |     return (i) => {
549 |       const newI = Object.assign({ highlighted: {} }, i);
550 |       if (fields) {
551 |         fields.forEach((f) => {
552 |           if (!newI[f]) return;
553 |           newI.highlighted[f] = newI[f].replace(reg, repl);
554 |         });
555 |       }
556 |       return newI;
557 |     };
558 |   }
559 | </script>
560 | 
561 | <style>
562 |   .autocomplete {
563 |     min-width: 90px;
564 |     display: inline-block;
565 |     max-width: 130px;
566 |     position: relative;
567 |     /* vertical-align: top; */
568 |     height: 2.25em;
569 |   }
570 | 
571 |   .autocomplete:not(.hide-arrow)::after {
572 |     border: 3px solid transparent;
573 |     border-radius: 2px;
574 |     border-right: 0;
575 |     border-top: 0;
576 |     content: " ";
577 |     display: block;
578 |     height: 0.625em;
579 |     margin-top: -0.4375em;
580 |     pointer-events: none;
581 |     position: absolute;
582 |     top: 50%;
583 |     -webkit-transform: rotate(-45deg);
584 |     transform: rotate(-45deg);
585 |     -webkit-transform-origin: center;
586 |     transform-origin: center;
587 |     width: 0.625em;
588 |     border-color: #3273dc;
589 |     right: 0.75em;
590 |     z-index: 4;
591 |   }
592 | 
593 |   .autocomplete.show-clear:not(.hide-arrow)::after {
594 |     right: 2.3em;
595 |   }
596 | 
597 |   .autocomplete * {
598 |     box-sizing: border-box;
599 |   }
600 |   .autocomplete-input {
601 |     font: inherit;
602 |     font-size: 0.85em;
603 |     width: 100%;
604 |     height: 100%;
605 |     /* padding: 5px 11px; */
606 |     padding: 0.6rem 0.75rem;
607 |     cursor: default;
608 |     /* -webkit-touch-callout: none;
609 |     -webkit-user-select: none;
610 |     -khtml-user-select: none;
611 |     -moz-user-select: none;
612 |     -ms-user-select: none;
613 |     user-select: none; */
614 |     /* pointer-events: none; */
615 |   }
616 | 
617 |   .autocomplete:not(.hide-arrow) .autocomplete-input {
618 |     padding-right: 2em;
619 |   }
620 |   .autocomplete.show-clear:not(.hide-arrow) .autocomplete-input {
621 |     padding-right: 3.2em;
622 |   }
623 |   .autocomplete.hide-arrow.show-clear .autocomplete-input {
624 |     padding-right: 2em;
625 |   }
626 | 
627 |   .autocomplete-list {
628 |     background: #fff;
629 |     position: relative;
630 |     width: 100%;
631 |     overflow-y: auto;
632 |     z-index: 99;
633 |     padding: 10px 0;
634 |     top: 0;
635 |     border: 1px solid #999;
636 |     max-height: calc(15 * (1rem + 10px) + 15px);
637 |     -webkit-user-select: none;
638 |     -moz-user-select: none;
639 |     -ms-user-select: none;
640 |     user-select: none;
641 |   }
642 |   .autocomplete-list:empty {
643 |     padding: 0;
644 |   }
645 |   .autocomplete-list-item {
646 |     padding: 0.75em 1em;
647 |     color: #333;
648 |     cursor: pointer;
649 |     /* line-height: 1; */
650 |     line-height: normal;
651 |     font-size: 0.85em;
652 |   }
653 | 
654 |   .autocomplete-list-item:hover,
655 |   .autocomplete-list-item.selected {
656 |     background-color: #2e69e2;
657 |     color: #fff;
658 |   }
659 |   .autocomplete-list-item-no-results {
660 |     padding: 5px 15px;
661 |     color: #999;
662 |     /* line-height: 1; */
663 |     line-height: normal;
664 |   }
665 | 
666 |   .autocomplete-list.hidden {
667 |     display: none;
668 |   }
669 | 
670 |   .autocomplete.show-clear .autocomplete-clear-button {
671 |     cursor: pointer;
672 |     display: block;
673 |     text-align: center;
674 |     position: absolute;
675 |     right: 0.1em;
676 |     padding: 0.3em 0.6em;
677 |     top: 50%;
678 |     -webkit-transform: translateY(-50%);
679 |     -ms-transform: translateY(-50%);
680 |     transform: translateY(-50%);
681 |     z-index: 4;
682 |   }
683 | 
684 |   .autocomplete:not(.show-clear) .autocomplete-clear-button {
685 |     display: none;
686 |   }
687 | 
688 |   /* Autocomplete */
689 |   .autocomplete {
690 |     background-color: var(--card-bg);
691 |     /* color: var(--secondary-text-color); */
692 |     color: var(--gray-text);
693 |     border: 0.0625em solid var(--gray-text);
694 |     border-radius: var(--border-radius);
695 |   }
696 |   .autocomplete-input {
697 |     background-color: var(--card-bg);
698 |     /* color: var(--secondary-text-color); */
699 |     color: var(--gray-text);
700 |   }
701 |   .autocomplete-list {
702 |     background: var(--card-bg);
703 |     /* color: var(--secondary-text-color); */
704 |     color: var(--gray-text);
705 |   }
706 |   .autocomplete-list-item {
707 |     background-color: var(--card-bg);
708 |     color: var(--secondary-text-color);
709 |   }
710 |   .autocomplete-list-item:hover,
711 |   .autocomplete-list-item.selected {
712 |     background-color: var(--accent-text);
713 |     color: var(--accent-text-color);
714 |   }
715 |   .autocomplete:not(.hide-arrow)::after {
716 |     border-color: var(--accent-text);
717 |   }
718 | </style>
719 | 
720 | <div
721 |   class="{className ? className : ''}
722 |   {hideArrow ? 'hide-arrow is-multiple' : ''}
723 |   {showClear ? 'show-clear' : ''} autocomplete select is-fullwidth {uniqueId}">
724 |   <input
725 |     type="text"
726 |     readonly
727 |     class="{inputClassName ? inputClassName : ''} input autocomplete-input"
728 |     id={inputId ? inputId : ''}
729 |     {placeholder}
730 |     {name}
731 |     {disabled}
732 |     {title}
733 |     bind:this={input}
734 |     aria-label={ariaLabel}
735 |     bind:value={text}
736 |     on:input={onInput}
737 |     on:focus={onFocus}
738 |     on:keydown={onKeyDown}
739 |     on:click={onInputClick}
740 |     on:keypress={onKeyPress} />
741 |   {#if showClear}<span on:click={clear} class="autocomplete-clear-button">&#10006;</span>{/if}
742 |   <div class="{dropdownClassName ? dropdownClassName : ''} autocomplete-list {showList ? '' : 'hidden'}
743 |     is-fullwidth" bind:this={list}>
744 |     {#if filteredListItems && filteredListItems.length > 0}
745 |       {#each filteredListItems as listItem, i}
746 |         {#if listItem && (maxItemsToShowInList <= 0 || i < maxItemsToShowInList)}
747 |           {#if listItem}
748 |             <div class="autocomplete-list-item {i === highlightIndex ? 'selected' : ''}" on:click={() => onListItemClick(listItem)}>
749 |               {#if listItem.highlighted}
750 |                 {@html listItem.highlighted.label}
751 |               {:else}
752 |                 {@html listItem.label}
753 |               {/if}
754 |             </div>
755 |           {/if}
756 |         {/if}
757 |       {/each}
758 | 
759 |       {#if maxItemsToShowInList > 0 && filteredListItems.length > maxItemsToShowInList}
760 |         <div class="autocomplete-list-item-no-results">...{filteredListItems.length - maxItemsToShowInList} results not shown</div>
761 |       {/if}
762 |     {:else if noResultsText}
763 |       <div class="autocomplete-list-item-no-results">{noResultsText}</div>
764 |     {/if}
765 |   </div>
766 | </div>
767 | 
768 | <svelte:window on:click={onDocumentClick} />
769 | 


--------------------------------------------------------------------------------
/src/css/global.css:
--------------------------------------------------------------------------------
   1 | :root {
   2 |   --main-bg-color: rgb(42, 42, 48);
   3 |   --accent-color: #44337a;
   4 |   --pattern-bg: rgb(235, 235, 235);
   5 |   --card-bg: rgb(245, 245, 245);
   6 |   --input-bg: #ffffff;
   7 |   --secondary-color: #ffc800;
   8 |   --accent-text: #805ad5;
   9 |   --accent-hover: #805ad5aa;
  10 |   --accent-text-color: #ffffff;
  11 |   --secondary-text-color: #000000;
  12 |   --accent-color-hover: rgba(68, 51, 122, 0.8);
  13 |   --secondary-color-hover: rgba(255, 200, 0, 0.8);
  14 |   --border-radius: 4px;
  15 |   --blockquote-color: 103, 106, 109;
  16 |   --gray-300: #e2e8f0;
  17 |   --gray-400: #cbd5e0;
  18 |   --gray-500: #a0aec0;
  19 |   --gray-600: #718096;
  20 |   --gray-700: #4a5568;
  21 |   --gray-800: #2d3748;
  22 |   --gray-900: #1a202c;
  23 |   --font: "Nunito", sans-serif;
  24 |   /* --defaultFont: -apple-system,BlinkMacSystemFont,SFUI,HelveticaNeue,Helvetica,Arial,sans-serif; */
  25 |   --svg-bg: white;
  26 |   --gray-bg: var(--gray-400);
  27 |   --gray-text: var(--gray-600);
  28 |   --input-background: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='300px' height='300px' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round'><path fill='none' stroke='%231a202c' stroke-width='1' d='m 6,9 6,6 6,-6'/></svg>"),
  29 |     linear-gradient(to bottom, var(--card-bg) 0%, var(--card-bg) 100%);
  30 |   /* --list-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-checkbox' width='1.5em' height='2em' viewBox='0 0 24 24' stroke-width='1.5' stroke='%231a202c' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpolyline points='9 11 12 14 20 6' /%3E%3Cpath d='M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9' /%3E%3C/svg%3E"); */
  31 |   /* --shop-gradient: linear-gradient(-45deg, #805ad5, #e91e63, #03a9f4, #ecc94b); */
  32 | 
  33 |   --notification-list-padding: 0.5em 1em 0.5em 2.5em;
  34 |   --notification-header-padding: 1.5em 1em 0.5em 1.5em;
  35 |   --notification-header-margin: 1em -0.8em 0 -2.5em;
  36 | }
  37 | [data-theme="dark"] {
  38 |   --pattern-bg: rgb(24, 24, 30);
  39 |   --card-bg: rgb(42, 42, 48);
  40 |   --input-bg: rgb(62, 62, 48);
  41 |   --accent-text-color: #000000;
  42 |   --secondary-text-color: #ffffff;
  43 |   --accent-text: #ecc94b;
  44 |   --accent-hover: #ecc94baa;
  45 |   --svg-bg: rgb(42, 42, 48);
  46 |   --gray-bg: var(--gray-700);
  47 |   --gray-text: var(--gray-500);
  48 |   --blockquote-color: 148, 146, 143;
  49 |   --input-background: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='300px' height='300px' viewBox='0 0 24 24' stroke-linecap='round' stroke-linejoin='round'><path fill='none' stroke='%23f7fafc' stroke-width='1' d='m 6,9 6,6 6,-6'/></svg>"),
  50 |     linear-gradient(to bottom, var(--card-bg) 0%, var(--card-bg) 100%);
  51 |   /* --list-background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-checkbox' width='1.5em' height='2em' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23f7fafc' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpolyline points='9 11 12 14 20 6' /%3E%3Cpath d='M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9' /%3E%3C/svg%3E"); */
  52 |   /* --shop-gradient: linear-gradient(-45deg, #ecc94b, #f44336, #00bcd4, #805ad5); */
  53 | }
  54 | 
  55 | [dir="rtl"] {
  56 |   --notification-list-padding: 0.5em 2.5em 0.5em 1em;
  57 |   --notification-header-padding: 1.5em 1.5em 0.5em 1em;
  58 |   --notification-header-margin: 1em -2.5em 0 -0.8em;
  59 | }
  60 | 
  61 | *,
  62 | ::after,
  63 | ::before {
  64 |   box-sizing: border-box;
  65 |   border-width: 0;
  66 |   border-style: solid;
  67 |   border-color: var(--accent-color);
  68 | }
  69 | img,
  70 | video {
  71 |   max-width: 100%;
  72 |   height: auto;
  73 | }
  74 | 
  75 | audio,
  76 | canvas,
  77 | embed,
  78 | iframe,
  79 | img,
  80 | object,
  81 | svg,
  82 | video {
  83 |   display: block;
  84 |   /* vertical-align: middle; */
  85 | }
  86 | 
  87 | @font-face {
  88 |   font-family: Coffee;
  89 |   src: local("Coffee"), local("coffee"),
  90 |     url("https://giguom.com/pattern.monster/fonts/coffeefont.ttf");
  91 |   font-weight: normal;
  92 |   font-display: swap;
  93 | }
  94 | 
  95 | .coffee {
  96 |   font-family: Coffee, "Arial Narrow Bold", sans-serif;
  97 |   margin-left: 0.6rem;
  98 |   font-size: 0.9rem;
  99 |   font-weight: 500;
 100 |   color: white;
 101 | }
 102 | 
 103 | html {
 104 |   /* font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
 105 |   font-family: var(--font);
 106 |   font-display: swap;
 107 | }
 108 | 
 109 | body {
 110 |   background-color: var(--main-bg-color);
 111 |   margin: 0;
 112 |   line-height: 1.5;
 113 |   /* background-color: #545454; */
 114 |   color: var(--accent-color);
 115 |   font-size: 19px;
 116 | }
 117 | .closed {
 118 |   display: none;
 119 | }
 120 | 
 121 | h1 {
 122 |   /* font-size: 2em; */
 123 |   font-weight: 400;
 124 |   /* line-height: 1.2; */
 125 |   /* color: var(--secondary-color); */
 126 |   font-size: 3.2em;
 127 |   margin-top: 0.5rem;
 128 |   line-height: 1em;
 129 | }
 130 | h1 > span {
 131 |   color: var(--accent-text);
 132 | }
 133 | 
 134 | h2,
 135 | h3,
 136 | h4,
 137 | h5,
 138 | h6 {
 139 |   font-weight: 700;
 140 |   line-height: 1.2;
 141 | }
 142 | 
 143 | h2 {
 144 |   font-size: 1.6em;
 145 |   color: var(--dark-text);
 146 |   margin-bottom: 0.5rem;
 147 | }
 148 | 
 149 | a {
 150 |   color: inherit;
 151 |   /* text-decoration: inherit; */
 152 |   text-decoration: none;
 153 | }
 154 | 
 155 | a:hover {
 156 |   color: var(--secondary-color);
 157 | }
 158 | 
 159 | input {
 160 |   font-family: var(--font);
 161 |   font-display: swap;
 162 |   background-color: var(--input-bg);
 163 | }
 164 | 
 165 | input[type="number"] {
 166 |   /* color: var(--pattern-bg); */
 167 |   color: var(--secondary-text-color);
 168 |   /* border-color: rgb(159,122,234); */
 169 |   line-height: 1.25;
 170 |   padding: 0.5rem;
 171 |   font-size: 1rem;
 172 |   width: 80px;
 173 |   -webkit-appearance: textfield;
 174 |   -moz-appearance: textfield; /* Hide arrows for input number - Firefox */
 175 |   appearance: textfield;
 176 |   border-radius: var(--border-radius);
 177 |   background-color: var(--gray-bg);
 178 | }
 179 | 
 180 | /* Hide arrows for input number - Chrome, Safari, Edge, Opera */
 181 | input::-webkit-outer-spin-button,
 182 | input::-webkit-inner-spin-button {
 183 |   -webkit-appearance: none;
 184 |   margin: 0;
 185 | }
 186 | 
 187 | input[type="range"] {
 188 |   width: 100%;
 189 |   margin: 7.3px 0;
 190 |   background-color: transparent;
 191 |   -webkit-appearance: none;
 192 | }
 193 | input[type="range"]:focus {
 194 |   outline: none;
 195 | }
 196 | input[type="range"]::-webkit-slider-runnable-track {
 197 |   background: var(--accent-text);
 198 |   border-radius: var(--border-radius);
 199 |   width: 100%;
 200 |   height: 4px;
 201 |   cursor: pointer;
 202 | }
 203 | input[type="range"]::-moz-range-track {
 204 |   background: var(--accent-text);
 205 |   border-radius: var(--border-radius);
 206 |   width: 100%;
 207 |   height: 4px;
 208 |   cursor: pointer;
 209 | }
 210 | input[type="range"]:focus::-webkit-slider-runnable-track {
 211 |   background: var(--accent-hover);
 212 | }
 213 | input[type="range"]::-webkit-slider-thumb {
 214 |   margin-top: -10.5px;
 215 |   width: 28px;
 216 |   height: 28px;
 217 |   background: var(--pattern-bg);
 218 |   border: 4px solid var(--accent-text);
 219 |   border-radius: var(--border-radius);
 220 |   cursor: pointer;
 221 |   -webkit-appearance: none;
 222 | }
 223 | input[type="range"]::-moz-range-thumb {
 224 |   width: 20px;
 225 |   height: 20px;
 226 |   background: var(--pattern-bg);
 227 |   border: 4px solid var(--accent-text);
 228 |   border-radius: var(--border-radius);
 229 |   cursor: pointer;
 230 | }
 231 | 
 232 | button {
 233 |   display: inline-block;
 234 |   border: none;
 235 |   padding: 0.375rem 0.75rem;
 236 |   margin: 0;
 237 |   text-decoration: none;
 238 |   background-color: var(--secondary-color);
 239 |   border-radius: var(--border-radius);
 240 |   color: var(--main-bg-color);
 241 |   font-family: var(--font);
 242 |   font-display: swap;
 243 |   font-size: 1em;
 244 |   cursor: pointer;
 245 |   text-align: center;
 246 |   transition: background 250ms ease-in-out, transform 150ms ease;
 247 |   -webkit-appearance: none;
 248 |   -moz-appearance: none;
 249 |   appearance: none;
 250 | }
 251 | 
 252 | button:hover,
 253 | button:focus {
 254 |   background-color: var(--secondary-color-hover);
 255 | }
 256 | 
 257 | button:focus {
 258 |   outline: 1px solid #fff;
 259 |   /* outline-offset: -4px; */
 260 | }
 261 | 
 262 | button:active {
 263 |   transform: scale(0.99);
 264 | }
 265 | 
 266 | .accent-text {
 267 |   color: var(--accent-color);
 268 | }
 269 | 
 270 | .secondary-text {
 271 |   color: var(--secondary-color);
 272 | }
 273 | .accent-bg {
 274 |   background-color: var(--accent-color);
 275 | }
 276 | .secondary-bg {
 277 |   background-color: var(--secondary-color);
 278 | }
 279 | .main-bg {
 280 |   background-color: var(--main-bg-color);
 281 | }
 282 | .light-text {
 283 |   color: var(--gray-300);
 284 | }
 285 | .dark-text {
 286 |   color: var(--gray-900);
 287 | }
 288 | .gray-text {
 289 |   color: var(--gray-text);
 290 | }
 291 | .white-text {
 292 |   color: white;
 293 | }
 294 | .secondary-text-color {
 295 |   color: var(--secondary-text-color);
 296 | }
 297 | .pattern-bg {
 298 |   background-color: var(--pattern-bg);
 299 | }
 300 | .secondary-link {
 301 |   color: var(--secondary-color);
 302 | }
 303 | .secondary-link:hover {
 304 |   color: var(--secondary-color-hover);
 305 | }
 306 | 
 307 | /* Tailwind Utilities */
 308 | .p-0 {
 309 |   padding: 0;
 310 | }
 311 | .p-2 {
 312 |   padding: 0.5rem;
 313 | }
 314 | .p-4 {
 315 |   padding: 1rem;
 316 | }
 317 | .p-5 {
 318 |   padding: 1.25rem;
 319 | }
 320 | .p-6 {
 321 |   padding: 1.5rem;
 322 | }
 323 | .p-8 {
 324 |   padding: 2rem;
 325 | }
 326 | .pt-2 {
 327 |   padding-top: 0.5rem;
 328 | }
 329 | .pt-12 {
 330 |   padding-top: 3rem;
 331 | }
 332 | .pt-20 {
 333 |   padding-top: 4rem;
 334 | }
 335 | .pb-4 {
 336 |   padding-bottom: 1rem;
 337 | }
 338 | .pb-5 {
 339 |   padding-bottom: 1.25rem;
 340 | }
 341 | .pb-6 {
 342 |   padding-bottom: 1.5rem;
 343 | }
 344 | .pb-20 {
 345 |   padding-bottom: 4rem;
 346 | }
 347 | .px-4 {
 348 |   padding-left: 1rem;
 349 |   padding-right: 1rem;
 350 | }
 351 | .px-5 {
 352 |   padding-left: 1.25rem;
 353 |   padding-right: 1.25rem;
 354 | }
 355 | .px-6 {
 356 |   padding-left: 1.5rem;
 357 |   padding-right: 1.5rem;
 358 | }
 359 | .py-3 {
 360 |   padding-top: 0.75rem;
 361 |   padding-bottom: 0.75rem;
 362 | }
 363 | .py-24 {
 364 |   padding-top: 6rem;
 365 |   padding-bottom: 6rem;
 366 | }
 367 | .mr-5 {
 368 |   margin-right: 1.25rem;
 369 | }
 370 | .mt-0 {
 371 |   margin-top: 0;
 372 | }
 373 | .mt-2 {
 374 |   margin-top: 0.5rem;
 375 | }
 376 | .mt-6 {
 377 |   margin-top: 1.5rem;
 378 | }
 379 | .mt-12 {
 380 |   margin-top: 3rem;
 381 | }
 382 | .mb-2 {
 383 |   margin-bottom: 0.5rem;
 384 | }
 385 | .mb-4 {
 386 |   margin-bottom: 1rem;
 387 | }
 388 | .mx-3 {
 389 |   margin-left: 0.75rem;
 390 |   margin-right: 0.75rem;
 391 | }
 392 | .-mx-8 {
 393 |   margin-left: -2rem;
 394 |   margin-right: -2rem;
 395 | }
 396 | .-mx-3 {
 397 |   margin-left: -0.75rem;
 398 |   margin-right: -0.75rem;
 399 | }
 400 | .mx-auto {
 401 |   margin-left: auto;
 402 |   margin-right: auto;
 403 | }
 404 | .my-2 {
 405 |   margin-top: 0.5rem;
 406 |   margin-bottom: 0.5rem;
 407 | }
 408 | .gap-2 {
 409 |   gap: 0.5rem;
 410 | }
 411 | .gap-4 {
 412 |   gap: 1rem;
 413 | }
 414 | .gap-6 {
 415 |   gap: 1.5rem;
 416 | }
 417 | .font-semibold {
 418 |   font-weight: 600;
 419 | }
 420 | .font-normal {
 421 |   font-weight: 400;
 422 | }
 423 | .text-center {
 424 |   text-align: center;
 425 | }
 426 | .text-start {
 427 |   text-align: start;
 428 | }
 429 | .text-end {
 430 |   text-align: end;
 431 | }
 432 | .text-sm {
 433 |   font-size: 0.85em;
 434 | }
 435 | 
 436 | .test-xl {
 437 |   font-size: 1.25rem /* 20px */;
 438 |   line-height: 1.75rem /* 28px */;
 439 | }
 440 | 
 441 | .text-4xl {
 442 |   font-size: 2em;
 443 | }
 444 | .uppercase {
 445 |   text-transform: uppercase;
 446 | }
 447 | .tracking-wider {
 448 |   letter-spacing: 0.05em;
 449 | }
 450 | .container {
 451 |   max-width: 1280px;
 452 | }
 453 | .flex {
 454 |   display: flex;
 455 | }
 456 | .flex-wrap {
 457 |   flex-wrap: wrap;
 458 | }
 459 | .grid {
 460 |   display: grid;
 461 | }
 462 | .grid-flow-col {
 463 |   grid-auto-flow: column;
 464 | }
 465 | .grid-flow-row {
 466 |   grid-auto-flow: row;
 467 | }
 468 | .items-center {
 469 |   align-items: center;
 470 | }
 471 | .justify-center {
 472 |   justify-content: center;
 473 | }
 474 | .justify-self-start {
 475 |   justify-self: start;
 476 | }
 477 | .justify-self-end {
 478 |   justify-self: end;
 479 | }
 480 | .place-content-start {
 481 |   place-content: start;
 482 | }
 483 | .place-content-center {
 484 |   place-content: center;
 485 | }
 486 | 
 487 | .text-balance {
 488 |   text-wrap: balance;
 489 | }
 490 | 
 491 | .capitalize {
 492 |   text-transform: capitalize;
 493 | }
 494 | .list-none {
 495 |   list-style-type: none;
 496 | }
 497 | .list-circle {
 498 |   list-style-type: circle;
 499 | }
 500 | .leading-loose {
 501 |   line-height: 2;
 502 | }
 503 | .bg-none {
 504 |   background-image: none;
 505 | }
 506 | .indent-0 {
 507 |   text-indent: 0;
 508 | }
 509 | .max-w-lg {
 510 |   max-width: 32rem;
 511 | }
 512 | 
 513 | .brandName {
 514 |   line-height: 1;
 515 | }
 516 | 
 517 | nav {
 518 |   position: sticky;
 519 |   top: 0;
 520 |   z-index: 5;
 521 |   background-color: var(--main-bg-color);
 522 |   height: 3.2em;
 523 |   font-weight: 300;
 524 |   padding: 0.4em 1em;
 525 |   display: grid;
 526 |   grid-auto-flow: column;
 527 |   grid-template-columns: 1fr auto;
 528 |   /* gap: 1em; */
 529 |   align-items: center;
 530 |   font-size: 0.9em;
 531 |   place-content: center;
 532 | }
 533 | 
 534 | .rightLinks {
 535 |   gap: 0.5em;
 536 | }
 537 | 
 538 | nav > a,
 539 | .rightLinks a:not(.bmc),
 540 | .iconButton {
 541 |   padding: 0.5em 0.8em;
 542 | }
 543 | 
 544 | .iconButton {
 545 |   background-color: transparent;
 546 | }
 547 | 
 548 | nav > a:hover,
 549 | .rightLinks a:hover:not(.shiny),
 550 | .rightLinks a:focus:not(.shiny),
 551 | .rightLinks a:active:not(.shiny),
 552 | .iconButton:hover,
 553 | .iconButton:focus,
 554 | .iconButton:active {
 555 |   border-radius: var(--border-radius);
 556 |   background-color: var(--gray-800);
 557 | }
 558 | 
 559 | .logo,
 560 | .logoHome {
 561 |   display: grid;
 562 |   grid-template-columns: auto 1fr;
 563 |   gap: 1rem;
 564 |   align-items: center;
 565 |   font-weight: 700;
 566 |   letter-spacing: 0.05em;
 567 |   font-size: 1em;
 568 | }
 569 | 
 570 | .logoHome {
 571 |   padding-top: 2rem;
 572 |   padding-bottom: 1rem;
 573 | }
 574 | 
 575 | .icon {
 576 |   width: 1.5em;
 577 |   height: 1.5em;
 578 |   stroke: currentColor;
 579 |   stroke-width: 1.5;
 580 |   stroke-linecap: round;
 581 |   stroke-linejoin: round;
 582 |   fill: none;
 583 | }
 584 | nav button {
 585 |   color: var(--secondary-color);
 586 |   background-color: transparent;
 587 |   padding: 0.25em;
 588 | }
 589 | nav button:hover {
 590 |   background-color: transparent;
 591 | }
 592 | 
 593 | [aria-current] {
 594 |   position: relative;
 595 |   display: inline-block;
 596 | }
 597 | 
 598 | [aria-current]::after {
 599 |   position: absolute;
 600 |   content: "";
 601 |   width: calc(100% - 1em);
 602 |   display: block;
 603 |   bottom: -1px;
 604 | }
 605 | 
 606 | nav a {
 607 |   text-decoration: none;
 608 |   /* padding: 1em 0.5em; */
 609 |   display: block;
 610 |   color: var(--secondary-color);
 611 | }
 612 | 
 613 | .logoOuter {
 614 |   /* display: grid; */
 615 |   grid-auto-flow: column;
 616 |   /* align-items: center; */
 617 |   justify-content: start;
 618 |   gap: 0.75em;
 619 |   padding: 0 0.8em;
 620 | }
 621 | 
 622 | .gitHubIcon,
 623 | .bellIcon {
 624 |   position: relative;
 625 |   padding-right: 0.8em;
 626 | }
 627 | .bellIcon {
 628 |   padding-left: 0.8em;
 629 |   margin-left: -0.8em;
 630 | }
 631 | .dropDownName {
 632 |   display: inline;
 633 | }
 634 | 
 635 | .starsCount,
 636 | .bellCount {
 637 |   position: absolute;
 638 |   font-size: 0.75em;
 639 |   font-weight: 600;
 640 |   line-height: 1;
 641 |   top: -0.3em;
 642 |   right: 0;
 643 |   color: var(--main-bg-color);
 644 |   background-color: var(--secondary-color);
 645 |   border-radius: var(--border-radius);
 646 |   padding: 0.25em 0.25em 0.1em;
 647 | }
 648 | 
 649 | .bellCount {
 650 |   color: white;
 651 |   background-color: red;
 652 |   right: 0.9em;
 653 | }
 654 | 
 655 | .notifications {
 656 |   /* font-family: var(--defaultFont); */
 657 |   z-index: 20;
 658 |   display: none;
 659 |   /* width: min(80vw, 360px); */
 660 |   width: 80vw;
 661 |   max-width: 360px;
 662 |   top: 4.2em;
 663 |   position: fixed;
 664 |   font-size: 0.85em;
 665 |   border: 1px solid var(--accent-text);
 666 |   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 667 |   -webkit-background-clip: padding-box;
 668 |   background-clip: padding-box;
 669 |   color: var(--secondary-text-color);
 670 |   border-radius: var(--border-radius);
 671 |   overflow: hidden;
 672 |   box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
 673 |   /* --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 674 |   --tw-ring-offset-shadow: 0 0 #0000;
 675 |   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); */
 676 | }
 677 | .notifications h3 {
 678 |   background-color: var(--accent-text);
 679 |   color: var(--accent-text-color);
 680 |   padding: 0.7em 1em;
 681 |   margin: 0;
 682 | }
 683 | 
 684 | .notifications a {
 685 |   display: inline;
 686 |   color: var(--accent-text);
 687 |   text-underline-offset: 0.15em;
 688 |   text-decoration: underline;
 689 |   text-decoration-thickness: 0.15em;
 690 | }
 691 | 
 692 | .notifications a:hover {
 693 |   color: var(--accent-hover);
 694 | }
 695 | 
 696 | .viewLink {
 697 |   margin: 0;
 698 |   background-color: var(--card-bg);
 699 |   padding-top: 0.5em;
 700 | }
 701 | .viewLink a {
 702 |   text-decoration: none;
 703 |   display: grid;
 704 |   grid-auto-flow: column;
 705 |   place-content: start;
 706 |   border-top: 1px solid var(--gray-text);
 707 |   padding: 1.25em 1em;
 708 |   gap: 0.5em;
 709 |   font-size: 1.1em;
 710 | }
 711 | .notifications ul {
 712 |   padding: var(--notification-list-padding);
 713 |   overflow: auto;
 714 |   max-height: 65vh;
 715 |   margin: 0;
 716 |   background-color: var(--card-bg);
 717 | }
 718 | .notifications li {
 719 |   padding-bottom: 0.5em;
 720 |   color: var(--gray-text);
 721 | }
 722 | .notifications li.versionHeader {
 723 |   list-style: none;
 724 |   margin: var(--notification-header-margin);
 725 |   font-weight: 600;
 726 |   border-top: 1px solid var(--gray-text);
 727 |   padding: var(--notification-header-padding);
 728 |   font-size: 1.1em;
 729 |   color: var(--secondary-text-color);
 730 | }
 731 | .notifications li:first-child {
 732 |   margin-top: 0;
 733 |   border-top: 0;
 734 |   padding-top: 1em;
 735 | }
 736 | 
 737 | button.bellIcon:focus,
 738 | button.bellIcon:hover,
 739 | button.bellIcon:active {
 740 |   background-color: transparent;
 741 | }
 742 | 
 743 | /* Footer */
 744 | 
 745 | .footerOuter {
 746 |   font-size: 0.9em;
 747 |   grid-template-columns: 1fr;
 748 |   background-color: var(--main-bg-color);
 749 | }
 750 | 
 751 | .bmcCta {
 752 |   margin: 0.5em 0.5em 1em;
 753 |   justify-self: center;
 754 | }
 755 | 
 756 | .bmc:hover,
 757 | .bmcCta:hover,
 758 | .bmc:focus,
 759 | .bmcCta:focus,
 760 | .shiny:hover,
 761 | .shiny:focus {
 762 |   opacity: 0.85;
 763 | }
 764 | 
 765 | /* @media (min-width: 768px) {
 766 |   .footerOuter {
 767 |     grid-template-columns: 0 1fr 1fr;
 768 |   }
 769 | } */
 770 | 
 771 | /* Changelog */
 772 | 
 773 | #logs > li > a {
 774 |   color: var(--accent-text);
 775 |   border-bottom: 2px solid var(--accent-text);
 776 |   padding-bottom: 0.125em;
 777 | }
 778 | 
 779 | #logs > li > a:hover {
 780 |   color: var(--accent-hover);
 781 |   border-bottom: 2px solid var(--accent-hover);
 782 | }
 783 | 
 784 | @media (max-width: 1440px) {
 785 |   body {
 786 |     font-size: 18px;
 787 |   }
 788 | }
 789 | 
 790 | @media (max-width: 1280px) {
 791 |   .container {
 792 |     max-width: 1024px;
 793 |   }
 794 |   .logoHome {
 795 |     padding-top: 2rem;
 796 |   }
 797 | }
 798 | 
 799 | @media (max-width: 1024px) {
 800 |   .container {
 801 |     max-width: 768px;
 802 |   }
 803 |   .bmc {
 804 |     display: none;
 805 |   }
 806 | }
 807 | 
 808 | @media (max-width: 768px) {
 809 |   body {
 810 |     font-size: 16px;
 811 |   }
 812 |   .container {
 813 |     max-width: 640px;
 814 |   }
 815 |   nav {
 816 |     padding: 0.6em 0.5em;
 817 |   }
 818 | 
 819 |   .logo,
 820 |   .logoHome {
 821 |     justify-self: center;
 822 |   }
 823 | }
 824 | 
 825 | @media (max-width: 640px) {
 826 |   .container {
 827 |     width: 100%;
 828 |   }
 829 |   .tweetNav {
 830 |     display: none;
 831 |   }
 832 |   .downloadsButton,
 833 |   .gitHubIcon,
 834 |   .dropDownName {
 835 |     display: none;
 836 |   }
 837 | }
 838 | 
 839 | @media (max-width: 450px) {
 840 |   nav {
 841 |     padding: 0.3em 0.5em;
 842 |   }
 843 | 
 844 |   nav > a,
 845 |   .rightLinks a:not(.bmc),
 846 |   .iconButton {
 847 |     padding: 0.3em 0.8em;
 848 |   }
 849 | }
 850 | 
 851 | @media (max-width: 420px) {
 852 |   .brandName {
 853 |     display: none;
 854 |   }
 855 | }
 856 | 
 857 | .block {
 858 |   display: block;
 859 | }
 860 | .inline-block {
 861 |   display: inline-block;
 862 | }
 863 | @media (min-width: 768px) {
 864 |   .md\:.grid-flow-col {
 865 |     grid-auto-flow: column;
 866 |   }
 867 | }
 868 | 
 869 | @media (min-width: 1024px) {
 870 |   .lg\:hidden {
 871 |     display: none;
 872 |   }
 873 | }
 874 | 
 875 | .brightgreen {
 876 |   background-color: #34d399;
 877 |   color: rgba(0, 0, 0, 0.8);
 878 | }
 879 | .green {
 880 |   background-color: #bef264;
 881 |   color: rgba(0, 0, 0, 0.8);
 882 | }
 883 | .yellow {
 884 |   background-color: #facc15;
 885 |   color: rgba(0, 0, 0, 0.8);
 886 | }
 887 | .orange {
 888 |   background-color: #f97316;
 889 |   color: rgba(255, 255, 255, 0.8);
 890 | }
 891 | .red {
 892 |   background-color: #ef4444;
 893 |   color: rgba(255, 255, 255, 0.8);
 894 | }
 895 | .langOuter {
 896 |   display: inline-grid;
 897 |   grid-auto-flow: column;
 898 |   font-size: 0.75em;
 899 |   place-content: start;
 900 |   justify-items: center;
 901 |   letter-spacing: 0.05em;
 902 |   color: #fff;
 903 |   font-weight: 600;
 904 |   font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
 905 |     sans-serif, Apple Color Emoji, Segoe UI Emoji;
 906 |   margin: 0.45em;
 907 |   cursor: pointer;
 908 | }
 909 | .langOuter:active,
 910 | .langOuter:hover,
 911 | .langOuter:visited {
 912 |   color: #fff;
 913 | }
 914 | .langOuter > span:first-child {
 915 |   padding: 1px 6px;
 916 |   border-radius: 4px 0 0 4px;
 917 |   background-color: #555;
 918 | }
 919 | .langOuter > span:last-child {
 920 |   padding: 1px 6px;
 921 |   border-radius: 0 4px 4px 0;
 922 | }
 923 | 
 924 | /* .alert {
 925 |   background: var(--shop-gradient);
 926 |   background-size: 400% 400%;
 927 |   animation: gradient 10s ease infinite;
 928 |   margin: 0 auto;
 929 |   place-content: center;
 930 |   display: flex;
 931 |   border-radius: var(--border-radius);
 932 |   color: var(--secondary-text-color);
 933 | } */
 934 | 
 935 | /* @keyframes gradient {
 936 |   0% {
 937 |     background-position: 0% 50%;
 938 |   }
 939 |   50% {
 940 |     background-position: 100% 50%;
 941 |   }
 942 |   100% {
 943 |     background-position: 0% 50%;
 944 |   }
 945 | } */
 946 | /* .shopFeatures {
 947 |   padding-inline-start: 1.5em;
 948 | }
 949 | .shopFeatures li {
 950 |   list-style: none;
 951 |   position: relative;
 952 |   padding: var(--list-style-padding);
 953 | }
 954 | 
 955 | .shopFeatures li::before {
 956 |   content: "-";
 957 |   position: absolute;
 958 |   top: 0;
 959 |   left: var(--list-style-before-left);
 960 |   right: var(--list-style-before-right);
 961 | }
 962 | .shop-button {
 963 |   display: inline-block;
 964 |   background-color: transparent;
 965 |   border: 0.125em solid var(--gray-text);
 966 |   color: var(--gray-text);
 967 |   padding: 0.375rem 0.75rem;
 968 |   margin: 0.3em;
 969 | }
 970 | .shop-button:hover {
 971 |   border: 0.125em solid var(--secondary-text-color);
 972 |   color: var(--secondary-text-color);
 973 | } */
 974 | 
 975 | /* Scrollbar */
 976 | @media (pointer: fine) {
 977 |   * {
 978 |     scrollbar-width: auto;
 979 |     scrollbar-color: rgba(var(--blockquote-color), 0.5)
 980 |       rgba(var(--blockquote-color), 0.2);
 981 |   }
 982 | 
 983 |   ::-webkit-scrollbar {
 984 |     height: 14px;
 985 |     width: 14px;
 986 |   }
 987 | 
 988 |   ::-webkit-scrollbar-track {
 989 |     background-color: rgba(var(--blockquote-color), 0.2);
 990 |   }
 991 | 
 992 |   ::-webkit-scrollbar-thumb {
 993 |     background-color: rgba(var(--blockquote-color), 0.5);
 994 |   }
 995 | }
 996 | 
 997 | @keyframes gradient {
 998 |   0% {
 999 |     background-position: 0% 50%;
1000 |   }
1001 |   50% {
1002 |     background-position: 100% 50%;
1003 |   }
1004 |   100% {
1005 |     background-position: 0% 50%;
1006 |   }
1007 | }
1008 | .bottomSticky {
1009 |   --sticky-gradient: linear-gradient(-45deg, #86efac, #67e8f9, #a5b4fc);
1010 |   position: sticky;
1011 |   bottom: 0;
1012 |   right: 0;
1013 |   left: 0;
1014 |   background: var(--sticky-gradient);
1015 |   background-size: 400% 400%;
1016 |   animation: gradient 10s ease infinite;
1017 |   font-size: 0.8em;
1018 |   padding: 0.5em;
1019 |   display: flex;
1020 | }
1021 | .bottomSticky div {
1022 |   place-content: center;
1023 |   align-items: center;
1024 |   margin: 0 auto;
1025 | }
1026 | .bottomSticky a {
1027 |   color: black;
1028 |   font-weight: 700;
1029 |   text-underline-offset: 0.2em;
1030 |   text-decoration: underline;
1031 |   text-decoration-thickness: 0.15em;
1032 | }
1033 | 


--------------------------------------------------------------------------------
/nodejs/htmlGenerator.mjs:
--------------------------------------------------------------------------------
  1 | // const fs = require("fs");
  2 | // const fsextra = require("fs-extra");
  3 | 
  4 | // const xlsxFile = require("read-excel-file/node");
  5 | 
  6 | // const minify = require("@node-minify/core");
  7 | // const cleanCSS = require("@node-minify/clean-css");
  8 | // const glob = require("glob");
  9 | 
 10 | import fs from "fs";
 11 | import fsextra from "fs-extra";
 12 | import xlsxFile from "read-excel-file/node";
 13 | import minify from "@node-minify/core";
 14 | import cleanCSS from "@node-minify/clean-css";
 15 | import glob from "glob";
 16 | import dotenv from "dotenv";
 17 | 
 18 | dotenv.config({ path: "../.env" });
 19 | 
 20 | let timestamp = Math.round(+new Date() / 1000);
 21 | let globalCSS = "global-" + timestamp + ".min.css";
 22 | let pickrCSS = "pickr-" + timestamp + ".min.css";
 23 | 
 24 | minify({
 25 |   compressor: cleanCSS,
 26 |   input: "../src/css/global.css",
 27 |   output: "../src/css/" + globalCSS,
 28 |   callback: function (err, min) {},
 29 | });
 30 | 
 31 | minify({
 32 |   compressor: cleanCSS,
 33 |   input: "../src/css/pickr.css",
 34 |   output: "../src/css/" + pickrCSS,
 35 |   callback: function (err, min) {},
 36 | });
 37 | 
 38 | let prog = async () => {
 39 |   const CROWDIN = process.env.VITE_CROWDIN;
 40 | 
 41 |   var requestOptions = {
 42 |     method: "GET",
 43 |     headers: { Authorization: `Bearer ${CROWDIN}` },
 44 |     redirect: "follow",
 45 |   };
 46 | 
 47 |   const targetLanguages = await (
 48 |     await fetch(
 49 |       "https://api.crowdin.com/api/v2/projects/431524?limit=50",
 50 |       requestOptions
 51 |     )
 52 |   ).json();
 53 | 
 54 |   // console.log(JSON.stringify(targetLanguages.data))
 55 | 
 56 |   const targetLang = await targetLanguages.data.targetLanguages.map((val) => ({
 57 |     id: val.id,
 58 |     name: val.name,
 59 |     code:
 60 |       val.editorCode.length > 2
 61 |         ? val.editorCode.slice(0, 2) + "-" + val.editorCode.substring(2)
 62 |         : val.editorCode,
 63 |   }));
 64 | 
 65 |   const progress = await (
 66 |     await fetch(
 67 |       "https://api.crowdin.com/api/v2/projects/431524/languages/progress?limit=50",
 68 |       requestOptions
 69 |     )
 70 |   ).json();
 71 | 
 72 |   const translationStatus = progress.data.map((val) => ({
 73 |     id: val.data.languageId,
 74 |     translation: val.data.translationProgress,
 75 |     approval: val.data.approvalProgress,
 76 |   }));
 77 | 
 78 |   const mergedArray = targetLang.map((lang) => {
 79 |     const status = translationStatus.find((status) => status.id === lang.id);
 80 |     return { ...lang, ...status };
 81 |   });
 82 | 
 83 |   mergedArray.sort((a, b) => a.name.localeCompare(b.name));
 84 | 
 85 |   return mergedArray;
 86 | };
 87 | 
 88 | let langs = await prog();
 89 | 
 90 | let languages = [
 91 |   {
 92 |     lang: "en",
 93 |     name: "English",
 94 |     col: 1,
 95 |     site: "https://pattern.monster",
 96 |     path: "../",
 97 |   },
 98 |   {
 99 |     lang: "de",
100 |     name: "Deutsch",
101 |     col: 2,
102 |     site: "https://de.pattern.monster",
103 |     path: "../de.pattern.monster/",
104 |   },
105 |   {
106 |     lang: "pl",
107 |     name: "Polski",
108 |     col: 3,
109 |     site: "https://pl.pattern.monster",
110 |     path: "../pl.pattern.monster/",
111 |   },
112 |   {
113 |     lang: "tr",
114 |     name: "Türkçe",
115 |     col: 4,
116 |     site: "https://tr.pattern.monster",
117 |     path: "../tr.pattern.monster/",
118 |   },
119 |   {
120 |     lang: "es",
121 |     name: "Español",
122 |     col: 5,
123 |     site: "https://es.pattern.monster",
124 |     path: "../es.pattern.monster/",
125 |   },
126 |   {
127 |     lang: "it",
128 |     name: "Italiano",
129 |     col: 6,
130 |     site: "https://it.pattern.monster",
131 |     path: "../it.pattern.monster/",
132 |   },
133 |   {
134 |     lang: "ro",
135 |     name: "Română",
136 |     col: 7,
137 |     site: "https://ro.pattern.monster",
138 |     path: "../ro.pattern.monster/",
139 |   },
140 |   {
141 |     lang: "fr",
142 |     name: "Français",
143 |     col: 8,
144 |     site: "https://fr.pattern.monster",
145 |     path: "../fr.pattern.monster/",
146 |   },
147 |   {
148 |     lang: "ar",
149 |     name: "العربية",
150 |     col: 9,
151 |     site: "https://ar.pattern.monster",
152 |     path: "../ar.pattern.monster/",
153 |   },
154 |   {
155 |     lang: "pt",
156 |     name: "Português",
157 |     col: 10,
158 |     site: "https://pt.pattern.monster",
159 |     path: "../pt.pattern.monster/",
160 |   },
161 |   {
162 |     lang: "zh-cn",
163 |     name: "中文(简体)",
164 |     col: 11,
165 |     site: "https://cn.pattern.monster",
166 |     path: "../cn.pattern.monster/",
167 |   },
168 |   {
169 |     lang: "nl",
170 |     name: "Nederlands",
171 |     col: 12,
172 |     site: "https://nl.pattern.monster",
173 |     path: "../nl.pattern.monster/",
174 |   },
175 |   {
176 |     lang: "sv",
177 |     name: "Svenska",
178 |     col: 13,
179 |     site: "https://sv.pattern.monster",
180 |     path: "../sv.pattern.monster/",
181 |   },
182 |   {
183 |     lang: "uk",
184 |     name: "Українська",
185 |     col: 14,
186 |     site: "https://uk.pattern.monster",
187 |     path: "../uk.pattern.monster/",
188 |   },
189 |   {
190 |     lang: "ru",
191 |     name: "Русский",
192 |     col: 15,
193 |     site: "https://ru.pattern.monster",
194 |     path: "../ru.pattern.monster/",
195 |   },
196 |   {
197 |     lang: "hu",
198 |     name: "Magyar",
199 |     col: 16,
200 |     site: "https://hu.pattern.monster",
201 |     path: "../hu.pattern.monster/",
202 |   },
203 |   {
204 |     lang: "af",
205 |     name: "Afrikaans",
206 |     col: 17,
207 |     site: "https://af.pattern.monster",
208 |     path: "../af.pattern.monster/",
209 |   },
210 |   {
211 |     lang: "ca",
212 |     name: "Català",
213 |     col: 18,
214 |     site: "https://ca.pattern.monster",
215 |     path: "../ca.pattern.monster/",
216 |   },
217 |   {
218 |     lang: "zh-tw",
219 |     name: "中文 (繁體)",
220 |     col: 19,
221 |     site: "https://tw.pattern.monster",
222 |     path: "../tw.pattern.monster/",
223 |   },
224 |   {
225 |     lang: "cs",
226 |     name: "Čeština",
227 |     col: 20,
228 |     site: "https://cs.pattern.monster",
229 |     path: "../cs.pattern.monster/",
230 |   },
231 |   {
232 |     lang: "da",
233 |     name: "Dansk",
234 |     col: 21,
235 |     site: "https://da.pattern.monster",
236 |     path: "../da.pattern.monster/",
237 |   },
238 |   {
239 |     lang: "fi",
240 |     name: "Suomi",
241 |     col: 22,
242 |     site: "https://fi.pattern.monster",
243 |     path: "../fi.pattern.monster/",
244 |   },
245 |   {
246 |     lang: "ja",
247 |     name: "日本語",
248 |     col: 25,
249 |     site: "https://ja.pattern.monster",
250 |     path: "../ja.pattern.monster/",
251 |   },
252 |   {
253 |     lang: "ko",
254 |     name: "한국어",
255 |     col: 26,
256 |     site: "https://ko.pattern.monster",
257 |     path: "../ko.pattern.monster/",
258 |   },
259 | ];
260 | 
261 | let versions = languages.map((language) => ({
262 |   lang: language.lang,
263 |   name: language.name,
264 |   website: language.site,
265 | }));
266 | 
267 | xlsxFile("../../../../OneDrive/Documents/Patterns.xlsm", {
268 |   sheet: "Patterns",
269 | }).then((rows) => {
270 |   languages.forEach((language) => {
271 |     xlsxFile("../../../../OneDrive/Documents/Patterns.xlsm", {
272 |       sheet: "Translation",
273 |     }).then((transRows) => {
274 |       let array = getArray(language.col);
275 | 
276 |       function getArray(col) {
277 |         let o = {};
278 |         for (let j = 63; j < transRows.length; j++) {
279 |           // console.log(transRows[j][1])
280 |           o[transRows[j][1].toLowerCase()] =
281 |             transRows[j][col] === "" || !transRows[j][col]
282 |               ? transRows[j][1]
283 |               : transRows[j][col];
284 |         }
285 | 
286 |         return o;
287 |       }
288 | 
289 |       let translations = getTranslation(language.col);
290 | 
291 |       function getTranslation(col) {
292 |         let o = {};
293 |         for (let j = 0; j < transRows.length; j++) {
294 |           o[transRows[j][0]] =
295 |             transRows[j][col] === "" || !transRows[j][col]
296 |               ? transRows[j][1]
297 |               : transRows[j][col];
298 |         }
299 | 
300 |         return o;
301 |       }
302 | 
303 |       function getStrings(col) {
304 |         let o = {};
305 |         for (let j = 1; j < transRows.length; j++) {
306 |           o[transRows[j][0]] =
307 |             transRows[j][col] === "" || !transRows[j][col]
308 |               ? transRows[j][1]
309 |               : transRows[j][col];
310 |         }
311 | 
312 |         return o;
313 |       }
314 | 
315 |       glob(language.path + "static/global*.css", function (er, files) {
316 |         for (const file of files) {
317 |           try {
318 |             fs.unlinkSync(file);
319 |           } catch (err) {
320 |             console.error(err);
321 |           }
322 |         }
323 |       });
324 | 
325 |       glob(language.path + "static/pickr*.css", function (er, files) {
326 |         for (const file of files) {
327 |           try {
328 |             fs.unlinkSync(file);
329 |           } catch (err) {
330 |             console.error(err);
331 |           }
332 |         }
333 |       });
334 | 
335 |       let direction = ``;
336 |       if (language.lang === "ar") direction = ` dir="rtl"`;
337 |       let templateFile = `<!DOCTYPE html>
338 |       <html lang="${language.lang}"${direction}>
339 |         <head>
340 |           <meta charset="utf-8" />
341 |           <meta name="viewport" content="width=device-width,initial-scale=1.0" />
342 |       
343 |           %sapper.base%
344 |           <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
345 |           <link rel="sitemap" type="application/xml" href="${language.site}/sitemap.xml" />
346 |           <link rel="icon" type="image/png" href="favicon.png" />
347 |           <link rel="apple-touch-icon" href="logo-512.png" />
348 |           <link rel="stylesheet" href="${globalCSS}" />
349 |           <link rel="preload" href="${pickrCSS}" as="style" onload="this.onload=null;this.rel='stylesheet'" />
350 |           <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet" />
351 |       
352 |           <meta name="author" content="Naveen CS" />
353 |           <meta name="theme-color" content="#44337a" />
354 |           <meta name="google" content="notranslate" />
355 |           <meta name="robots" content="index,follow" />
356 |           <meta name="format-detection" content="telephone=no" />
357 |           <meta name="mobile-web-app-capable" content="yes" />
358 |           <meta name="apple-mobile-web-app-capable" content="yes" />
359 |           <meta name="msapplication-TileColor" content="#44337a" />
360 |           <meta name="msapplication-TileImage" content="/icons/mstile-144x144.png" />
361 |           <meta name="msapplication-square70x70logo" content="/icons/mstile-70x70.png" />
362 |           <meta name="msapplication-square150x150logo" content="/icons/mstile-150x150.png" />
363 |           <meta name="msapplication-wide310x150logo" content="/icons/mstile-310x150.png" />
364 |           <meta name="msapplication-square310x310logo" content="/icons/mstile-310x310.png" />
365 |           <meta property="og:site_name" content="Pattern.Monster" />
366 |           <meta property="og:type" content="website" />
367 |           <meta name="twitter:site" content="@pattern_monster" />
368 |           <meta name="twitter:card" content="summary_large_image" />
369 |       
370 |           %sapper.styles%
371 |           %sapper.head%
372 |           <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2799761399763923"
373 |      crossorigin="anonymous"></script>
374 |         </head>
375 |         <body>
376 |           <div id="sapper">%sapper.html%</div>
377 |       
378 |           %sapper.scripts%
379 |           <!-- Cloudflare Web Analytics -->
380 |           <script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "477d2f960abf4a47b775638d604c616a"}'></script>
381 |           <!-- End Cloudflare Web Analytics -->
382 |         </body>
383 |       </html>`;
384 | 
385 |       fs.writeFile(
386 |         language.path + "src/template.html",
387 |         templateFile,
388 |         function (err) {
389 |           if (err) return console.log(err);
390 |         }
391 |       );
392 | 
393 |       // _lang.js
394 |       let writeStream = fs.createWriteStream(
395 |         language.path + "src/routes/_lang.js"
396 |       );
397 |       writeStream.write("const strings = ");
398 |       writeStream.write(JSON.stringify(getStrings(language.col)));
399 |       writeStream.write(";export default { strings };");
400 | 
401 |       writeStream.on("finish", () => {
402 |         console.log("Created strings");
403 |       });
404 |       writeStream.end();
405 | 
406 |       // stores.js
407 |       writeStream = fs.createWriteStream(
408 |         language.path + "src/routes/stores.js"
409 |       );
410 |       writeStream.write(`import { writable } from "svelte/store";
411 | 
412 | export const themeStore = writable("light");
413 | export const langStore = writable("${language.lang}");`);
414 | 
415 |       writeStream.on("finish", () => {
416 |         console.log("Created ");
417 |       });
418 |       writeStream.end();
419 | 
420 |       // robots.txt
421 |       writeStream = fs.createWriteStream(language.path + "static/robots.txt");
422 |       writeStream.write(`Sitemap: ${language.site}/sitemap.xml
423 | User-agent: * 
424 | Crawl-Delay: 20`);
425 | 
426 |       writeStream.on("finish", () => {
427 |         console.log("Created ");
428 |       });
429 |       writeStream.end();
430 | 
431 |       // _index.js
432 |       let langValues = printObject(language.col);
433 | 
434 |       writeStream = fs.createWriteStream(
435 |         language.path + "src/routes/_index.js"
436 |       );
437 |       writeStream.write("const index = ");
438 |       writeStream.write(JSON.stringify(langValues));
439 |       writeStream.write("; export default index;");
440 | 
441 |       writeStream.on("finish", () => {
442 |         console.log("Created ");
443 |       });
444 |       writeStream.end();
445 | 
446 |       // pro/_index.js
447 |       if (language.lang == "en") {
448 |         let newValues = printObject(language.col, "premium");
449 | 
450 |         writeStream = fs.createWriteStream(
451 |           "../pro.pattern.monster/src/lib/_index.js"
452 |         );
453 |         writeStream.write("const index = ");
454 |         writeStream.write(JSON.stringify(newValues));
455 |         writeStream.write("; export default index;");
456 | 
457 |         writeStream.on("finish", () => {
458 |           console.log("Created ");
459 |         });
460 |         writeStream.end();
461 |       }
462 | 
463 |       let sitePath = ["features", "downloads", "changelog", "privacy-policy"];
464 | 
465 |       // sitemap.xml
466 |       writeStream = fs.createWriteStream(language.path + "static/sitemap.xml");
467 | 
468 |       let date = new Date().toISOString();
469 | 
470 |       writeStream.write('<?xml version="1.0" encoding="UTF-8"?>\n');
471 |       writeStream.write(
472 |         '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n'
473 |       );
474 |       writeStream.write("    <url>\n");
475 |       writeStream.write("        <loc>" + language.site + "</loc>\n");
476 |       writeStream.write("        <lastmod>" + date + "</lastmod>\n");
477 |       writeStream.write("        <priority>1.0</priority>\n");
478 |       writeStream.write("    </url>\n");
479 | 
480 |       sitePath.forEach((path) => {
481 |         writeStream.write("    <url>\n");
482 |         writeStream.write(
483 |           "        <loc>" + language.site + "/" + path + "/</loc>\n"
484 |         );
485 |         writeStream.write("        <lastmod>" + date + "</lastmod>\n");
486 |         writeStream.write("        <priority>0.8</priority>\n");
487 |         writeStream.write("    </url>\n");
488 |       });
489 | 
490 |       langValues.forEach((path) => {
491 |         writeStream.write("    <url>\n");
492 |         writeStream.write(
493 |           "        <loc>" + language.site + "/" + path.slug + "/</loc>\n"
494 |         );
495 |         writeStream.write("        <lastmod>" + date + "</lastmod>\n");
496 |         writeStream.write("        <priority>0.8</priority>\n");
497 |         writeStream.write("    </url>\n");
498 |       });
499 | 
500 |       writeStream.write("</urlset>");
501 | 
502 |       // the finish event is emitted when all data has been flushed from the stream
503 |       writeStream.on("finish", () => {
504 |         console.log("Created sitemap");
505 |       });
506 | 
507 |       // close the stream
508 |       writeStream.end();
509 | 
510 |       // package.json
511 |       writeStream = fs.createWriteStream(language.path + "package.json");
512 |       writeStream.write(`{
513 |   "name": "${language.site}",
514 |   "description": "SVG Patterns",
515 |   "version": "0.0.1",
516 |   "scripts": {
517 |     "dev": "sapper dev",
518 |     "build": "sapper build --legacy",
519 |     "export": "sapper export --entry \\"index api features confirmed herringbone-7 herringbone-8 flower-1 flower-2 flower-3 flower-4 flower-5 flower-6 flower-7 plus-1 plus-2 plus-3 plus-4 circles-1 circles-2 circles-3 circles-4 circles-5 circles-6 circles-7 concentric-circles-1 concentric-circles-2 concentric-circles-3 adjointed-circles adjointed-diamonds diamonds-1 diamonds-2 diamonds-3 hexagon-1 hexagon-2 hexagon-3 hexagon-4 hexagon-5 hexagon-6 hexagon-7 hexagon-8 overlapping-hexagons squares-and-squares-1 squares-and-squares-2 squares-and-diamonds squares-and-circles-1 squares-and-circles-2 squares-and-plus-1 squares-and-plus-2 squares-and-stars-1 squares-and-stars-2 stars-and-lines-1 stars-and-lines-2 triangles-1 triangles-2 triangles-3 triangles-4 triangles-5 triangles-6 triangles-7 triangles-8 triangles-9 triangles-10 inverted-triangles checkerboard japanese-pattern-1 japanese-pattern-2 japanese-pattern-3 japanese-pattern-4 japanese-pattern-5 japanese-pattern-6 eyes-1 eyes-2 eyes-3 eyes-4 jigsaw railroad octagons-1 octagons-2 lines-1 lines-2 scales-1 scales-2 scales-3 scales-4 leaves-1 leaves-2 leaves-3 leaves-4 leaves-5 leaves-6 leaves-7 leaves-8 pipes zebra memphis-1 memphis-2 memphis-3 memphis-4 memphis-5 memphis-6 greek-key chinese-1 chinese-2 chinese-3 chinese-4 chinese-9 chinese-5 chinese-6 chinese-7 chinese-8 new-1 new-2 new-3 new-4 new-5 new-6 new-7 new-8 new-9 new-10 new-11 new-12 new-13 new-14 new-15 new-16 new-17 double-bubble-1 double-bubble-2 stars-1 stars-2 stars-3 stars-4 stars-5 stars-6 semicircles-1 songket-1 christmas-tree-1 candy-cane-1 christmas-bells-1 christmas-pattern-1 christmas-pattern-2 christmas-pattern-3 snowflakes-1 christmas-tree-balls santa-claus christmas-gift cubes-1 cubes-2 cubes-3 stained-glass tiles-1 rectangles-and-squares-1 mexican-pattern-1 mexican-pattern-2 ethnic-pattern-1 ethnic-pattern-2 ethnic-pattern-3 plaid-pattern-1 plaid-pattern-2 plaid-pattern-3 plaid-pattern-4 doodle-1 doodle-2 batik-1 batik-2 batik-3 batik-4 batik-5 batik-6 african-1 african-2 african-3 african-4 triangles-11 hexagon-9 tiles-2 tiles-3 tribal-1 tribal-2 waves-8 leaves-9 blobs african-5 triangles-12 squares-and-triangles-1 tribal-3 circles-8 triangles-13 triangles-14 triangles-15 triangles-16 circles-9 concentric-circles-4 concentric-circles-5 concentric-circles-6 stripes-1 stripes-2 chevron-4 chevron-5 terrazzo-1 geometric-1 halloween-1 halloween-2 halloween-3 halloween-4 halloween-5 halloween-6 hexagon-10 hexagon-11 squares-1 squares-2 sprinkles-1 cubes-4 geometric-2 geometric-3 geometric-4 circles-10 circles-11 circles-12 triangles-17 triangles-18 geometric-5 geometric-6 squiggle-1 moroccan-1 moroccan-2 japanese-pattern-7 waves-9 christmas-pattern-4 christmas-pattern-5 plaid-pattern-5 plaid-pattern-6 circles-13 circles-14 interlocked-hexagons-1 interlocked-hexagons-2 interlocked-hexagons-3 lanterns-1 leaves-10 lines-3 rope-1 waves-10 waves-11 lines-4 lines-5 lines-6 plus-5 plus-6 scales-5 scales-6 scales-7 scales-8 scales-9 triangles-19 triangles-20 batik-7 circles-15 circles-16 circles-17 circles-and-diamonds diamonds-4 diamonds-5 diamonds-6 geometric-7 geometric-8 geometric-9 geometric-10 waves-12 waves-13 waves-14 waves-15 double-bubble-3 double-bubble-4 patches squares-3 squares-4 squares-5 squares-6 triangles-21 triangles-22 triangles-23 tribal-4 tribal-5 chinese-10 chinese-11 diamonds-7 diamonds-8 diamonds-9 waves-16 waves-17 waves-18 waves-19 waves-20 diamonds-10 diamonds-11 diamonds-12 diamonds-13 chinese-12 chinese-13 chinese-14 egyptian-1 egyptian-2 egyptian-3 circles-19 circles-20 egyptian-4 egyptian-6 waves-22 squares-and-circles-3 japanese-pattern-8 circles-22 diamonds-14 diamonds-15\\"",
520 |     "start": "node __sapper__/build",
521 |     "test": "run-p --race dev cy:run"
522 |   },
523 |   "dependencies": {
524 |     "@rollup/plugin-json": "^4.1.0",
525 |     "@simonwep/pickr": "^1.8.2",
526 |     "compression": "^1.7.4",
527 |     "dayjs": "^1.11.9",
528 |     "dotenv": "^16.3.1",
529 |     "polka": "next",
530 |     "prettier": "^2.8.8",
531 |     "save-svg-as-png": "^1.4.17",
532 |     "sirv": "^1.0.7"
533 |   },
534 |   "devDependencies": {
535 |     "@rollup/plugin-commonjs": "^16.0.0",
536 |     "@rollup/plugin-node-resolve": "^10.0.0",
537 |     "@rollup/plugin-replace": "^2.3.4",
538 |     "npm-run-all": "^4.1.5",
539 |     "rollup": "^2.33.3",
540 |     "rollup-plugin-svelte": "^6.1.1",
541 |     "rollup-plugin-terser": "^7.0.2",
542 |     "sapper": "^0.29.1"`);
543 | 
544 |       if (language.lang == "en")
545 |         writeStream.write(`,
546 |     "svelte": "^3.59.1",
547 |     "fs-extra": "^11.1.1",
548 |     "@node-minify/clean-css": "^8.0.6",
549 |     "@node-minify/core": "^8.0.6",
550 |     "read-excel-file": "^5.6.1",
551 |     "glob": "^8.1.0",
552 |     "tinycolor2": "^1.6.0",
553 |     "sharp": "^0.32.3",
554 |     "convert-svg-to-png": "^0.6.4"`);
555 |       writeStream.write(`
556 |   }
557 | }`);
558 | 
559 |       writeStream.on("finish", () => {
560 |         console.log("Created ");
561 |       });
562 |       writeStream.end();
563 | 
564 |       // fs.copyFile("global.css", lang + "/css/global.css", (err) => {
565 |       //   if (err) throw err;
566 |       // });
567 |       // copyFile("../src/routes/_error.svelte", language.path + "src/components");
568 | 
569 |       if (language.lang !== "en") {
570 |         fsextra
571 |           .copy("../src/components", language.path + "src/components")
572 |           .then(() => console.log("Files copied successfully!"))
573 |           .catch((err) => console.error(err));
574 |       }
575 | 
576 |       let routesFiles = [
577 |         "_error.svelte",
578 |         "_layout.svelte",
579 |         "_values.js",
580 |         "[slug].json.js",
581 |         "[slug].svelte",
582 |         "changelog.svelte",
583 |         "confirmed.svelte",
584 |         "downloads.svelte",
585 |         "features.svelte",
586 |         "index.json.js",
587 |         // "index.svelte", -- Don't copy this - have to change the language
588 |         "privacy-policy.svelte",
589 |       ];
590 | 
591 |       routesFiles.forEach((filename) => {
592 |         if (language.lang !== "en")
593 |           copyFile(
594 |             "../src/routes/" + filename,
595 |             language.path + "src/routes/" + filename
596 |           );
597 |       });
598 | 
599 |       copyFile(
600 |         "../src/css/" + globalCSS,
601 |         language.path + "static/" + globalCSS
602 |       );
603 |       copyFile("../src/css/" + pickrCSS, language.path + "static/" + pickrCSS);
604 |       copyFile("../src/server.js", language.path + "src/server.js");
605 | 
606 |       function copyFile(source, dest) {
607 |         fs.copyFile(source, dest, (err) => {
608 |           if (err) throw err;
609 |         });
610 |       }
611 | 
612 |       let createConstants = () => {
613 |         let writeStream = fs.createWriteStream(
614 |           `${language.path}src/routes/_constants.js`
615 |         );
616 | 
617 |         writeStream.write(`const strings = {
618 |   website: "${language.site}",
619 |   title: "Pattern Monster",
620 |   description:
621 |     "${translations.description}",
622 |   description2: "${translations.description2}",
623 |   description3: 
624 |     "${translations.description3}",
625 |   keywords:
626 |     "${translations.keywords}",
627 |   pages: [
628 |     {
629 |       page: "index",
630 |       title: "${translations.title}",
631 |       keywords: "",
632 |       description: "",
633 |       image: "",
634 |     },
635 |     {
636 |       page: "changelog",
637 |       title: "${translations.changelog}",
638 |       keywords: "${translations.changelog.toLowerCase()}",
639 |       description: "Changelog for Pattern Monster.",
640 |       image: "",
641 |     },
642 |     {
643 |       page: "downloads",
644 |       title: "${translations.downloads}",
645 |       keywords: "${translations.downloads.toLowerCase()}",
646 |       description: "Downloads for Pattern Monster.",
647 |       image: "",
648 |     },
649 |     {
650 |       page: "features",
651 |       title: "${translations.features}",
652 |       keywords: "${translations.features.toLowerCase()}",
653 |       description: "Features for Pattern Monster.",
654 |       image: "",
655 |     },
656 |     {
657 |       page: "privacy-policy",
658 |       title: "${translations.privacy}",
659 |       keywords: "${translations.privacy.toLowerCase()}",
660 |       description: "Privacy Policy for Pattern Monster.",
661 |       image: "",
662 |     },
663 |     {
664 |       page: "api",
665 |       title: "API",
666 |       keywords: "api",
667 |       description: "API for Pattern Monster.",
668 |       image: "",
669 |     },
670 |   ],
671 |   versions: ${JSON.stringify(versions)},
672 |   langs:${JSON.stringify(langs)}
673 | };
674 | 
675 | const pageDetails = (page) => {
676 |   let imagePrefix = "https://giguom.com/pattern.monster/images/";
677 |   let pageValues =
678 |     strings.pages.filter((currentPage) => currentPage.page === page)[0] ||
679 |     strings.pages.filter((currentPage) => currentPage.page === "index")[0];
680 | 
681 |   let website = strings.website;
682 |   let title = strings.title + " - " + strings.pages[0].title;
683 |   let url = website;
684 |   let keywords = strings.keywords;
685 |   let desc = strings.description + " " + strings.description3;
686 |   let image =
687 |     pageValues.image == "" ? imagePrefix + "/TwitterBG2.png" : pageValues.image;
688 | 
689 |   let versions = strings.versions.map((version) => {
690 |     return {
691 |       lang: version.lang,
692 |       website: version.website + (page === "index" ? "" : "/" + page + "/"),
693 |     };
694 |   });
695 | 
696 |   if (page != "index") {
697 |     title =
698 |       pageValues.title + " - " + strings.title + " | " + strings.pages[0].title;
699 |     url = website + "/" + page + "/";
700 |     desc =
701 |       pageValues.description +
702 |       " " +
703 |       strings.description +
704 |       " " +
705 |       strings.description3;
706 |     keywords = pageValues.keywords + ", " + strings.keywords;
707 |   }
708 | 
709 |   return { title, url, keywords, desc, image, versions };
710 | };
711 | 
712 | let lightColors = [
713 |   "hsla(0,0%,100%,1)",
714 |   "hsla(258.5,59.4%,59.4%,1)",
715 |   "hsla(339.6,82.2%,51.6%,1)",
716 |   "hsla(198.7,97.6%,48.4%,1)",
717 |   "hsla(47,80.9%,61%,1)",
718 | ];
719 | let darkColors = [
720 |   "hsla(240,6.7%,17.6%,1)",
721 |   "hsla(47,80.9%,61%,1)",
722 |   "hsla(4.1,89.6%,58.4%,1)",
723 |   "hsla(186.8,100%,41.6%,1)",
724 |   "hsla(258.5,59.4%,59.4%,1)",
725 | ];
726 | 
727 | export default { strings, pageDetails, lightColors, darkColors };
728 |         `);
729 |         // writeStream.write(JSON.stringify(getStrings(language.col)));
730 |         // writeStream.write(';export default { strings };');
731 | 
732 |         writeStream.on("finish", () => {
733 |           console.log("Created strings");
734 |         });
735 |         writeStream.end();
736 |       };
737 | 
738 |       createConstants();
739 | 
740 |       function printObject(col, pro) {
741 |         let p = [];
742 |         for (let j = 1; j < rows.length; j++) {
743 |           // for (let j = 1; j < 12; j++) {
744 |           let row = rows[j];
745 |           let title = rows[j][1];
746 |           let tags = rows[j][11];
747 | 
748 |           let isPremium = rows[j][15] === "premium";
749 | 
750 |           if (!pro && isPremium) {
751 |             continue;
752 |           }
753 | 
754 |           var newTitle =
755 |             title.indexOf(" -") > 0
756 |               ? title.substring(0, title.indexOf(" -"))
757 |               : title;
758 |           var newArray = tags.split(",");
759 |           let newTag = newArray;
760 | 
761 |           newArray.forEach((val) => {
762 |             if (
763 |               array[val.toLowerCase()] &&
764 |               array[val.toLowerCase()].toLowerCase() !== val
765 |             )
766 |               newTag.push(array[val.toLowerCase()].toLowerCase());
767 |           });
768 | 
769 |           p.push({
770 |             title: array[newTitle.toLowerCase()]
771 |               ? title.replace(newTitle, array[newTitle.toLowerCase()])
772 |               : title,
773 |             slug: row[2],
774 |             mode: row[3],
775 |             colors: row[4],
776 |             maxStroke: row[5],
777 |             maxScale: row[6],
778 |             maxSpacing: JSON.parse(row[7]),
779 |             width: row[8],
780 |             height: row[9],
781 |             vHeight: row[10],
782 |             tags: newTag,
783 |             path: row[12],
784 |             creationDate: row[14], // recently changed
785 |           });
786 |         }
787 | 
788 |         return p;
789 |       }
790 |     });
791 |   });
792 | });
793 | 


--------------------------------------------------------------------------------