Hugging Face's logo

Spaces:
RF1RP1
/
codecraft-studio
Running

App Files Community
codecraft-studio / index.html
RF1RP1's picture
RF1RP1
can you create a webdev application with all porject and binary files ?
ed1ae03 verified
Raw History Blame Contribute Delete
10.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeCraft Studio - Web Development Hub</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#10b981',
dark: '#1e293b',
light: '#f8fafc'
}
}
}
}
</script>
<style>
.vanta-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.code-editor {
background-color: #1e293b;
border-radius: 0.5rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.terminal {
background-color: #0f172a;
border-radius: 0.5rem;
font-family: 'Courier New', monospace;
}
.file-explorer {
background-color: #1e293b;
border-radius: 0.5rem;
}
</style>
</head>
<body class="bg-dark text-light min-h-screen">
<div id="vanta-bg" class="vanta-bg"></div>
<nav class="bg-dark bg-opacity-80 backdrop-blur-md border-b border-gray-700 fixed w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0 flex items-center">
<i data-feather="code" class="text-secondary h-8 w-8"></i>
<span class="ml-2 text-xl font-bold text-primary">CodeCraft</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="text-primary px-3 py-2 rounded-md text-sm font-medium">Projects</a>
<a href="#" class="text-gray-300 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Files</a>
<a href="#" class="text-gray-300 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Terminal</a>
<a href="#" class="text-gray-300 hover:text-primary px-3 py-2 rounded-md text-sm font-medium">Settings</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button class="bg-dark border border-gray-600 p-1 rounded-full text-gray-400 hover:text-primary focus:outline-none">
<i data-feather="moon"></i>
</button>
<div class="ml-3 relative">
<div>
<button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none">
<img class="h-8 w-8 rounded-full" src="http://static.photos/technology/200x200/42" alt="User profile">
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<main class="pt-20 pb-10 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Left sidebar - File explorer -->
<div class="file-explorer p-4 hidden lg:block lg:col-span-1">
<div class="flex items-center mb-4">
<i data-feather="folder" class="text-secondary mr-2"></i>
<h2 class="text-lg font-semibold">Project Files</h2>
</div>
<div class="space-y-1">
<div class="flex items-center px-2 py-1 rounded hover:bg-gray-700">
<i data-feather="folder" class="text-yellow-400 mr-2"></i>
<span>src</span>
</div>
<div class="flex items-center px-2 py-1 rounded hover:bg-gray-700">
<i data-feather="folder" class="text-yellow-400 mr-2"></i>
<span>public</span>
</div>
<div class="flex items-center px-2 py-1 rounded hover:bg-gray-700">
<i data-feather="file" class="text-blue-400 mr-2"></i>
<span>index.html</span>
</div>
<div class="flex items-center px-2 py-1 rounded hover:bg-gray-700">
<i data-feather="file" class="text-purple-400 mr-2"></i>
<span>styles.css</span>
</div>
<div class="flex items-center px-2 py-1 rounded hover:bg-gray-700">
<i data-feather="file" class="text-green-400 mr-2"></i>
<span>app.js</span>
</div>
<div class="flex items-center px-2 py-1 rounded hover:bg-gray-700">
<i data-feather="file" class="text-red-400 mr-2"></i>
<span>package.json</span>
</div>
</div>
</div>
<!-- Main content - Code editor -->
<div class="lg:col-span-2 space-y-6">
<div class="code-editor p-4">
<div class="flex items-center justify-between mb-2">
<h3 class="text-sm font-mono">index.html</h3>
<div class="flex space-x-2">
<span class="h-3 w-3 rounded-full bg-red-500"></span>
<span class="h-3 w-3 rounded-full bg-yellow-500"></span>
<span class="h-3 w-3 rounded-full bg-green-500"></span>
</div>
</div>
<div class="bg-gray-900 rounded p-4 font-mono text-sm overflow-x-auto">
<div class="text-purple-400">&lt;!DOCTYPE html&gt;</div>
<div class="text-purple-400">&lt;html <span class="text-green-400">lang</span>=<span class="text-yellow-400">"en"</span>&gt;</div>
<div class="text-purple-400">&lt;head&gt;</div>
<div class="ml-4 text-purple-400">&lt;meta <span class="text-green-400">charset</span>=<span class="text-yellow-400">"UTF-8"</span>&gt;</div>
<div class="ml-4 text-purple-400">&lt;meta <span class="text-green-400">name</span>=<span class="text-yellow-400">"viewport"</span> <span class="text-green-400">content</span>=<span class="text-yellow-400">"width=device-width, initial-scale=1.0"</span>&gt;</div>
<div class="ml-4 text-purple-400">&lt;title&gt;<span class="text-gray-300">My Awesome Project</span>&lt;/title&gt;</div>
<div class="text-purple-400">&lt;/head&gt;</div>
<div class="text-purple-400">&lt;body&gt;</div>
<div class="ml-4 text-blue-400">&lt;h1&gt;<span class="text-gray-300">Hello World!</span>&lt;/h1&gt;</div>
<div class="text-purple-400">&lt;/body&gt;</div>
<div class="text-purple-400">&lt;/html&gt;</div>
</div>
</div>
<div class="terminal p-4">
<div class="flex items-center mb-2">
<div class="flex space-x-2 mr-2">
<span class="h-3 w-3 rounded-full bg-red-500"></span>
<span class="h-3 w-3 rounded-full bg-yellow-500"></span>
<span class="h-3 w-3 rounded-full bg-green-500"></span>
</div>
<h3 class="text-sm font-mono">Terminal</h3>
</div>
<div class="bg-black rounded p-4 font-mono text-sm h-48 overflow-y-auto">
<p class="text-green-400">$ npm start</p>
<p class="text-gray-400">> my-app@1.0.0 start</p>
<p class="text-gray-400">> react-scripts start</p>
<br>
<p class="text-gray-400">Compiling successfully...</p>
<p class="text-gray-400">You can now view my-app in the browser.</p>
<p class="text-gray-400">Local: http://localhost:3000</p>
<p class="text-gray-400">On Your Network: http://192.168.1.100:3000</p>
<br>
<p class="text-green-400">$ _</p>
</div>
</div>
</div>
</div>
</main>
<footer class="bg-dark bg-opacity-80 border-t border-gray-700 py-4">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
<div class="flex items-center space-x-4">
<span class="text-xs text-gray-400">CodeCraft Studio v1.0.0</span>
<span class="text-xs text-gray-400">React 18.2.0</span>
<span class="text-xs text-gray-400">Node 16.14.2</span>
</div>
<div class="flex items-center space-x-4">
<button class="text-gray-400 hover:text-primary">
<i data-feather="github"></i>
</button>
<button class="text-gray-400 hover:text-primary">
<i data-feather="cpu"></i>
</button>
<button class="text-gray-400 hover:text-primary">
<i data-feather="wifi"></i>
</button>
</div>
</div>
</footer>
<script>
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x6366f1,
backgroundColor: 0x1e293b
});
</script>
<script>
feather.replace();
</script>
</body>
</html>