remade app in ionic

This commit is contained in:
metacryst
2025-11-13 18:55:42 -06:00
parent cf03c95664
commit d160182127
161 changed files with 4240 additions and 5284 deletions

999
src/_/code/quill.js Normal file

File diff suppressed because one or more lines are too long

12
src/_/code/styles.css Normal file
View File

@@ -0,0 +1,12 @@
:root {
--main: #AEBDFF;
--accent: #60320c;
--text: #340000;
--yellow: #f1f3c3;
}
@media (prefers-color-scheme: dark) {
:root {
}
}

BIN
src/_/icons/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100px" height="100px"><path d="M 17 21 A 1.0001 1.0001 0 0 0 16 22 L 16 32 A 1.0001 1.0001 0 0 0 17 33 L 83 33 A 1.0001 1.0001 0 0 0 84 32 L 84 22 A 1.0001 1.0001 0 0 0 83 21 L 17 21 z M 18 23 L 82 23 L 82 31 L 18 31 L 18 29 L 73.5 29 A 0.50005 0.50005 0 1 0 73.5 28 L 18 28 L 18 23 z M 76.5 28 A 0.50005 0.50005 0 1 0 76.5 29 L 78.5 29 A 0.50005 0.50005 0 1 0 78.5 28 L 76.5 28 z M 17 44 A 1.0001 1.0001 0 0 0 16 45 L 16 55 A 1.0001 1.0001 0 0 0 17 56 L 83 56 A 1.0001 1.0001 0 0 0 84 55 L 84 45 A 1.0001 1.0001 0 0 0 83 44 L 17 44 z M 18 46 L 82 46 L 82 54 L 18 54 L 18 46 z M 22.5 51 A 0.50005 0.50005 0 1 0 22.5 52 L 67.5 52 A 0.50005 0.50005 0 1 0 67.5 51 L 22.5 51 z M 70.5 51 A 0.50005 0.50005 0 1 0 70.5 52 L 73.5 52 A 0.50005 0.50005 0 1 0 73.5 51 L 70.5 51 z M 76.5 51 A 0.50005 0.50005 0 1 0 76.5 52 L 78.5 52 A 0.50005 0.50005 0 1 0 78.5 51 L 76.5 51 z M 17 67 A 1.0001 1.0001 0 0 0 16 68 L 16 78 A 1.0001 1.0001 0 0 0 17 79 L 83 79 A 1.0001 1.0001 0 0 0 84 78 L 84 68 A 1.0001 1.0001 0 0 0 83 67 L 17 67 z M 18 69 L 82 69 L 82 74 L 26.5 74 A 0.50005 0.50005 0 1 0 26.5 75 L 82 75 L 82 77 L 18 77 L 18 69 z M 21.5 74 A 0.50005 0.50005 0 1 0 21.5 75 L 23.5 75 A 0.50005 0.50005 0 1 0 23.5 74 L 21.5 74 z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

0
src/_/icons/play.svg Normal file
View File

71
src/_/icons/runner.svg Normal file
View File

