You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
5.5 KiB
180 lines
5.5 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Open OneNote</title>
|
|
<style>
|
|
:root { color-scheme: light; }
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background:
|
|
radial-gradient(circle at top left, rgba(126, 34, 206, 0.16), transparent 28rem),
|
|
radial-gradient(circle at bottom right, rgba(22, 101, 52, 0.14), transparent 26rem),
|
|
linear-gradient(180deg, #eef2ff 0%, #f6f8fc 48%, #eef6f2 100%);
|
|
color: #18243a;
|
|
}
|
|
main {
|
|
max-width: 36rem;
|
|
margin: 0 auto;
|
|
min-height: 100vh;
|
|
padding: 2rem 1.25rem 2.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.card {
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid rgba(126, 34, 206, 0.14);
|
|
border-radius: 24px;
|
|
box-shadow: 0 22px 55px rgba(24, 36, 58, 0.14);
|
|
padding: 1.5rem;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.35rem 0.7rem;
|
|
border-radius: 999px;
|
|
background: rgba(126, 34, 206, 0.1);
|
|
color: #6b21a8;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 0.9rem;
|
|
}
|
|
h1 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: clamp(1.6rem, 5vw, 2rem);
|
|
line-height: 1.1;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
line-height: 1.55;
|
|
}
|
|
.title {
|
|
margin-top: 1rem;
|
|
padding: 0.95rem 1rem;
|
|
border-radius: 16px;
|
|
background: linear-gradient(180deg, rgba(126, 34, 206, 0.06), rgba(255, 255, 255, 0.92));
|
|
border: 1px solid rgba(126, 34, 206, 0.12);
|
|
font-size: 0.98rem;
|
|
color: #4a5670;
|
|
word-break: break-word;
|
|
}
|
|
.actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.85rem;
|
|
margin-top: 1.15rem;
|
|
}
|
|
.button {
|
|
display: block;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
padding: 1rem 1.1rem;
|
|
border-radius: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
|
|
box-shadow: 0 10px 24px rgba(24, 36, 58, 0.1);
|
|
}
|
|
.button:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
.button.primary {
|
|
background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
|
|
color: #fff;
|
|
}
|
|
.button.secondary {
|
|
background: #fff;
|
|
color: #18243a;
|
|
border: 1px solid rgba(24, 36, 58, 0.12);
|
|
}
|
|
.button.muted {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
color: #52627d;
|
|
border: 1px dashed rgba(24, 36, 58, 0.18);
|
|
box-shadow: none;
|
|
}
|
|
.hint {
|
|
margin-top: 1rem;
|
|
font-size: 0.9rem;
|
|
color: #5f6f87;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="card">
|
|
<div class="eyebrow">OneNote launch</div>
|
|
<h1>Opening OneNote</h1>
|
|
<p>Joanna found the note and prepared the cleanest handoff path.</p>
|
|
<p id="note-title" class="title"></p>
|
|
<div class="actions">
|
|
<a id="open-link" class="button primary" href="https://www.onenote.com/">Open in OneNote</a>
|
|
<a id="web-link" class="button secondary" href="https://www.onenote.com/">Open Web Copy</a>
|
|
</div>
|
|
<p id="hint" class="hint">If the desktop app is available, it will open automatically. Otherwise use the button above.</p>
|
|
</section>
|
|
</main>
|
|
<script>
|
|
(function () {
|
|
var params = new URLSearchParams(window.location.search);
|
|
var clientUrl = String(params.get('client') || '').trim();
|
|
var webUrl = String(params.get('web') || '').trim() || 'https://www.onenote.com/';
|
|
var title = String(params.get('title') || '').trim();
|
|
var openLink = document.getElementById('open-link');
|
|
var webLink = document.getElementById('web-link');
|
|
var hintNode = document.getElementById('hint');
|
|
var titleNode = document.getElementById('note-title');
|
|
var isLaunchableClientUrl = function (value) {
|
|
if (!/^onenote:/i.test(value)) {
|
|
return false;
|
|
}
|
|
try {
|
|
var inner = new URL(String(value).replace(/^onenote:/i, ''));
|
|
var host = String(inner.hostname || '').toLowerCase();
|
|
return host === 'd.docs.live.net' || host.endsWith('.sharepoint.com');
|
|
} catch (err) {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
if (title) {
|
|
titleNode.textContent = title;
|
|
} else {
|
|
titleNode.textContent = 'OneNote note';
|
|
}
|
|
|
|
webLink.href = webUrl;
|
|
if (!isLaunchableClientUrl(clientUrl)) {
|
|
openLink.href = webUrl;
|
|
openLink.textContent = 'Open in OneNote';
|
|
webLink.className = 'button muted';
|
|
webLink.textContent = 'Web fallback ready';
|
|
hintNode.textContent = 'This note opens best through the browser handoff. Use the main button.';
|
|
return;
|
|
}
|
|
|
|
openLink.href = clientUrl;
|
|
var fallbackTimer = window.setTimeout(function () {
|
|
window.location.replace(webUrl);
|
|
}, 1400);
|
|
var cancelFallback = function () {
|
|
window.clearTimeout(fallbackTimer);
|
|
};
|
|
window.addEventListener('pagehide', cancelFallback, { once: true });
|
|
document.addEventListener('visibilitychange', function () {
|
|
if (document.visibilityState === 'hidden') {
|
|
cancelFallback();
|
|
}
|
|
}, { once: true });
|
|
window.location.href = clientUrl;
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|