progress on mcus

build.sh

@@ -4,28 +4,10 @@
 # NODE_ENV is set to production, npm won't install anything
 unset NODE_ENV
 
-echo "Rebuilding deprived main site"
-echo "cwd: ${pwd}"
-
-#rm -rf deprived-main-website
-#git clone https://gitea.deprived.dev/Sveskejuice/deprived-main-website.git
-
-git restore .
-git clean -fd
 git pull
-git checkout WeGoingBasic
+git reset --hard WeGoingBasic
 
-echo "Project files up to date. Proceeding to install deps"
-
-echo "npm config list:"
-npm config list
-
-npm cache clean --force
-npm i
-npm i @sveltejs/adapter-static
-npm i @sveltejs/kit
-npm i @zerodevx/svelte-img
-npm tailwind init
+npm ci
 
 echo "Ready to build, building..."
 

package-lock.json

@@ -8,6 +8,8 @@
 			"name": "deprived-main-website",
 			"version": "0.0.1",
 			"dependencies": {
+				"lucide-svelte": "^0.475.0",
+				"svelte-katex": "^0.1.2",
 				"svelte-media-queries": "^1.6.2",
 				"svelte-parallax": "^0.6.0",
 				"theme-change": "^2.5.0"
@@ -48,7 +50,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
 				"@jridgewell/trace-mapping": "^0.3.24"
@@ -781,7 +782,6 @@
 			"version": "0.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
 			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -795,7 +795,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -804,7 +803,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -812,14 +810,12 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-			"dev": true
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1475,7 +1471,6 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
 			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/pug": {
@@ -1488,7 +1483,6 @@
 			"version": "8.11.3",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
 			"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -1573,7 +1567,6 @@
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
 			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1620,7 +1613,6 @@
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
 			"integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -1801,7 +1793,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
 			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15",
 				"@types/estree": "^1.0.1",
@@ -1915,7 +1906,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
 			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
 			"dependencies": {
 				"mdn-data": "2.0.30",
 				"source-map-js": "^1.0.1"
@@ -1997,7 +1987,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -2164,7 +2153,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -2500,7 +2488,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -2586,6 +2573,31 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/katex": {
+			"version": "0.15.6",
+			"resolved": "https://registry.npmjs.org/katex/-/katex-0.15.6.tgz",
+			"integrity": "sha512-UpzJy4yrnqnhXvRPhjEuLA4lcPn6eRngixW7Q3TJErjg3Aw2PuLFBzTkdUb89UtumxjhHTqL3a5GDGETMSwgJA==",
+			"funding": [
+				"https://opencollective.com/katex",
+				"https://github.com/sponsors/katex"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"commander": "^8.0.0"
+			},
+			"bin": {
+				"katex": "cli.js"
+			}
+		},
+		"node_modules/katex/node_modules/commander": {
+			"version": "8.3.0",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+			"integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/kleur": {
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -2614,8 +2626,7 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
 		},
 		"node_modules/lodash.castarray": {
 			"version": "4.4.0",
@@ -2653,11 +2664,19 @@
 				"yallist": "^3.0.2"
 			}
 		},
+		"node_modules/lucide-svelte": {
+			"version": "0.475.0",
+			"resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.475.0.tgz",
+			"integrity": "sha512-N5+hFTPHaZe9HhqJDxxxODfYuOmI6v+JIowzERcea/uxytN/JZlehVTcINBNp8wMo7l6ov1Jf5srrDbkI/WsJg==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^3 || ^4 || ^5.0.0-next.42"
+			}
+		},
 		"node_modules/magic-string": {
 			"version": "0.30.10",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
 			"integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			}
@@ -2665,8 +2684,7 @@
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-			"dev": true
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
 		},
 		"node_modules/merge2": {
 			"version": "1.4.1",
@@ -2962,7 +2980,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
 			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^3.0.0",
@@ -3448,7 +3465,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-			"dev": true,
 			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
@@ -3669,7 +3685,6 @@
 			"version": "4.2.19",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
 			"integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
@@ -3734,6 +3749,15 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-katex": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/svelte-katex/-/svelte-katex-0.1.2.tgz",
+			"integrity": "sha512-jgqMgP0hwgsaYKLNa9GGpuEKiwE7Gr6QlDKp3C3QQkIb30G+WEHCljfl+nVCNra1aTr7uIemQmlyMA3avHx6HQ==",
+			"license": "MIT",
+			"dependencies": {
+				"katex": "^0.15.2"
+			}
+		},
 		"node_modules/svelte-media-queries": {
 			"version": "1.6.2",
 			"resolved": "https://registry.npmjs.org/svelte-media-queries/-/svelte-media-queries-1.6.2.tgz",

package.json

@@ -29,6 +29,8 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"lucide-svelte": "^0.475.0",
+		"svelte-katex": "^0.1.2",
 		"svelte-media-queries": "^1.6.2",
 		"svelte-parallax": "^0.6.0",
 		"theme-change": "^2.5.0"

src/routes/+layout.svelte

@@ -58,7 +58,9 @@
                     <div class="nav-spacer" />
 
                     <!-- <a href="/">Home</a> -->
-                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen's CV</a>
+                    <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
+                    <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
+                    <a href="/tools" style="width: 7.5rem;">Tools</a>
                     <a href="https://botalex.itch.io/" target="_blank">Games</a>
                     <!-- <a href="/posts">Blog</a>
                     <a href="/about">About</a> -->

src/routes/+page.svelte

@@ -7,7 +7,7 @@
     import { ButtonType } from '$lib/IO/ButtonType.ts';
     import Timeline from '../comps/timeline/timeline.svelte';
     import { Parallax, ParallaxLayer, StickyLayer } from "svelte-parallax";
-    import { tick } from 'svelte'
+    import { onMount, tick } from 'svelte'
 
     import PreviewDeprivedLogo from "$lib/images/DeprivedLogo-NoBackground.png";
 
@@ -35,13 +35,19 @@
     
     const mobileThreshold : string = '600px'; // was 1000px. zhen testing
     let mobile : boolean;
+
+    onMount(()=> {
+        let tabTittleElement = window.document.getElementById("TabTittle");
+            if (tabTittleElement) // Not null
+        tabTittleElement.innerHTML = "Deprived devs";
+    });
 </script>
 
 
 <!-- Detect mobile -->
 <MediaQuery query='(max-width: {mobileThreshold})' bind:matches={mobile} />
 
-<title>We are the DEPRIVED DEVS</title>
+<title id="TabTittle">We are the DEPRIVED DEVS</title>
 <meta content="We are the deprived devs" property="og:title" />
 <meta content="We collaborate to create game, and hopefully more in the future! Wanna join? Hit us up." property="og:description" />
 <meta content={PreviewDeprivedLogo} property="og:image" />
@@ -125,15 +131,15 @@
 </div>
 
 <div class="grid place-content-center place-items-center min-h-screen pointer-events-auto font-mono">
-    <article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
+    <!-- <article class="pt-16 prose overflow-hidden {mobile ? "px-8" : ""}">
         <h2 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">About us</h2>
         <p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
-    </article>
+    </article> -->
 
     <!-- Spacer -->
-    <div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
+    <!-- <div style="width: 50%;" class="{!mobile ? "py-16" : "py-4"}">
         <ProfileSpacer/>
-    </div>
+    </div> -->
     
     <article class="pt-16 prose {mobile ? "px-8" : ""}">
         <h2 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 3 : 3}rem; ">Games</h2>

