Rename style.css to app.js

app.js

@@ -0,0 +1,83 @@
+// Initialize code tabs
+document.querySelectorAll('.code-tabs button').forEach(button => {
+  button.addEventListener('click', () => {
+    const tabId = button.getAttribute('data-tab');
+    const parent = button.parentElement.parentElement;
+    
+    // Update active tab button
+    parent.querySelectorAll('.code-tabs button').forEach(btn => {
+      btn.classList.remove('active');
+    });
+    button.classList.add('active');
+    
+    // Update active content
+    parent.querySelectorAll('.code-content').forEach(content => {
+      content.classList.remove('active');
+    });
+    parent.querySelector(`#${tabId}`).classList.add('active');
+  });
+});
+
+// Example runners
+document.querySelectorAll('.run-example').forEach(button => {
+  button.addEventListener('click', () => {
+    const exampleCard = button.closest('.example-card');
+    const outputDiv = exampleCard.querySelector('.example-output');
+    const code = exampleCard.querySelector('code').textContent;
+    
+    // Clear previous output
+    outputDiv.innerHTML = '';
+    
+    // Execute the example code
+    try {
+      // Create a function with the code and pass ARK to it
+      const func = new Function('ARK', code);
+      func(ARK);
+    } catch (error) {
+      outputDiv.textContent = `Error: ${error.message}`;
+    }
+  });
+});
+
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+  anchor.addEventListener('click', function(e) {
+    e.preventDefault();
+    document.querySelector(this.getAttribute('href')).scrollIntoView({
+      behavior: 'smooth'
+    });
+  });
+});
+
+// Create a demo element using ARKjs when page loads
+document.addEventListener('DOMContentLoaded', () => {
+  ARK.create('div')
+    .css({
+      position: 'fixed',
+      bottom: '20px',
+      right: '20px',
+      padding: '10px 15px',
+      backgroundColor: '#34a853',
+      color: 'white',
+      borderRadius: '4px',
+      boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
+      cursor: 'pointer'
+    })
+    .text('ARKjs is ready!')
+    .on('click', () => {
+      ARK.create('div')
+        .css({
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+          padding: '20px',
+          backgroundColor: 'white',
+          boxShadow: '0 0 20px rgba(0,0,0,0.3)',
+          zIndex: '1000'
+        })
+        .html('<h3>ARKjs Demo</h3><p>This modal was created with ARKjs!</p>')
+        .appendTo('body');
+    })
+    .appendTo('body');
+});

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}