Hugging Face's logo

Spaces:
Jayreddin89
/
codeplayground-live
Running

App Files Community
Jayreddin89 commited on
Commit
0bccacc
·
verified ·
1 Parent(s): a086362

Redesign my website

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +176 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codeplayground Live
3
- emoji: 📉
4
- colorFrom: pink
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodePlayground Live 🎮
3
+ colorFrom: red
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,177 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodePlayground Live - Online Code Editor</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ .editor-container {
14
+ height: calc(100vh - 120px);
15
+ }
16
+ .code-mirror {
17
+ height: 100%;
18
+ }
19
+ #vanta-bg {
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
23
+ width: 100%;
24
+ height: 100%;
25
+ z-index: -1;
26
+ opacity: 0.2;
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-900 text-gray-100">
31
+ <div id="vanta-bg"></div>
32
+
33
+ <!-- Header -->
34
+ <header class="bg-gray-800 shadow-lg">
35
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
36
+ <div class="flex items-center space-x-2">
37
+ <i data-feather="code" class="text-red-500"></i>
38
+ <h1 class="text-2xl font-bold text-red-500">CodePlayground<span class="text-white">Live</span></h1>
39
+ </div>
40
+ <nav>
41
+ <ul class="flex space-x-6">
42
+ <li><a href="#" class="hover:text-red-400 transition">Features</a></li>
43
+ <li><a href="#" class="hover:text-red-400 transition">Templates</a></li>
44
+ <li><a href="#" class="hover:text-red-400 transition">Docs</a></li>
45
+ <li><a href="#" class="hover:text-red-400 transition">About</a></li>
46
+ </ul>
47
+ </nav>
48
+ <div class="flex items-center space-x-4">
49
+ <button class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-md transition">Sign In</button>
50
+ <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-md transition">Sign Up</button>
51
+ </div>
52
+ </div>
53
+ </header>
54
+
55
+ <!-- Main Content -->
56
+ <main class="container mx-auto px-4 py-8">
57
+ <!-- Hero Section -->
58
+ <section class="text-center mb-16">
59
+ <h2 class="text-4xl font-bold mb-4">The Ultimate Online Code Playground</h2>
60
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
61
+ Write, run, and share code in HTML, CSS, JavaScript and more - right in your browser.
62
+ </p>
63
+ <div class="mt-8 flex justify-center space-x-4">
64
+ <button class="px-6 py-3 bg-red-600 hover:bg-red-700 rounded-md text-lg font-medium transition">
65
+ Start Coding Now
66
+ </button>
67
+ <button class="px-6 py-3 border border-gray-600 hover:bg-gray-800 rounded-md text-lg font-medium transition">
68
+ Explore Templates
69
+ </button>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Code Editor Demo -->
74
+ <section class="bg-gray-800 rounded-lg shadow-xl overflow-hidden">
75
+ <div class="flex items-center bg-gray-700 px-4 py-2">
76
+ <div class="flex space-x-2 mr-4">
77
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
78
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
79
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
80
+ </div>
81
+ <div class="flex-1 text-sm text-gray-400">
82
+ index.html
83
+ </div>
84
+ <button class="px-3 py-1 bg-red-600 rounded text-sm hover:bg-red-700 transition">
85
+ <i data-feather="play" class="w-4 h-4"></i> Run
86
+ </button>
87
+ </div>
88
+ <div class="editor-container">
89
+ <div class="code-mirror p-4 font-mono text-sm">
90
+ <div class="text-gray-400 mb-4">&lt;!-- Start coding here --&gt;</div>
91
+ <div class="text-blue-300 mb-2">&lt;!DOCTYPE html&gt;</div>
92
+ <div class="text-blue-300">&lt;html&gt;</div>
93
+ <div class="ml-4 text-blue-300">&lt;head&gt;</div>
94
+ <div class="ml-8 text-blue-300">&lt;title&gt;<span class="text-white">My Awesome Project</span>&lt;/title&gt;</div>
95
+ <div class="ml-4 text-blue-300">&lt;/head&gt;</div>
96
+ <div class="ml-4 text-blue-300">&lt;body&gt;</div>
97
+ <div class="ml-8 text-yellow-300">&lt;h1&gt;<span class="text-green-300">Hello World!</span>&lt;/h1&gt;</div>
98
+ <div class="ml-8 text-purple-300">&lt;script src="<span class="text-green-300">app.js</span>"&gt;&lt;/script&gt;</div>
99
+ <div class="ml-4 text-blue-300">&lt;/body&gt;</div>
100
+ <div class="text-blue-300">&lt;/html&gt;</div>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Features -->
106
+ <section class="mt-20">
107
+ <h2 class="text-3xl font-bold mb-12 text-center">Why Choose CodePlayground Live?</h2>
108
+ <div class="grid md:grid-cols-3 gap-8">
109
+ <div class="bg-gray-800 p-6 rounded-lg hover:shadow-lg transition">
110
+ <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mb-4">
111
+ <i data-feather="zap" class="text-white"></i>
112
+ </div>
113
+ <h3 class="text-xl font-semibold mb-2">Instant Setup</h3>
114
+ <p class="text-gray-300">No installations or configurations needed. Start coding immediately in your browser.</p>
115
+ </div>
116
+ <div class="bg-gray-800 p-6 rounded-lg hover:shadow-lg transition">
117
+ <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mb-4">
118
+ <i data-feather="cpu" class="text-white"></i>
119
+ </div>
120
+ <h3 class="text-xl font-semibold mb-2">Multi-Language</h3>
121
+ <p class="text-gray-300">Support for HTML, CSS, JavaScript, TypeScript, JSX, and more coming soon.</p>
122
+ </div>
123
+ <div class="bg-gray-800 p-6 rounded-lg hover:shadow-lg transition">
124
+ <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center mb-4">
125
+ <i data-feather="share-2" class="text-white"></i>
126
+ </div>
127
+ <h3 class="text-xl font-semibold mb-2">Easy Sharing</h3>
128
+ <p class="text-gray-300">Share your projects with a single click. Collaborate in real-time.</p>
129
+ </div>
130
+ </div>
131
+ </section>
132
+ </main>
133
+
134
+ <!-- Footer -->
135
+ <footer class="bg-gray-800 mt-20 py-12">
136
+ <div class="container mx-auto px-4">
137
+ <div class="flex flex-col md:flex-row justify-between items-center">
138
+ <div class="mb-6 md:mb-0">
139
+ <div class="flex items-center space-x-2">
140
+ <i data-feather="code" class="text-red-500"></i>
141
+ <h2 class="text-xl font-bold text-red-500">CodePlayground<span class="text-white">Live</span></h2>
142
+ </div>
143
+ <p class="text-gray-400 mt-2">The playground for developers</p>
144
+ </div>
145
+ <div class="flex space-x-6">
146
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a>
147
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
148
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a>
149
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="youtube"></i></a>
150
+ </div>
151
+ </div>
152
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
153
+ <p>© 2023 CodePlayground Live. All rights reserved.</p>
154
+ </div>
155
+ </div>
156
+ </footer>
157
+
158
+ <script>
159
+ // Initialize Vanta.js background
160
+ VANTA.NET({
161
+ el: "#vanta-bg",
162
+ mouseControls: true,
163
+ touchControls: true,
164
+ gyroControls: false,
165
+ minHeight: 200.00,
166
+ minWidth: 200.00,
167
+ scale: 1.00,
168
+ scaleMobile: 1.00,
169
+ color: 0xff3344,
170
+ backgroundColor: 0x111827
171
+ });
172
+
173
+ // Initialize Feather Icons
174
+ feather.replace();
175
+ </script>
176
+ </body>
177
  </html>