auto play boxes + get rid of tailwind
This commit is contained in:
JurajKubrican
9
css/boxes.css
Normal file
9
css/boxes.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.boxes-container {
|
||||
max-width: 800px;
|
||||
margin: 100px auto;
|
||||
}
|
||||
.boxes-container input{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 2;
|
||||
}
|
||||
34
css/main.css
34
css/main.css
@@ -1,8 +1,34 @@
|
||||
:root {
|
||||
--background-color: #1e1e1e;
|
||||
--color: #dcdcdc;
|
||||
--primary: #569cd6;
|
||||
--secondary: #c586c0;
|
||||
--success: #98c379;
|
||||
--warning: #d19a66;
|
||||
--error: #f44747;
|
||||
--font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--background-color);
|
||||
color: var(--color);
|
||||
font-family: var(--font-family);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
main {
|
||||
flex: 1;
|
||||
|
||||
body>footer{
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
nav li {
|
||||
list-style: none;
|
||||
}
|
||||
65
js/boxes.js
Normal file
65
js/boxes.js
Normal file
@@ -0,0 +1,65 @@
|
||||
const socketUrl =
|
||||
(window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
|
||||
window.location.host +
|
||||
"/ws";
|
||||
|
||||
let socket = new WebSocket(socketUrl);
|
||||
|
||||
socket.addEventListener("message", function (event) {
|
||||
if (event.data.startsWith("u:")) {
|
||||
const items = event.data.split(";");
|
||||
items.forEach((i) => {
|
||||
const parts = event.data.split(":");
|
||||
document.getElementById("box-" + parts[1]).checked = parts[2] === "+";
|
||||
console.log("box-" + parts[1]);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.startsWith("i:")) {
|
||||
const str = event.data.split("i:")[1];
|
||||
const items = str.split(";");
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
document.querySelectorAll("input").forEach((input) => {
|
||||
input.checked = false;
|
||||
});
|
||||
items.forEach((i) => {
|
||||
if (!i) {
|
||||
return;
|
||||
}
|
||||
console.log(i, document.getElementById("box-" + i));
|
||||
document.getElementById("box-" + i).checked = true;
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
socket.send("ping");
|
||||
}, 10000);
|
||||
|
||||
document.querySelectorAll(".boxes input").forEach((input) => {
|
||||
input.addEventListener("change", (event) => {
|
||||
if (socket.readyState !== socket.OPEN) {
|
||||
socket = new WebSocket(socketUrl);
|
||||
}
|
||||
const id = event.target.id.split("-")[1];
|
||||
const value = event.target.checked ? "+" : "-";
|
||||
socket.send("u:" + id + ":" + value);
|
||||
});
|
||||
});
|
||||
|
||||
var timer = null
|
||||
document.querySelector("#auto-boxes").addEventListener("change",(e)=>{
|
||||
if (e.target.checked){
|
||||
timer = setInterval(()=>{
|
||||
var id = Math.round(Math.random() * 1000)
|
||||
const value = document.querySelector('#box-'+id).checked ? "-" : "+";
|
||||
socket.send("u:" + id + ":" + value);
|
||||
},500)
|
||||
}else{
|
||||
clearInterval(timer)
|
||||
}
|
||||
})
|
||||
@@ -1,60 +1,21 @@
|
||||
{{block "boxes" .}}
|
||||
{{range $index, $value := .}}
|
||||
<input type="checkbox" id="box-{{$index}}" name="checked" {{if $value}}checked{{end}} >
|
||||
{{end}}
|
||||
|
||||
<script>
|
||||
const socketUrl =
|
||||
(window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
|
||||
window.location.host +
|
||||
"/ws";
|
||||
|
||||
let socket = new WebSocket(socketUrl);
|
||||
|
||||
socket.addEventListener("message", function (event) {
|
||||
if (event.data.startsWith("u:")) {
|
||||
const items = event.data.split(";");
|
||||
items.forEach((i) => {
|
||||
const parts = event.data.split(":");
|
||||
document.getElementById("box-" + parts[1]).checked = parts[2] === "+";
|
||||
console.log("box-" + parts[1]);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.startsWith("i:")) {
|
||||
const str = event.data.split("i:")[1];
|
||||
const items = str.split(";");
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
document.querySelectorAll("input").forEach((input) => {
|
||||
input.checked = false;
|
||||
});
|
||||
items.forEach((i) => {
|
||||
if (!i) {
|
||||
return;
|
||||
}
|
||||
console.log(i, document.getElementById("box-" + i));
|
||||
document.getElementById("box-" + i).checked = true;
|
||||
});
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
socket.send("ping");
|
||||
}, 10000);
|
||||
|
||||
document.querySelectorAll("input").forEach((input) => {
|
||||
input.addEventListener("change", (event) => {
|
||||
if (socket.readyState !== socket.OPEN) {
|
||||
socket = new WebSocket(socketUrl);
|
||||
}
|
||||
const id = event.target.id.split("-")[1];
|
||||
const value = event.target.checked ? "+" : "-";
|
||||
socket.send("u:" + id + ":" + value);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="/css/boxes.css" />
|
||||
<div class="boxes-container">
|
||||
<label>
|
||||
Auto play boxes
|
||||
<input type="checkbox" id="auto-boxes"/>
|
||||
</label>
|
||||
<div class="boxes">
|
||||
{{range $index, $value := .}}<label
|
||||
><input
|
||||
type="checkbox"
|
||||
id="box-{{$index}}"
|
||||
name="checked"
|
||||
{{if
|
||||
$value}}checked{{end}} /></label
|
||||
>{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/boxes.js"></script>
|
||||
{{end}}
|
||||
@@ -5,49 +5,38 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Home</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="/js/htmx.min.js"></script>
|
||||
<script src="/js/ext/ws.js"></script>
|
||||
<link rel="stylesheet" href="/main.css" >
|
||||
|
||||
<link rel="stylesheet" href="/css/main.css" />
|
||||
</head>
|
||||
<body class="bg-gray-900 text-white font-sans">
|
||||
<nav class="bg-gray-800 py-4 shadow-md">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<div class="text-2xl font-bold text-blue-500">
|
||||
<a href="/">K</a> </div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="space-x-6">
|
||||
<!-- <a href="/" class="text-white hover:text-blue-500">Home</a> -->
|
||||
<!-- <a href="/projects" class="text-white hover:text-blue-500">Projects</a> -->
|
||||
<!-- <a href="/blog" class="text-white hover:text-blue-500">Blog</a> -->
|
||||
</div>
|
||||
</div>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<h1><a href="/">K</a></h1>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main" class="max-w-3xl mx-auto p-6 rounded-lg">
|
||||
<main>
|
||||
<section>
|
||||
<div class="mt-4">{{template "boxes" .Boxes}}</div>
|
||||
{{template "boxes" .Boxes}}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="bg-gray-800 text-center p-4 flex flex-row justify-around">
|
||||
<!-- link to github -->
|
||||
<div class="mt-4">
|
||||
<a href="https://github.com/JurajKubrican" class="text-blue-500"
|
||||
>Github</a
|
||||
>
|
||||
</div>
|
||||
<!-- Link to linkedin -->
|
||||
<div class="mt-4">
|
||||
<a
|
||||
href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/"
|
||||
class="text-blue-500"
|
||||
<footer>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/JurajKubrican">Github</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/"
|
||||
>LinkedIn</a
|
||||
>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user