https://calckeymusic.social/

1<!DOCTYPE html><!--Thank you for using Firefish!
2If you're reading this message... how about helping out with development?
3https://firefish.dev/firefish/firefish
4--><html><head><meta charset="utf-8"><meta name="application-name" content="Firefish"><meta name="referrer" content="origin"><meta name="darkreader-lock" content=""><meta name="theme-color" content="#31748f"><meta name="theme-color-orig" content="#31748f"><meta property="twitter:card" content="summary"><meta property="og:site_name" content="Calckeymusic.social"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"><link rel="icon" href="/favicon.ico?1791389273763"><link rel="apple-touch-icon" href="/apple-touch-icon.png?1791389273763"><link rel="manifest" href="/manifest.json"><link rel="prefetch" href="/static-assets/badges/info.webp?1791389273763"><link rel="prefetch" href="/static-assets/badges/not-found.webp?1791389273763"><link rel="prefetch" href="/static-assets/badges/error.webp?1791389273763"><link rel="stylesheet" href="/static-assets/instance.css?1791389273763"><link rel="modulepreload" href="/assets/app-CCl49sF4.js"><link rel="stylesheet" href="/assets/app-z56Rj0tN.css"><title>Calckeymusic.social</title><meta name="description" content="A place for electonic (and other) musicians to congregate and collaborate. "><meta property="og:title" content="Calckeymusic.social"><meta property="og:description" content="A place for electonic (and other) musicians to congregate and collaborate. "><meta property="og:image"><meta property="og:image:alt" content="Pfp"><style>/* atkinson-hyperlegible-regular - latin_latin-ext */
5@font-face {
6	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
7	font-family: "Atkinson Hyperlegible";
8	font-style: normal;
9	font-weight: 400;
10	src: url("/static-assets/fonts/atkinson-hyperlegible-v11-latin_latin-ext-regular.woff2")
11		format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
12}
13
14html {
15	background-color: var(--bg);
16	color: var(--fg);
17}
18
19@media (prefers-color-scheme: dark) {
20	html {
21		--bg: rgb(17, 17, 27);
22		--fg: rgb(224, 222, 244);
23	}
24}
25
26#splash {
27	position: fixed;
28	z-index: 10000;
29	inset-block-start: 0;
30	inset-inline-start: 0;
31	inline-size: 100vi;
32	block-size: 100vb;
33	cursor: wait;
34	background-color: var(--bg);
35	opacity: 1;
36	transition: opacity 0.2s ease;
37}
38
39#splashIcon {
40	position: absolute;
41	inset: 0;
42	margin: auto;
43	inline-size: 64px;
44	block-size: 64px;
45	pointer-events: none;
46}
47
48#splashSpinner {
49	position: absolute;
50	inset: 0;
51	margin: auto;
52	display: inline-block;
53	inline-size: 28px;
54	block-size: 28px;
55	transform: translateY(110px);
56	display: none;
57	color: var(--accent);
58}
59#splashSpinner > .spinner {
60	position: absolute;
61	inset-block-start: 0;
62	inset-inline-start: 0;
63	inline-size: 28px;
64	block-size: 28px;
65	fill-rule: evenodd;
66	clip-rule: evenodd;
67	stroke-linecap: round;
68	stroke-linejoin: round;
69	stroke-miterlimit: 1.5;
70}
71#splashSpinner > .spinner.bg {
72	opacity: 0.275;
73}
74#splashSpinner > .spinner.fg {
75	animation: splashSpinner 0.5s linear infinite;
76}
77
78@keyframes splashSpinner {
79	0% {
80		transform: rotate(0deg);
81	}
82	100% {
83		transform: rotate(360deg);
84	}
85}
86
87@keyframes tada {
88	0% {
89		transform: scale3d(1, 1, 1);
90	}
91
92	10%,
93	20% {
94		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
95	}
96
97	30%,
98	50%,
99	70%,
100	90% {
101		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
102	}
103
104	40%,
105	60%,
106	80% {
107		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
108	}
109
110	100% {
111		transform: scale3d(1, 1, 1);
112	}
113}
114
115@media (prefers-reduced-motion) {
116	#splashSpinner {
117		display: block;
118	}
119}
120
121#splashText {
122	position: absolute;
123	inset: 0;
124	margin: auto;
125	display: inline-block;
126	inline-size: 70%;
127	block-size: 0;
128	text-align: center;
129	padding-block-start: 100px;
130	font-family: "Atkinson Hyperlegible", sans-serif;
131}
132</style>

132<script>var VERSION = "20240818";
133var CLIENT_ENTRY = "app-CCl49sF4.js";
134</script>

