v1.0.0: Slide Preview view

2026-05-20 15:21:03 +10:00
parent c2c5dc982c
commit 5bed080afc
1 changed files with 43 additions and 0 deletions
@@ -0,0 +1,43 @@
+@model Slide
+@{
+    Layout = null;
+}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Preview: @Model.Name</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; overflow: hidden; }
+        body { background: @(Model.BackgroundColor ?? "#1a1a2e"); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            @if (!string.IsNullOrEmpty(Model.BackgroundImage)) { @:background-image: url('@Model.BackgroundImage'); @:background-size: cover; @:background-position: center; }
+        }
+        .slide-content { width: 100%; height: 100%; @Html.Raw(Model.CustomCss ?? "") }
+        .slide-content img { max-width: 100%; height: auto; }
+        .slide-content table { border-collapse: collapse; }
+        .slide-content table td, .slide-content table th { border: 1px solid rgba(255,255,255,0.3); padding: 8px 12px; }
+        iframe.embed-frame { width: 100%; height: 100%; border: none; }
+        .ics-events { padding: 2em; } .ics-events h2 { margin-bottom: 1em; font-size: 2em; }
+        .event-card { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 1.2em; margin-bottom: 1em; }
+        .back-link { position: fixed; top: 10px; right: 10px; z-index: 999; }
+    </style>
+</head>
+<body>
+    <a href="/admin/slides" class="back-link btn btn-sm btn-light"><i class="bi bi-x-lg"></i> Close</a>
+    @if (Model.SlideType == SlideType.Content) { <div class="slide-content">@Html.Raw(Model.Content ?? "")</div> }
+    else if (Model.SlideType == SlideType.Embed) { <iframe class="embed-frame" src="@Model.EmbedUrl"></iframe> }
+    else if (Model.SlideType == SlideType.IcsCalendar) {
+        <div class="ics-events" id="icsContainer"><h2>Upcoming Events</h2><p>Loading...</p></div>
+        <script>
+            fetch('/api/parseics?url=' + encodeURIComponent('@Model.IcsSource')).then(r => r.json()).then(data => {
+                var html = '<h2>Upcoming Events</h2>';
+                if (data.events && data.events.length > 0) { data.events.forEach(function(e) { html += '<div class="event-card"><h3>' + (e.summary||'Event') + '</h3><div style="opacity:0.7;">' + (e.start||'') + '</div></div>'; }); }
+                else { html += '<p>No upcoming events.</p>'; }
+                document.getElementById('icsContainer').innerHTML = html;
+            });
+        </script>
+    }
+</body>
+</html>