@@ -0,0 +1,71 @@
<?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.697 511.697" xml:space="preserve">
<g transform="translate(0 1)">
<g>
<path style="fill:#FFE100;" d="M505.189,119.472L505.189,119.472c-7.81-7.81-13.885-9.546-21.695-1.736l-45.125,45.993
c-6.075,6.075-14.753,6.075-20.827,0.868l-63.349-59.01c-4.339-4.339-10.414-6.942-16.488-6.942h-94.59l-79.837,75.498
c-7.81,7.81-9.546,21.695-1.736,30.373c8.678,9.546,22.563,8.678,31.241,0l59.01-62.481h43.39L147.656,306.916H62.612
c-13.885,0-26.902,10.414-27.769,24.298c-0.868,15.62,11.281,27.77,26.034,27.77H165.88c10.414,0,19.959-4.339,27.77-12.149
l57.275-61.614l61.614,65.085L296.05,456.177c-2.603,12.149,2.603,25.166,13.885,30.373c15.62,6.942,32.108-1.736,36.447-17.356
l25.166-135.376c0.868-6.075-0.868-11.281-5.207-15.62l-71.159-72.027l69.424-69.424l45.993,45.993
c7.81,7.81,21.695,7.81,29.505,0l19.959-19.959l45.125-52.068C513.867,142.035,513.867,128.15,505.189,119.472"/>
<path style="fill:#FFE100;" d="M462.667,118.605l-0.868-0.868c-7.81-7.81-1.736-7.81-10.414,0l-34.712,45.993
c-6.075,6.075-14.753,6.075-20.827,0.868l-73.763-59.01c-4.339-4.339-4.339-6.942-10.414-6.942h-68.556l-79.837,75.498
c-7.81,7.81-9.546,21.695-1.736,30.373c8.678,9.546,4.339,8.678,12.149,0l60.746-62.481h34.712L121.623,306.916h-59.01
c-13.885,0-26.902,10.414-27.769,24.298c-0.868,15.62,11.281,27.77,26.034,27.77h95.458l69.424-72.895l60.746,64.217
l-16.488,105.871c-2.603,12.149,2.603,25.166,13.885,30.373c15.62,6.942,16.488-1.736,19.959-17.356l20.827-144.922
l-55.539-78.102l63.349-69.424l40.786,45.993c7.81,7.81,18.224-3.471,26.034-11.281l8.678-8.678l54.671-54.671
C470.477,140.299,470.477,126.415,462.667,118.605"/>
</g>
<g>
<path style="fill:#FFA800;" d="M323.819,324.272l-20.827,144.922c-2.603,11.281-3.471,19.092-10.414,19.959
c12.149,0.868,23.431-7.81,26.034-19.959l27.77-144.922l-77.234-77.234L323.819,324.272z"/>
<path style="fill:#FFA800;" d="M487.833,118.605l-0.868-0.868c-7.81-7.81-19.092-7.81-27.77-1.736
c0.868,0.868,0.868,0.868,1.736,1.736l0.868,0.868c7.81,7.81,7.81,20.827,0,29.505l-54.671,54.671l-8.678,8.678
c-4.339,4.339-8.678,9.546-13.885,12.149c7.81,6.942,20.827,6.942,28.637-0.868l19.959-19.959l54.671-54.671
C495.643,140.299,495.643,127.282,487.833,118.605"/>
</g>
<g>
<path style="fill:#FFFFFF;" d="M163.277,207.12c-0.868-0.868-1.736-1.736-2.603-2.603c-7.81-8.678-6.942-21.695,1.736-30.373
l80.705-75.498H217.08l-79.837,75.498c-7.81,7.81-9.546,21.695-1.736,30.373S155.467,213.194,163.277,207.12"/>
<path style="fill:#FFFFFF;" d="M34.843,331.215c0.868-13.885,13.017-24.298,26.902-24.298H35.711
c-13.885,0-26.902,10.414-27.769,24.298c0,15.62,12.149,27.77,26.902,27.77h26.034C46.124,358.984,33.975,346.835,34.843,331.215"
/>
</g>
<path style="fill:#FFE100;" d="M425.351,63.933c0-24.298-19.092-43.39-43.39-43.39c-0.868,0-26.034,19.092-26.034,43.39
c0,0.868,1.736,43.39,26.034,43.39C406.26,107.323,425.351,88.232,425.351,63.933"/>
<g>
<path style="fill:#FFA800;" d="M399.318,20.543c-2.603,0-6.075,0-8.678,0.868c19.959,4.339,34.712,21.695,34.712,42.522
s-14.753,38.183-34.712,42.522c2.603,0.868,6.075,0.868,8.678,0.868c24.298,0,43.39-19.092,43.39-43.39
S423.616,20.543,399.318,20.543"/>
<path style="fill:#FFA800;" d="M356.795,71.743c0,0.868,0,0.868,0,1.736C356.795,72.611,356.795,71.743,356.795,71.743"/>
</g>
<path d="M295.182,497.832c-5.207,0-9.546-0.868-14.753-3.471c-14.753-6.942-23.431-23.431-19.092-40.786l15.62-100.664
l-52.068-54.671l-62.481,66.82c-1.736,1.736-3.471,2.603-6.075,2.603H34.843c-9.546,0-18.224-4.339-25.166-10.414
c-6.942-6.942-10.414-16.488-9.546-26.034c0.868-18.224,16.488-32.976,36.447-32.976h81.573l32.108-35.58
c3.471-3.471,8.678-3.471,12.149-0.868c3.471,3.471,3.471,8.678,0.868,12.149l-34.712,39.051c-2.603,1.736-4.339,2.603-6.942,2.603
H36.579c-10.414,0-19.092,6.942-19.092,16.488c0,5.207,1.736,9.546,4.339,13.017c3.471,3.471,7.81,5.207,13.017,5.207h118.02
l65.953-70.292c1.736-1.736,4.339-2.603,6.075-2.603c2.603,0,4.339,0.868,6.075,2.603l61.614,64.217
c1.736,1.736,2.603,4.339,2.603,6.942l-16.488,105.871c-1.736,9.546,1.736,18.224,9.546,21.695c5.207,2.603,10.414,1.736,14.753,0
c4.339-2.603,7.81-6.942,9.546-11.281l26.034-139.715l-74.63-74.631c-2.603-2.603-3.471-4.339-3.471-6.942
c0-2.603,0.868-4.339,2.603-6.075l69.424-69.424c3.471-3.471,8.678-3.471,12.149,0l45.993,45.993
c4.339,4.339,12.149,4.339,17.356,0l74.63-74.631c4.339-4.339,4.339-12.149,0-16.488l-0.868-0.868
c-5.207-5.207-13.017-5.207-17.356,0l-45.125,45.993c-8.678,8.678-23.431,9.546-32.976,0.868l-63.349-59.01
c-2.603-2.603-6.942-4.339-10.414-4.339h-91.986l-77.234,73.763c-5.207,5.207-5.207,13.017-0.868,18.224
c2.603,2.603,6.075,4.339,9.546,4.339l0,0c3.471,0,6.942-1.736,8.678-4.339l59.01-62.481c1.736-1.736,4.339-2.603,6.075-2.603
h43.39c3.471,0,6.942,1.736,7.81,5.207s0.868,6.942-1.736,9.546l-69.424,78.102c-3.471,3.471-8.678,4.339-12.149,0.868
c-3.471-3.471-3.471-8.678-0.868-12.149l56.407-63.349h-19.959l-56.407,59.878c-5.207,6.075-13.017,9.546-21.695,9.546l0,0
c-8.678,0-16.488-3.471-21.695-9.546c-10.414-11.281-9.546-30.373,1.736-42.522l79.837-76.366c1.736-3.471,3.471-4.339,6.075-4.339
h94.59c8.678,0,16.488,3.471,22.563,8.678l63.349,59.01c2.603,2.603,6.075,2.603,8.678,0l45.125-45.993
c11.281-11.281,30.373-11.281,42.522,0l0.868,0.868c11.281,11.281,11.281,30.373,0,41.654l-74.63,74.631
c-11.281,11.281-30.373,11.281-41.654,0l-39.919-39.919l-57.275,57.275l72.027,72.027c1.736,1.736,2.603,5.207,2.603,7.81
L329.026,470.93c-2.603,10.414-9.546,19.092-18.224,23.431C305.595,496.964,300.389,497.832,295.182,497.832z"/>
<path d="M187.575,241.832c0-5.207-3.471-8.678-8.678-8.678s-8.678,3.471-8.678,8.678s3.471,8.678,8.678,8.678
S187.575,247.038,187.575,241.832"/>
<path d="M399.318,116.001c-28.637,0-52.068-23.431-52.068-52.068s23.431-52.068,52.068-52.068
c28.637,0,52.068,23.431,52.068,52.068S427.955,116.001,399.318,116.001z M399.318,29.221c-19.092,0-34.712,15.62-34.712,34.712
s15.62,34.712,34.712,34.712c19.092,0,34.712-15.62,34.712-34.712S418.409,29.221,399.318,29.221z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.2 KiB

