jo likha woh dekhega

helloshubham · helloshubham · commit a924b36825d9 · 2025-04-06T17:31:09.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>AI Coloring Sheet Generator</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>🖍️ Coloring Sheet Generator</h1>
+    
+    <!-- Text Input -->
+    <textarea id="prompt" placeholder="Describe your coloring sheet (e.g., 'A lion with a floral mane')"></textarea>
+    
+    <!-- Generate Button -->
+    <button onclick="generateImage()">Generate</button>
+    
+    <!-- Output -->
+    <div id="loading" style="display: none;">Generating...</div>
+    <div id="output"></div>
+    
+    <!-- Print Button (hidden initially) -->
+    <button id="printBtn" style="display: none;" onclick="window.print()">Print Sheet</button>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,25 @@
+function generateImage() {
+  const prompt = document.getElementById('prompt').value;
+  const loading = document.getElementById('loading');
+  const output = document.getElementById('output');
+  const printBtn = document.getElementById('printBtn');
+
+  if (!prompt) {
+    alert('Please describe your coloring sheet!');
+    return;
+  }
+
+  loading.style.display = 'block';
+  output.innerHTML = '';
+  printBtn.style.display = 'none';
+
+  // Simulate placeholder image generation
+  setTimeout(() => {
+    // Use this URL instead
+    const placeholderUrl = `https://dummyimage.com/600x400/ffffff/000000&text=${encodeURIComponent(prompt)}`;
+    
+    output.innerHTML = `<img src="${placeholderUrl}" alt="Coloring Sheet">`;
+    loading.style.display = 'none';
+    printBtn.style.display = 'inline-block';
+  }, 2000);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,38 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+  background: #f0f8ff;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+textarea {
+  width: 80%;
+  height: 100px;
+  margin: 20px 0;
+  padding: 10px;
+  font-size: 16px;
+}
+
+button {
+  background: #4CAF50;
+  color: white;
+  padding: 15px 30px;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+button:hover {
+  opacity: 0.8;
+}
+
+#output img {
+  width: 80%;
+  border: 2px dashed #333;
+  margin: 20px 0;
+}
