Teramind Launcher

index.html · 4.5 KiB · HTML Raw

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Teramind Support Page Launcher</title>
  <link rel="icon" href="data:image/svg+xml,
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
    <text y='0.9em' font-size='90'>🇹</text>
  </svg>">
  <style>
    :root {
      --bg: #ffffff;
      --text: #000000;
      --box-bg: #f5f5f5;
      --input-bg: #ffffff;
      --input-border: #cccccc;
      --button-bg: #007bff;
      --button-text: #ffffff;
    }

body.dark {
      --bg: #1a1a1a;
      --text: #f0f0f0;
      --box-bg: #2a2a2a;
      --input-bg: #2b2b2b;
      --input-border: #555;
      --button-bg: #0a84ff;
      --button-text: #ffffff;
    }

body {
      font-family: Arial, sans-serif;
      margin: 40px;
      background: var(--bg);
      color: var(--text);
      transition: background 0.3s, color 0.3s;
    }

.container {
      max-width: 400px;
    }

select, button, input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      font-size: 16px;
      background: var(--input-bg);
      color: var(--text);
      border: 1px solid var(--input-border);
      border-radius: 4px;
      transition: background 0.3s, color 0.3s, border 0.3s;
    }

button {
      background: var(--button-bg);
      color: var(--button-text);
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }

.checkbox-row {
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

.preview-box {
      margin-top: 15px;
      padding: 10px;
      background: var(--box-bg);
      border-radius: 5px;
      font-size: 14px;
      word-break: break-all;
      transition: background 0.3s;
    }

.toggle-dark {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      cursor: pointer;
      user-select: none;
    }
  </style>
</head>
<body>
  <div class="container">

<h2>Instance</h2>

<label for="subInput">Enter Instance:</label>
    <input id="subInput" type="text" placeholder="e.g. teramind465" oninput="updatePreview()" />

<label for="urlSelect">Choose a dashboard version:</label>
    <select id="urlSelect" onchange="updatePreview()">
      <option value="https://{sub}.teramind.co/slogin">Legacy(v1)</option>
      <option value="https://{sub}.teramind.co/v2/support-login">Next-Gen(v2)</option>
    </select>

<div class="checkbox-row">
      <input type="checkbox" id="useUs" onchange="updatePreview()" />
      <label for="useUs">Use .us domain</label>
    </div>

<div class="preview-box">
      <strong>URL Preview:</strong>
      <div id="urlPreview">(waiting for input...)</div>
    </div>

if (!sub) return "(please enter an instance)";
      if (useUs) sub = sub + ".us";

return base.replace('{sub}', sub);
    }

function updatePreview() {
      document.getElementById('urlPreview').textContent = buildUrl();
    }

function go() {
      const url = buildUrl();
      if (url.includes("please enter")) {
        alert("Please enter an instance");
        return;
      }
      window.location.href = url;
    }

function toggleDarkMode() {
      const isDark = document.getElementById("darkModeToggle").checked;
      const theme = isDark ? "dark" : "light";
      applyTheme(theme);
      localStorage.setItem("theme", theme);
    }

loadTheme();
    updatePreview();
  </script>
