134 lines
8.2 KiB
Plaintext
134 lines
8.2 KiB
Plaintext
@model Slide
|
|
@{
|
|
ViewData["Title"] = "New Meow";
|
|
}
|
|
|
|
<form asp-action="Create" method="post" class="slide-form">
|
|
@Html.AntiForgeryToken()
|
|
|
|
<div class="row g-4">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header"><h5 class="mb-0">Slide Content</h5></div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label asp-for="Name" class="form-label">Name *</label>
|
|
<input asp-for="Name" class="form-control" placeholder="e.g. Welcome Screen" required />
|
|
<span asp-validation-for="Name" class="text-danger"></span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label asp-for="SlideType" class="form-label">Type</label>
|
|
<select asp-for="SlideType" asp-items="Html.GetEnumSelectList<SlideType>()" class="form-select" id="slideType"></select>
|
|
</div>
|
|
<div id="contentSection">
|
|
<label class="form-label">Content</label>
|
|
<textarea asp-for="Content" id="contentEditor" class="form-control" rows="15"></textarea>
|
|
</div>
|
|
<div id="embedSection" style="display:none;">
|
|
<div class="mb-3">
|
|
<label asp-for="EmbedUrl" class="form-label">Embed URL</label>
|
|
<input asp-for="EmbedUrl" class="form-control" placeholder="https://example.com/page" />
|
|
<div class="form-text">The URL will be displayed in an iframe on the slide.</div>
|
|
</div>
|
|
</div>
|
|
<div id="icsSection" style="display:none;">
|
|
<div class="mb-3">
|
|
<label asp-for="IcsSource" class="form-label">ICS Calendar Source</label>
|
|
<input asp-for="IcsSource" class="form-control" placeholder="https://calendar.example.com/feed.ics" />
|
|
<div class="form-text">Enter a URL to an .ics calendar feed, or upload an ICS file below.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Or Upload ICS File</label>
|
|
<input type="file" id="icsFileUpload" class="form-control" accept=".ics" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<div class="card mb-4">
|
|
<div class="card-header"><h5 class="mb-0">Appearance</h5></div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label asp-for="BackgroundColor" class="form-label">Background Colour</label>
|
|
<div class="input-group">
|
|
<input type="color" id="bgColorPicker" class="form-control form-control-color" value="#1a1a2e" />
|
|
<input asp-for="BackgroundColor" class="form-control" placeholder="#1a1a2e" />
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label asp-for="BackgroundImage" class="form-label">Background Image URL</label>
|
|
<input asp-for="BackgroundImage" class="form-control" placeholder="/uploads/background.jpg" />
|
|
<button type="button" class="btn btn-sm btn-outline-secondary mt-1" onclick="uploadBackgroundImage()"><i class="bi bi-upload me-1"></i>Upload</button>
|
|
<input type="file" id="bgImageUpload" class="d-none" accept="image/*" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label asp-for="BackgroundSize" class="form-label">Image Sizing</label>
|
|
<select asp-for="BackgroundSize" class="form-select">
|
|
<option value="cover">Cover — fill entire slide, crop if needed</option>
|
|
<option value="contain">Contain — fit whole image, may show background</option>
|
|
<option value="fill">Fill — stretch to fit exactly</option>
|
|
<option value="scale-down">Scale Down — shrink to fit, never enlarge</option>
|
|
<option value="auto">Auto — original size</option>
|
|
</select>
|
|
<div class="form-text">How the background image fills the slide area.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label asp-for="CustomCss" class="form-label">Custom CSS</label>
|
|
<textarea asp-for="CustomCss" class="form-control font-monospace" rows="4" placeholder="color: white; font-family: Arial;"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary btn-lg"><i class="bi bi-check-lg me-1"></i>Create Meow</button>
|
|
<a href="/admin/slides" class="btn btn-outline-secondary">Cancel</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
@section Styles {
|
|
<style>.tox-tinymce { border-radius: 0.375rem !important; }</style>
|
|
}
|
|
|
|
@section Scripts {
|
|
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
|
|
<script>
|
|
document.getElementById('slideType').addEventListener('change', function () {
|
|
document.getElementById('contentSection').style.display = this.value === '0' ? '' : 'none';
|
|
document.getElementById('embedSection').style.display = this.value === '1' ? '' : 'none';
|
|
document.getElementById('icsSection').style.display = this.value === '2' ? '' : 'none';
|
|
if (this.value === '0') initTinyMCE();
|
|
});
|
|
|
|
function initTinyMCE() {
|
|
if (tinymce.get('contentEditor')) return;
|
|
tinymce.init({
|
|
selector: '#contentEditor', height: 500,
|
|
menubar: 'file edit view insert format table',
|
|
plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
|
|
toolbar: 'undo redo | blocks | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media table | removeformat code fullscreen',
|
|
images_upload_handler: function (blobInfo) {
|
|
return new Promise(function (resolve, reject) {
|
|
var fd = new FormData(); fd.append('file', blobInfo.blob(), blobInfo.filename());
|
|
fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => resolve(d.location)).catch(e => reject(e));
|
|
});
|
|
},
|
|
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; color: #fff; background: #1a1a2e; }',
|
|
skin: 'oxide-dark', content_css: 'dark', promotion: false, branding: false
|
|
});
|
|
}
|
|
if (document.getElementById('slideType').value === '0') initTinyMCE();
|
|
document.getElementById('bgColorPicker').addEventListener('input', function () { document.getElementById('BackgroundColor').value = this.value; });
|
|
function uploadBackgroundImage() { document.getElementById('bgImageUpload').click(); }
|
|
document.getElementById('bgImageUpload').addEventListener('change', function () {
|
|
if (!this.files[0]) return; var fd = new FormData(); fd.append('file', this.files[0]);
|
|
fetch('/api/upload', { method: 'POST', body: fd }).then(r => r.json()).then(d => { document.getElementById('BackgroundImage').value = d.location; });
|
|
});
|
|
document.getElementById('icsFileUpload')?.addEventListener('change', function () {
|
|
if (!this.files[0]) return; var fd = new FormData(); fd.append('file', this.files[0]);
|
|
fetch('/api/uploadfile', { method: 'POST', body: fd }).then(r => r.json()).then(d => { document.getElementById('IcsSource').value = d.url; });
|
|
});
|
|
</script>
|
|
}
|