src/routes/tools/+page.svelte

@@ -0,0 +1,53 @@
+<script>
+    import A4 from "../zhen/notes/physics/sharedComps/A4.svelte";
+    import ToolButton from "./comps/ToolButton.svelte";
+    import { BatteryMedium } from 'lucide-svelte';
+</script>
+
+<div class="flex justify-center pt-10">
+    <A4
+        bottomBorder={false}
+        bgColor={"rounded-lg bg-base-300"}
+        class="cozette text-base-content h-full"
+    >
+        <div class="p-4 flex flex-col h-full">
+            <h1 class="text-5xl font-bold">Tools</h1>
+            <span class="w-full text-xl"
+                >These are the tools collected from different places of the
+                internet</span
+            >
+
+            <!-- Spacing -->
+            <div class="pt-14"></div>
+
+            <div class="p-4 bg-base-200 rounded-lg">
+                <h2 class="text-2xl font-bolc">MPUs/SoCs</h2>
+                <span>Whatever acronym you want lol</span>
+                <div class="grid grid-cols-3 gap-4">
+                    <ToolButton
+                        title="Sleeping battery life"
+                        desc="Calculates the battery life depending on sleep and non-sleep power usage."
+                        btnText="To calculator"
+                        icon={BatteryMedium}
+                    />
+                    <!-- <ToolButton
+                        title="Sleeping battery life"
+                        desc="Calculates the battery life depending on sleep and non-sleep power usage."
+                        btnText="To calculator"
+                        icon={BatteryMedium}
+                    />
+                    <ToolButton
+                        title="Sleeping battery life"
+                        desc="Calculates the battery life depending on sleep and non-sleep power usage."
+                        btnText="To calculator"
+                        icon={BatteryMedium}
+                    /> -->
+                </div>
+            </div>
+
+            <div class="mt-auto align-text-bottom">
+                I if you have tool suggestions, then either create an issue, create a pull request, or send an email. I probably wont add it though, since this is free work lol.
+            </div>
+        </div>
+    </A4>
+</div>

