Code-Space/index.html at main · amanbalara/Code-Space · GitHub

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>🚀 Code Space 🌌</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron&family=Open+Sans&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
      color: #f5f5f5;
      margin: 0;
      padding: 0 1rem;
    }

    header, section {
      max-width: 900px;
      margin: 2rem auto;
      padding: 2rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(0,0,0,0.3);
    }

    h1, h2 {
      font-family: 'Orbitron', sans-serif;
      color: #ffd700;
    }

    ul {
      list-style: none;
      padding-left: 0;
    }

    ul li::before {
      content: '✨ ';
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }

    th, td {
      padding: 1rem;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    a {
      color: #87cefa;
      text-decoration: none;
    }

    blockquote {
      margin: 1rem 0;
      padding-left: 1rem;
      border-left: 4px solid #ffd700;
      font-style: italic;
    }

    footer {
      text-align: center;
      margin: 2rem auto;
      color: #aaa;
    }

    .btn-container {
      text-align: center;
      margin-top: 2rem;
    }

    .code-btn {
      padding: 1rem 2rem;
      font-size: 1.2rem;
      font-family: 'Orbitron', sans-serif;
      background-color: #ffd700;
      color: #0f2027;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .code-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
    }

    pre {
      background: rgba(255,255,255,0.1);
      padding: 1rem;
      border-radius: 8px;
      overflow-x: auto;
      color: #f5f5f5;
      font-size: 0.95rem;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <header>
    <h1>🚀 Welcome to Code Space 🌌</h1>
    <p><em>Explore Code, Tech & Creativity — Built for Beginners!</em></p>
    <p><strong>Code Space</strong> is your beginner-friendly gateway into the exciting world of programming and modern technologies...</p>
    <div class="btn-container">
      <a href="codespace.html">
        <button class="code-btn">Code Space for Java</button>
      </a>
    </div>
  </header>

  <section>
    <h2>🧽 What is Code Space?</h2>
    <ul>
      <li>Learn programming languages like Java, Python, and more</li>
      <li>Explore trending tech fields like <strong>AI</strong>, <strong>Web Development</strong>, <strong>Cloud</strong>, <strong>Cybersecurity</strong>, and <strong>IoT</strong></li>
      <li>Practice with fun, real-world projects</li>
      <li>Play around with code using embedded editors (powered by JDoodle)</li>
      <li>Enjoy a beautiful, relaxing interface with particle galaxies and music</li>
    </ul>
    <blockquote>It’s <strong>tech learning made fun, visual, and beginner-focused</strong>.</blockquote>
  </section>

  <section>
    <h2>✨ Features You'll Love</h2>
    <table>
      <tr><th>🚀 Feature</th><th>💡 Description</th></tr>
      <tr><td>🔥 Beginner-Friendly</td><td>No setup needed — start learning instantly!</td></tr>
      <tr><td>💻 Run Code Online</td><td>Try Java and more directly in the browser using JDoodle</td></tr>
      <tr><td>📚 Hands-On Tutorials</td><td>Learn by doing with simple, guided projects</td></tr>
      <tr><td>🧠 Explore Tech Topics</td><td>AI, Cloud, DevOps, Web, and more in plain English</td></tr>
      <tr><td>🌌 Cosmic UI</td><td>Particle galaxy animations and immersive visuals</td></tr>
      <tr><td>🎵 Vibe While You Code</td><td>Background music toggle for focus or fun</td></tr>
      <tr><td>📦 Modular Documentation</td><td>Clean collapsible sections (License, Contributing, etc.)</td></tr>
      <tr><td>📱 Mobile Friendly</td><td>Works great on all devices</td></tr>
    </table>
  </section>

  <section>
    <h2>🛠 Built With</h2>
    <ul>
      <li>🌐 <strong>HTML5</strong> + <strong>CSS3</strong></li>
      <li>⚙️ <strong>JavaScript</strong></li>
      <li>🤩 <strong>JDoodle API</strong> for embedded code execution</li>
      <li>🎇 Custom particle effects and animations</li>
    </ul>
  </section>

  <section>
    <h2>🧑‍🚀 Created and Maintained By</h2>
    <blockquote>
      <strong>Aman Balara</strong><br />
      Built to make tech learning fun, beautiful, and accessible for everyone.
    </blockquote>
  </section>

  <section>
    <h2>🌟 Final Words</h2>
    <blockquote>
      <strong>Learning to code shouldn’t feel boring or intimidating.</strong><br />
      With Code Space, we’re making it <em>fun, visual, hands-on</em>, and truly beginner-friendly.<br />
      So go ahead — <strong>press "Code Space for Java" and launch into tech! 🚀</strong>
    </blockquote>
  </section>

  <!-- Contributing Section -->
  <section>
    <h2 onclick="toggleSection('contrib')" style="cursor: pointer;">
      📌 Contributing to Code Space 🎉 <span id="arrow-contrib">▼</span>
    </h2>
    <div id="contrib" style="display: none; padding-left: 1rem;">
      <p>Thanks for your interest in contributing to <strong>Java for Beginners</strong>! 💻</p>
      <h3>📌 How You Can Help</h3>
      <ul>
        <li>✏️ Fix typos or improve documentation</li>
        <li>🧠 Add beginner-friendly examples</li>
        <li>🧪 Improve or refactor existing code</li>
        <li>💡 Suggest or add new Java topics</li>
        <li>🐛 Report bugs via <a href="https://github.com/amanbalara/Java-for-Beginners/issues" target="_blank">Issues</a></li>
      </ul>
      <h3>🛠 Getting Started</h3>
      <ol>
        <li><strong>Fork the repository</strong></li>
        <li><strong>Clone your fork</strong>
          <pre><code>git clone https://github.com/YOUR-USERNAME/Java-for-Beginners.git</code></pre>
        </li>
      </ol>
    </div>
  </section>

  <!-- Security Policy Section -->
  <section>
    <h2 onclick="toggleSection('security')" style="cursor: pointer;">
      🔒 Security Policy <span id="arrow-security">▼</span>
    </h2>
    <div id="security" style="display: none; padding-left: 1rem;">
      <h3>Supported Versions</h3>
      <table>
        <tr><th>Version</th><th>Supported</th></tr>
        <tr><td>Latest</td><td>✅</td></tr>
        <tr><td>Older</td><td>❌</td></tr>
      </table>
      <h3>Reporting a Vulnerability</h3>
      <ol>
        <li><strong>Do NOT</strong> create a public issue.</li>
        <li>Email: <code>connect.amanbalara@gmail.com</code></li>
        <li>Include:
          <ul>
            <li>Description</li>
            <li>Steps to reproduce</li>
            <li>Impact</li>
            <li>Suggested fix (optional)</li>
          </ul>
        </li>
      </ol>
      <h3>Our Commitment</h3>
      <ul>
        <li>Response in 5 working days</li>
        <li>Fix in 10–15 working days</li>
        <li>Credit given if desired</li>
      </ul>
      <h3>Scope</h3>
      <p>This policy applies to code vulnerabilities, insecure dependencies, build/automation flaws. Not covered: general bugs or user mistakes.</p>
      <h3>Responsible Disclosure</h3>
      <ul>
        <li>Don’t exploit it</li>
        <li>Keep it private until resolved</li>
        <li>No personal gain</li>
      </ul>
    </div>
  </section>

  <!-- License Section -->
  <section>
    <h2 onclick="toggleSection('license')" style="cursor: pointer;">
      📜 License <span id="arrow-license">▼</span>
    </h2>
    <div id="license" style="display: none; padding-left: 1rem;">
      <pre style="white-space: pre-wrap;">
MIT License

Copyright (c) 2025 Aman Balara

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
      </pre>
    </div>
  </section>

  <script>
    function toggleSection(id) {
      const section = document.getElementById(id);
      const arrow = document.getElementById('arrow-' + id);
      if (section.style.display === 'none') {
        section.style.display = 'block';
        arrow.textContent = '▲';
      } else {
        section.style.display = 'none';
        arrow.textContent = '▼';
      }
    }
  </script>

  <footer>© 2025 Code Space | Crafted by Aman Balara</footer>
</body>
</html>