3emibrahim/debugging-testing2
0
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>AIToolkit - Three Powerful AI Tools</title>
7 <style>
8 :root {
9 --primary: #4f46e5;
10 --primary-dark: #4338ca;
11 --secondary: #10b981;
12 --accent: #f97316;
13 --light: #f3f4f6;
14 --dark: #1f2937;
15 --gray: #9ca3af;
16 }
17
18 * {
19 margin: 0;
20 padding: 0;
21 box-sizing: border-box;
22 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
23 }
24
25 body {
26 background-color: #f9fafb;
27 color: var(--dark);
28 line-height: 1.6;
29 }
30
31 header {
32 background-color: white;
33 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
34 padding: 1rem 2rem;
35 position: sticky;
36 top: 0;
37 z-index: 10;
38 }
39
40 nav {
41 display: flex;
42 justify-content: space-between;
43 align-items: center;
44 max-width: 1200px;
45 margin: 0 auto;
46 }
47
48 .logo {
49 font-size: 1.5rem;
50 font-weight: 700;
51 color: var(--primary);
52 display: flex;
53 align-items: center;
54 gap: 0.5rem;
55 }
56
57 .nav-links {
58 display: flex;
59 gap: 2rem;
60 }
61
62 .nav-links a {
63 text-decoration: none;
64 color: var(--dark);
65 font-weight: 500;
66 transition: color 0.2s;
67 }
68
69 .nav-links a:hover {
70 color: var(--primary);
71 }
72
73 .cta-button {
74 background-color: var(--primary);
75 color: white;
76 padding: 0.5rem 1rem;
77 border-radius: 0.375rem;
78 font-weight: 500;
79 text-decoration: none;
80 transition: background-color 0.2s;
81 }
82
83 .cta-button:hover {
84 background-color: var(--primary-dark);
85 }
86
87 main {
88 max-width: 1200px;
89 margin: 0 auto;
90 padding: 2rem;
91 }
92
93 .hero {
94 text-align: center;
95 padding: 6rem 2rem;
96 background: linear-gradient(135deg, #f6f8fe 0%, #e9f1ff 100%);
97 border-radius: 16px;
98 margin-bottom: 3rem;
99 position: relative;
100 overflow: hidden;
101 display: flex;
102 flex-direction: column;
103 align-items: center;
104 }
105
106 .hero-content {
107 max-width: 800px;
108 z-index: 2;
109 }
110
111 .hero h1 {
112 font-size: 3.2rem;
113 font-weight: 800;
114 margin-bottom: 1.5rem;
115 color: var(--dark);
116 line-height: 1.2;
117 }
118
119 .highlight {
120 color: var(--primary);
121 position: relative;
122 }
123
124 .highlight::after {
125 content: "";
126 position: absolute;
127 bottom: -5px;
128 left: 0;
129 width: 100%;
130 height: 4px;
131 background-color: var(--secondary);
132 border-radius: 2px;
133 }
134
135 .hero p {
136 font-size: 1.4rem;
137 color: #4b5563;
138 max-width: 750px;
139 margin: 0 auto 2.5rem;
140 }
141
142 .cta-container {
143 display: flex;
144 gap: 1rem;
145 justify-content: center;
146 }
147
148 .cta-button {
149 background-color: var(--primary);
150 color: white;
151 padding: 0.9rem 2rem;
152 border-radius: 0.5rem;
153 font-weight: 600;
154 font-size: 1.1rem;
155 text-decoration: none;
156 transition: all 0.3s ease;
157 box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
158 }
159
160 .cta-button:hover {
161 background-color: var(--primary-dark);
162 transform: translateY(-3px);
163 box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
164 }
165
166 .secondary-link {
167 color: var(--primary);
168 text-decoration: none;
169 font-weight: 600;
170 padding: 0.9rem 1.5rem;
171 border: 2px solid var(--primary);
172 border-radius: 0.5rem;
173 transition: all 0.3s ease;
174 }
175
176 .secondary-link:hover {
177 background-color: rgba(79, 70, 229, 0.05);
178 }
179
180 .hero-visual {
181 position: absolute;
182 width: 100%;
183 height: 100%;
184 top: 0;
185 left: 0;
186 pointer-events: none;
187 }
188
189 .ai-icon {
190 position: absolute;
191 width: 60px;
192 height: 60px;
193 border-radius: 50%;
194 display: flex;
195 align-items: center;
196 justify-content: center;
197 color: white;
198 font-size: 1.6rem;
199 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
200 }
201
202 .ai-icon-1 {
203 background-color: var(--primary);
204 top: 20%;
205 left: 15%;
206 animation: float 6s ease-in-out infinite;
207 }
208
209 .ai-icon-2 {
210 background-color: var(--secondary);
211 top: 25%;
212 right: 15%;
213 animation: float 8s ease-in-out infinite 1s;
214 }
215
216 .ai-icon-3 {
217 background-color: var(--accent);
218 bottom: 20%;
219 right: 25%;
220 animation: float 7s ease-in-out infinite 0.5s;
221 }
222
223 .animate-title {
224 animation: fadeInUp 1s ease-out;
225 }
226
227 @keyframes float {
228 0% {
229 transform: translateY(0px);
230 }
231 50% {
232 transform: translateY(-15px);
233 }
234 100% {
235 transform: translateY(0px);
236 }
237 }
238
239 @keyframes fadeInUp {
240 from {
241 opacity: 0;
242 transform: translateY(20px);
243 }
244 to {
245 opacity: 1;
246 transform: translateY(0);
247 }
248 }
249
250 @media (max-width: 768px) {
251 .hero h1 {
252 font-size: 2.4rem;
253 }
254
255 .hero p {
256 font-size: 1.1rem;
257 }
258
259 .ai-icon {
260 width: 45px;
261 height: 45px;
262 }
263 }
264
265 .tools-container {
266 display: grid;
267 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
268 gap: 2.5rem;
269 max-width: 1200px;
270 margin: 4rem auto;
271 padding: 0 1rem;
272 }
273
274 .tool-card {
275 background-color: white;
276 border-radius: 1rem;
277 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
278 width: 100%;
279 overflow: hidden;
280 transition: transform 0.4s ease, box-shadow 0.4s ease;
281 border: 1px solid rgba(0, 0, 0, 0.04);
282 }
283
284 .tool-card:hover {
285 transform: translateY(-8px);
286 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
287 }
288
289 .tool-header {
290 padding: 2rem 1.75rem 1.5rem;
291 display: flex;
292 align-items: center;
293 gap: 1.25rem;
294 border-bottom: 1px solid rgba(0, 0, 0, 0.03);
295 }
296
297 .tool-icon {
298 width: 64px;
299 height: 64px;
300 border-radius: 16px;
301 display: flex;
302 align-items: center;
303 justify-content: center;
304 color: white;
305 font-size: 1.75rem;
306 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
307 position: relative;
308 overflow: hidden;
309 }
310
311 .tool-icon::after {
312 content: "";
313 position: absolute;
314 top: 0;
315 left: 0;
316 right: 0;
317 bottom: 0;
318 background: linear-gradient(
319 135deg,
320 rgba(255, 255, 255, 0.2) 0%,
321 rgba(255, 255, 255, 0) 100%
322 );
323 border-radius: inherit;
324 }
325
326 .text-gen-icon {
327 background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
328 }
329
330 .image-gen-icon {
331 background: linear-gradient(135deg, var(--secondary) 0%, #059669 100%);
332 }
333
334 .audio-trans-icon {
335 background: linear-gradient(135deg, var(--accent) 0%, #ea580c 100%);
336 }
337
338 .tool-title {
339 flex: 1;
340 }
341
342 .tool-title h2 {
343 font-size: 1.5rem;
344 margin-bottom: 0.5rem;
345 font-weight: 700;
346 color: var(--dark);
347 }
348
349 .tool-title p {
350 color: var(--gray);
351 font-size: 0.95rem;
352 line-height: 1.5;
353 }
354
355 .tool-body {
356 padding: 2rem 1.75rem;
357 }
358
359 .input-container {
360 margin-bottom: 1.5rem;
361 }
362
363 .input-container label {
364 display: block;
365 margin-bottom: 0.75rem;
366 font-weight: 600;
367 font-size: 0.95rem;
368 color: var(--dark);
369 }
370
371 textarea,
372 input {
373 width: 100%;
374 padding: 1rem;
375 border: 1px solid #e5e7eb;
376 border-radius: 0.75rem;
377 font-size: 0.95rem;
378 transition: border-color 0.2s, box-shadow 0.2s;
379 resize: none;
380 }
381
382 textarea:focus,
383 input:focus {
384 outline: none;
385 border-color: var(--primary);
386 box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
387 }
388
389 .file-input-container {
390 border: 2px dashed #e5e7eb;
391 border-radius: 0.75rem;
392 padding: 2rem 1.5rem;
393 text-align: center;
394 cursor: pointer;
395 margin-bottom: 1.5rem;
396 transition: all 0.3s ease;
397 background-color: rgba(243, 244, 246, 0.5);
398 }
399
400 .file-input-container:hover {
401 border-color: var(--primary);
402 background-color: rgba(79, 70, 229, 0.05);
403 }
404
405 .file-input-container svg {
406 margin-bottom: 1rem;
407 color: var(--gray);
408 transition: color 0.3s;
409 }
410
411 .file-input-container:hover svg {
412 color: var(--primary);
413 }
414
415 .file-input-container p {
416 margin-top: 0.5rem;
417 color: var(--gray);
418 font-size: 0.95rem;
419 }
420
421 .tool-button {
422 width: 100%;
423 padding: 1rem;
424 border: none;
425 border-radius: 0.75rem;
426 font-weight: 600;
427 font-size: 1rem;
428 color: white;
429 cursor: pointer;
430 transition: all 0.3s ease;
431 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
432 position: relative;
433 overflow: hidden;
434 }
435
436 .tool-button::after {
437 content: "";
438 position: absolute;
439 top: 0;
440 left: 0;
441 right: 0;
442 bottom: 0;
443 background: linear-gradient(
444 135deg,
445 rgba(255, 255, 255, 0.2) 0%,
446 rgba(255, 255, 255, 0) 100%
447 );
448 opacity: 0;
449 transition: opacity 0.3s;
450 }
451
452 .tool-button:hover {
453 transform: translateY(-3px);
454 box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
455 }
456
457 .tool-button:hover::after {
458 opacity: 1;
459 }
460
461 .tool-button:active {
462 transform: translateY(-1px);
463 }
464
465 .text-gen-button {
466 background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
467 }
468
469 .image-gen-button {
470 background: linear-gradient(135deg, var(--secondary) 0%, #059669 100%);
471 }
472
473 .audio-trans-button {
474 background: linear-gradient(135deg, var(--accent) 0%, #ea580c 100%);
475 }
476
477 .output-container {
478 margin-top: 2rem;
479 border: 1px solid #e5e7eb;
480 border-radius: 0.75rem;
481 padding: 1.5rem;
482 background-color: #f9fafb;
483 min-height: 120px;
484 transition: all 0.3s ease;
485 }
486
487 .output-container:hover {
488 border-color: var(--gray);
489 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
490 }
491
492 .features-section {
493 background-color: var(--light);
494 padding: 4rem 2rem;
495 text-align: center;
496 margin: 3rem 0;
497 }
498
499 .features-section h2 {
500 font-size: 2rem;
501 margin-bottom: 2rem;
502 }
503
504 .features-grid {
505 display: grid;
506 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
507 gap: 2rem;
508 max-width: 1200px;
509 margin: 0 auto;
510 }
511
512 .feature-card {
513 background-color: white;
514 padding: 2rem;
515 border-radius: 0.5rem;
516 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
517 }
518
519 .feature-icon {
520 width: 60px;
521 height: 60px;
522 border-radius: 50%;
523 margin: 0 auto 1rem;
524 display: flex;
525 align-items: center;
526 justify-content: center;
527 font-size: 1.5rem;
528 color: white;
529 }
530
531 .feature-card h3 {
532 margin-bottom: 1rem;
533 }
534
535 footer {
536 background-color: var(--dark);
537 color: white;
538 padding: 2rem;
539 text-align: center;
540 }
541
542 .footer-content {
543 max-width: 1200px;
544 margin: 0 auto;
545 display: flex;
546 flex-wrap: wrap;
547 justify-content: space-between;
548 gap: 2rem;
549 }
550
551 .footer-section {
552 flex: 1;
553 min-width: 200px;
554 }
555
556 .footer-section h3 {
557 margin-bottom: 1rem;
558 font-size: 1.25rem;
559 }
560
561 .footer-section a {
562 display: block;
563 color: var(--gray);
564 text-decoration: none;
565 margin-bottom: 0.5rem;
566 transition: color 0.2s;
567 }
568
569 .footer-section a:hover {
570 color: white;
571 }
572
573 .copyright {
574 margin-top: 2rem;
575 padding-top: 1rem;
576 border-top: 1px solid #374151;
577 color: var(--gray);
578 }
579
580 @media (max-width: 768px) {
581 .tools-container {
582 flex-direction: column;
583 align-items: center;
584 }
585
586 .nav-links {
587 display: none;
588 }
589 }
590 </style>
591 </head>
592 <body>
593 <header>
594 <nav>
595 <div class="logo">
596 <span>AIToolkit</span>
597 </div>
598 <div class="nav-links">
599 <a href="/">Home</a>
600 <a href="/features">Features</a>
601 <a href="/contact">Contact us</a>
602 <a href="/about">About</a>
603 </div>
604 </nav>
605 </header>
606
607 <main>
608 <section class="hero">
609 <div class="hero-content">
610 <h1 class="animate-title">
611 Three Powerful AI Tools
612 <span class="highlight">in One Platform</span>
613 </h1>
614 <p>
615 Generate text, create images, and transcribe audio with our
616 cutting-edge AI technology.
617 </p>
618 <div class="cta-container">
619 <a href="#" class="cta-button">Get Started</a>
620 <a href="#" class="secondary-link">See Demo</a>
621 </div>
622 </div>
623 <div class="hero-visual">
624 <div class="ai-icon ai-icon-1"><i class="fas fa-robot"></i></div>
625 <div class="ai-icon ai-icon-2"><i class="fas fa-brain"></i></div>
626 <div class="ai-icon ai-icon-3"><i class="fas fa-microchip"></i></div>
627 </div>
628 </section>
629
630 <div class="tools-container">
631 <!-- Text Generation Tool -->
632 <div class="tool-card">
633 <div class="tool-header">
634 <div class="tool-icon text-gen-icon">
635 <i class="fas fa-comments"></i>
636 </div>
637 <div class="tool-title">
638 <h2>Image & Document Chat</h2>
639 <p>Interactive AI-powered conversations with your files</p>
640 </div>
641 </div>
642 <div class="tool-body">
643 <button
644 class="tool-button text-gen-button"
645 onclick="window.location.href='/text-generator'"
646 >
647 Try now !
648 </button>
649 </div>
650 </div>
651
652 <!-- Image Generation Tool -->
653 <div class="tool-card">
654 <div class="tool-header">
655 <div class="tool-icon image-gen-icon">
656 <i class="fas fa-chart-pie"></i>
657 </div>
658 <div class="tool-title">
659 <h2>Data Visualization</h2>
660 <p>Transform your ideas into stunning visuals</p>
661 </div>
662 </div>
663 <div class="tool-body">
664 <button class="tool-button image-gen-button">Try now !</button>
665 </div>
666 </div>
667
668 <!-- Audio Transcription Tool -->
669 <div class="tool-card">
670 <div class="tool-header">
671 <div class="tool-icon audio-trans-icon">
672 <i class="fas fa-language"></i>
673 </div>
674 <div class="tool-title">
675 <h2>Document Translation</h2>
676 <p>Document Translation to any language.</p>
677 </div>
678 </div>
679 <div class="tool-body">
680 <button class="tool-button audio-trans-button">Try now !</button>
681 </div>
682 </div>
683 </div>
684 </main>
685
686 <footer>
687 <div class="footer-content">
688 <div class="footer-section">
689 <h3>AIToolkit</h3>
690 <p>Empowering creativity and productivity with advanced AI tools.</p>
691 </div>
692 <div class="footer-section">
693 <h3>Quick Links</h3>
694 <a href="/index">Home</a>
695 <a href="/features.html">Features</a>
696 <a href="#">Pricing</a>
697 <a href="/about">About Us</a>
698 </div>
699 <div class="footer-section">
700 <h3>Resources</h3>
701 <a href="#">Documentation</a>
702 <a href="#">Tutorials</a>
703 <a href="#">Blog</a>
704 <a href="#">API</a>
705 </div>
706 <div class="footer-section">
707 <h3>Support</h3>
708 <a href="/contact">Contact Us</a>
709 <a href="#">FAQs</a>
710 <a href="#">Privacy Policy</a>
711 <a href="#">Terms of Service</a>
712 </div>
713 </div>
714 <div class="copyright">
715 <p>© 2025 AIToolkit. All rights reserved.</p>
716 </div>
717 </footer>
718
719 <script>
720 // Basic JavaScript to make the file upload area interactive
721 const fileUploadArea = document.getElementById("file-upload-area");
722 const fileInput = document.getElementById("audio-upload");
723
724 fileUploadArea.addEventListener("click", () => {
725 fileInput.click();
726 });
727
728 fileInput.addEventListener("change", () => {
729 if (fileInput.files.length > 0) {
730 fileUploadArea.style.borderColor = "var(--accent)";
731 fileUploadArea.querySelector(
732 "p"
733 ).textContent = `File selected: ${fileInput.files[0].name}`;
734 }
735 });
736
737 // Prevent default drag behaviors
738 ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
739 fileUploadArea.addEventListener(eventName, preventDefaults, false);
740 document.body.addEventListener(eventName, preventDefaults, false);
741 });
742
743 // Highlight drop area when item is dragged over it
744 ["dragenter", "dragover"].forEach((eventName) => {
745 fileUploadArea.addEventListener(eventName, highlight, false);
746 });
747
748 ["dragleave", "drop"].forEach((eventName) => {
749 fileUploadArea.addEventListener(eventName, unhighlight, false);
750 });
751
752 // Handle dropped files
753 fileUploadArea.addEventListener("drop", handleDrop, false);
754
755 function preventDefaults(e) {
756 e.preventDefault();
757 e.stopPropagation();
758 }
759
760 function highlight() {
761 fileUploadArea.style.borderColor = "var(--accent)";
762 }
763
764 function unhighlight() {
765 fileUploadArea.style.borderColor = "#e5e7eb";
766 }
767
768 function handleDrop(e) {
769 const dt = e.dataTransfer;
770 const files = dt.files;
771
772 if (files.length > 0) {
773 fileInput.files = files;
774 fileUploadArea.querySelector(
775 "p"
776 ).textContent = `File selected: ${files[0].name}`;
777 }
778 }
779
780 // Simple demo functionality for the buttons
781 document
782 .querySelector(".text-gen-button")
783 .addEventListener("click", function () {
784 const textPrompt = document.getElementById("text-prompt").value;
785 if (textPrompt.trim() !== "") {
786 const outputContainer = this.nextElementSibling;
787 outputContainer.innerHTML = "<p>Processing your request...</p>";
788
789 // Simulate API call with timeout
790 setTimeout(() => {
791 outputContainer.innerHTML =
792 "<p>Once upon a time in the vast expanse of space, Captain Aria discovered a planet unlike any other. Its atmosphere shimmered with particles that seemed to respond to human emotion...</p>";
793 }, 1500);
794 }
795 });
796
797 document
798 .querySelector(".image-gen-button")
799 .addEventListener("click", function () {
800 const imagePrompt = document.getElementById("image-prompt").value;
801 if (imagePrompt.trim() !== "") {
802 const outputContainer = this.nextElementSibling;
803 outputContainer.innerHTML = "<p>Generating your image...</p>";
804
805 // Simulate API call with timeout
806 setTimeout(() => {
807 outputContainer.querySelector("p").style.display = "none";
808 outputContainer.querySelector("img").style.display = "block";
809 }, 2000);
810 }
811 });
812
813 document
814 .querySelector(".audio-trans-button")
815 .addEventListener("click", function () {
816 if (fileInput.files.length > 0) {
817 const outputContainer = this.nextElementSibling;
818 outputContainer.innerHTML = "<p>Transcribing your audio...</p>";
819
820 // Simulate API call with timeout
821 setTimeout(() => {
822 outputContainer.innerHTML =
823 "<p>Thank you for using our AI transcription service. This is a sample of what your transcribed text would look like. Our AI model can accurately detect speakers, punctuation, and even handle background noise.</p>";
824 }, 2500);
825 } else {
826 alert("Please select an audio file first");
827 }
828 });
829 </script>
830 <link
831 rel="stylesheet"
832 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
833 integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
834 crossorigin="anonymous"
835 referrerpolicy="no-referrer"
836 />
837 </body>
838</html>
839