create a fully functional ppt editing canvas where i put my html code and think it of like so i have created a presentation agent that will generate ppt using html css js example generated ppt
19e5d94
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SlideCraft Studio - PPT Editor</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3B82F6', | |
| secondary: '#1E40AF' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> | |
| <!-- Sidebar --> | |
| <div class="lg:col-span-1"> | |
| <custom-sidebar></custom-sidebar> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-3"> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">PPT Editor</h1> | |
| <div class="flex space-x-3"> | |
| <button id="previewMode" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg transition-colors flex items-center"> | |
| <i data-feather="eye" class="w-4 h-4 mr-2"></i> | |
| Preview | |
| </button> | |
| <button id="editMode" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg transition-colors flex items-center"> | |
| <i data-feather="edit" class="w-4 h-4 mr-2"></i> | |
| Edit | |
| </button> | |
| <button id="exportBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> | |
| Export | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Code Input --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">PPT HTML Code</label> | |
| <textarea id="codeInput" class="w-full h-40 p-4 border border-gray-300 rounded-lg font-mono text-sm focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Paste your PPT HTML code here..."> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Introduction to Thermodynamics</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background-color: #f5f5f5; | |
| padding: 20px; | |
| } | |
| .slide-container { | |
| width: 1280px; | |
| min-height: 720px; | |
| display: flex; | |
| flex-direction: column; | |
| font-family: 'Montserrat', sans-serif; | |
| position: relative; | |
| background-color: #ffffff; | |
| color: #333333; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| padding: 40px; | |
| } | |
| .slide-header { | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 2px solid #003366; | |
| } | |
| .slide-header h1 { | |
| font-size: 36px; | |
| font-weight: 600; | |
| color: #003366; | |
| } | |
| .content-wrapper { | |
| display: flex; | |
| flex: 1; | |
| gap: 30px; | |
| margin-top: 10px; | |
| } | |
| .text-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .text-section { | |
| margin-bottom: 25px; | |
| } | |
| .text-section h3 { | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: #003366; | |
| margin-bottom: 10px; | |
| } | |
| .text-section p, .text-section li { | |
| font-size: 16px; | |
| line-height: 1.5; | |
| margin-bottom: 8px; | |
| } | |
| .text-section ul { | |
| list-style-type: none; | |
| padding-left: 0; | |
| } | |
| .text-section li { | |
| position: relative; | |
| padding-left: 20px; | |
| } | |
| .text-section li:before { | |
| content: "•"; | |
| color: #003366; | |
| font-weight: bold; | |
| position: absolute; | |
| left: 0; | |
| } | |
| .image-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .image-content img { | |
| max-width: 100%; | |
| height: auto; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| .fig-caption { | |
| font-size: 14px; | |
| color: #666; | |
| margin-top: 10px; | |
| text-align: center; | |
| font-style: italic; | |
| } | |
| .slide-footer { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| font-size: 14px; | |
| color: #666; | |
| } | |
| @media (max-width: 1300px) { | |
| .slide-container { | |
| width: 100%; | |
| min-height: 600px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide-container"> | |
| <div class="slide-header"> | |
| <h1>Introduction to Thermodynamics</h1> | |
| </div> | |
| <div class="content-wrapper"> | |
| <div class="text-content"> | |
| <div class="text-section"> | |
| <h3>Definition</h3> | |
| <p>Thermodynamics is the branch of physics that deals with the relationships between heat, work, temperature, energy, and the laws governing energy conversion.</p> | |
| </div> | |
| <div class="text-section"> | |
| <h3>Key Concepts</h3> | |
| <ul> | |
| <li><strong>Energy:</strong> Capacity to do work or produce heat</li> | |
| <li><strong>Temperature:</strong> Measure of average kinetic energy</li> | |
| <li><strong>Entropy:</strong> Measure of disorder or randomness</li> | |
| <li><strong>Thermal Equilibrium:</strong> State where no heat transfer occurs</li> | |
| </ul> | |
| </div> | |
| <div class="text-section"> | |
| <h3>Importance</h3> | |
| <p>Thermodynamics forms the foundation for engineering disciplines, chemical processes, physical theories, and explains everyday phenomena from engine operation to climate systems.</p> | |
| </div> | |
| </div> | |
| <div class="image-content"> | |
| <img src="https://www.chemistrylearner.com/wp-content/uploads/2022/08/Laws-of-Thermodynamics.jpg" alt="Thermodynamic System and Surroundings"> | |
| <p class="fig-caption">Fig 2.1 Thermodynamic System and Surroundings</p> | |
| </div> | |
| </div> | |
| <div class="slide-footer"> | |
| Slide 2 | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| </textarea> | |
| <div class="flex justify-end mt-2"> | |
| <button id="loadCode" class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg transition-colors"> | |
| Load PPT | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Canvas Container --> | |
| <div class="border-2 border-dashed border-gray-300 rounded-xl p-4 bg-gray-50 min-h-[600px]"> | |
| <div id="canvasContainer" class="flex justify-center items-center min-h-[500px]"> | |
| <div id="placeholder" class="text-center text-gray-500"> | |
| <i data-feather="file" class="w-16 h-16 mx-auto mb-4"></i> | |
| <p class="text-lg">Load your PPT code to start editing</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.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> |