Spaces:

grimshaw
/

markdown-to-magic-slides

Running

You need to add full openrouter integration, the llm will take the markdown and design an html slideshow based on that. You should also use the internet to find images relevant to the slideshow. You should use searchx.euan.live to do this

a7d7a30 verified 9 months ago

Raw

History Blame Contribute Delete

3.36 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Markdown to Magic Slides ✨</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.7.0/dist/pptxgen.bundle.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<custom-navbar></custom-navbar>

	<main class="container mx-auto px-4 py-8">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
	<!-- Markdown Input Section -->
	<div class="bg-white rounded-xl shadow-lg p-6">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-2xl font-bold text-gray-800">Markdown Input</h2>
	<button id="sample-btn" class="px-4 py-2 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition">
	<i data-feather="file-text" class="inline mr-2"></i>Load Sample
	</button>
	</div>
	<textarea id="markdown-input" class="w-full h-96 p-4 border border-gray-200 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Enter your markdown here..."></textarea>
	<div class="mt-4 flex justify-end">
	<button id="generate-btn" class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition flex items-center">
	<i data-feather="wand" class="inline mr-2"></i>Generate Slides
	</button>
	</div>
	</div>

	<!-- Preview Section -->
	<div class="bg-white rounded-xl shadow-lg p-6">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-2xl font-bold text-gray-800">Slides Preview</h2>
	<button id="export-btn" class="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition" disabled>
	<i data-feather="download" class="inline mr-2"></i>Export PPTX
	</button>
	</div>
	<div id="slides-preview" class="border border-gray-200 rounded-lg p-4 h-96 overflow-y-auto">
	<div class="flex items-center justify-center h-full text-gray-400">
	<div class="text-center">
	<i data-feather="image" class="w-12 h-12 mx-auto mb-2"></i>
	<p>Your slides will appear here</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>

	<custom-footer></custom-footer>

	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	<script src="script.js"></script>
	<script>
	feather.replace();
	</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>