Adding buttons to market
This commit is contained in:
@@ -118,7 +118,7 @@ func handleSite(w http.ResponseWriter, r *http.Request) {
|
|||||||
func serveSiteFiles(w http.ResponseWriter, r *http.Request) {
|
func serveSiteFiles(w http.ResponseWriter, r *http.Request) {
|
||||||
path := r.URL.Path
|
path := r.URL.Path
|
||||||
|
|
||||||
if(strings.Contains(path, "75820185")) {
|
if(strings.Contains(path, "75820185")) { // necessary because, if we are at a url path 2 layers or more, the browser will insert that path at the beginning of the url
|
||||||
_, after, _ := strings.Cut(path, "75820185")
|
_, after, _ := strings.Cut(path, "75820185")
|
||||||
path = after
|
path = after
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -1,3 +1,10 @@
|
|||||||
|
/*
|
||||||
|
Sam Russell
|
||||||
|
Captured Sun
|
||||||
|
11.6.25 - adding default value for "button()" "children" parameter
|
||||||
|
10.29.25 - adding "gap()" and "label()" functions
|
||||||
|
*/
|
||||||
|
|
||||||
/* $ NAVIGATION */
|
/* $ NAVIGATION */
|
||||||
let oldPushState = history.pushState;
|
let oldPushState = history.pushState;
|
||||||
history.pushState = function pushState() {
|
history.pushState = function pushState() {
|
||||||
@@ -601,7 +608,7 @@ window.span = function (innerText) {
|
|||||||
return el
|
return el
|
||||||
}
|
}
|
||||||
|
|
||||||
window.button = function (children) {
|
window.button = function (children = "") {
|
||||||
let el = document.createElement("button")
|
let el = document.createElement("button")
|
||||||
quill.setChildren(el, children)
|
quill.setChildren(el, children)
|
||||||
quill.render(el)
|
quill.render(el)
|
||||||
|
|||||||
22
ui/map.html
22
ui/map.html
@@ -1,22 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Satellite Map with Custom Interactive Elements</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="map"></div>
|
|
||||||
<div id="custom-controls" class="bg-white rounded-lg shadow-md m-2 p-4">
|
|
||||||
<h2 class="text-lg font-bold mb-2">Points of Interest</h2>
|
|
||||||
<button id="pan-to-poi" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Show Half Dome</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
|
|
||||||
key: "YOUR_API_KEY",
|
|
||||||
v: "weekly"
|
|
||||||
});</script>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -19,7 +19,6 @@ css(`
|
|||||||
|
|
||||||
input[type="checkbox"]:checked {
|
input[type="checkbox"]:checked {
|
||||||
background-color: var(--red);
|
background-color: var(--red);
|
||||||
|
|
||||||
}
|
}
|
||||||
`)
|
`)
|
||||||
|
|
||||||
@@ -29,6 +28,7 @@ class Market extends Shadow {
|
|||||||
ZStack(() => {
|
ZStack(() => {
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
VStack(() => {
|
VStack(() => {
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
input()
|
input()
|
||||||
.attr({
|
.attr({
|
||||||
@@ -41,6 +41,7 @@ class Market extends Shadow {
|
|||||||
})
|
})
|
||||||
.marginLeft(0.5, em)
|
.marginLeft(0.5, em)
|
||||||
})
|
})
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
input()
|
input()
|
||||||
.attr({
|
.attr({
|
||||||
@@ -53,6 +54,32 @@ class Market extends Shadow {
|
|||||||
})
|
})
|
||||||
.marginLeft(0.5, em)
|
.marginLeft(0.5, em)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input()
|
||||||
|
.attr({
|
||||||
|
"type": "checkbox",
|
||||||
|
"id": "new-check"
|
||||||
|
})
|
||||||
|
label("New")
|
||||||
|
.attr({
|
||||||
|
"for": "new-check"
|
||||||
|
})
|
||||||
|
.marginLeft(0.5, em)
|
||||||
|
})
|
||||||
|
|
||||||
|
HStack(() => {
|
||||||
|
input()
|
||||||
|
.attr({
|
||||||
|
"type": "checkbox",
|
||||||
|
"id": "used-check"
|
||||||
|
})
|
||||||
|
label("Used")
|
||||||
|
.attr({
|
||||||
|
"for": "used-check"
|
||||||
|
})
|
||||||
|
.marginLeft(0.5, em)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
.paddingLeft(3, em)
|
.paddingLeft(3, em)
|
||||||
.gap(1, em)
|
.gap(1, em)
|
||||||
@@ -66,7 +93,7 @@ class Market extends Shadow {
|
|||||||
.transform("translate(-50%, -50%)")
|
.transform("translate(-50%, -50%)")
|
||||||
|
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
input("Search for products...", "50vw")
|
input("Search for products...", "45vw")
|
||||||
.attr({
|
.attr({
|
||||||
"type": "text"
|
"type": "text"
|
||||||
})
|
})
|
||||||
@@ -77,6 +104,7 @@ class Market extends Shadow {
|
|||||||
.outline("none")
|
.outline("none")
|
||||||
.color("var(--accent)")
|
.color("var(--accent)")
|
||||||
.borderRadius(10, px)
|
.borderRadius(10, px)
|
||||||
|
|
||||||
button("Search")
|
button("Search")
|
||||||
.marginLeft(2, em)
|
.marginLeft(2, em)
|
||||||
.borderRadius(10, px)
|
.borderRadius(10, px)
|
||||||
@@ -84,8 +112,18 @@ class Market extends Shadow {
|
|||||||
.border("1px solid var(--accent)")
|
.border("1px solid var(--accent)")
|
||||||
.color("var(--accent)")
|
.color("var(--accent)")
|
||||||
.fontFamily("Bona Nova")
|
.fontFamily("Bona Nova")
|
||||||
|
|
||||||
|
button("+ Add Item")
|
||||||
|
.width(7, em)
|
||||||
|
.marginLeft(1, em)
|
||||||
|
.borderRadius(10, px)
|
||||||
|
.background("transparent")
|
||||||
|
.border("1px solid var(--accent)")
|
||||||
|
.color("var(--accent)")
|
||||||
|
.fontFamily("Bona Nova")
|
||||||
|
|
||||||
})
|
})
|
||||||
.x(50, vw).y(5, vh)
|
.x(55, vw).y(5, vh)
|
||||||
.position("absolute")
|
.position("absolute")
|
||||||
.transform("translateX(-50%)")
|
.transform("translateX(-50%)")
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -58,8 +58,8 @@ class Home extends Shadow {
|
|||||||
.top("3em")
|
.top("3em")
|
||||||
.right("2em")
|
.right("2em")
|
||||||
.background("transparent")
|
.background("transparent")
|
||||||
.border("1px solid var(--tan)")
|
.border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--accent)")
|
||||||
.color("var(--tan)")
|
.color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)")
|
||||||
.borderRadius(5, px)
|
.borderRadius(5, px)
|
||||||
.onHover(function (hovering) {
|
.onHover(function (hovering) {
|
||||||
console.log('hovering', hovering, this)
|
console.log('hovering', hovering, this)
|
||||||
@@ -68,10 +68,11 @@ class Home extends Shadow {
|
|||||||
this.style.color = "black"
|
this.style.color = "black"
|
||||||
} else {
|
} else {
|
||||||
this.style.background = ""
|
this.style.background = ""
|
||||||
this.style.color = "var(--tan)"
|
this.style.color = window.location.pathname === "/" ? "var(--tan)" : "var(--accent)"
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.onNavigate(function () {
|
.onNavigate(function () {
|
||||||
|
console.log("navigate")
|
||||||
if(window.location.pathname === "/") {
|
if(window.location.pathname === "/") {
|
||||||
this.style.border = "1px solid var(--tan)"
|
this.style.border = "1px solid var(--tan)"
|
||||||
this.style.color = "var(--tan)"
|
this.style.color = "var(--tan)"
|
||||||
@@ -81,7 +82,6 @@ class Home extends Shadow {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user