blocks-ide/index.html at main · xtremezero/blocks-ide · 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
<!DOCTYPE html>
<html lang="en" class="h-full bg-slate-50 text-slate-800">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blocks Studio Hub | Multi-Language Visual Programming</title>
  <meta name="description" content="Visual block-based IDE hub for C, C++, Haxe, and Lua with real-time code generation and browser execution sandbox.">

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'sans-serif'],
          }
        }
      }
    }
  </script>

  <!-- Google Fonts: Inter -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

  <!-- Custom Editor CSS -->
  <link rel="stylesheet" href="css/editor.css">
</head>
<body class="h-full flex flex-col items-center justify-center bg-gradient-to-b from-slate-50 via-slate-100 to-slate-200 dark:from-slate-900 dark:via-slate-950 dark:to-slate-900 p-4 font-sans select-none transition-colors">

  <!-- Theme Toggle Floating Button -->
  <div class="absolute top-6 right-6">
    <button id="themeToggleBtn" onclick="toggleGlobalTheme()" class="p-2.5 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 shadow-md hover:scale-105 transition flex items-center gap-2 text-xs font-semibold">
      <svg id="sunIcon" class="w-4 h-4 hidden text-amber-400 fill-current" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0s-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
      <svg id="moonIcon" class="w-4 h-4 text-slate-700 fill-current" viewBox="0 0 24 24"><path d="M12.3 2c.4 0 .7.3.7.7 0 .3-.2.6-.4.7-2.7 1.8-4.3 4.8-4.3 8.1 0 5.2 4.2 9.5 9.5 9.5 3.3 0 6.3-1.6 8.1-4.3.2-.3.5-.4.7-.4.4 0 .7.3.7.7 0 .2-.1.4-.2.5C24.8 21.6 18.7 25 12 25 4.8 25-1 19.2-1 12 1 5.3 4.4-.8 9.5-2.8c.1-.1.3-.2.5-.2z"/></svg>
      <span id="themeLabel">Dark Mode</span>
    </button>
  </div>

  <main class="flex flex-col items-center justify-center max-w-4xl w-full text-center">
    <!-- Title -->
    <div class="mb-10 sm:mb-14">
      <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300 border border-blue-200 dark:border-blue-800 uppercase tracking-wider mb-4 inline-block shadow-sm">Visual IDE Platform</span>
      <h1 class="text-4xl sm:text-6xl font-extrabold text-slate-900 dark:text-white tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 dark:from-blue-400 dark:via-indigo-400 dark:to-purple-400">
        Blocks Studio IDE
      </h1>
      <p class="mt-3 text-slate-600 dark:text-slate-400 text-sm sm:text-base max-w-xl mx-auto">
        Create, transpile, and execute visual block code in real-time across C, C++, Haxe, and Lua.
      </p>
    </div>

    <!-- 4 Language Buttons Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 w-full max-w-3xl">
      <!-- C Button -->
      <a href="c.html" class="group flex flex-col items-center justify-center p-6 sm:p-8 rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-500 shadow-sm hover:shadow-2xl transition-all duration-300 hover:-translate-y-1.5">
        <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-500 text-white font-extrabold text-xl sm:text-2xl flex items-center justify-center shadow-lg shadow-blue-500/25 group-hover:scale-110 transition-transform">
          C
        </div>
        <span class="mt-4 font-bold text-slate-800 dark:text-slate-100 text-lg group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">C</span>
        <span class="text-[11px] text-slate-400 dark:text-slate-500 font-mono">source.c</span>
      </a>

      <!-- C++ Button -->
      <a href="cpp.html" class="group flex flex-col items-center justify-center p-6 sm:p-8 rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-cyan-500 dark:hover:border-cyan-500 shadow-sm hover:shadow-2xl transition-all duration-300 hover:-translate-y-1.5">
        <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-gradient-to-tr from-cyan-600 to-blue-500 text-white font-extrabold text-xl sm:text-2xl flex items-center justify-center shadow-lg shadow-cyan-500/25 group-hover:scale-110 transition-transform">
          C++
        </div>
        <span class="mt-4 font-bold text-slate-800 dark:text-slate-100 text-lg group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">C++</span>
        <span class="text-[11px] text-slate-400 dark:text-slate-500 font-mono">main.cpp</span>
      </a>

      <!-- Haxe Button -->
      <a href="haxe.html" class="group flex flex-col items-center justify-center p-6 sm:p-8 rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-orange-500 dark:hover:border-orange-500 shadow-sm hover:shadow-2xl transition-all duration-300 hover:-translate-y-1.5">
        <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-gradient-to-tr from-orange-500 to-amber-500 text-white font-extrabold text-xl sm:text-2xl flex items-center justify-center shadow-lg shadow-orange-500/25 group-hover:scale-110 transition-transform">
          HX
        </div>
        <span class="mt-4 font-bold text-slate-800 dark:text-slate-100 text-lg group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">Haxe</span>
        <span class="text-[11px] text-slate-400 dark:text-slate-500 font-mono">Main.hx</span>
      </a>

      <!-- Lua Button -->
      <a href="lua.html" class="group flex flex-col items-center justify-center p-6 sm:p-8 rounded-2xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-sky-500 dark:hover:border-sky-500 shadow-sm hover:shadow-2xl transition-all duration-300 hover:-translate-y-1.5">
        <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-gradient-to-tr from-blue-700 to-sky-500 text-white font-extrabold text-xl sm:text-2xl flex items-center justify-center shadow-lg shadow-sky-500/25 group-hover:scale-110 transition-transform">
          Lua
        </div>
        <span class="mt-4 font-bold text-slate-800 dark:text-slate-100 text-lg group-hover:text-sky-600 dark:group-hover:text-sky-400 transition-colors">Lua</span>
        <span class="text-[11px] text-slate-400 dark:text-slate-500 font-mono">main.lua</span>
      </a>
    </div>
  </main>

  <script>
    function updateThemeUI(isDark) {
      if (isDark) {
        document.documentElement.classList.add('dark');
        document.getElementById('sunIcon').classList.remove('hidden');
        document.getElementById('moonIcon').classList.add('hidden');
        document.getElementById('themeLabel').textContent = 'Light Mode';
      } else {
        document.documentElement.classList.remove('dark');
        document.getElementById('sunIcon').classList.add('hidden');
        document.getElementById('moonIcon').classList.remove('hidden');
        document.getElementById('themeLabel').textContent = 'Dark Mode';
      }
    }

    function toggleGlobalTheme() {
      const isDark = !document.documentElement.classList.contains('dark');
      localStorage.setItem('blocks_ide_theme', isDark ? 'dark' : 'light');
      updateThemeUI(isDark);
    }

    // Initialize Theme on load
    (function() {
      const savedTheme = localStorage.getItem('blocks_ide_theme');
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const isDark = savedTheme ? savedTheme === 'dark' : prefersDark;
      updateThemeUI(isDark);
    })();
  </script>
</body>
</html>