</body>
</html>

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8" />
5	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6	<title>Teramind Support Page Launcher</title>
7	<link rel="icon" href="data:image/svg+xml,
8	<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
9	<text y='0.9em' font-size='90'>🇹</text>
10	</svg>">
11	<style>
12	:root {
13	--bg: #ffffff;
14	--text: #000000;
15	--box-bg: #f5f5f5;
16	--input-bg: #ffffff;
17	--input-border: #cccccc;
18	--button-bg: #007bff;
19	--button-text: #ffffff;
20	}
21
22	body.dark {
23	--bg: #1a1a1a;
24	--text: #f0f0f0;
25	--box-bg: #2a2a2a;
26	--input-bg: #2b2b2b;
27	--input-border: #555;
28	--button-bg: #0a84ff;
29	--button-text: #ffffff;
30	}
31
32	body {
33	font-family: Arial, sans-serif;
34	margin: 40px;
35	background: var(--bg);
36	color: var(--text);
37	transition: background 0.3s, color 0.3s;
38	}
39
40	.container {
41	max-width: 400px;
42	}
43
44	select, button, input[type="text"] {
45	width: 100%;
46	padding: 10px;
47	margin-top: 10px;
48	font-size: 16px;
49	background: var(--input-bg);
50	color: var(--text);
51	border: 1px solid var(--input-border);
52	border-radius: 4px;
53	transition: background 0.3s, color 0.3s, border 0.3s;
54	}
55
56	button {
57	background: var(--button-bg);
58	color: var(--button-text);
59	border: none;
60	border-radius: 6px;
61	cursor: pointer;
62	}
63
64	.checkbox-row {
65	margin-top: 12px;
66	display: flex;
67	align-items: center;
68	gap: 8px;
69	}
70
71	.preview-box {
72	margin-top: 15px;
73	padding: 10px;
74	background: var(--box-bg);
75	border-radius: 5px;
76	font-size: 14px;
77	word-break: break-all;
78	transition: background 0.3s;
79	}
80
81	.toggle-dark {
82	display: flex;
83	align-items: center;
84	gap: 8px;
85	margin-bottom: 20px;
86	cursor: pointer;
87	user-select: none;
88	}
89	</style>
90	</head>
91	<body>
92	<div class="container">
93
94	<div class="toggle-dark">
95	<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
96	<label for="darkModeToggle">Dark Mode</label>
97	</div>
98
99	<h2>Instance</h2>
100
101	<label for="subInput">Enter Instance:</label>
102	<input id="subInput" type="text" placeholder="e.g. teramind465" oninput="updatePreview()" />
103
104	<label for="urlSelect">Choose a dashboard version:</label>
105	<select id="urlSelect" onchange="updatePreview()">
106	<option value="https://{sub}.teramind.co/slogin">Legacy(v1)</option>
107	<option value="https://{sub}.teramind.co/v2/support-login">Next-Gen(v2)</option>
108	</select>
109
110	<div class="checkbox-row">
111	<input type="checkbox" id="useUs" onchange="updatePreview()" />
112	<label for="useUs">Use .us domain</label>
113	</div>
114
115	<div class="preview-box">
116	<strong>URL Preview:</strong>
117	<div id="urlPreview">(waiting for input...)</div>
118	</div>
119
120	<button onclick="go()">Go</button>
121	</div>
122
123	<script>
124	function buildUrl() {
125	let base = document.getElementById('urlSelect').value;
126	let sub = document.getElementById('subInput').value.trim();
127	const useUs = document.getElementById('useUs').checked;
128
129	if (!sub) return "(please enter an instance)";
130	if (useUs) sub = sub + ".us";
131
132	return base.replace('{sub}', sub);
133	}
134
135	function updatePreview() {
136	document.getElementById('urlPreview').textContent = buildUrl();
137	}
138
139	function go() {
140	const url = buildUrl();
141	if (url.includes("please enter")) {
142	alert("Please enter an instance");
143	return;
144	}
145	window.location.href = url;
146	}
147
148	function applyTheme(theme) {
149	if (theme === "dark") {
150	document.body.classList.add("dark");
151	document.getElementById("darkModeToggle").checked = true;
152	} else {
153	document.body.classList.remove("dark");
154	document.getElementById("darkModeToggle").checked = false;
155	}
156	}
157
158	function toggleDarkMode() {
159	const isDark = document.getElementById("darkModeToggle").checked;
160	const theme = isDark ? "dark" : "light";
161	applyTheme(theme);
162	localStorage.setItem("theme", theme);
163	}
164
165	function loadTheme() {
166	const savedTheme = localStorage.getItem("theme");
167	if (savedTheme) {
168	applyTheme(savedTheme);
169	} else {
170	const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
171	applyTheme(prefersDark ? "dark" : "light");
172	}
173	}
174
175	loadTheme();
176	updatePreview();
177	</script>
178	</body>
179	</html>
180