remade app in ionic
This commit is contained in:
999
src/_/code/quill.js
Normal file
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
12
src/_/code/styles.css
Normal 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
BIN
src/_/icons/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
1
src/_/icons/hamburger.svg
Normal file
1
src/_/icons/hamburger.svg
Normal 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
0
src/_/icons/play.svg
Normal file
71
src/_/icons/runner.svg
Normal file
71
src/_/icons/runner.svg
Normal 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
0
src/_/icons/stop.svg
Normal file
BIN
src/_/imgs/logo.png
Normal 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
12
src/css/style.css
Normal 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
31
src/index.html
Normal 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
3
src/index.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import "./js/Home.js"
|
||||
Home()
|
||||
document.body.style.backgroundColor = "var(--main)"
|
||||
198
src/js/Home.js
Normal file
198
src/js/Home.js
Normal 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
13
src/manifest.json
Normal 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"
|
||||
}
|
||||
Reference in New Issue
Block a user