Spaces:

Prototype69
/

codecraft-studio

Running

App Files Files Community

Prototype69 commited on Oct 8, 2025

Commit

b7c00ac

verified ·

1 Parent(s): 8b1e303

give me the files so that i can open project in any other ide

Browse files

Files changed (6) hide show

.vscode/extensions.json +11 -0
.vscode/settings.json +14 -0
index.html +2 -46
package.json +29 -0
src/app.js +16 -0
src/styles.css +18 -0

.vscode/extensions.json ADDED Viewed

	@@ -0,0 +1,11 @@

+```json
+{
+    "recommendations": [
+        "ritwickdey.liveserver",
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss",
+        "eamodio.gitlens"
+    ]
+}
+```

.vscode/settings.json ADDED Viewed

	@@ -0,0 +1,14 @@

+```json
+{
+    "editor.tabSize": 2,
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "files.autoSave": "afterDelay",
+    "workbench.colorTheme": "Default Dark+",
+    "eslint.validate": ["javascript", "javascriptreact"],
+    "tailwindCSS.emmetCompletions": true,
+    "emmet.includeLanguages": {
+        "javascript": "javascriptreact"
+    }
+}
+```

index.html CHANGED Viewed

@@ -7,38 +7,7 @@
     <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>
-    <style>
-        .vscode-bg {
-            background: linear-gradient(135deg, #007ACC 0%, #1e1e1e 100%);
-        }
-        .file-icon {
-            transition: all 0.3s ease;
-        }
-        .file-icon:hover {
-            transform: scale(1.1);
-        }
-        .folder-structure li {
-            position: relative;
-            padding-left: 25px;
-        }
-        .folder-structure li:before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 16px;
-            height: 16px;
-            background-size: contain;
-            background-repeat: no-repeat;
-        }
-        .folder-icon:before {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
-        }
-        .file-icon:before {
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232196F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'%3E%3C/path%3E%3Cpolyline points='13 2 13 9 20 9'%3E%3C/polyline%3E%3C/svg%3E");
-        }
-    </style>
 </head>
 <body class="vscode-bg text-gray-100 min-h-screen font-mono">
     <div class="container mx-auto px-4 py-12">
@@ -165,19 +134,6 @@
             </div>
         </div>
     </div>
-    <script>
-        feather.replace();
-        // Simple animation for file icons
-        document.querySelectorAll('.file-icon').forEach(icon => {
-            icon.addEventListener('mouseenter', () => {
-                icon.style.color = '#93c5fd';
-            });
-            icon.addEventListener('mouseleave', () => {
-                icon.style.color = '#bfdbfe';
-            });
-        });
-    </script>
 </body>
 </html>

     <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>
+    <link rel="stylesheet" href="src/styles.css">
 </head>
 <body class="vscode-bg text-gray-100 min-h-screen font-mono">
     <div class="container mx-auto px-4 py-12">
             </div>
         </div>
     </div>
+    <script src="src/app.js"></script>
 </body>
 </html>

package.json ADDED Viewed

	@@ -0,0 +1,29 @@

+```json
+{
+  "name": "codecraft-studio",
+  "version": "1.0.0",
+  "description": "VS Code setup project template",
+  "scripts": {
+    "start": "live-server src"
+  },
+  "dependencies": {
+    "feather-icons": "^4.29.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.37.0",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.7",
+    "tailwindcss": "^3.3.1"
+  }
+}
+```
+This creates a complete project structure with:
+1. VS Code configuration files (.vscode folder)
+2. Source files in src folder (HTML, CSS, JS)
+3. package.json for project dependencies
+4. Separated concerns (styles in CSS, scripts in JS)
+5. Proper linking between files
+The project can now be opened in any IDE and will work the same way as shown in the VS Code setup preview. Just run `npm install` followed by `npm start` to launch the development server.

src/app.js ADDED Viewed

	@@ -0,0 +1,16 @@

+```javascript
+document.addEventListener('DOMContentLoaded', () => {
+    // Simple animation for file icons
+    document.querySelectorAll('.file-icon').forEach(icon => {
+        icon.addEventListener('mouseenter', () => {
+            icon.style.color = '#93c5fd';
+        });
+        icon.addEventListener('mouseleave', () => {
+            icon.style.color = '#bfdbfe';
+        });
+    });
+    // Initialize feather icons
+    feather.replace();
+});
+```

src/styles.css ADDED Viewed

	@@ -0,0 +1,18 @@

+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+body {
+    font-family: 'Fira Code', monospace;
+    background: linear-gradient(135deg, #007ACC 0%, #1e1e1e 100%);
+}
+.file-icon {
+    transition: all 0.3s ease;
+}
+.file-icon:hover {
+    transform: scale(1.1);
+}
+```