73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
class Home extends Shadow {
|
|
|
|
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
input("", "20vw")
|
|
.backgroundColor("var(--darkred)")
|
|
.color("var(--accent)")
|
|
.border("none")
|
|
.borderTop("1px solid var(--accent)")
|
|
.borderBottom("1px solid var(--accent)")
|
|
.outline("0.5px solid black")
|
|
.borderRadius(7, px)
|
|
.transition("padding .2s")
|
|
.padding(0.5, em)
|
|
.position("absolute")
|
|
.x(50, vw).y(7, em)
|
|
.transform("translate(-50%, -50%)")
|
|
.onInput(() => {
|
|
console.log('typing')
|
|
})
|
|
.onFocus(function (focusing) {
|
|
if(focusing) {
|
|
this.style.padding = "1em"
|
|
this.style.borderColor = "var(--darkred)"
|
|
} else {
|
|
this.style.padding = "0.5em"
|
|
this.style.borderColor = "var(--accent)"
|
|
}
|
|
})
|
|
|
|
VStack(() => {
|
|
|
|
let json = this.getJSONData()
|
|
for(let i=0; i<100; i++) {
|
|
p(json[i].name)
|
|
.marginLeft(0, em)
|
|
}
|
|
})
|
|
.paddingLeft(5, em)
|
|
.paddingTop(10, em)
|
|
})
|
|
.backgroundColor("var(--main)")
|
|
.display("block")
|
|
.width(100, vw).height("auto")
|
|
.color("var(--accent)")
|
|
.fontFamily("Arial")
|
|
.onAppear(() => {
|
|
document.body.style.backgroundColor = "var(--main)"
|
|
})
|
|
}
|
|
|
|
getJSONData() {
|
|
const script = document.getElementById('jsonData');
|
|
if (!script) {
|
|
console.warn('initial-data script not found');
|
|
return null;
|
|
}
|
|
|
|
try {
|
|
// script.textContent is the raw JSON string
|
|
const data = JSON.parse(script.textContent);
|
|
console.log(data)
|
|
return data;
|
|
} catch (err) {
|
|
console.error('Failed to parse initial-data JSON:', err);
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
|
|
register(Home) |