FeDirect/static/crossroad.html

114 lines
5.6 KiB
HTML
Raw Normal View History

2025-01-12 04:47:05 +01:00
<!DOCTYPE html>
<html lang="en">
2025-01-12 06:39:38 +01:00
2025-01-12 04:47:05 +01:00
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FeDirect</title>
2025-01-12 06:39:38 +01:00
<link rel="stylesheet" href="/static/crossroad.css">
2025-01-12 04:47:05 +01:00
</head>
2025-01-12 06:39:38 +01:00
2025-01-12 04:47:05 +01:00
<body>
<script type="module">
Object.assign(globalThis, await import("/static/crossroad.mjs"));
getMainDialog().show(); // Don't show until the page is ready
</script>
2025-01-12 06:39:38 +01:00
<div class="flex-vcenter">
2025-01-13 14:10:35 +01:00
<dialog id="mainDialog" class="half-width half-height">
<header class="separator-bottom margin-large-bottom">
<div class="flex-row">
<h1>FeDirect</h1>
<p class="margin-auto-top">&ThickSpace;By Nekomata</p>
</div>
2025-01-14 17:41:14 +01:00
<img src="/static/nekomata_small.png" alt="Nekomata Logo" class="logo" />
2025-01-13 14:10:35 +01:00
</header>
<div class="flex-row">
2025-01-15 07:58:48 +01:00
<center class="half-width">
You're about to go to <pre id="path"></pre>.<br />
<svg height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path d="M256 464a208 208 0 1 1 0-416 208 208 0 1 1 0 416zM256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM376.9 294.6c4.5-4.2 7.1-10.1 7.1-16.3c0-12.3-10-22.3-22.3-22.3L304 256l0-96c0-17.7-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32l0 96-57.7 0C138 256 128 266 128 278.3c0 6.2 2.6 12.1 7.1 16.3l107.1 99.9c3.8 3.5 8.7 5.5 13.8 5.5s10.1-2 13.8-5.5l107.1-99.9z"/></svg>
<p id="no-instance" class="hidden">You currently don't have any instances. You should add one!</p>
<form></form>
2025-01-15 07:58:48 +01:00
<form id="instanceSelectForm" class="align-start wfit-content"></form>
2025-01-13 14:10:35 +01:00
<br>
<button onclick="showAddInstanceDialog()">Add an instance</button>
2025-01-15 07:58:48 +01:00
</center>
2025-01-14 18:25:02 +01:00
<div class="half-width">
2025-01-15 06:44:47 +01:00
<div class="flex-hcenter">
2025-01-15 07:58:48 +01:00
<div class="flex-column buttonPanel">
2025-01-15 06:44:47 +01:00
<button id="redirect">Redirect</button>
<button id="redirectAlways">Redirect always</button>
2025-01-15 07:58:48 +01:00
<a href="/">Manage instances</a>
2025-01-15 06:44:47 +01:00
</div>
</div>
2025-01-14 18:25:02 +01:00
</div>
2025-01-13 14:10:35 +01:00
</div>
2025-01-12 06:39:38 +01:00
</dialog>
</div>
<dialog id="addInstance">
<h1>Add an instance</h1>
<form method="dialog" class="addInstanceForm">
<label for="instanceHost">Instance hostname or URL<br>
(for example <code>mastodon.social</code> or <code>https://kitsunes.club/</code>)<br>
</label>
<input id="instanceHost" type="text" name="instanceHost" />
<br>
2025-01-13 14:10:35 +01:00
<input id="autoQueryMetadata" type="checkbox" name="autoQueryMetadata" checked />
<label for="autoQueryMetadata">
2025-01-14 17:43:50 +01:00
<abbr title="This uses FeDirect's API to automatically try to detect instance metadata, such as the name, software, and an icon.
2025-01-13 14:10:35 +01:00
We do this on the backend to avoid CORS problems.
We do not track or save any requests or data.">
Automatically query metadata
</abbr>
</label>
<br><br>
<button type="submit">OK</button>
<button type="reset" class="close">Cancel</button>
2025-01-12 06:39:38 +01:00
</form>
</dialog>
2025-01-14 10:49:44 +01:00
<dialog id="instanceDetails">
<h1>Confirm instance details</h1>
<form method="dialog" class="instanceDetailsForm">
<div class="flex-row">
<div class="half-width">
<label for="instanceName">Instance name</label>
<br>
2025-01-14 13:10:29 +01:00
<input id="instanceName" type="text" name="instanceName" required />
<br><br>
<label for="instanceHost">Instance hostname</label>
<br>
<input id="instanceHost" type="text" name="instanceHost" required />
<br>
<input type="checkbox" name="instanceHostSecure" id="instanceHostSecure" checked />
<label for="instanceHostSecure">
<abbr title="Whether to use HTTPS (as opposed to HTTP).
Unchecking this is not recommended, and this option only exists for exceptional cases">
Secure?
</abbr>
</label>
2025-01-14 10:49:44 +01:00
<br><br>
<label for="instanceSoftware">Instance software</label>
<br>
<select id="instanceSoftware" type="text" name="instanceSoftware" required>
<option value="">(Please select)</option>
</select>
</div>
<div class="half-width flex-row-reverse">
<div class="full-height flex-column-reverse">
<div>
<label for="iconContainer">Instance icon</label>
<div id="iconContainer" class="square iconContainer">
<!-- This data URI is for a transparent gif image -->
<img id="instanceIcon" alt="Icon for the selected instance" class="icon" />
</div>
</div>
</div>
</div>
</div>
<br>
<button type="submit">OK</button>
<button type="reset" class="close">Cancel</button>
</form>
</dialog>
2025-01-12 04:47:05 +01:00
</body>
2025-01-12 06:39:38 +01:00
2025-01-12 04:47:05 +01:00
</html>