0
src/_/icons/stop.svg Normal file
View File

BIN
src/_/imgs/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

12
src/css/style.css Normal file
View File

@@ -0,0 +1,12 @@
html,
body {
padding: 0;
margin: 0;
}
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}

31
src/index.html Normal file
View File

@@ -0,0 +1,31 @@
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Blockcatcher</title>
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<script
type="module"
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"
></script>
<link rel="icon" type="image/x-icon" href="./_/icons/runner.svg" />
<link rel="manifest" href="./manifest.json" />
<link rel="stylesheet" href="./_/code/styles.css" />
<script src="./_/code/quill.js"></script>
<script type="module" src="./index.js"></script>
<meta name="theme-color" content="#31d53d" />
</head>
<body>
</body>
</html>

3
src/index.js Normal file
View File

@@ -0,0 +1,3 @@
import "./js/Home.js"
Home()
document.body.style.backgroundColor = "var(--main)"

198
src/js/Home.js Normal file
View File

@@ -0,0 +1,198 @@
class Home extends Shadow {
tracking = false
logs = []
timer = null
async startTracking() {
if (!navigator.geolocation) {
alert("Geolocation is not supported by your browser.");
return;
}
this.tracking = true
navigator.geolocation.requestPermission?.() || Promise.resolve('granted');
const permission = await new Promise((resolve) => {
navigator.geolocation.getCurrentPosition(
() => resolve('granted'),
() => resolve('denied')
);
});
if (permission === 'denied') {
alert("Location permission required");
this.tracking = false
return;
}
const timer = setInterval(async () => {
navigator.geolocation.getCurrentPosition(
async (pos) => {
const { latitude, longitude } = pos.coords;
const now = new Date();
const log = `${now.toISOString()} — (${latitude}, ${longitude})`;
const timestamp = this.formatCentralTime(now);
this.logs = [log, ...this.logs]
this.updateLogs()
await this.sendLocation(latitude, longitude, timestamp);
},
(err) => console.error("Location error:", err),
{ enableHighAccuracy: true }
);
}, 5000);
this.timer = timer
}
stopTracking() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
this.tracking = false;
}
}
render() {
ZStack(() => {
// Title bar
HStack(() => {
img("./_/icons/runner.svg", "2em", "2em")
p("San Marcos, TX")
.fontSize(1.2, em)
img("./_/icons/hamburger.svg", "2em", "2em")
})
.gap(15, vw)
.position("fixed")
.top(0)
.left(0)
.width(100, vw)
.paddingTop(2, em)
.paddingBottom(2, em)
.borderBottom("0.1rem solid var(--text)")
.backgroundColor("var(--yellow)")
.fontWeight("bold")
.display("flex")
.alignItems("center")
.justifyContent("center")
.zIndex(10)
VStack(() => {
button(() => {
if(this.tracking) {
Rectangle("48%", "48%")
.fill("#264B61")
.stroke("0.2em", "black")
} else {
Triangle("58%", "58%")
.fill("#9F292B")
.stroke("0.2em", "black")
}
})
.attr({"id": "playButton"})
.width(120, px)
.height(120, px)
.x(50, vw).y(50, vh)
.center()
.borderRadius(50, "%")
.backgroundColor(this.tracking ? "#CD593E" : "#A6EABD")
.border("0.2em solid black")
.cursor("pointer")
.display("flex")
.alignItems("center")
.justifyContent("center")
.onTap(() => {
console.log("tapped")
if (this.tracking) {
this.stopTracking();
this.rerender()
} else {
this.startTracking();
this.rerender()
}
})
VStack(() => {
this.logs.map(log =>
div(log)
.padding("8px 12px")
.backgroundColor("rgba(255,255,255,0.9)")
.borderRadius(6, px)
.marginBottom(6, px)
.fontSize(0.9, rem)
.color("#222")
.fontFamily("monospace")
)
})
.attr({"id": "logList"})
.flex(1)
.overflowY("auto")
.padding("0 16px")
})
.marginTop(7, em)
})
.overflowX("hidden")
.width(100, vw)
.height(100, vh)
.display("block")
.margin(0)
.color("var(--text)")
.fontFamily("Arial")
}
showTracking() {
this.$("#playButton").rerender()
this.$("#playButton").style.backgroundColor = this.tracking ? "#CD593E" : "#A6EABD"
}
updateLogs() {
let list = this.$("#logList")
list.rerender()
list.attr({"id": "logList"})
}
formatCentralTime(date) {
return new Intl.DateTimeFormat('en-US', {
timeZone: 'America/Chicago',
month: '2-digit',
day: '2-digit',
year: '2-digit',
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
hour12: true
})
.format(date)
.replace(/,/, '') // "04/05/25, 2:30:00 PM" → "04/05/25 2:30:00 PM"
.replace(/\//g, '.') // → "04.05.25 2:30:00 PM"
.toLowerCase()
.replace(' pm', 'pm')
.replace(' am', 'am');
}
async sendLocation(lat, lon, timestamp) {
try {
const resp = await fetch('http://sam.local:3008/api/location', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: "Freddy Krueger",
latitude: lat,
longitude: lon,
timestamp
})
});
if (!resp.ok) throw new Error(resp.status);
console.log('Location sent');
} catch (e) {
console.error('Failed to send location:', e);
}
}
}
register(Home)

13
src/manifest.json Normal file
View File

@@ -0,0 +1,13 @@
{
"name": "App",
"short_name": "App",
"start_url": "index.html",
"display": "standalone",
"icons": [{
"src": "_/imgs/logo.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#31d53d",
"theme_color": "#31d53d"
}