src/routes/tools/battery-life-calculator/+page.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+    import A4 from "../../zhen/notes/physics/sharedComps/A4.svelte";
+    import { BatteryLifeCalculator } from "./pageSrc/BatteryCalc";
+    import { getMCU, type MCU_Type } from "./pageSrc/MCU_defs";
+
+    let mathMachine = new BatteryLifeCalculator();
+
+    let useCustom: boolean = false;
+    let selectedText: string = "";
+    let selectedMcu: MCU_Type | undefined = undefined;
+    $: selectedMcu = getMCU(selectedText)
+    
+
+
+    const options = ["esp32-s3", "esp32-s3"];
+</script>
+
+<div class="flex justify-center pt-10">
+    <A4
+        bottomBorder={false}
+        bgColor={"rounded-lg bg-base-300"}
+        class="cozette text-base-content h-full"
+    >
+        <div class="p-4 flex flex-col h-full">
+            <h1 class="text-5xl font-bold">Battery life calculator</h1>
+            <span class="w-full text-xl">
+                Calculates the time a battery will last. Too lazy to explain
+                more.
+            </span>
+
+            <!-- Spacing -->
+            <div class="pt-14"></div>
+
+            <div class="p-4 bg-base-200 rounded-lg">
+                <h2 class="text-2xl font-bolc">Software</h2>
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="form-control">
+                        <span class="text-sm text-slate-300 text-opacity-60"
+                            >Duration of code execution</span
+                        >
+                        <div class="join">
+                            <input
+                                type="number"
+                                class="input input-bordered  input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                            />
+                            <div
+                                class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                            >
+                                <span class="text-center pl-1 pr-2">sec</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-control">
+                        <span class="text-sm text-slate-300 text-opacity-60"
+                            >sleep time</span
+                        >
+                        <div class="join">
+                            <input
+                                type="number"
+                                class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                            />
+                            <div
+                                class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                            >
+                                <span class="text-center pl-1 pr-2">sec</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-span-full">
+                        <h2 class=" text-2xl font-bolc">Hardware</h2>
+                        <div class="flex">
+                            <div
+                                class="text-sm text-slate-300 text-opacity-60 text"
+                            >
+                                Use custom values
+                            </div>
+                            <input
+                                bind:checked={useCustom}
+                                class="ml-2 checkbox checkbox-xs my-auto"
+                                type="checkbox" 
+                            />
+                        </div>
+                    </div>
+
+                    {#if !useCustom}
+                        <div>
+                            <select
+                                bind:value={selectedText}
+                                class="select select-sm select-bordered w-56 max-w-xs"
+                            >
+                                <option disabled value="">Select a text</option>
+                                {#each options as option}
+                                    <option value={option}>{option}</option>
+                                {/each}
+                            </select>
+
+                            {#if selectedMcu != undefined && selectedMcu?.wifi != undefined}
+                                <p class="mt-4 text-lg">
+                                    wifi
+                                </p>
+                            {/if}
+                            {#if selectedMcu != undefined && selectedMcu?.wifi != undefined}
+                                <p class="mt-4 text-lg">
+                                    ble
+                                </p>
+                            {/if}
+                        </div>
+                    {:else}
+                        <div class="form-control">
+                            <span class="text-sm text-slate-300 text-opacity-60"
+                                >Duration of code execution</span
+                            >
+                            <div class="join">
+                                <input
+                                    type="number"
+                                    class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                />
+                                <div
+                                    class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                                >
+                                    <span class="text-center pl-1 pr-2"
+                                        >sec</span
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                        <div class="form-control">
+                            <span class="text-sm text-slate-300 text-opacity-60"
+                                >sleep time</span
+                            >
+                            <div class="join">
+                                <input
+                                    type="number"
+                                    class="input input-bordered input-sm join-item appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                                />
+                                <div
+                                    class="bg-base-content bg-opacity-60 join-item grid place-content-center"
+                                >
+                                    <span class="text-center pl-1 pr-2"
+                                        >sec</span
+                                    >
+                                </div>
+                            </div>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+
+            <div class="mt-auto align-text-bottom text-center">
+                Source for the calculations is at this
+                <a
+                    class="text-blue-500 underline"
+                    target="_blank"
+                    href="https://github.com/simonneutert/batterylife-calculator"
+                    >github</a
+                >
+                and the
+                <a
+                    class="text-blue-500 underline"
+                    target="_blank  "
+                    href="https://www.of-things.de/battery-life-calculator.php"
+                    >original website.</a
+                >
+                I just mearly made additions.
+            </div>
+        </div>
+    </A4>
+</div>
+
+<style>
+    /* Hide the spinner for Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Hide the spinner for Firefox */
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+</style>

src/routes/tools/battery-life-calculator/pageSrc/BatteryCalc.js

@@ -0,0 +1,108 @@
+export class BatteryLifeCalculator {
+  constructor(
+    timeRunSeconds,
+    timeSleepSeconds,
+    consumptionActiveMilliAmpHours,
+    consumptionSleepMilliAmpHours,
+    powerBatteryTotalMilliAmpHours,
+    powerBatteryBufferBeforeEmptyPercent = 20) {
+    this.timeRunSeconds = timeRunSeconds
+    this.timeSleepSeconds = timeSleepSeconds
+    this.consumptionActiveMilliAmpHours = consumptionActiveMilliAmpHours
+    this.consumptionSleepMilliAmpHours = consumptionSleepMilliAmpHours
+    this.powerBatteryTotalMilliAmpHours = powerBatteryTotalMilliAmpHours
+    this.powerBatteryBufferBeforeEmptyPercent = powerBatteryBufferBeforeEmptyPercent
+
+    console.log("The source of this battery calc is here: https://github.com/simonneutert/batterylife-calculator\nI was too lazy to make the math myself.");
+  }
+
+  // public API
+
+  milliAmpToMicroAmp(milliAmps) {
+    return milliAmps * 1000
+  }
+
+  microAmpToMilliAmp(milliAmps) {
+    return milliAmps * 0.001
+  }
+
+  calculate() {
+    return {
+      powerAveragePerHour: this.powerEstimatedHourly(),
+      runtimeHoursEstimated: this.runtimeHoursEstimated(),
+      runtimeDaysEstimated: this.runtimeDaysEstimated(),
+      runtimeDaysRemainingHoursEstimated: this.runtimeDaysRemainingHoursEstimated()
+    }
+  }
+
+  powerEstimatedHourly() {
+    return this.calcPowerEst(
+      this.powerRun(),
+      this.consumptionActiveMilliAmpHours,
+      this.powerSleep(),
+      this.consumptionSleepMilliAmpHours
+    )
+  }
+
+  runtimeHoursEstimated() {
+    return parseInt(this.powerLipo() / this.powerEstimatedHourly())
+  }
+
+  runtimeDaysEstimated() {
+    return parseInt(this.runtimeHoursEstimated() / 24)
+  }
+
+  runtimeDaysRemainingHoursEstimated() {
+    return parseInt(this.runtimeHoursEstimated() % 24)
+  }
+
+  // private
+
+  roundOff(x) {
+    return Math.round(x * 100.0) / 100.0
+  }
+
+  calcPowerLipo(x, y) {
+    return parseFloat((x * (100 - y)) / 100)
+  }
+
+  calcRuns(x, y) {
+    return parseFloat(60 / (x + y))
+  }
+
+  calcRunsHour(x, y) {
+    return parseFloat(3600 / (x + y))
+  }
+
+  calcPowerRun(x, y) {
+    return parseFloat((x / (x + y)) * 3600)
+  }
+
+  calcPowerSleep(x, y) {
+    return parseFloat((y / (x + y)) * 3600)
+  }
+
+  powerLipo() {
+    return this.calcPowerLipo(this.powerBatteryTotalMilliAmpHours, this.powerBatteryBufferBeforeEmptyPercent)
+  }
+
+  runs() {
+    return this.calcRuns(this.timeRunSeconds, this.timeSleepSeconds)
+  }
+
+  runsHour() {
+    return this.calcRunsHour(this.timeRunSeconds, this.timeSleepSeconds)
+  }
+
+  powerRun() {
+    return this.calcPowerRun(this.timeRunSeconds, this.timeSleepSeconds)
+  }
+
+  powerSleep() {
+    return this.calcPowerSleep(this.timeRunSeconds, this.timeSleepSeconds)
+  }
+
+  calcPowerEst(a, b, c, d) {
+    return parseFloat((a / 3600) * b + (c / 3600) * d)
+  }
+}

src/routes/tools/battery-life-calculator/pageSrc/MCU_defs.ts

@@ -0,0 +1,63 @@
+export interface MCU_Type {
+    name: string;
+    cpu: { [key: string]: Number }; // state: power consumption
+    sleep: { [key: string]: Number };
+    wifi?: { [key: string]: Number };
+    bluetooth?: { [key: string]: Number };
+}
+
+const MCUs: MCU_Type[] = [
+    {
+        name: "esp32-s3",
+        cpu: { // mili amps
+            single_core_40MHz: 21.8,
+            dual_core_40MHz: 24.4,
+            single_core_80MHz: 42.6,
+            dual_core_80MHz: 47.3,
+            single_core_160MHz: 54.6,
+            dual_core_160MHz: 54.1,
+            single_core_240MHz: 65.9,
+            dual_core_240MHz: 81.3,
+        },
+        sleep: {
+
+        },
+        wifi: { // 
+            dBm_21: 318.2,
+            sleep: 10     
+        },
+        bluetooth: {
+            active: 100,
+            sleep: 5      
+        }
+    },
+
+    {
+        name: "esp32-c3",
+        cpu: {
+            single_core_80MHz: 22,
+            single_core_160MHz: 54.6,
+        },
+        sleep: {
+            
+        },
+        wifi: {
+            active: 110,
+            sleep: 9      
+        },
+        bluetooth: {
+            active: 90, 
+            sleep: 4      
+        }
+    }
+];
+
+export function getMCU(name: string): MCU_Type | undefined{
+    for (let i = 0; i < MCUs.length; i++) {
+        const element = MCUs[i];
+        if (element.name == name)
+            return element
+    }
+
+    return undefined;
+}

src/routes/tools/comps/ToolButton.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { SvelteComponent } from "svelte";
+
+    export let icon: typeof SvelteComponent | undefined = undefined;
+
+    export let title: string = "Sleeping battery life";
+    export let desc: string = "Calculates the battery life depending on sleep and non-sleep power usage.";
+    export let btnText: string = "To calculator";
+    export let btnHref: string = "/tools/battery-life-calculator";
+</script>
+
+<div class="min-w-10 min-h-10 bg-base-100 rounded-lg">
+    <div class="p-4">
+        <div class="flex">
+            <div class="font-bold text-xl">{title}</div>
+            
+        </div>
+        <div class="text-sm">{desc}</div>
+
+        <div class="flex pt-4">
+            {#if icon != undefined}
+            <svelte:component this={icon}/>
+            {/if}
+            <a href="{btnHref}" class="btn ml-auto btn-primary btn-sm">{btnText}</a>
+        </div>
+    </div>
+</div>

src/routes/zhen/cv/rev2/+page.svelte

@@ -49,8 +49,8 @@
 </script>
 
 <title>Zhentao Wei's CV {getFormattedDate()}</title>
-<meta content="Zhentao Wei's Epos CV" property="og:title" />
-<meta content="This CV is made completely with html + css + js" property="og:description" />
+<meta content="Zhentao Wei's CV" property="og:title" />
+<meta content="This CV is made completely with svelte + html + css + js" property="og:description" />
 <meta content={preveiwImage} property="og:image" />
 <meta content="#bdd6ee" data-react-helmet="true" name="theme-color" />
 
@@ -120,12 +120,6 @@
         }
     }
 
-    @media print {
-    .hide-on-print {
-        display: none;
-    }
-}
-
     .cv-container-container{
         width: 100%;
         height: 100%;
@@ -149,11 +143,6 @@
         padding: auto;
     }
 
-    .include-in-print { &, & * {
-        -webkit-print-color-adjust:exact !important;
-        print-color-adjust:exact !important;
-    }}
-
     .sections {
         // Shared between sections
         > div {

src/routes/zhen/notes/physics/1/+page.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import A4 from "../sharedComps/A4.svelte";
+</script>
+
+<svelte:head>
+    <script>
+        MathJax = {
+            tex: {
+                inlineMath: [
+                    ["$", "$"],
+                    ["\\(", "\\)"],
+                ],
+            },
+        };
+    </script>
+    <script
+        id="MathJax-script"
+        async
+        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"
+    ></script>
+</svelte:head>
+
+<div class="flex justify-center m-auto text-slate-900">
+    <div class="flex flex-col">
+        <A4>
+            <!-- <div>$$v_f = v_i + at$$</div>
+            <div>$$\Delta x = v_i t + \frac{1}{2} a t^2$$</div>
+            <div>$$v_f^2 = v_i^2 + 2a\Delta x$$</div>
+            <div>$$v_{\text{avg} = \frac{v_i + v_f}{2}$$</div>
+            <div>$$\Delta x = v_{\text{avg}} t$$</div> -->
+
+            <div class="overflow-x-auto">
+                <table class="table">
+                    <!-- head -->
+                    <thead>
+                        <tr>
+                            <th>Symbol</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>$v_i$</td>
+                            <td>Initial velo</td>
+                        </tr>
+                        <tr>
+                            <td>$v_f$</td>
+                            <td>Final velo</td>
+                        </tr>
+                        <tr>
+                            <td>$a$</td>
+                            <td>Accel</td>
+                        </tr>
+                        <tr>
+                            <td>$\Delta x$</td>
+                            <td>The amount of change.</td>
+                        </tr>
+                        <tr>
+                            <td>$t$</td>
+                            <td>You're on your own on this one</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </A4>
+        <A4>
+            {#each { length: 3 } as _, i}
+                <div>test {i}</div>
+            {/each}
+        </A4>
+    </div>
+</div>

src/routes/zhen/notes/physics/sharedComps/A4.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let bgColor: string | undefined = undefined;
+    export let bottomBorder: boolean = true;
+</script>
+
+<div style="width: 210mm; height: 297mm;" class="{(bgColor)?bgColor:"bg-white"} overflow-y-auto overflow-x-hidden">
+    <div class="flex flex-col h-full">
+        <div {...$$restProps}>
+            <slot></slot>
+        </div>
+
+        {#if bottomBorder}
+        <div class="border-b-2 mt-auto mb-0 border-dashed border-slate-600 hide-on-print"></div>
+        {/if}
+    </div>
+</div>

static/stylesheets/global.css

@@ -17,6 +17,17 @@
     font-family: "CozetteVector";
 }
 
+@media print {
+    .hide-on-print {
+        display: none;
+    }
+}
+
+.include-in-print { &, & * {
+    -webkit-print-color-adjust:exact !important;
+    print-color-adjust:exact !important;
+}}
+
 html {
     background: var(--background1);
 }