Hugging Face's logo

Spaces:
Wayz22
/
quacky-code-conjurer
Running

App Files Community
Wayz22 commited on
Commit
c3c8feb
·
verified ·
1 Parent(s): 1af3374

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quacky Code Conjurer</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
#vanta-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
</head>
<body class="min-h-screen flex flex-col bg-gray-50">
<div id="vanta-bg"></div>
<custom-navbar></custom-navbar>

<main class="flex-grow container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto bg-white/90 backdrop-blur-sm rounded-xl shadow-lg overflow-hidden p-8">
<div class="text-center mb-10">
<h1 class="text-5xl font-bold text-gray-800 mb-4">Quacky Code Conjurer 🦆</h1>
<p class="text-xl text-gray-600">Generate magical duck-themed scripts with a quack!</p>
</div>

<div class="grid md:grid-cols-2 gap-8">
<div class="bg-yellow-50 p-6 rounded-lg border-2 border-yellow-200">
<h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
<i data-feather="code" class="mr-2"></i> Generate Script
</h2>
<div class="space-y-4">
<div>
<label class="block text-gray-700 mb-2">Script Type</label>
<select class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400">
<option>Bash Script</option>
<option>Python Script</option>
<option>JavaScript</option>
<option>Ducky Script</option>
</select>
</div>
<div>
<label class="block text-gray-700 mb-2">Description</label>
<textarea class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400" rows="3" placeholder="What should your script do?"></textarea>
</div>
<button class="w-full bg-yellow-400 hover:bg-yellow-500 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
<i data-feather="zap" class="mr-2"></i> Conjure Script
</button>
</div>
</div>

<div class="bg-blue-50 p-6 rounded-lg border-2 border-blue-200">
<h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
<i data-feather="file-text" class="mr-2"></i> Script Output
</h2>
<div class="bg-gray-800 rounded-lg p-4 h-64 overflow-auto">
<pre class="text-green-400 font-mono text-sm"><code id="output-code"># Your generated script will appear here...
# Example:
# echo "Quack! Hello World 🦆"</code></pre>
</div>
<div class="mt-4 flex space-x-3">
<button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
<i data-feather="copy" class="mr-2"></i> Copy
</button>
<button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
<i data-feather="download" class="mr-2"></i> Download
</button>
</div>
</div>
</div>
</div>
</main>

<custom-footer></custom-footer>

<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0xffd700,
backgroundColor: 0xf8fafc,
size: 0.8
});
</script>
</body>
</html>

Files changed (7) hide show
  1. README.md +8 -5
  2. about.html +81 -0
  3. components/footer.js +111 -0
  4. components/navbar.js +67 -0
  5. index.html +104 -19
  6. script.js +40 -0
  7. style.css +18 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Quacky Code Conjurer
