mirror of
https://github.com/buildwithparallel/crosstalk
synced 2026-08-10 21:26:31 -04:00
9a4bc7f5d8
Introduces the new Crosstalk visual identity across Electron and frontend assets (logos, icons, splash screen, dock icon) and applies a broad UI refresh with updated dark-theme tokens, layout polish, and renamed “interfaces” UX language to “connections.” Adds reusable UI primitives (Badge, BaseButton, EmptyState, HashChip), deterministic identicons, and in-app overlay infrastructure (modal/toast hosts) to replace native alert/confirm/prompt flows with consistent branded dialogs and toasts. Also updates key pages (messages, calls, nomad network, settings, tools, about, network visualiser) for improved navigation, feedback, and component consistency.
151 lines
3.8 KiB
HTML
151 lines
3.8 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<title>Crosstalk</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
place-items: center;
|
|
color: #f7f8ff;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
background:
|
|
radial-gradient(circle at 50% 43%, rgba(0, 97, 253, 0.13), transparent 24rem),
|
|
linear-gradient(145deg, #0c101a, #07080d 70%);
|
|
}
|
|
|
|
.splash {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
transform: translateY(-12px);
|
|
}
|
|
|
|
.logo {
|
|
width: 104px;
|
|
height: 104px;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 10px 30px rgba(0, 97, 253, 0.34));
|
|
}
|
|
|
|
.title {
|
|
margin-top: 18px;
|
|
font-size: 25px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
|
|
.tagline {
|
|
margin-top: 5px;
|
|
color: #8b8fa8;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.version {
|
|
margin-top: 8px;
|
|
color: #555a70;
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.loader {
|
|
position: relative;
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.loader::before,
|
|
.loader::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 999px;
|
|
content: "";
|
|
}
|
|
|
|
.loader::before {
|
|
border: 2px solid rgba(110, 168, 255, 0.15);
|
|
}
|
|
|
|
.loader::after {
|
|
border: 2px solid transparent;
|
|
border-top-color: #2f7fff;
|
|
animation: spin 0.8s linear infinite;
|
|
filter: drop-shadow(0 0 5px rgba(0, 97, 253, 0.65));
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="splash">
|
|
<img class="logo" src="./assets/images/crosstalk-mark.svg" alt="Crosstalk"/>
|
|
<div class="title">Crosstalk</div>
|
|
<div class="tagline">Talk to the World</div>
|
|
<div id="app-version" class="version"></div>
|
|
<div class="loader" aria-label="Starting Crosstalk"></div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
showAppVersion();
|
|
check();
|
|
|
|
async function showAppVersion() {
|
|
const appVersion = await window.electron.appVersion();
|
|
document.getElementById("app-version").innerText = "VERSION " + appVersion;
|
|
}
|
|
|
|
async function check() {
|
|
|
|
try {
|
|
|
|
// fetch status api
|
|
const url = "http://localhost:9337/api/v1/status";
|
|
const result = await fetch(url, {
|
|
cache: "no-store", // don't read page from cache, we want to make sure server is up
|
|
});
|
|
|
|
// check status api says ok
|
|
const status = result.status;
|
|
const data = await result.json();
|
|
if(status === 200 && data.status === "ok"){
|
|
onReady();
|
|
return;
|
|
}
|
|
|
|
} catch(e) {}
|
|
|
|
// try again shortly
|
|
setTimeout(check, 250);
|
|
|
|
}
|
|
|
|
function onReady() {
|
|
// redirect to crosstalk and bypass browser cache
|
|
var timestamp = (new Date()).getTime();
|
|
const params = new URLSearchParams(window.location.search);
|
|
const returnRoute = params.get("returnRoute") || "";
|
|
window.location.href = "http://localhost:9337/?nocache=" + timestamp + returnRoute;
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|