Notes/src/views/setup.ejs
Panagiotis Papadopoulos f78a6ed14b views: import webpack created entrypoint css
→ this is currently only consisting of bootstrap, but should in future be more useful
2025-02-22 11:56:56 +01:00

179 lines
7.2 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta id="syncInProgress" content="<%= syncInProgress ? 1 : 0 %>" />
<title><%= t("setup.title") %></title>
<link rel="stylesheet" href="<%= appPath %>/setup.css">
<style>
.lds-ring {
display: inline-block;
position: relative;
width: 60px;
height: 60px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 48px;
height: 48px;
margin: 8px;
border: 6px solid black;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: black transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<noscript><%= t("javascript-required") %></noscript>
<div class="container">
<div id="setup-dialog" class="col-md-12 col-lg-8 col-xl-6 mx-auto" style="padding-top: 25px; font-size: larger; display: none;">
<h1><%= t("setup.heading") %></h1>
<div class="alert alert-warning" id="alert" style="display: none;">
</div>
<div id="setup-type" data-bind="visible: step() == 'setup-type'" style="margin-top: 20px;">
<form data-bind="submit: selectSetupType">
<div class="radio" style="margin-bottom: 15px;">
<label class="tn-radio">
<input type="radio" name="setup-type" value="new-document" data-bind="checked: setupType">
<%= t("setup.new-document") %>
</label>
</div>
<div class="radio" style="margin-bottom: 15px;">
<label class="tn-radio">
<input type="radio" name="setup-type" value="sync-from-desktop" data-bind="checked: setupType">
<%= t("setup.sync-from-desktop") %>
</label>
</div>
<div class="radio" style="margin-bottom: 15px;">
<label class="tn-radio">
<input type="radio" name="setup-type" value="sync-from-server" data-bind="checked: setupType">
<%= t("setup.sync-from-server") %>
</label>
</div>
<button type="submit" data-bind="disable: !setupTypeSelected()" class="btn btn-primary"><%= t("setup.next") %></button>
</form>
</div>
<div data-bind="visible: step() == 'new-document-in-progress'">
<h2><%= t("setup.init-in-progress") %></h2>
<div style="display: flex; justify-content: flex-start; margin-top: 20px;">
<div class="lds-ring" style="margin-right: 20px;">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div style="line-height: 60px;">
<p><%= t("setup.redirecting") %></p>
</div>
</div>
</div>
<div data-bind="visible: step() == 'sync-from-desktop'">
<h2><%= t("setup_sync-from-desktop.heading") %></h2>
<p><%= t("setup_sync-from-desktop.description") %></p>
<ol>
<li><%= t("setup_sync-from-desktop.step1") %></li>
<li><%= t("setup_sync-from-desktop.step2") %></li>
<li><%= t("setup_sync-from-desktop.step3") %></li>
<li><%- t("setup_sync-from-desktop.step4", { host: '<span id="current-host"></span>'}) %></li>
<li><%= t("setup_sync-from-desktop.step5") %></li>
<li><%- t("setup_sync-from-desktop.step6", { link: `<a href="/">${t("setup_sync-from-desktop.step6-here")}</a>` }) %></li>
</ol>
<button type="button" data-bind="click: back" class="btn btn-secondary">Back</button>
</div>
<div data-bind="visible: step() == 'sync-from-server'">
<form data-bind="submit: finish">
<h2><%= t("setup_sync-from-server.heading") %></h2>
<p><%= t("setup_sync-from-server.instructions") %></p>
<div class="form-group">
<label for="sync-server-host"><%= t("setup_sync-from-server.server-host") %></label>
<input type="text" id="syncServerHost" class="form-control" data-bind="value: syncServerHost" placeholder="<%= t("setup_sync-from-server.server-host-placeholder") %>">
</div>
<div class="form-group">
<label for="sync-proxy"><%= t("setup_sync-from-server.proxy-server") %></label>
<input type="text" id="sync-proxy" class="form-control" data-bind="value: syncProxy" placeholder="<%= t("setup_sync-from-server.proxy-server-placeholder") %>">
<p><strong><%= t("setup_sync-from-server.note") %></strong> <%= t("setup_sync-from-server.proxy-instruction") %></p>
</div>
<div class="form-group">
<label for="password"><%= t("setup_sync-from-server.password") %></label>
<input type="password" id="password" class="form-control" data-bind="value: password" placeholder="<%= t("setup_sync-from-server.password-placeholder") %>">
</div>
<button type="button" data-bind="click: back" class="btn btn-secondary"><%= t("setup_sync-from-server.back") %></button>
<button type="submit" class="btn btn-primary"><%= t("setup_sync-from-server.finish-setup") %></button>
</form>
</div>
<div data-bind="visible: step() == 'sync-in-progress'">
<h2><%= t("setup_sync-in-progress.heading") %></h2>
<div class="alert alert-success"><%= t("setup_sync-in-progress.successful") %></div>
<div><%= t("setup_sync-in-progress.outstanding-items") %> <strong id="outstanding-syncs"><%= t("setup_sync-in-progress.outstanding-items-default") %></strong></div>
</div>
</div>
</div>
<script type="text/javascript">
global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
window.glob = {
componentId: ''
};
</script>
<!-- Required for correct loading of scripts in Electron -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="<%= assetPath %>/node_modules/jquery/dist/jquery.min.js"></script>
<script src="<%= assetPath %>/node_modules/jquery-hotkeys/jquery-hotkeys.js"></script>
<script src="<%= appPath %>/setup.js" crossorigin type="module"></script>
<link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet" />
<link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet" />
<link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
</body>
</html>