238 lines
8.0 KiB
HTML
238 lines
8.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'" />
|
|
<style>
|
|
[data-theme="dark"] {
|
|
--primary-color: rgba(225, 225, 225, 1);
|
|
--border-color: rgba(225, 225, 225, 0.15);
|
|
--background-color: rgba(28, 28, 28, 1);
|
|
}
|
|
[data-theme="light"] {
|
|
--primary-color: rgba(33, 33, 33, 1);
|
|
--border-color: rgba(33, 33, 33, 0.15);
|
|
--background-color: rgba(255, 255, 255, 1);
|
|
}
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
body {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
menu {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding: 0 10px;
|
|
column-gap: 10px;
|
|
list-style-type: none;
|
|
border-top: 1px solid var(--border-color);
|
|
background: var(--background-color);
|
|
}
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
li.dynamic {
|
|
flex: 1 1 0%;
|
|
}
|
|
li.separator {
|
|
height: 32px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
li.separator:has(+ li.hidden) {
|
|
display: none;
|
|
}
|
|
li.hidden {
|
|
display: none;
|
|
}
|
|
li.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
button {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin: 0 5px;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
font-size: 18px;
|
|
font-family: sans-serif;
|
|
outline: none;
|
|
border: none;
|
|
cursor: text;
|
|
box-sizing: border-box;
|
|
color: var(--primary-color);
|
|
background-color: var(--border-color);
|
|
}
|
|
svg {
|
|
pointer-events: none;
|
|
fill: var(--primary-color);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<menu>
|
|
<li>
|
|
<button id="home">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>home-circle</title>
|
|
<path
|
|
d="M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="refresh">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>refresh-circle</title>
|
|
<path
|
|
d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M18 11H13L14.81 9.19A3.94 3.94 0 0 0 12 8A4 4 0 1 0 15.86 13H17.91A6 6 0 1 1 12 6A5.91 5.91 0 0 1 16.22 7.78L18 6Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li class="separator"></li>
|
|
<li>
|
|
<button id="previous">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>page-previous</title>
|
|
<path
|
|
d="M4,21H19A2,2 0 0,0 21,19V13H17V15L13,12L17,9V11H21V5A2,2 0 0,0 19,3H4A2,2 0 0,0 2,5V19A2,2 0 0,0 4,21M4,15H8V17H4V15M4,11H11V13H4V11M4,7H11V9H4V7M21,11H24V13H21V11Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="next">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>page-next</title>
|
|
<path
|
|
d="M20,3H5A2,2 0 0,0 3,5V11H7V9L11,12L7,15V13H3V19A2,2 0 0,0 5,21H20A2,2 0 0,0 22,19V5A2,2 0 0,0 20,3M17,17H13V15H17V17M20,13H13V11H20V13M20,9H13V7H20V9M3,13H0V11H3V13Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li class="separator"></li>
|
|
<li class="dynamic">
|
|
<input id="url" type="text" spellcheck="false" readonly="true" />
|
|
</li>
|
|
<li class="separator"></li>
|
|
<li>
|
|
<button id="backward">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>history</title>
|
|
<path
|
|
d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="forward">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>update</title>
|
|
<path
|
|
d="M21,10.12H14.22L16.96,7.3C14.23,4.6 9.81,4.5 7.08,7.2C4.35,9.91 4.35,14.28 7.08,17C9.81,19.7 14.23,19.7 16.96,17C18.32,15.65 19,14.08 19,12.1H21C21,14.08 20.12,16.65 18.36,18.39C14.85,21.87 9.15,21.87 5.64,18.39C2.14,14.92 2.11,9.28 5.62,5.81C9.13,2.34 14.76,2.34 18.27,5.81L21,3V10.12M12.5,8V12.25L16,14.33L15.28,15.54L11,13V8H12.5Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li class="separator"></li>
|
|
<li>
|
|
<button id="minus">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>magnify-minus</title>
|
|
<path
|
|
d="M9,2A7,7 0 0,1 16,9C16,10.57 15.5,12 14.61,13.19L15.41,14H16L22,20L20,22L14,16V15.41L13.19,14.61C12,15.5 10.57,16 9,16A7,7 0 0,1 2,9A7,7 0 0,1 9,2M5,8V10H13V8H5Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button id="plus">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<title>magnify-plus</title>
|
|
<path
|
|
d="M9,2A7,7 0 0,1 16,9C16,10.57 15.5,12 14.61,13.19L15.41,14H16L22,20L20,22L14,16V15.41L13.19,14.61C12,15.5 10.57,16 9,16A7,7 0 0,1 2,9A7,7 0 0,1 9,2M8,5V8H5V10H8V13H10V10H13V8H10V5H8Z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</li>
|
|
</menu>
|
|
<script>
|
|
const { ipcRenderer } = require("electron");
|
|
|
|
const registerSendEvents = () => {
|
|
document.querySelectorAll("button").forEach((button) => {
|
|
button.addEventListener("click", (e) => {
|
|
ipcRenderer.send("button-click", { id: e.target.id });
|
|
});
|
|
});
|
|
document.querySelectorAll("input").forEach((input) => {
|
|
input.addEventListener("blur", (e) => {
|
|
ipcRenderer.send("input-blur", { id: e.target.id });
|
|
});
|
|
input.addEventListener("focus", (e) => {
|
|
ipcRenderer.send("input-focus", { id: e.target.id });
|
|
});
|
|
input.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
ipcRenderer.send("input-enter", { id: e.target.id, text: e.target.value });
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
const registerReceiveEvents = () => {
|
|
ipcRenderer.on("button-disabled", (e, button) => {
|
|
document.getElementById(button.id).parentNode.classList.toggle("disabled", button.disabled);
|
|
});
|
|
ipcRenderer.on("button-hidden", (e, button) => {
|
|
document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
|
|
});
|
|
ipcRenderer.on("input-readonly", (e, input) => {
|
|
document.getElementById(input.id).readOnly = input.readonly;
|
|
});
|
|
ipcRenderer.on("input-text", (e, input) => {
|
|
document.getElementById(input.id).value = input.text;
|
|
document.getElementById(input.id).placeholder = input.placeholder;
|
|
});
|
|
ipcRenderer.on("input-select", (e, input) => {
|
|
window.getSelection()?.removeAllRanges();
|
|
if (input.select) {
|
|
document.getElementById(input.id).select();
|
|
} else {
|
|
document.getElementById(input.id).blur();
|
|
}
|
|
});
|
|
ipcRenderer.on("data-theme", (e, data) => {
|
|
document.documentElement.setAttribute("data-theme", data.theme);
|
|
});
|
|
};
|
|
|
|
registerSendEvents();
|
|
registerReceiveEvents();
|
|
</script>
|
|
</body>
|
|
</html>
|