Spaces:

kirpalsingh2252002
/

slidecraft-studio

Running

App Files Files Community

kirpalsingh2252002 commited on 28 days ago

Commit

19e5d94

verified ·

1 Parent(s): 0f7629a

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

Browse files

so i want that you create me a full functional and generalised web ui where i input the code of ppt and so i can edit the components in the ppt like edit the text move the image charts etc. to anywhere seemlessly i want that the ui should be very good and should adjust to the size of the ppt it should be generalised and effective as it will be given to the end user so it should be working accurately i hope you understand what i want. think of a canvas where i can do anything ove anything

the slides are 16:9 so they should be properly visble they can contain images, charts etc.

eg ppt fcode

<!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>

give attention to detail

Files changed (6) hide show

README.md +8 -5
components/navbar.js +74 -0
components/sidebar.js +189 -0
index.html +272 -19
script.js +359 -0
style.css +186 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Slidecraft Studio
-emoji: 😻
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: SlideCraft Studio 🎨
+colorFrom: blue
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js ADDED Viewed

	@@ -0,0 +1,74 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
+                    color: white;
+                    padding: 1rem 0;
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                }
+                .nav-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 0 1rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                }
+                .nav-links {
+                    display: flex;
+                    align-items: center;
+                    gap: 2rem;
+                }
+                .nav-link {
+                    color: white;
+                    text-decoration: none;
+                    padding: 0.5rem 1rem;
+                    border-radius: 6px;
+                    transition: background-color 0.2s ease;
+                }
+                .nav-link:hover {
+                    background-color: rgba(255, 255, 255, 0.1);
+                }
+                @media (max-width: 768px) {
+                    .nav-links {
+                        gap: 1rem;
+                    }
+                    .logo {
+                        font-size: 1.25rem;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="nav-container">
+                    <div class="logo">
+                        <i data-feather="layout"></i>
+                        <span class="ml-2">SlideCraft Studio</span>
+                    </div>
+                    <div class="nav-links">
+                        <a href="#" class="nav-link">Home</a>
+                        <a href="#" class="nav-link">Templates</a>
+                        <a href="#" class="nav-link">Help</a>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

components/sidebar.js ADDED Viewed

	@@ -0,0 +1,189 @@

+class CustomSidebar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .sidebar {
+                    background: white;
+                    border-radius: 12px;
+                    padding: 1.5rem;
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+                }
+                .sidebar-section {
+                    margin-bottom: 2rem;
+                }
+                .sidebar-title {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    color: #1f2937;
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                }
+                .sidebar-title i {
+                    margin-right: 0.5rem;
+                }
+                .element-btn {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    padding: 0.75rem 1rem;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 8px;
+                    margin-bottom: 0.5rem;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    background: white;
+                }
+                .element-btn:hover {
+                    background: #f3f4f6;
+                    border-color: #3B82F6;
+                }
+                .element-btn i {
+                    margin-right: 0.5rem;
+                }
+                .slide-thumbnail {
+                    width: 100%;
+                    aspect-ratio: 16/9;
+                    background: #f8fafc;
+                    border: 2px dashed #cbd5e1;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-bottom: 0.75rem;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                }
+                .slide-thumbnail:hover {
+                    border-color: #3B82F6;
+                    background: #eff6ff;
+                }
+                .slide-thumbnail.active {
+                    border-color: #1E40AF;
+                    background: #dbeafe;
+                }
+            </style>
+            <div class="sidebar">
+                <div class="sidebar-section">
+                    <h3 class="sidebar-title">
+                        <i data-feather="plus"></i>
+                        Add Elements
+                    </h3>
+                    <button class="element-btn" data-type="text">
+                        <i data-feather="type"></i>
+                        Text Box
+                    </button>
+                    <button class="element-btn" data-type="image">
+                        <i data-feather="image"></i>
+                        Image
+                    </button>
+                    <button class="element-btn" data-type="shape">
+                        <i data-feather="square"></i>
+                        Shape
+                    </button>
+                    <button class="element-btn" data-type="chart">
+                        <i data-feather="bar-chart-2"></i>
+                        Chart
+                    </button>
+                </div>
+                <div class="sidebar-section">
+                    <h3 class="sidebar-title">
+                        <i data-feather="layers"></i>
+                        Slides
+                    </h3>
+                    <div class="slide-thumbnail active">
+                        <i data-feather="file-text" class="text-gray-400"></i>
+                    </div>
+                    <div class="slide-thumbnail">
+                        <i data-feather="file-text" class="text-gray-400"></i>
+                    </div>
+                    <div class="slide-thumbnail">
+                        <i data-feather="file-text" class="text-gray-400"></i>
+                    </div>
+                </div>
+                <div class="sidebar-section">
+                    <h3 class="sidebar-title">
+                        <i data-feather="settings"></i>
+                        Properties
+                    </h3>
+                    <div class="property-control">
+                        <label class="block text-sm text-gray-600 mb-1">Font Size</label>
+                        <input type="range" min="8" max="72" value="16" class="w-full">
+                    </div>
+                </div>
+            </div>
+        `;
+        // Add event listeners for element buttons
+        setTimeout(() => {
+            const buttons = this.shadowRoot.querySelectorAll('.element-btn');
+            buttons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const type = button.getAttribute('data-type');
+                    this.addElement(type);
+                });
+            }, 100);
+        });
+    }
+    addElement(type) {
+        const canvasContainer = document.getElementById('canvasContainer');
+        let newElement;
+        switch(type) {
+            case 'text':
+                newElement = document.createElement('div');
+                newElement.className = 'editable-element';
+                newElement.setAttribute('contenteditable', 'true');
+                newElement.style.position = 'absolute';
+                newElement.style.left = '100px';
+                newElement.style.top = '100px';
+                newElement.style.padding = '10px';
+                newElement.style.background = 'white';
+                newElement.style.border = '1px solid #e5e7eb';
+                newElement.style.borderRadius = '6px';
+                newElement.style.minWidth = '200px';
+                newElement.style.minHeight = '40px';
+                newElement.style.zIndex = '1000';
+                newElement.textContent = 'Double click to edit text';
+                break;
+            case 'image':
+                newElement = document.createElement('div');
+                newElement.className = 'editable-element';
+                newElement.style.position = 'absolute';
+                newElement.style.left = '150px';
+                newElement.style.top = '150px';
+                newElement.style.width = '200px';
+                newElement.style.height = '150px';
+                newElement.style.background = '#f3f4f6';
+                newElement.style.border = '2px dashed #d1d5db';
+                newElement.style.borderRadius = '6px';
+                newElement.style.display = 'flex';
+                newElement.style.alignItems = 'center';
+                newElement.style.justifyContent = 'center';
+                newElement.innerHTML = `
+                    <i data-feather="image" class="text-gray-400"></i>
+                    <span class="ml-2 text-gray-500">Add Image</span>
+                `;
+                break;
+            case 'chart':
+                newElement = document.createElement('div');
+                newElement.className = 'editable-element';
+                newElement.style.position = 'absolute';
+                newElement.style.left = '200px';
+                newElement.style.top = '200px';
+                newElement.style.width = '300

index.html CHANGED Viewed

@@ -1,19 +1,272 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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...">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
+    &lt;title&gt;Introduction to Thermodynamics&lt;/title&gt;
+    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"&gt;
+    &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&amp;display=swap" rel="stylesheet"&gt;
+    &lt;style&gt;
+        * {
+            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;
+            }
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;div class="slide-container"&gt;
+        &lt;div class="slide-header"&gt;
+            &lt;h1&gt;Introduction to Thermodynamics&lt;/h1&gt;
+        &lt;/div&gt;
+        &lt;div class="content-wrapper"&gt;
+            &lt;div class="text-content"&gt;
+                &lt;div class="text-section"&gt;
+                    &lt;h3&gt;Definition&lt;/h3&gt;
+                    &lt;p&gt;Thermodynamics is the branch of physics that deals with the relationships between heat, work, temperature, energy, and the laws governing energy conversion.&lt;/p&gt;
+                &lt;/div&gt;
+                &lt;div class="text-section"&gt;
+                    &lt;h3&gt;Key Concepts&lt;/h3&gt;
+                    &lt;ul&gt;
+                        &lt;li&gt;&lt;strong&gt;Energy:&lt;/strong&gt; Capacity to do work or produce heat&lt;/li&gt;
+                        &lt;li&gt;&lt;strong&gt;Temperature:&lt;/strong&gt; Measure of average kinetic energy&lt;/li&gt;
+                        &lt;li&gt;&lt;strong&gt;Entropy:&lt;/strong&gt; Measure of disorder or randomness&lt;/li&gt;
+                        &lt;li&gt;&lt;strong&gt;Thermal Equilibrium:&lt;/strong&gt; State where no heat transfer occurs&lt;/li&gt;
+                    &lt;/ul&gt;
+                &lt;/div&gt;
+                &lt;div class="text-section"&gt;
+                    &lt;h3&gt;Importance&lt;/h3&gt;
+                    &lt;p&gt;Thermodynamics forms the foundation for engineering disciplines, chemical processes, physical theories, and explains everyday phenomena from engine operation to climate systems.&lt;/p&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;div class="image-content"&gt;
+                &lt;img src="https://www.chemistrylearner.com/wp-content/uploads/2022/08/Laws-of-Thermodynamics.jpg" alt="Thermodynamic System and Surroundings"&gt;
+                &lt;p class="fig-caption"&gt;Fig 2.1 Thermodynamic System and Surroundings&lt;/p&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+        &lt;div class="slide-footer"&gt;
+            Slide 2
+        &lt;/div&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+                        </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>

script.js ADDED Viewed

	@@ -0,0 +1,359 @@

+// Global state
+let currentMode = 'edit';
+let selectedElement = null;
+let isDragging = false;
+let dragOffset = { x: 0, y: 0 };
+// Initialize the application
+document.addEventListener('DOMContentLoaded', function() {
+    initializeEventListeners();
+    setupCanvas();
+});
+function initializeEventListeners() {
+    // Mode buttons
+    document.getElementById('previewMode').addEventListener('click', () => switchMode('preview'));
+    document.getElementById('editMode').addEventListener('click', () => switchMode('edit'));
+    // Load code button
+    document.getElementById('loadCode').addEventListener('click', loadPPT);
+    // Export button
+    document.getElementById('exportBtn').addEventListener('click', exportPPT);
+    // Canvas events
+    document.getElementById('canvasContainer').addEventListener('click', handleCanvasClick);
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('contextmenu', handleContextMenu);
+}
+function setupCanvas() {
+    // Set up initial canvas state
+    const canvas = document.getElementById('canvasContainer');
+    canvas.addEventListener('mousedown', startDrag);
+    canvas.addEventListener('mousemove', handleDrag);
+    canvas.addEventListener('mouseup', stopDrag);
+}
+function switchMode(mode) {
+    currentMode = mode;
+    const previewBtn = document.getElementById('previewMode');
+    const editBtn = document.getElementById('editMode');
+    if (mode === 'preview') {
+        previewBtn.classList.remove('bg-gray-200', 'text-gray-700');
+        previewBtn.classList.add('bg-primary', 'text-white');
+        editBtn.classList.remove('bg-primary', 'text-white');
+        editBtn.classList.add('bg-gray-200', 'text-gray-700');
+        disableEditing();
+    } else {
+        editBtn.classList.remove('bg-gray-200', 'text-gray-700');
+        editBtn.classList.add('bg-primary', 'text-white');
+        previewBtn.classList.remove('bg-primary', 'text-white');
+        previewBtn.classList.add('bg-gray-200', 'text-gray-700');
+        enableEditing();
+    }
+}
+function loadPPT() {
+    const codeInput = document.getElementById('codeInput').value;
+    const canvasContainer = document.getElementById('canvasContainer');
+    if (!codeInput.trim()) {
+        alert('Please enter PPT HTML code');
+        return;
+    }
+    try {
+        // Clear previous content
+        canvasContainer.innerHTML = '';
+        // Create iframe to safely render the HTML
+        const iframe = document.createElement('iframe');
+        iframe.style.width = '100%';
+        iframe.style.height = '500px';
+        iframe.style.border = 'none';
+        iframe.style.borderRadius = '8px';
+        iframe.onload = function() {
+            // Once iframe is loaded, extract the content and make it editable
+            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+            iframeDoc.open();
+            iframeDoc.write(codeInput);
+            iframeDoc.close();
+            // Replace iframe with editable content
+            setTimeout(() => {
+                const slideContent = iframeDoc.body.firstElementChild.cloneNode(true);
+                canvasContainer.innerHTML = '';
+                canvasContainer.appendChild(slideContent);
+                // Make elements editable
+                makeElementsEditable(slideContent);
+                // Scale the slide to fit container
+                scaleSlideToFit(slideContent);
+            }, 100);
+        };
+        canvasContainer.appendChild(iframe);
+    } catch (error) {
+        console.error('Error loading PPT:', error);
+        alert('Error loading PPT. Please check your HTML code.');
+    }
+}
+function makeElementsEditable(container) {
+    // Add editable class to all elements
+    const allElements = container.querySelectorAll('*');
+    allElements.forEach(element => {
+        element.classList.add('editable-element');
+        // Make text elements directly editable
+        if (element.tagName === 'P' || element.tagName === 'H1' || element.tagName === 'H2' ||
+            element.tagName === 'H3' || element.tagName === 'LI' || element.tagName === 'SPAN') {
+            element.setAttribute('contenteditable', 'true');
+        }
+        // Add event listeners for interaction
+        element.addEventListener('mousedown', handleElementMouseDown);
+        element.addEventListener('dblclick', handleElementDoubleClick);
+    });
+}
+function scaleSlideToFit(slide) {
+    const container = document.getElementById('canvasContainer');
+    const containerWidth = container.clientWidth;
+    const slideWidth = 1280; // Standard 16:9 slide width
+    if (slideWidth > containerWidth) {
+        const scale = (containerWidth - 40) / slideWidth;
+        slide.style.transform = `scale(${scale})`;
+        slide.style.transformOrigin = 'center top';
+    }
+}
+function handleElementMouseDown(e) {
+    if (currentMode !== 'edit') return;
+    e.stopPropagation();
+    selectElement(e.target);
+    if (e.target.tagName === 'IMG' || e.target.classList.contains('image-content')) {
+        isDragging = true;
+        const rect = e.target.getBoundingClientRect();
+        dragOffset.x = e.clientX - rect.left;
+        dragOffset.y = e.clientY - rect.top;
+    }
+}
+function handleElementDoubleClick(e) {
+    if (currentMode !== 'edit') return;
+    e.stopPropagation();
+    const element = e.target;
+    if (element.tagName === 'P' || element.tagName === 'H1' || element.tagName === 'H2' ||
+        element.tagName === 'H3' || element.tagName === 'LI') {
+        element.focus();
+        selectElement(element);
+    }
+}
+function startDrag(e) {
+    if (currentMode !== 'edit' || !selectedElement) return;
+    isDragging = true;
+    const rect = selectedElement.getBoundingClientRect();
+    dragOffset.x = e.clientX - rect.left;
+    dragOffset.y = e.clientY - rect.top;
+}
+function handleDrag(e) {
+    if (!isDragging || !selectedElement) return;
+    e.preventDefault();
+    const container = document.getElementById('canvasContainer');
+    const containerRect = container.getBoundingClientRect();
+    const newX = e.clientX - containerRect.left - dragOffset.x;
+    const newY = e.clientY - containerRect.top - dragOffset.y;
+    selectedElement.style.position = 'absolute';
+    selectedElement.style.left = `${newX}px`;
+    selectedElement.style.top = `${newY}px`;
+    selectedElement.style.zIndex = '1000';
+}
+function stopDrag() {
+    isDragging = false;
+}
+function selectElement(element) {
+    // Deselect previous element
+    if (selectedElement) {
+        selectedElement.classList.remove('selected');
+    }
+    // Select new element
+    selectedElement = element;
+    selectedElement.classList.add('selected');
+}
+function handleCanvasClick(e) {
+    if (e.target === document.getElementById('canvasContainer')) {
+        if (selectedElement) {
+            selectedElement.classList.remove('selected');
+            selectedElement = null;
+        }
+    }
+}
+function handleKeyDown(e) {
+    if (currentMode !== 'edit' || !selectedElement) return;
+    // Delete selected element
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+        e.preventDefault();
+        selectedElement.remove();
+        selectedElement = null;
+    }
+}
+function handleContextMenu(e) {
+    if (currentMode !== 'edit') return;
+    e.preventDefault();
+    const element = e.target;
+    if (element.classList.contains('editable-element')) {
+        selectElement(element);
+        showContextMenu(e.clientX, e.clientY, element);
+    }
+}
+function showContextMenu(x, y, element) {
+    // Remove existing context menu
+    const existingMenu = document.querySelector('.context-menu');
+    if (existingMenu) {
+        existingMenu.remove();
+    }
+    const contextMenu = document.createElement('div');
+    contextMenu.className = 'context-menu';
+    contextMenu.style.left = `${x}px`;
+    contextMenu.style.top = `${y}px`;
+    const menuItems = [
+        { icon: 'edit-3', text: 'Edit Text', action: () => editText(element) },
+        { icon: 'trash-2', text: 'Delete', action: () => deleteElement(element) },
+        { icon: 'copy', text: 'Duplicate', action: () => duplicateElement(element) },
+        { icon: 'layers', text: 'Bring to Front', action: () => bringToFront(element) },
+        { icon: 'move', text: 'Move to Back', action: () => moveToBack(element) }
+    ];
+    menuItems.forEach(item => {
+        const menuItem = document.createElement('div');
+        menuItem.className = 'context-menu-item';
+        menuItem.innerHTML = `
+            <i data-feather="${item.icon}"></i>
+            <span>${item.text}</span>
+        `;
+        menuItem.addEventListener('click', item.action);
+        contextMenu.appendChild(menuItem);
+    });
+    document.body.appendChild(contextMenu);
+    feather.replace();
+    // Close context menu when clicking elsewhere
+    setTimeout(() => {
+        document.addEventListener('click', function closeMenu() {
+            contextMenu.remove();
+            document.removeEventListener('click', closeMenu);
+        });
+    }, 10);
+}
+function editText(element) {
+    element.focus();
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function deleteElement(element) {
+    element.remove();
+    selectedElement = null;
+}
+function duplicateElement(element) {
+    const clone = element.cloneNode(true);
+    element.parentNode.insertBefore(clone, element.nextSibling);
+    makeElementsEditable(clone);
+    selectElement(clone);
+}
+function bringToFront(element) {
+    element.style.zIndex = '1000';
+}
+function moveToBack(element) {
+    element.style.zIndex = '0';
+}
+function enableEditing() {
+    const editableElements = document.querySelectorAll('.editable-element');
+    editableElements.forEach(element => {
+        element.style.cursor = 'move';
+        if (element.tagName === 'P' || element.tagName === 'H1' || element.tagName === 'H2' ||
+        element.tagName === 'H3' || element.tagName === 'LI' || element.tagName === 'SPAN') {
+            element.setAttribute('contenteditable', 'true');
+        }
+    });
+}
+function disableEditing() {
+    const editableElements = document.querySelectorAll('.editable-element');
+    editableElements.forEach(element => {
+        element.style.cursor = 'default';
+        element.removeAttribute('contenteditable');
+    });
+}
+function exportPPT() {
+    const slideContent = document.querySelector('#canvasContainer > *');
+    if (!slideContent) {
+        alert('No PPT content to export');
+        return;
+    }
+    const htmlContent = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+${document.querySelector('style').outerHTML}
+</head>
+<body>
+    ${slideContent.outerHTML}
+</body>
+</html>`;
+    // Create download link
+    const blob = new Blob([htmlContent], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'presentation.html';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    alert('PPT exported successfully!');
+}

style.css CHANGED Viewed

@@ -1,28 +1,196 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    color: #333;
+}
+/* Canvas Styles */
+.editable-element {
+    position: relative;
+    cursor: move;
+    transition: all 0.2s ease;
+}
+.editable-element:hover {
+    outline: 2px dashed #3B82F6;
+}
+.editable-element.selected {
+    outline: 2px solid #1E40AF;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+.edit-handle {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: #1E40AF;
+    border: 1px solid white;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1000;
+}
+.edit-handle.top-left { top: -4px; left: -4px; }
+.edit-handle.top-right { top: -4px; right: -4px; }
+.edit-handle.bottom-left { bottom: -4px; left: -4px; }
+.edit-handle.bottom-right { bottom: -4px; right: -4px; }
+.text-edit-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(59, 130, 246, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    cursor: text;
+}
+.text-edit-overlay:hover {
+    opacity: 1;
+}
+/* Context Menu */
+.context-menu {
+    position: fixed;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    padding: 8px 0;
+    z-index: 10000;
+    min-width: 160px;
+}
+.context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+.context-menu-item:hover {
+    background-color: #f3f4f6;
 }
+.context-menu-item i {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
 }
+/* Slide Container */
+.slide-container {
+    position: relative;
+    width: 1280px;
+    min-height: 720px;
+    background: white;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    transform-origin: center top;
 }
+/* Toolbar */
+.toolbar {
+    position: fixed;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    padding: 12px;
+    z-index: 1000;
 }
+.toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: all 0.2s ease;
 }
+.toolbar-btn:hover {
+    background: #f3f4f6;
+    transform: scale(1.05);
+}
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .slide-container {
+        width: 100%;
+        min-height: 600px;
+        transform: scale(0.8);
+    }
+}
+@media (max-width: 768px) {
+    .slide-container {
+        transform: scale(0.7);
+        min-height: 500px;
+    }
+    .toolbar {
+        right: 10px;
+        padding: 8px;
+    }
+    .toolbar-btn {
+        width: 36px;
+        height: 36px;
+    }
+}
+/* Animation Classes */
+.fade-in {
+    animation: fadeIn 0.3s ease-in-out;
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.slide-in {
+    animation: slideIn 0.3s ease-out;
+}
+@keyframes slideIn {
+    from { transform: translateX(-20px); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}