134<script>/**
135 * BOOT LOADER
136 * サーバーからレスポンスされるHTMLに埋め込まれるスクリプトで、以下の役割を持ちます。
137 * - 翻訳ファイルをフェッチする。
138 * - バージョンに基づいて適切なメインスクリプトを読み込む。
139 * - キャッシュされたコンパイル済みテーマを適用する。
140 * - クライアントの設定値に基づいて対応するHTMLクラス等を設定する。
141 * テーマをこの段階で設定するのは、メインスクリプトが読み込まれる間もテーマを適用したいためです。
142 * 注: webpackは介さないため、このファイルではrequireやimportは使えません。
143 */
144
145"use strict";
146
147// ブロックの中に入れないと、定義した変数がブラウザのグローバルスコープに登録されてしまい邪魔なので
148(async () => {
149	window.onerror = (e) => {
150		console.error(e);
151		renderError("SOMETHING_HAPPENED", e);
152	};
153	window.onunhandledrejection = (e) => {
154		console.error(e);
155		renderError("SOMETHING_HAPPENED_IN_PROMISE", e);
156	};
157
158	//#region Detect language & fetch translations
159	const v = localStorage.getItem("v") || VERSION;
160
161	let supportedLangs = [];
162	try {
163		supportedLangs = ["ar-SA","bg-BG","bn-BD","ca-ES","cs-CZ","da-DK","de-DE","el-GR","en-US","eo","es-ES","fi","fr-FR","gl","hi","hu","id-ID","it-IT","ja-JP","ja-KS","kab","kn-IN","ko-KR","nl-NL","no-NO","pl-PL","pt-BR","pt-PT","ro-RO","ru-RU","sk-SK","sv-SE","th-TH","tr-TR","ug-CN","uk-UA","vi-VN","zh-CN","zh-TW"];
164	} catch {
165		console.warn("LANGS not found");
166	}
167	let lang = localStorage.getItem("lang");
168	if (lang == null || !supportedLangs.includes(lang)) {
169		if (supportedLangs.includes(navigator.language)) {
170			lang = navigator.language;
171		} else {
172			lang = supportedLangs.find((x) => x.split("-")[0] === navigator.language);
173
174			// Fallback
175			if (lang == null) lang = "en-US";
176		}
177	}
178
179	const res = await fetch(`/assets/locales/${lang}.${v}.json`);
180	if (res.status === 200) {
181		localStorage.setItem("lang", lang);
182		localStorage.setItem("locale", await res.text());
183		localStorage.setItem("localeVersion", v);
184	} else {
185		await checkUpdate();
186		renderError("LOCALE_FETCH");
187		return;
188	}
189	//#endregion
190
191	//#region Script
192	function importAppScript() {
193		import(`/assets/${CLIENT_ENTRY}`).catch(async (e) => {
194			await checkUpdate();
195			console.error(e);
196			renderError("APP_IMPORT", e);
197		});
198	}
199
200	// タイミングによっては、この時点でDOMの構築が済んでいる場合とそうでない場合とがある
201	if (document.readyState !== "loading") {
202		importAppScript();
203	} else {
204		window.addEventListener("DOMContentLoaded", () => {
205			importAppScript();
206		});
207	}
208	//#endregion
209
210	//#region Theme
211	const theme = localStorage.getItem("theme");
212	if (theme) {
213		for (const [k, v] of Object.entries(JSON.parse(theme))) {
214			document.documentElement.style.setProperty(`--${k}`, v.toString());
215
216			// HTMLの theme-color 適用
217			if (k === "htmlThemeColor") {
218				for (const tag of document.head.children) {
219					if (
220						tag.tagName === "META" &&
221						tag.getAttribute("name") === "theme-color"
222					) {
223						tag.setAttribute("content", v);
224						break;
225					}
226				}
227			}
228		}
229	}
230	const colorSchema = localStorage.getItem("colorSchema");
231	if (colorSchema) {
232		document.documentElement.style.setProperty("color-schema", colorSchema);
233	}
234	//#endregion
235
236	let fontSize = localStorage.getItem("fontSize");
237	if (fontSize) {
238		if (fontSize < 10) {
239			// need to do this for now, as values before were 1, 2, 3 depending on the option
240			localStorage.setItem("fontSize", null);
241			fontSize = localStorage.getItem("fontSize");
242		}
243		document.documentElement.style.fontSize = `${fontSize}px`;
244	}
245
246	if (["ja-JP", "ja-KS", "ko-KR", "zh-CN", "zh-TW"].includes(lang)) {
247		document.documentElement.classList.add("useCJKFont");
248	}
249
250	const useSystemFont = localStorage.getItem("useSystemFont") !== "f";
251	if (useSystemFont) {
252		document.documentElement.classList.add("useSystemFont");
253	}
254
255	const wallpaper = localStorage.getItem("wallpaper");
256	if (wallpaper) {
257		document.documentElement.style.backgroundImage = `url(${wallpaper})`;
258	}
259
260	const customCss = localStorage.getItem("customCss");
261	if (customCss && customCss.length > 0) {
262		const style = document.createElement("style");
263		style.innerHTML = customCss;
264		document.head.appendChild(style);
265	}
266
267	async function addStyle(styleText) {
268		const css = document.createElement("style");
269		css.appendChild(document.createTextNode(styleText));
270		document.head.appendChild(css);
271	}
272
273	function renderError(code, details) {
274		let errorsElement = document.getElementById("errors");
275
276		if (!errorsElement) {
277			document.body.innerHTML = `
278			<svg class="icon-warning" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
279				<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
280				<path d="M12 9v2m0 4v.01"></path>
281				<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path>
282			</svg>
283			<h1>An error has occurred!</h1>
284			<button class="button-big" onclick="location.reload(true);">
285				<span class="button-label-big">Refresh</span>
286			</button>
287			<p class="dont-worry">Don't worry, it's (probably) not your fault.</p>
288			<p>Please make sure your browser is up-to-date and any AdBlockers are off (given they can sometimes errouniously interfere with loading assets).</p>
289			<p>If the problem persists after refreshing, please contact your instance's administrator.<br>You may also try the following options:</p>
290			<a href="/flush">
291				<button class="button-small">
292					<span class="button-label-small">

292Clear preferences and cache</span>
293				</button>
294			</a>
295			<br>
296			<a href="/cli">
297				<button class="button-small">
298					<span class="button-label-small">Start the simple client</span>
299				</button>
300			</a>
301			<br>
302			<a href="/bios">
303				<button class="button-small">
304					<span class="button-label-small">Start the repair tool</span>
305				</button>
306			</a>
307			<br>
308			<div id="errors"></div>
309			`;
310			errorsElement = document.getElementById("errors");
311		}
312		const detailsElement = document.createElement("details");
313		detailsElement.innerHTML = `
314		<br>
315		<summary>
316			<code>ERROR CODE: ${code}</code>
317		</summary>
318		<code>${JSON.stringify(details)}</code>`;
319		errorsElement.appendChild(detailsElement);
320		addStyle(`
321		* {
322			font-family: BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
323		}
324
325		#firefish_app,
326		#splash {
327			display: none !important;
328		}
329
330		body,
331		html {
332			background-color: #191724;
333			color: #e0def4;
334			justify-content: center;
335			margin: auto;
336			padding: 10px;
337			text-align: center;
338		}
339
340		button {
341			border-radius: 999px;
342			padding: 0px 12px 0px 12px;
343			border: none;
344			cursor: pointer;
345			margin-bottom: 12px;
346		}
347
348		.button-big {
349			background: linear-gradient(90deg, rgb(196, 167, 231), rgb(235, 188, 186));
350			line-height: 50px;
351		}
352
353		.button-big:hover {
354			background: rgb(49, 116, 143);
355		}
356
357		.button-small {
358			background: #444;
359			line-height: 40px;
360		}
361
362		.button-small:hover {
363			background: #555;
364		}
365
366		.button-label-big {
367			color: #191724;
368			font-weight: bold;
369			font-size: 20px;
370			padding: 12px;
371		}
372
373		.button-label-small {
374			color: rgb(156, 207, 216);
375			font-size: 16px;
376			padding: 12px;
377		}
378
379		a {
380			color: rgb(156, 207, 216);
381			text-decoration: none;
382		}
383
384		p,
385		li {
386			font-size: 16px;
387		}
388
389		.dont-worry,
390		#msg {
391			font-size: 18px;
392		}
393
394		.icon-warning {
395			color: #f6c177;
396			height: 4rem;
397			padding-top: 2rem;
398		}
399
400		h1 {
401			font-size: 32px;
402		}
403
404		code {
405			font-family: Fira, FiraCode, monospace;
406		}
407
408		details {
409			background: #1f1d2e;
410			margin-bottom: 2rem;
411			padding: 0.5rem 1rem;
412			width: 40rem;
413			border-radius: 10px;
414			justify-content: center;
415			margin: auto;
416		}
417
418		summary {
419			cursor: pointer;
420		}
421
422		summary > * {
423			display: inline;
424		}
425
426		@media screen and (max-width: 500px) {
427			details {
428				width: 50%;
429			}
430		`);
431	}
432
433	async function checkUpdate() {
434		try {
435			const res = await fetch("/api/meta", {
436				method: "POST",
437				cache: "no-cache",
438			});
439
440			const meta = await res.json();
441
442			if (meta.version != v) {
443				localStorage.setItem("v", meta.version);
444				refresh();
445			}
446		} catch (e) {
447			console.error(e);
448			renderError("UPDATE_CHECK", e);
449			throw e;
450		}
451	}
452
453	function refresh() {
454		// Clear cache (service worker)
455		try {
456			navigator.serviceWorker.controller.postMessage("clear");
457			navigator.serviceWorker.getRegistrations().then((registrations) => {
458				registrations.forEach((registration) => registration.unregister());
459			});
460		} catch (e) {
461			console.error(e);
462		}
463
464		location.reload();
465	}
466})();
467</script>

467</head><body><noscript><p>JavaScriptを有効にしてください<br>Please turn on your JavaScript</p></noscript><div id="splash"><img id="splashIcon" src="/static-assets/splash.svg?1791389273763"><span id="splashText">Loading...</span><div id="splashSpinner"><svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
468<g transform="matrix(1,0,0,1,12,12)">
469<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
470</g>
471</svg>
472<svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg">
473<g transform="matrix(1,0,0,1,12,12)">
474<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/>
475</g>
476</svg></div></div></body></html>