CodeX-AI-Toolkit/index.html at main · Gcalaone2005/CodeX-AI-Toolkit · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>CodeX AI Toolkit — Tools for Developers</title>
  <meta name="description" content="CodeX AI Toolkit — resume builder, QR generator, image compressor and more. Fast, intuitive, and privacy-first." />
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* small custom rules */
    .card-hover:hover { transform: translateY(-6px) scale(1.01); }
    .glass { background: rgba(255,255,255,0.6); backdrop-filter: blur(6px); }
  </style>
</head>

<body class="bg-gray-50 text-gray-800 antialiased">
  <!-- NAVBAR -->
  <nav class="bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600 text-white shadow-lg">
    <div class="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="p-2 rounded-lg bg-white/10">
          <span class="text-xl">⚡</span>
        </div>
        <div>
          <h1 class="font-bold text-lg">CodeX AI Toolkit</h1>
          <p class="text-xs opacity-80 -mt-1">Small tools, big productivity</p>
        </div>
      </div>

      <div class="flex items-center gap-3">
        <!-- Dark mode toggle -->
        <button id="themeBtn" aria-label="Toggle theme"
          class="px-3 py-1 rounded-md bg-white/10 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-white/40">
          🌙
        </button>
        <a href="https://github.com/Gcalaone2005" target="_blank"
          class="text-white/90 underline text-sm">GitHub</a>
      </div>
    </div>
  </nav>

  <!-- HERO -->
  <header class="max-w-6xl mx-auto px-4 mt-8">
    <div class="grid md:grid-cols-2 gap-8 items-center">
      <div>
        <h2 class="text-3xl md:text-4xl font-extrabold leading-tight">Tools that speed up your dev workflow.</h2>
        <p class="mt-3 text-gray-600 max-w-xl">Create polished resumes, generate QR codes, compress images, and more — all fast, offline-capable, and designed for developers.</p>

        <div class="mt-6 flex gap-3">
          <a href="#tools" class="inline-flex items-center gap-2 px-5 py-3 rounded-xl bg-indigo-600 text-white shadow hover:shadow-lg transition">
            🚀 Open Toolkit
          </a>
          <a href="#features" class="inline-flex items-center gap-2 px-4 py-3 rounded-xl bg-white/80 text-indigo-700 shadow-sm hover:shadow transition">
            Learn more
          </a>
        </div>

        <div class="mt-4 flex gap-3 text-sm text-gray-500">
          <div class="inline-flex items-center gap-2">
            <span class="rounded-full bg-green-100 px-2 py-1 text-green-800 text-xs">Fast</span>
            <span>Client-side</span>
          </div>
          <div class="inline-flex items-center gap-2">
            <span class="rounded-full bg-yellow-100 px-2 py-1 text-yellow-800 text-xs">Privacy</span>
            <span>No uploads required</span>
          </div>
        </div>
      </div>

      <!-- Illustration (SVG) -->
      <div class="hidden md:flex justify-center">
        <svg width="320" height="220" viewBox="0 0 320 220" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" y="0" width="320" height="220" rx="16" fill="url(#g)"/>
          <defs>
            <linearGradient id="g" x1="0" x2="1">
              <stop offset="0" stop-color="#7c3aed" stop-opacity="0.95"/>
              <stop offset="1" stop-color="#06b6d4" stop-opacity="0.9"/>
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  </header>

  <!-- SEARCH + TOOLS GRID -->
  <main id="tools" class="max-w-6xl mx-auto px-4 mt-10">
    <div class="mb-6">
      <label class="relative block">
        <span class="sr-only">Search tools</span>
        <input id="search" type="search" placeholder="Search tools (e.g., resume, qr, image)..."
          class="w-full py-3 px-4 rounded-xl border border-gray-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-300" />
      </label>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6" aria-live="polite">
      <!-- Resume -->
      <a href="resume-builder/index.html" class="card-hover transform transition duration-200 rounded-2xl shadow-lg p-6 bg-white glass border border-white/30 flex flex-col gap-3"
        role="button" aria-label="Resume Builder — Build and export PDF">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="p-3 rounded-lg bg-indigo-50">
              <!-- icon -->
              <svg width="24" height="24" fill="none" stroke="currentColor" class="text-indigo-600">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6M9 16h6M7 8h10M7 19h10"/>
              </svg>
            </div>
            <div>
              <h3 class="font-semibold text-lg">📄 Resume Builder</h3>
              <p class="text-sm text-gray-500">Create a professional resume and export to PDF in seconds.</p>
            </div>
          </div>
          <span class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded-full">Free</span>
        </div>
        <div class="mt-auto flex justify-between items-center text-sm text-gray-500">
          <span>Guided templates</span>
          <span class="opacity-70">3 steps</span>
        </div>
      </a>

      <!-- QR -->
      <a href="qr-generator/index.html" class="card-hover transform transition duration-200 rounded-2xl shadow-lg p-6 bg-white glass border border-white/30 flex flex-col gap-3"
        role="button" aria-label="QR Code Generator — Create QR codes">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="p-3 rounded-lg bg-amber-50">
              <svg width="24" height="24" fill="none" stroke="currentColor" class="text-amber-600">
                <rect x="3" y="3" width="6" height="6" rx="1"></rect>
                <rect x="15" y="15" width="6" height="6" rx="1"></rect>
                <rect x="3" y="15" width="6" height="6" rx="1"></rect>
                <rect x="15" y="3" width="6" height="6" rx="1"></rect>
              </svg>
            </div>
            <div>
              <h3 class="font-semibold text-lg">🔗 QR Code Generator</h3>
              <p class="text-sm text-gray-500">Generate QR codes for links, text, or contact cards.</p>
            </div>
          </div>
          <span class="text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded-full">Offline</span>
        </div>
        <div class="mt-auto flex justify-between items-center text-sm text-gray-500">
          <span>PNG / SVG</span>
          <span class="opacity-70">Customizable</span>
        </div>
      </a>

      <!-- Image compressor -->
      <a href="image-compressor/index.html" class="card-hover transform transition duration-200 rounded-2xl shadow-lg p-6 bg-white glass border border-white/30 flex flex-col gap-3"
        role="button" aria-label="Image Compressor — Reduce image size">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="p-3 rounded-lg bg-green-50">
              <svg width="24" height="24" fill="none" stroke="currentColor" class="text-green-600">
                <path d="M4 12h16"></path>
                <path d="M8 8l-4 4"></path>
                <path d="M16 8l4 4"></path>
              </svg>
            </div>
            <div>
              <h3 class="font-semibold text-lg">🖼️ Image Compressor</h3>
              <p class="text-sm text-gray-500">Compress images quickly and keep quality for web use.</p>
            </div>
          </div>
          <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Lossy/Lossless</span>
        </div>
        <div class="mt-auto flex justify-between items-center text-sm text-gray-500">
          <span>Drag & drop</span>
          <span class="opacity-70">Fast</span>
        </div>
      </a>
    </div>
  </main>

  <!-- FEATURES -->
  <section id="features" class="max-w-6xl mx-auto px-4 mt-12">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="p-4 bg-white rounded-xl shadow-sm text-center">
        <h4 class="font-semibold">⚡ Fast</h4>
        <p class="text-sm text-gray-500 mt-2">Most tools run client-side for instant results.</p>
      </div>
      <div class="p-4 bg-white rounded-xl shadow-sm text-center">
        <h4 class="font-semibold">🔒 Private</h4>
        <p class="text-sm text-gray-500 mt-2">Files stay in your browser unless you choose to download them.</p>
      </div>
      <div class="p-4 bg-white rounded-xl shadow-sm text-center">
        <h4 class="font-semibold">💾 Export</h4>
        <p class="text-sm text-gray-500 mt-2">Download PDFs, PNGs, or SVGs—no signup required.</p>
      </div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer class="max-w-6xl mx-auto px-4 mt-12 mb-10 text-center text-gray-500">
    <div class="py-6 border-t border-gray-100">
      <p>Made with ❤️ by <span class="font-semibold">Girish Chavan</span> · <span id="year"></span></p>
      <p class="text-sm mt-2">
        <a href="#" class="underline">Privacy</a> · <a href="#" class="underline">Docs</a> · <a href="#" class="underline">Contact</a>
      </p>
    </div>
  </footer>

  <script>
    // Simple theme toggle (persist in localStorage)
    const btn = document.getElementById('themeBtn');
    const root = document.documentElement;
    const stored = localStorage.getItem('cx-theme');
    if (stored === 'dark') document.documentElement.classList.add('dark');

    btn.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      localStorage.setItem('cx-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
    });

    // small search filter (client-side)
    document.getElementById('search').addEventListener('input', (e) => {
      const q = e.target.value.toLowerCase();
      document.querySelectorAll('[role="button"]').forEach(card => {
        const text = (card.innerText || '').toLowerCase();
        card.style.display = q && !text.includes(q) ? 'none' : 'flex';
      });
    });

    // set year
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</body>

</html>