chrome-dev/static/html/index.html
2025-11-10 10:02:34 +01:00

100 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="/css/main.css">
</head>
<script>
function startBrowser() {
const userDataDir = document.querySelector('.user-data-dir').value
localStorage.setItem('userdatadir', userDataDir)
fetch('/browser/start', {
method: 'POST',
body: userDataDir,
})
}
function newSite() {
const url = document.querySelector('.new.url').value
const watch = document.querySelector('.new.watch').value
localStorage.setItem('url', url)
localStorage.setItem('watch', watch)
fetch('/start', {
method: 'POST',
body: JSON.stringify({url, watch}),
})
.then(() => location.reload())
}
function stopSite(uuid) {
fetch(`/stop/${uuid}`)
.then(() => location.reload())
}
function siteStatus() {
fetch('/sites')
.then(data => data.json())
.then(json => {
for (const uuid of Object.keys(json.Sites)) {
const site = json.Sites[uuid]
if (site.StopLoop) {
const els = document.querySelectorAll(`[data-uuid="${uuid}"]`)
for (const el of els)
el.remove()
}
}
})
}
function init() {
const userdatadir = localStorage.getItem('userdatadir') || ''
const url = localStorage.getItem('url') || ''
const watch = localStorage.getItem('watch') || ''
document.querySelector('.user-data-dir').value = userdatadir
document.querySelector('.new.url').value = url
document.querySelector('.new.watch').value = watch
setInterval(siteStatus, 2000)
}
</script>
<body>
<div id="version">{{ .VERSION }}</div>
<div class="browser">
<h1>Browser</h1>
<input type="text" class="user-data-dir" placeholder="~/.local/share/chrome-dev">
<button onclick="startBrowser()">Start</button>
</div>
<h1>CSS reloading</h1>
<div class="sites">
<div class="header">URL</div>
<div class="header">Watch</div>
<div class="header"></div>
<div class="line"></div>
<input type="text" class="new url" placeholder="https://example.com">
<input type="text" class="new watch" placeholder="~/example.com/css/">
<button onclick="newSite()">Start</button>
{{ range .Sites }}
{{ if .StopLoop }}
{{ continue }}
{{ end }}
<div class="line" data-uuid="{{ .UUID }}"></div>
<div class="url" data-uuid="{{ .UUID }}">{{ .URL }}</div>
<div class="watch" data-uuid="{{ .UUID }}">{{ .Watch }}</div>
<div class="stop" onclick="stopSite('{{ .UUID }}')" data-uuid="{{ .UUID }}">{{ if not .StopLoop }}❌{{
end }}</div>
{{ end }}
</div>
<script>init()</script>
</body>
</html>