Spaces:
Running
Running
File size: 7,945 Bytes
8b1e303 b7c00ac 8b1e303 b7c00ac 8b1e303 3b634b3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeCraft Studio - VS Code Setup</title>
<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 class="max-w-4xl mx-auto">
<!-- Header -->
<div class="flex items-center mb-8">
<i data-feather="code" class="text-blue-400 mr-3" width="32" height="32"></i>
<h1 class="text-3xl font-bold text-blue-400">CodeCraft Studio</h1>
<span class="ml-2 px-2 py-1 bg-blue-900 text-blue-100 text-xs rounded-md">VS Code Setup</span>
</div>
<!-- Main Content -->
<div class="bg-gray-900 bg-opacity-80 rounded-lg shadow-xl overflow-hidden">
<!-- VS Code Toolbar -->
<div class="bg-gray-800 px-4 py-2 flex items-center">
<div class="flex space-x-2 mr-4">
<span class="w-3 h-3 rounded-full bg-red-500"></span>
<span class="w-3 h-3 rounded-full bg-yellow-500"></span>
<span class="w-3 h-3 rounded-full bg-green-500"></span>
</div>
<div class="text-sm text-gray-400">EXPLORER: CODECRAFT-STUDIO</div>
</div>
<!-- File Structure -->
<div class="flex">
<!-- Sidebar -->
<div class="w-56 bg-gray-800 p-4 border-r border-gray-700">
<div class="mb-6">
<h2 class="text-xs uppercase tracking-wider text-gray-500 mb-2">WORKSPACE</h2>
<ul class="folder-structure text-sm space-y-1">
<li class="folder-icon font-medium text-yellow-300">.vscode</li>
<li class="file-icon pl-6 text-blue-300">settings.json</li>
<li class="file-icon pl-6 text-blue-300">extensions.json</li>
<li class="folder-icon font-medium text-yellow-300 mt-4">src</li>
<li class="file-icon pl-6 text-blue-300">index.html</li>
<li class="file-icon pl-6 text-blue-300">styles.css</li>
<li class="file-icon pl-6 text-blue-300">app.js</li>
</ul>
</div>
<div>
<h2 class="text-xs uppercase tracking-wider text-gray-500 mb-2">RECOMMENDED</h2>
<ul class="text-sm space-y-1">
<li class="flex items-center text-purple-300">
<i data-feather="zap" class="mr-2" width="14" height="14"></i>
<span>Live Server</span>
</li>
<li class="flex items-center text-green-300">
<i data-feather="git-branch" class="mr-2" width="14" height="14"></i>
<span>GitLens</span>
</li>
<li class="flex items-center text-blue-300">
<i data-feather="box" class="mr-2" width="14" height="14"></i>
<span>ESLint</span>
</li>
</ul>
</div>
</div>
<!-- Editor Area -->
<div class="flex-1 p-4">
<div class="mb-4 flex items-center">
<div class="flex space-x-1 mr-4">
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
<div class="w-2 h-2 rounded-full bg-gray-600"></div>
<div class="w-2 h-2 rounded-full bg-gray-600"></div>
</div>
<div class="text-sm text-blue-400">index.html</div>
</div>
<div class="bg-gray-800 rounded p-4 mb-6">
<h2 class="text-xl font-bold mb-4 text-blue-300">Getting Started</h2>
<ol class="list-decimal list-inside space-y-2 text-gray-300">
<li>Open this folder in VS Code</li>
<li>Install recommended extensions</li>
<li>Open the terminal (Ctrl+`)</li>
<li>Run <code class="bg-gray-700 px-1 rounded">npm install</code> if needed</li>
<li>Use Live Server to view the project</li>
</ol>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-800 rounded p-4">
<h3 class="font-bold mb-2 text-green-400 flex items-center">
<i data-feather="terminal" class="mr-2" width="18" height="18"></i>
VS Code Shortcuts
</h3>
<ul class="text-sm space-y-1 text-gray-300">
<li><span class="font-medium">Ctrl+P</span> - Quick open</li>
<li><span class="font-medium">Ctrl+Shift+P</span> - Command palette</li>
<li><span class="font-medium">Ctrl+`</span> - Toggle terminal</li>
<li><span class="font-medium">Ctrl+B</span> - Toggle sidebar</li>
</ul>
</div>
<div class="bg-gray-800 rounded p-4">
<h3 class="font-bold mb-2 text-purple-400 flex items-center">
<i data-feather="download" class="mr-2" width="18" height="18"></i>
Recommended Extensions
</h3>
<ul class="text-sm space-y-1 text-gray-300">
<li>Live Server</li>
<li>Prettier - Code formatter</li>
<li>ESLint</li>
<li>Tailwind CSS IntelliSense</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-8 text-center text-gray-500 text-sm">
<p>Happy coding! Open this project in VS Code to get started.</p>
<div class="mt-2 flex justify-center space-x-4">
<a href="#" class="flex items-center text-blue-400 hover:text-blue-300">
<i data-feather="github" class="mr-1" width="16" height="16"></i>
GitHub
</a>
<a href="#" class="flex items-center text-green-400 hover:text-green-300">
<i data-feather="download" class="mr-1" width="16" height="16"></i>
Download Project
</a>
</div>
</div>
</div>
</div>
<script src="src/app.js"></script>
</body>
</html>
|