First commit

2025-01-17 22:46:52 +01:00 · 2025-01-17 22:46:52 +01:00 · 7ae4644893
commit 7ae4644893
parent d8275ce235
22 changed files with 18552 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/blog/2025-01-14-just-starting.md
+++ b/blog/2025-01-14-just-starting.md
@ -0,0 +1,14 @@
+---
+slug: Starting
+title: Starting
+tags: [make, build, sustainable, water]
+---
+
+# Toddler Sink
+
+A filtering and water circulating sink for toddlers that they can start using from 12 months and up. 
+
+Save water without limiting your child's play with water.
+
+Here's a list of materials needed to construct this sink:
+<!-- truncate -->
--- a/docs/build/first.md
+++ b/docs/build/first.md
@ -0,0 +1,14 @@
+---
+title: Toddler sink
+description: Save water without limiting your child's play with water.
+---
+
+## A filtering and water circulating sink for toddlers that they can start using from 12 months and up. 
+
+Save water without limiting your child's play with water.
+
+<img src={require('/img/sink1.jpg').default} class="center" width="90%" />
+
+:::info[materials]
+Here's a list of materials needed to construct this sink:
+:::
--- a/docs/start.md
+++ b/docs/start.md
@ -0,0 +1,14 @@
+---
+title: Toddler sink
+description: Save water without limiting your child's play with water.
+---
+
+## A filtering and water circulating sink for toddlers that they can start using from 12 months and up. 
+
+Save water without limiting your child's play with water.
+
+<img src={require('/img/sink1.jpg').default} class="center" width="90%" />
+
+:::info[materials]
+Here's a list of materials needed to construct this sink:
+:::
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@ -0,0 +1,147 @@
+// @ts-check
+// `@type` JSDoc annotations allow editor autocompletion and type checking
+// (when paired with `@ts-check`).
+// There are various equivalent ways to declare your Docusaurus config.
+// See: https://docusaurus.io/docs/api/docusaurus-config
+
+import {themes as prismThemes} from 'prism-react-renderer';
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: 'piqpoc',
+  tagline: 'Save water without limiting your child\'s play',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
+  url: 'https://piqpoc.vicoco.nohost.me',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: '/',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  // organizationName: 'piqpoc',
+  // projectName: 'docusaurus', // Usually your repo name.
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  // Even if you don't use internationalization, you can use this field to set
+  // useful metadata like html lang. For example, if your site is Chinese, you
+  // may want to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          sidebarPath: './sidebars.js',
+        },
+        blog: {
+          showReadingTime: true,
+          feedOptions: {
+            type: ['rss', 'atom'],
+            xslt: true,
+          },
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          // editUrl:
+          //  'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+          // Useful options to enforce blogging best practices
+          onInlineTags: 'warn',
+          onInlineAuthors: 'warn',
+          onUntruncatedBlogPosts: 'warn',
+        },
+        theme: {
+          customCss: './src/css/custom.css',
+        },
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      // Replace with your project's social card
+      image: 'img/logo.png',
+      navbar: {
+        title: 'piqpoc',
+        logo: {
+          alt: 'Some water',
+          src: 'img/logo.png',
+        },
+        items: [
+          {
+            type: 'docSidebar',
+            sidebarId: 'docs',
+            position: 'left',
+            label: 'Build one',
+          },
+          {to: '/blog', label: 'Blog', position: 'left'},
+          {
+            href: 'https://git.vicoco.nohost.me/piqpoc',
+            label: 'Git',
+            position: 'right',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Docs',
+            items: [
+              {
+                label: 'Tutorial',
+                to: '/docs/intro',
+              },
+            ],
+          },
+          {
+            title: 'Community',
+            items: [
+              {
+                label: 'Forum',
+                href: 'https://forum.vicoco.nohost.me',
+              },
+            ],
+          },
+          {
+            title: 'More',
+            items: [
+              {
+                label: 'Blog',
+                to: '/blog',
+              },
+              {
+                label: 'Build Instructions',
+                href: 'https://community.preciousplastic.com/library/toddler-sink',
+              },
+            ],
+          },
+        ],
+        copyright: `piqpoc ${new Date().getFullYear()}`,
+      },
+      prism: {
+        theme: prismThemes.github,
+        darkTheme: prismThemes.dracula,
+      },
+        // image-zoom plugin https://gabrielcsapo.github.io/docusaurus-plugin-image-zoom/docs/getting-started/
+        zoom: {
+            config: {
+                container: {
+                    top: 50, // So it does not sit on top of the nav bar
+                },
+            },
+        },
+    }),
+};
+
+export default config;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,44 @@
+{
+  "name": "piqpoc",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.7.0",
+    "@docusaurus/preset-classic": "3.7.0",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.7.0",
+    "@docusaurus/types": "3.7.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0"
+  }
+}
--- a/sidebars.js
+++ b/sidebars.js
@ -0,0 +1,29 @@
+// @ts-check
+
+// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
+
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+
+ @type {import('@docusaurus/plugin-content-docs').SidebarsConfig}
+ */
+const sidebars = {
+    docs: [
+        "start",
+        {
+            label: "Build your own",
+            items: ["build/first"],
+            type: "category",
+            link: { type: "generated-index" },
+            collapsed: false,
+        },
+    ],
+};
+export default sidebars;
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+const FeatureList = [
+  {
+    title: 'Save water!',
+    Svg: require('@site/static/img/water.svg').default,
+    description: (
+      <>
+                You can save water and have fun!
+      </>
+    ),
+  },
+  {
+    title: 'Resource education',
+    Svg: require('@site/static/img/resources.svg').default,
+    description: (
+      <>
+                Learn about using resources
+      </>
+    ),
+  },
+  {
+    title: 'Build it yourself',
+    Svg: require('@site/static/img/build.svg').default,
+    description: (
+      <>
+                You don't need to buy it, just build it!
+      </>
+    ),
+  },
+];
+
+function Feature({Svg, title, description}) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <Heading as="h3">{title}</Heading>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/HomepageFeatures/styles.module.css
+++ b/src/components/HomepageFeatures/styles.module.css
@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 5rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}
--- a/src/css/custom.css
+++ b/src/css/custom.css
@ -0,0 +1,30 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #388dd1;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+import Heading from '@theme/Heading';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--secondary button--lg"
+            to="/docs/start">
+            Build your own! ⏱️
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`Hello from ${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/src/pages/markdown-page.md
+++ b/src/pages/markdown-page.md
@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.
--- a/static/.nojekyll
+++ b/static/.nojekyll
--- a/static/img/build.svg
+++ b/static/img/build.svg
@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 64 64" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#76C2AF;}
+	.st1{opacity:0.2;}
+	.st2{fill:#231F20;}
+	.st3{fill:#4F5D73;}
+	.st4{fill:#F5CF87;}
+	.st5{fill:#FFFFFF;}
+</style>
+<g id="Layer_1">
+	<g>
+		<circle class="st0" cx="32" cy="32" r="32"/>
+	</g>
+	<g class="st1">
+		<path class="st2" d="M49.9,46.2L35.8,32.1c-1-1-2.5-1.4-3.8-1l-8.1-8l-3-5.9l-5.9-3L12.1,17l3,5.9l5.9,3l0,0l8.1,8
+			c-0.4,1.3,0,2.8,1,3.8l14.1,14.1c1.6,1.6,4.1,1.6,5.7,0C51.5,50.3,51.5,47.8,49.9,46.2z"/>
+	</g>
+	<g>
+		<polygon class="st3" points="34.5,37.3 18.4,21.4 21.3,18.6 37.4,34.5 		"/>
+	</g>
+	<g>
+		<path class="st4" d="M49.9,49.9c-1.6,1.6-4.1,1.6-5.7,0L30.1,35.8c-1.6-1.6-1.6-4.1,0-5.7l0,0c1.6-1.6,4.1-1.6,5.7,0l14.1,14.1
+			C51.5,45.8,51.5,48.3,49.9,49.9L49.9,49.9z"/>
+	</g>
+	<g class="st1">
+		<path class="st2" d="M53.3,18.4l-6.5,6.5c-1.6,1.6-4.1,1.6-5.7,0c-1.6-1.6-1.6-4.1,0-5.7l6.5-6.5C46.5,12.3,45.3,12,44,12
+			c-5.5,0-10,4.5-10,10c0,1.3,0.3,2.5,0.7,3.6l-11,11C22.5,36.3,21.3,36,20,36c-5.5,0-10,4.5-10,10c0,1.3,0.3,2.5,0.7,3.6l6.5-6.5
+			c1.6-1.6,4.1-1.6,5.7,0c1.6,1.6,1.6,4.1,0,5.7l-6.5,6.5c1.1,0.4,2.4,0.7,3.6,0.7c5.5,0,10-4.5,10-10c0-1.3-0.3-2.5-0.7-3.6l11-11
+			c1.1,0.4,2.4,0.7,3.6,0.7c5.5,0,10-4.5,10-10C54,20.7,53.7,19.5,53.3,18.4z"/>
+	</g>
+	<g>
+		<rect x="23.4" y="28" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -13.2548 32)" class="st5" width="17.1" height="8"/>
+	</g>
+	<g>
+		<polygon class="st3" points="21,23.9 15.1,20.9 12.1,15 14.9,12.1 20.8,15.2 23.9,21.1 		"/>
+	</g>
+	<g>
+		<g>
+			<path class="st5" d="M46.8,22.8c-1.6,1.6-4.1,1.6-5.7,0c-1.6-1.6-1.6-4.1,0-5.7l6.5-6.5C46.5,10.3,45.3,10,44,10
+				c-5.5,0-10,4.5-10,10c0,5.5,4.5,10,10,10s10-4.5,10-10c0-1.3-0.3-2.5-0.7-3.6L46.8,22.8z"/>
+		</g>
+	</g>
+	<g>
+		<g>
+			<path class="st5" d="M17.2,41.2c1.6-1.6,4.1-1.6,5.7,0c1.6,1.6,1.6,4.1,0,5.7l-6.5,6.5c1.1,0.4,2.4,0.7,3.6,0.7
+				c5.5,0,10-4.5,10-10c0-5.5-4.5-10-10-10s-10,4.5-10,10c0,1.3,0.3,2.5,0.7,3.6L17.2,41.2z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_2">
+</g>
+</svg>
--- a/static/img/favicon.ico
+++ b/static/img/favicon.ico
--- a/static/img/logo.png
+++ b/static/img/logo.png
--- a/static/img/resource.jpg
+++ b/static/img/resource.jpg
--- a/static/img/resources.svg
+++ b/static/img/resources.svg
@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 511.999 511.999" xml:space="preserve">
+<path style="fill:#72CCC5;" d="M370.918,247.207c-19.541,0-35.382-15.841-35.382-35.382c0,19.541-15.841,35.382-35.382,35.382
+	s-35.382-15.841-35.382-35.382c0,19.541-15.841,35.382-35.382,35.382s-35.382-15.841-35.382-35.382
+	c0,19.541-15.841,35.382-35.382,35.382s-35.382-15.841-35.382-35.382v44.227c0,78.163,63.365,141.527,141.527,141.527
+	S406.3,334.216,406.3,256.053v-44.227C406.3,231.367,390.459,247.207,370.918,247.207z"/>
+<path style="fill:#11BBA3;" d="M370.918,326.816c-19.541,0-35.382-15.841-35.382-35.382c0,19.541-15.841,35.382-35.382,35.382
+	s-35.382-15.841-35.382-35.382c0,19.541-15.841,35.382-35.382,35.382s-35.382-15.841-35.382-35.382
+	c0,19.541-15.841,35.382-35.382,35.382c-7.304,0-14.091-2.215-19.727-6.007c23.504,45.592,71.046,76.771,125.872,76.771
+	s102.37-31.178,125.872-76.771C385.009,324.602,378.223,326.816,370.918,326.816z"/>
+<path style="fill:#72CCC5;" d="M229.391,149.907c0-19.541,35.382-61.918,35.382-61.918s35.382,42.378,35.382,61.918
+	s-15.841,35.382-35.382,35.382S229.391,169.449,229.391,149.907z"/>
+<path style="fill:#11BBA3;" d="M282.464,167.598c-19.541,0-35.382-15.841-35.382-35.382c0-10.589,10.389-27.878,19.909-41.502
+	c-1.39-1.734-2.218-2.726-2.218-2.726s-35.382,42.378-35.382,61.918s15.841,35.382,35.382,35.382
+	c14.351,0,26.696-8.548,32.247-20.826C292.58,166.471,287.655,167.598,282.464,167.598z"/>
+<circle style="fill:#8FDED7;" cx="273.623" cy="132.217" r="8.845"/>
+<g>
+	<path style="fill:#FFC552;" d="M61.327,256.053h17.691L45.599,202.98L8.254,256.053h17.691c0,63.793,24.842,123.768,69.951,168.877
+		s105.083,69.951,168.877,69.951v-35.382C152.592,459.498,61.327,368.234,61.327,256.053z"/>
+	<path style="fill:#FFC552;" d="M366.496,79.864l-8.845,15.32l62.672-2.406l-27.29-58.878l-8.845,15.32
+		C328.94,17.326,264.579,8.853,202.96,25.364C141.34,41.874,89.838,81.393,57.941,136.64l30.642,17.691
+		C144.675,57.179,269.345,23.774,366.496,79.864z"/>
+	<path style="fill:#FFC552;" d="M366.496,432.242l-8.845-15.32l-29.253,55.479l64.635,5.805l-8.845-15.32
+		c55.247-31.897,94.765-83.398,111.276-145.018c16.511-61.62,8.038-125.98-23.858-181.227l-30.642,17.691
+		C497.053,251.482,463.648,376.152,366.496,432.242z"/>
+</g>
+<path d="M202.302,211.825c0-4.58-3.713-8.293-8.293-8.293c-4.58,0-8.293,3.713-8.293,8.293c0,14.937-12.153,27.089-27.089,27.089
+	c-14.937,0-27.089-12.153-27.089-27.089c0-4.58-3.713-8.293-8.293-8.293c-4.58,0-8.293,3.713-8.293,8.293v44.227
+	c0,82.611,67.209,149.82,149.82,149.82s149.82-67.209,149.82-149.82v-44.227c0-4.58-3.713-8.293-8.293-8.293
+	c-4.58,0-8.293,3.713-8.293,8.293c0,14.937-12.153,27.089-27.089,27.089c-14.937,0-27.089-12.153-27.089-27.089
+	c0-4.58-3.713-8.293-8.293-8.293s-8.293,3.713-8.293,8.293c0,14.937-12.153,27.089-27.089,27.089s-27.089-12.153-27.089-27.089
+	c0-4.58-3.713-8.293-8.293-8.293s-8.293,3.713-8.293,8.293c0,14.937-12.153,27.089-27.089,27.089S202.302,226.763,202.302,211.825z
+	 M264.773,389.288c-43.904,0-82.912-21.351-107.199-54.209c0.352,0.009,0.702,0.031,1.054,0.031
+	c14.536,0,27.439-7.141,35.382-18.097c7.943,10.956,20.845,18.097,35.382,18.097c14.529,0,27.422-7.129,35.365-18.075
+	c1.351,1.86,2.858,3.626,4.514,5.283c8.248,8.248,19.217,12.792,30.883,12.792c14.536,0,27.439-7.141,35.382-18.097
+	c7.943,10.956,20.845,18.097,35.382,18.097c0.353,0,0.703-0.024,1.055-0.033C347.686,367.937,308.678,389.288,264.773,389.288z
+	 M264.773,237.404c7.943,10.956,20.845,18.097,35.382,18.097c14.536,0,27.439-7.14,35.382-18.097
+	c7.943,10.956,20.845,18.097,35.382,18.097c10.224,0,19.639-3.532,27.089-9.439v9.992c0,21.184-4.978,41.224-13.813,59.027
+	c-0.112,0.055-0.227,0.102-0.337,0.163c-3.941,2.147-8.415,3.283-12.94,3.283c-14.937,0-27.089-12.153-27.089-27.089
+	c0-4.58-3.713-8.293-8.293-8.293s-8.293,3.713-8.293,8.293c0,14.937-12.153,27.089-27.089,27.089
+	c-7.236,0-14.039-2.817-19.155-7.934c-5.116-5.116-7.934-11.919-7.934-19.155c0-4.58-3.713-8.293-8.293-8.293
+	s-8.293,3.713-8.293,8.293c0,14.937-12.153,27.089-27.089,27.089s-27.089-12.153-27.089-27.089c0-4.58-3.713-8.293-8.293-8.293
+	s-8.293,3.713-8.293,8.293c0,14.937-12.153,27.089-27.089,27.089c-4.329,0-8.461-0.987-12.281-2.934
+	c-0.309-0.158-0.625-0.288-0.942-0.402c-8.868-17.828-13.866-37.907-13.866-59.133v-9.992c7.45,5.908,16.865,9.439,27.089,9.439
+	c14.536,0,27.439-7.141,35.382-18.097c7.943,10.956,20.845,18.097,35.382,18.097S256.83,248.359,264.773,237.404z"/>
+<path d="M264.773,193.582c24.082,0,43.674-19.593,43.674-43.674c0-21.461-31.079-59.771-37.309-67.233
+	c-3.265-3.91-9.467-3.91-12.732,0c-6.229,7.462-37.309,45.772-37.309,67.233C221.098,173.99,240.691,193.582,264.773,193.582z
+	 M264.773,101.264c12.819,16.662,27.089,38.919,27.089,48.643c0,14.937-12.153,27.089-27.089,27.089s-27.089-12.153-27.089-27.089
+	C237.684,140.183,251.953,117.926,264.773,101.264z"/>
+<path d="M264.773,451.206c-104.83,0-190.619-83.084-194.98-186.861h9.225c6.394,0,10.434-7.284,7.018-12.712l-33.42-53.073
+	c-3.099-4.921-10.452-5.11-13.799-0.353L1.473,251.281c-3.797,5.397,0.203,13.065,6.782,13.065h9.534
+	c2.06,62.899,27.529,121.734,72.244,166.447c46.674,46.675,108.732,72.38,174.74,72.38c4.58,0,8.293-3.713,8.293-8.293v-35.382
+	C273.065,454.919,269.353,451.206,264.773,451.206z M256.48,486.443c-58.466-2.054-113.139-25.797-154.72-67.377
+	c-43.542-43.542-67.522-101.434-67.522-163.013c0-4.58-3.713-8.293-8.293-8.293h-1.716l20.986-29.826l18.781,29.826h-2.669
+	c-4.58,0-8.293,3.713-8.293,8.293c0,113.974,90.525,207.204,203.446,211.578V486.443z"/>
+<path d="M53.796,143.821l30.642,17.691c3.917,2.262,9.07,0.876,11.328-3.035c52.415-90.784,167.261-123.539,259.316-75.426
+	l-4.612,7.989c-3.215,5.568,1.117,12.642,7.5,12.433l62.672-2.406c5.808-0.223,9.655-6.49,7.206-11.773l-27.29-58.878
+	c-2.768-5.971-11.411-6.368-14.706-0.659l-4.768,8.256c-55.503-29.667-119.189-37.027-180.27-20.66
+	c-17.16,4.599-33.787,11.002-49.42,19.031c-4.074,2.093-5.68,7.092-3.588,11.165s7.093,5.679,11.165,3.588
+	c14.587-7.493,30.109-13.471,46.135-17.764c59.478-15.94,121.605-7.76,174.935,23.03c2.239,1.294,5.044,1.451,7.42,0.436
+	c2.25-0.961,3.583-2.91,4.767-4.957l15.337,33.088l-35.22,1.352c1.385-2.399,2.815-4.924,2.329-7.798
+	c-0.409-2.415-1.902-4.614-4.029-5.841c-98.702-56.986-224.706-25.206-284.955,70.4l-16.293-9.407
+	c16.174-25.903,36.838-47.902,61.515-65.468c3.732-2.656,4.603-7.834,1.946-11.564c-2.656-3.731-7.833-4.603-11.564-1.946
+	c-28.856,20.541-52.586,46.715-70.53,77.796C48.47,136.46,49.829,141.531,53.796,143.821z"/>
+<path d="M478.786,132.493c-2.256-3.907-7.415-5.295-11.328-3.035l-30.642,17.691c-3.907,2.257-5.295,7.415-3.035,11.328
+	c52.415,90.785,23.358,206.623-64.336,262.287l-4.612-7.989c-3.204-5.548-11.526-5.394-14.517,0.279l-29.253,55.479
+	c-2.717,5.154,0.807,11.607,6.593,12.127l64.635,5.805c6.557,0.597,11.219-6.697,7.923-12.406l-4.766-8.254
+	c30.193-18.749,55.379-43.096,74.953-72.471c2.54-3.811,1.509-8.959-2.303-11.499c-3.81-2.541-8.96-1.508-11.499,2.303
+	c-19.665,29.511-45.423,53.588-76.56,71.565c-3.966,2.29-5.325,7.362-3.035,11.328l0.858,1.486l-36.323-3.262l16.439-31.178
+	c1.379,2.388,2.661,4.72,5.346,5.818c2.354,0.963,5.11,0.803,7.316-0.472c98.704-56.987,134.182-181.999,81.509-281.978
+	l16.291-9.406c27.454,51.661,34.23,110.879,19.009,167.68c-3.967,14.808-9.381,29.211-16.09,42.809
+	c-2.027,4.107-0.339,9.079,3.768,11.105c4.108,2.027,9.079,0.341,11.105-3.768c7.188-14.571,12.988-29.998,17.237-45.855
+	C520.557,256.254,511.79,189.659,478.786,132.493z"/>
+</svg>
--- a/static/img/sink1.jpg
+++ b/static/img/sink1.jpg
--- a/static/img/water.svg
+++ b/static/img/water.svg
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet"><radialGradient id="IconifyId17ecdb2904d178eab21436" cx="59.851" cy="-1.405" r="113.707" gradientUnits="userSpaceOnUse"><stop offset=".423" stop-color="#45d6f0"></stop><stop offset=".518" stop-color="#41cde9"></stop><stop offset=".674" stop-color="#37b4d7"></stop><stop offset=".87" stop-color="#278bba"></stop><stop offset="1" stop-color="#1b6da4"></stop></radialGradient><path d="M14.66 115.74c1.37 1.06 5.32-5.77 20.2-6.68c15.93-.98 33.56 11.69 57.71 11.69c21.41 0 32.5-10.48 31.74-12.15c-.51-1.11-8.96-3.15-18.68-8.2c-11.69-6.07-24-12.15-33.41-25.82c-6.03-8.75-10.33-18.83-4.4-26.73c5.92-7.9 20.96-4.25 20.96-4.25l-20.5-22.17l-39.03 10.64L9.5 81.58l2.13 25.21l3.03 8.95z" fill="url(#IconifyId17ecdb2904d178eab21436)"></path><path d="M59.26 36.11s4.77 1.52 11.16 4.85c10.63 5.55 17.07 14.28 23.64 14.82c6.82.55 10.31-3.38 8.82-11.58c-1.39-7.65-12.68-16.63-12.68-16.63s10.31 1.94 10.31-3.97c0-6.07-5.56-8.99-14.31-12c-5.83-2-21.51-6.44-42.53 1.52c-9.04 3.42-20.08 9.74-28.46 21.85C4.25 50.81 2.03 71.41 4.11 87.05c2.52 18.89 10.38 28.63 10.57 28.71c.19.08 1.22-22.21 10.01-31.88c7.49-8.24 15.15-4.86 24.25-5.31c10.73-.53 15.52-11.61 7.33-20.06c-7.03-7.26-18.68-6.61-18.68-6.61s3.86-1.54 11.19-2.2c8.42-.77 10.08-5.66 10.68-7.49c1.33-4.04-.2-6.1-.2-6.1z" fill="#1b6da4"></path><path d="M38.15 36.3c-.56-3.3 9.16-6.28 19.34-4.68c15.84 2.49 28.38 16.94 33.7 19.05c7.84 3.12 10.6-3.29 6.67-10.23c-4.05-7.17-14.77-13.27-14.37-15.64c.72-4.21 11.7 2.2 12.37-2.48c.45-3.1-7.75-7.56-15.54-9.55c-6.27-1.6-19.44-3.57-37.64 4.36C19.02 27.46 8.79 48.01 7.1 69.54c-1.6 20.42 6.2 35.64 6.2 35.64s.53-15.24 8.17-23.63c5.58-6.12 12.74-8.42 20.51-6.94c12.96 2.48 18.61-6.89 12.38-13.66c-4.08-4.43-9.31-5.81-14.72-5.99c-9.35-.3-14.38 2.83-14.65 1.77c-.4-1.61 4.67-5.34 11.1-8.02c8.46-3.52 18.67-1.11 20.27-8.19c.78-3.45-1.17-5.34-6.75-5.75c-7.05-.51-11.42 1.77-11.46 1.53z" fill="#ffffff"></path></svg>