Files
hotline-planner/dev/backend/web app webhook claude/HotlinePlannerWebhook/Views/Home/Index.cshtml
2026-02-23 12:27:26 +01:00

49 lines
2.5 KiB
Plaintext

@{
ViewData["Title"] = "Connect Calendar";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section HeadStyles {
<style>
.hero { min-height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; }
.connect-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 3rem 2.5rem; max-width: 480px; width: 100%; text-align: center; }
.connect-card h1 { font-size: 1.6rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.connect-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; line-height: 1.6; }
.btn-connect { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--accent-blue); color: #fff; border: none; border-radius: 8px; padding: 0.75rem 1.75rem; font-size: 0.95rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: opacity 0.15s; }
.btn-connect:hover { opacity: 0.85; color: #fff; }
.feature-list { list-style: none; padding: 0; margin: 1.5rem 0 0; text-align: left; font-size: 0.83rem; color: var(--text-muted); }
.feature-list li { padding: 0.3rem 0; }
.feature-list li::before { content: "→ "; color: var(--accent-green); }
.ms-logo { width: 20px; height: 20px; }
</style>
}
<div class="hero">
<div class="connect-card">
<div style="font-size: 2.5rem; margin-bottom: 1rem;">📅</div>
<h1>Hotline Planner Sync</h1>
<p>
Connect your Microsoft 365 calendar to enable real-time webhook synchronisation.
Changes in your calendar are captured instantly via Graph delta queries.
</p>
<a href="@Url.Action("Login", "Home")" class="btn-connect">
<svg class="ms-logo" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="9" height="9" fill="#f25022"/>
<rect x="11" y="1" width="9" height="9" fill="#7fba00"/>
<rect x="1" y="11" width="9" height="9" fill="#00a4ef"/>
<rect x="11" y="11" width="9" height="9" fill="#ffb900"/>
</svg>
Connect Microsoft Calendar
</a>
<ul class="feature-list">
<li>Real-time webhook notifications via Microsoft Graph</li>
<li>Delta query sync — only fetches what changed</li>
<li>Live activity dashboard with full audit trail</li>
<li>Auto-renewal of webhook subscriptions every 12h</li>
<li>Duplicate event filtering (Subject + Start + End hash)</li>
</ul>
</div>
</div>