3
- emoji: ⚡
4
- colorFrom: purple
5
- colorTo: indigo
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: Quacky Code Conjurer 🦆
3
+ colorFrom: yellow
4
+ colorTo: yellow
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).
about.html ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>About - Quacky Code Conjurer</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ </head>
12
+ <body class="min-h-screen flex flex-col bg-gray-50">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <main class="flex-grow container mx-auto px-4 py-12">
16
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
17
+ <div class="bg-yellow-400 p-8 text-center">
18
+ <h1 class="text-4xl font-bold text-gray-900">About Quacky Code Conjurer</h1>
19
+ <p class="text-xl text-gray-800 mt-2">Magical script generation with a ducky twist!</p>
20
+ </div>
21
+
22
+ <div class="p-8 space-y-8">
23
+ <div class="flex flex-col md:flex-row gap-8 items-center">
24
+ <div class="md:w-1/2">
25
+ <img src="http://static.photos/yellow/640x360/42" alt="Quacky duck" class="rounded-lg shadow-md w-full floating-duck">
26
+ </div>
27
+ <div class="md:w-1/2">
28
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Our Mission</h2>
29
+ <p class="text-gray-600 leading-relaxed">
30
+ Quacky Code Conjurer was born from the simple idea that coding should be fun, accessible, and yes - a little bit ducky!
31
+ We believe that every developer deserves a magical assistant to help generate those repetitive scripts,
32
+ with a touch of humor and whimsy along the way.
33
+ </p>
34
+ </div>
35
+ </div>
36
+
37
+ <div class="bg-yellow-50 p-6 rounded-lg border-l-4 border-yellow-400">
38
+ <div class="flex items-start">
39
+ <i data-feather="zap" class="text-yellow-500 mr-4 mt-1"></i>
40
+ <div>
41
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">How It Works</h3>
42
+ <p class="text-gray-600">
43
+ Simply describe what you need your script to do, select the language, and let our magical ducks
44
+ conjure up the perfect code snippet for you. Our system uses advanced duck-powered algorithms
45
+ (okay, maybe some AI too) to generate clean, functional scripts in seconds.
46
+ </p>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="grid md:grid-cols-3 gap-6">
52
+ <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-yellow-400">
53
+ <i data-feather="code" class="text-yellow-500 text-3xl mb-4"></i>
54
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Multiple Languages</h3>
55
+ <p class="text-gray-600">Generate scripts in Bash, Python, JavaScript, and even Ducky Script!</p>
56
+ </div>
57
+ <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-blue-400">
58
+ <i data-feather="cloud-lightning" class="text-blue-500 text-3xl mb-4"></i>
59
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Fast Generation</h3>
60
+ <p class="text-gray-600">Get your scripts instantly with our high-speed duck-powered servers.</p>
61
+ </div>
62
+ <div class="bg-white p-6 rounded-lg shadow-md border-t-4 border-green-400">
63
+ <i data-feather="feather" class="text-green-500 text-3xl mb-4"></i>
64
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">Ducky Features</h3>
65
+ <p class="text-gray-600">Enjoy random duck-themed comments and fun surprises in your generated code.</p>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </main>
71
+
72
+ <custom-footer></custom-footer>
73
+
74
+ <script src="components/navbar.js"></script>
75
+ <script src="components/footer.js"></script>
76
+ <script src="script.js"></script>
77
+ <script>
78
+ feather.replace();
79
+ </script>
80
+ </body>
81
+ </html>
components/footer.js ADDED
@@ -0,0 +1,111 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: #1a202c;
8
+ color: white;
9
+ padding: 2rem;
10
+ text-align: center;
11
+ margin-top: auto;
12
+ }
13
+ .footer-content {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ display: grid;
17
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
18
+ gap: 2rem;
19
+ text-align: left;
20
+ }
21
+ .footer-section h3 {
22
+ font-size: 1.25rem;
23
+ margin-bottom: 1rem;
24
+ color: #f6e05e;
25
+ }
26
+ .footer-section ul {
27
+ list-style: none;
28
+ padding: 0;
29
+ margin: 0;
30
+ }
31
+ .footer-section li {
32
+ margin-bottom: 0.5rem;
33
+ }
34
+ .footer-section a {
35
+ color: #cbd5e0;
36
+ text-decoration: none;
37
+ transition: color 0.2s;
38
+ }
39
+ .footer-section a:hover {
40
+ color: #f6e05e;
41
+ }
42
+ .social-links {
43
+ display: flex;
44
+ gap: 1rem;
45
+ margin-top: 1rem;
46
+ }
47
+ .social-links a {
48
+ color: white;
49
+ background: #2d3748;
50
+ width: 36px;
51
+ height: 36px;
52
+ border-radius: 50%;
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ transition: all 0.2s;
57
+ }
58
+ .social-links a:hover {
59
+ background: #f6e05e;
60
+ color: #1a202c;
61
+ transform: translateY(-2px);
62
+ }
63
+ .copyright {
64
+ margin-top: 2rem;
65
+ padding-top: 2rem;
66
+ border-top: 1px solid #2d3748;
67
+ color: #a0aec0;
68
+ font-size: 0.875rem;
69
+ }
70
+ @media (max-width: 768px) {
71
+ .footer-content {
72
+ grid-template-columns: 1fr;
73
+ }
74
+ }
75
+ </style>
76
+ <footer>
77
+ <div class="footer-content">
78
+ <div class="footer-section">
79
+ <h3>Quacky Code Conjurer</h3>
80
+ <p>Making coding magical and ducky since 2024. Generate scripts with a quack!</p>
81
+ <div class="social-links">
82
+ <a href="#"><i data-feather="twitter"></i></a>
83
+ <a href="#"><i data-feather="github"></i></a>
84
+ <a href="#"><i data-feather="linkedin"></i></a>
85
+ </div>
86
+ </div>
87
+ <div class="footer-section">
88
+ <h3>Quick Links</h3>
89
+ <ul>
90
+ <li><a href="/">Home</a></li>
91
+ <li><a href="/about.html">About</a></li>
92
+ <li><a href="/saved.html">Saved Scripts</a></li>
93
+ </ul>
94
+ </div>
95
+ <div class="footer-section">
96
+ <h3>Resources</h3>
97
+ <ul>
98
+ <li><a href="#">Documentation</a></li>
99
+ <li><a href="#">API Reference</a></li>
100
+ <li><a href="#">GitHub Repository</a></li>
101
+ </ul>
102
+ </div>
103
+ </div>
104
+ <div class="copyright">
105
+ <p>&copy; 2024 Quacky Code Conjurer. All rights reserved. Made with 🦆 and ❤️</p>
106
+ </div>
107
+ </footer>
108
+ `;
109
+ }
110
+ }
111
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: linear-gradient(135deg, #f6e05e 0%, #f59e0b 100%);
8
+ padding: 1rem 2rem;
9
+ display: flex;
10
+ justify-content: space-between;
11
+ align-items: center;
12
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .logo {
15
+ color: #1a202c;
16
+ font-weight: bold;
17
+ font-size: 1.5rem;
18
+ display: flex;
19
+ align-items: center;
20
+ gap: 0.5rem;
21
+ }
22
+ ul {
23
+ display: flex;
24
+ gap: 1.5rem;
25
+ list-style: none;
26
+ margin: 0;
27
+ padding: 0;
28
+ }
29
+ a {
30
+ color: #1a202c;
31
+ text-decoration: none;
32
+ font-weight: 500;
33
+ transition: all 0.2s;
34
+ display: flex;
35
+ align-items: center;
36
+ gap: 0.3rem;
37
+ }
38
+ a:hover {
39
+ color: #4a5568;
40
+ transform: translateY(-2px);
41
+ }
42
+ @media (max-width: 768px) {
43
+ nav {
44
+ flex-direction: column;
45
+ gap: 1rem;
46
+ }
47
+ ul {
48
+ width: 100%;
49
+ justify-content: space-around;
50
+ }
51
+ }
52
+ </style>
53
+ <nav>
54
+ <a href="/" class="logo">
55
+ <i data-feather="code"></i>
56
+ Quacky Code
57
+ </a>
58
+ <ul>
59
+ <li><a href="/"><i data-feather="home"></i> Home</a></li>
60
+ <li><a href="/about.html"><i data-feather="info"></i> About</a></li>
61
+ <li><a href="/saved.html"><i data-feather="save"></i> Saved Scripts</a></li>
62
+ </ul>
63
+ </nav>
64
+ `;
65
+ }
66
+ }
67
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,104 @@
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>Quacky Code Conjurer</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <style>
13
+ #vanta-bg {
14
+ position: absolute;
15
+ top: 0;
16
+ left: 0;
17
+ width: 100%;
18
+ height: 100%;
19
+ z-index: -1;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="min-h-screen flex flex-col bg-gray-50">
24
+ <div id="vanta-bg"></div>
25
+ <custom-navbar></custom-navbar>
26
+
27
+ <main class="flex-grow container mx-auto px-4 py-12">
28
+ <div class="max-w-4xl mx-auto bg-white/90 backdrop-blur-sm rounded-xl shadow-lg overflow-hidden p-8">
29
+ <div class="text-center mb-10">
30
+ <h1 class="text-5xl font-bold text-gray-800 mb-4">Quacky Code Conjurer 🦆</h1>
31
+ <p class="text-xl text-gray-600">Generate magical duck-themed scripts with a quack!</p>
32
+ </div>
33
+
34
+ <div class="grid md:grid-cols-2 gap-8">
35
+ <div class="bg-yellow-50 p-6 rounded-lg border-2 border-yellow-200">
36
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
37
+ <i data-feather="code" class="mr-2"></i> Generate Script
38
+ </h2>
39
+ <div class="space-y-4">
40
+ <div>
41
+ <label class="block text-gray-700 mb-2">Script Type</label>
42
+ <select class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400">
43
+ <option>Bash Script</option>
44
+ <option>Python Script</option>
45
+ <option>JavaScript</option>
46
+ <option>Ducky Script</option>
47
+ </select>
48
+ </div>
49
+ <div>
50
+ <label class="block text-gray-700 mb-2">Description</label>
51
+ <textarea class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-yellow-400 focus:border-yellow-400" rows="3" placeholder="What should your script do?"></textarea>
52
+ </div>
53
+ <button class="w-full bg-yellow-400 hover:bg-yellow-500 text-gray-800 font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
54
+ <i data-feather="zap" class="mr-2"></i> Conjure Script
55
+ </button>
56
+ </div>
57
+ </div>
58
+
59
+ <div class="bg-blue-50 p-6 rounded-lg border-2 border-blue-200">
60
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
61
+ <i data-feather="file-text" class="mr-2"></i> Script Output
62
+ </h2>
63
+ <div class="bg-gray-800 rounded-lg p-4 h-64 overflow-auto">
64
+ <pre class="text-green-400 font-mono text-sm"><code id="output-code"># Your generated script will appear here...
65
+ # Example:
66
+ # echo "Quack! Hello World 🦆"</code></pre>
67
+ </div>
68
+ <div class="mt-4 flex space-x-3">
69
+ <button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
70
+ <i data-feather="copy" class="mr-2"></i> Copy
71
+ </button>
72
+ <button class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
73
+ <i data-feather="download" class="mr-2"></i> Download
74
+ </button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </main>
80
+
81
+ <custom-footer></custom-footer>
82
+
83
+ <script src="components/navbar.js"></script>
84
+ <script src="components/footer.js"></script>
85
+ <script src="script.js"></script>
86
+ <script>
87
+ feather.replace();
88
+ VANTA.GLOBE({
89
+ el: "#vanta-bg",
90
+ mouseControls: true,
91
+ touchControls: true,
92
+ gyroControls: false,
93
+ minHeight: 200.00,
94
+ minWidth: 200.00,
95
+ scale: 1.00,
96
+ scaleMobile: 1.00,
97
+ color: 0xffd700,
98
+ backgroundColor: 0xf8fafc,
99
+ size: 0.8
100
+ });
101
+ </script>
102
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
103
+ </body>
104
+ </html>
script.js ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Shared JavaScript across all pages
2
+ document.addEventListener('DOMContentLoaded', () => {
3
+ // Example functionality for the code generator
4
+ const generateBtn = document.querySelector('.bg-yellow-400');
5
+ const outputCode = document.getElementById('output-code');
6
+
7
+ if (generateBtn && outputCode) {
8
+ generateBtn.addEventListener('click', () => {
9
+ const scriptTypes = [
10
+ `#!/bin/bash\necho "Quack! Your bash script is ready 🦆"\n# This script was magically generated by Quacky Code Conjurer`,
11
+ `# Python script\ndef quack():\n print("Quack! Hello from Python 🦆")\n\nquack()`,
12
+ `// JavaScript\nconsole.log("Quack! JavaScript magic happening 🦆");\n// Try refreshing for a new ducky script!`,
13
+ `REM Ducky Script\nDELAY 1000\nSTRING Quack! This is a rubber ducky script 🦆\nENTER`
14
+ ];
15
+
16
+ const randomScript = scriptTypes[Math.floor(Math.random() * scriptTypes.length)];
17
+ outputCode.textContent = randomScript;
18
+
19
+ // Feather icons replacement for dynamically added elements
20
+ feather.replace();
21
+ });
22
+ }
23
+
24
+ // Copy button functionality
25
+ const copyBtn = document.querySelector('.bg-blue-500');
26
+ if (copyBtn) {
27
+ copyBtn.addEventListener('click', () => {
28
+ const code = outputCode.textContent;
29
+ navigator.clipboard.writeText(code).then(() => {
30
+ const originalText = copyBtn.innerHTML;
31
+ copyBtn.innerHTML = '<i data-feather="check" class="mr-2"></i> Copied!';
32
+ feather.replace();
33
+ setTimeout(() => {
34
+ copyBtn.innerHTML = originalText;
35
+ feather.replace();
36
+ }, 2000);
37
+ });
38
+ });
39
+ }
40
+ });
style.css CHANGED
@@ -1,28 +1,28 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
1
+ /* Shared styles across all pages */
2
  body {
3
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 
4
  }
5
 
6
+ @keyframes float {
7
+ 0% { transform: translateY(0px); }
8
+ 50% { transform: translateY(-10px); }
9
+ 100% { transform: translateY(0px); }
10
  }
11
 
12
+ .floating-duck {
13
+ animation: float 3s ease-in-out infinite;
 
 
 
14
  }
15
 
16
+ pre::-webkit-scrollbar {
17
+ height: 6px;
18
+ width: 6px;
 
 
 
19
  }
20
 
21
+ pre::-webkit-scrollbar-track {
22
+ background: #1a202c;
23
  }
24
+
25
+ pre::-webkit-scrollbar-thumb {
26
+ background-color: #4a5568;
27
+ border-radius: 20px;
28
+ }