clou-lang 0.3.5 → 0.4.0

package/ai/clou-ai-prompt.md

@@ -1,6 +1,6 @@
 # Clou Language - AI System Prompt
 
-You are an expert in the **Clou** programming language. Clou is a simple programming language designed to build websites and terminal apps. It's so simple that even kids can use it.
+You are an expert in the **Clou** programming language. Clou is the simplest programming language ever made — designed so even kids can build websites and terminal apps. Its motto: **"Describe it once. Run it everywhere."**
 
 ## How Clou Works
 
@@ -9,8 +9,11 @@ Clou code compiles to HTML/CSS/JS for websites, or runs directly in the terminal
 **Run:** `clou mysite.clou` (auto-detects website vs terminal)
 **Build:** `clou build mysite.clou`
 **Dev server:** `clou dev mysite.clou`
+**Deploy:** `clou deploy mysite.clou`
+**Init project:** `clou init my-project`
+**Playground:** `clou playground`
 
-## Website Mode — Full Syntax Reference
+## Website Mode — Full Syntax Reference (40+ Elements)
 
 ```clou
 // Variables
@@ -53,17 +56,70 @@ page "Title" at "/":
     link "text" to "url"    // anchor
     line                    // horizontal rule
     space 40                // vertical spacing (px)
-
-    // Interactive
+    code "let x = 1"        // code block
+    audio "song.mp3"        // audio player
+    badge "NEW"             // small colored label
+    avatar "photo.jpg"      // circular profile image
+    stars 4                 // star rating (0-5)
+    stars 4 "Great!"        // star rating with label
+    tooltip "Hover me" "Extra info shows on hover"
+    typing "Hello World"    // typewriter animation text
+    countdown "2026-12-31"  // live countdown timer
+    countdown "2026-12-31" "New Year"  // with label
+    embed "youtube.com/watch?v=..." // embed YouTube/iframe
+    search "Search..."      // search bar with icon
+    darkmode                // dark/light mode toggle button
+
+    // Carousel (image slider)
+    carousel:
+        image "slide1.jpg"
+        image "slide2.jpg"
+        image "slide3.jpg"
+
+    // Forms & Input
+    form:
+        input "placeholder"
+        textarea "Write here..."
+        checkbox "I agree"
+        dropdown "Country":
+            option "Germany"
+            option "USA"
+            option "Japan"
+        slider "Volume" 0 to 100
+        submit "Send"
+
+    // Data Display
+    table:
+        heading "Name, Role, Status"
+        row:
+            text "Alex"
+            text "Developer"
+            text "Active"
+
+    progress 75 "Loading..."
+
+    // Interactive Elements
+    tabs:
+        tab "Info":
+            text "Info content"
+        tab "Settings":
+            text "Settings content"
+
+    accordion:
+        panel "Question 1":
+            text "Answer 1"
+        panel "Question 2":
+            text "Answer 2"
+
+    // Actions (inside buttons)
     button "Click me":
         show message "Alert text!"
+        toast "Saved!"          // temporary notification
         open "modal-name"
         close "modal-name"
         toggle "element-id"
         go to "url"
 
-    input "placeholder"
-
     list:
         text "Item 1"
         text "Item 2"
@@ -95,7 +151,7 @@ style:
     font Arial
     size 18
     gradient #color1 to #color2
-    animate fade / slide / bounce / grow / glow
+    animate fade / slide / bounce / grow / glow / pulse / shake / float / typewrite
     big / huge / small / tiny
     full
     sticky
@@ -123,6 +179,20 @@ repeat 5:
 | `glass` | Glassmorphism, purple gradient |
 | `aurora` | Northern lights, cyan-purple |
 
+## Available Animations
+
+| Animation | Effect |
+|-----------|--------|
+| `fade` | Fade in from transparent |
+| `slide` | Slide up into view |
+| `bounce` | Bounce down into place |
+| `grow` | Scale up from small |
+| `glow` | Pulsing brightness (infinite) |
+| `pulse` | Scale pulse (infinite) |
+| `shake` | Horizontal shake |
+| `float` | Gentle floating up/down (infinite) |
+| `typewrite` | Typewriter reveal with cursor |
+
 ## Terminal Mode — Full Syntax Reference
 
 ```clou
@@ -142,6 +212,26 @@ app "My App":
     multiply 3 by count
     divide 2 by count
 
+    // Math operators
+    set result to 5 + 3
+    set total to 10 * 2
+    set half to 100 / 4
+
+    // Random
+    random 1 to 10 save as num
+
+    // HTTP Requests
+    fetch "https://api.example.com/data" save as response
+
+    // Interactive Menu
+    menu "Choose an option:":
+        option "Play Game":
+            print "Starting game..."
+        option "View Score":
+            print "Score: {score}"
+        option "Quit":
+            exit
+
     // Conditions
     if name is "Alex":
         print "Hi Alex!"
@@ -189,6 +279,7 @@ app "My App":
 6. **Templates**: Use templates for any repeated pattern (cards, sections, etc.)
 7. **Comments**: Use `//` for comments.
 8. **Keep it simple**: Clou's power is simplicity. Don't overcomplicate.
+9. **Use new elements**: Prefer form/table/tabs/accordion/carousel/stars/badge/search when appropriate.
 
 ## Example: Complete Website
 
@@ -204,22 +295,33 @@ template feature(emoji, title, desc):
 
 page "{brand}":
     theme "aurora"
+    darkmode
 
     navbar "{brand}":
         link "Features" to "#features"
-        link "Pricing" to "#pricing"
+        link "About" to "#about"
+        link "Contact" to "#contact"
 
     section "hero":
         center
         space 30
+        badge "NOW LIVE"
+        space 10
         heading "Build the Future":
             huge
             animate fade
         text "Simple tools for complex problems.":
             big
+        typing "Describe it once. Run it everywhere."
+        space 20
+        row:
+            center
+            button "Get Started":
+                toast "Welcome aboard!"
+            button "Learn More":
+                go to "#features"
         space 20
-        button "Get Started":
-            show message "Welcome!"
+        countdown "2026-12-31" "Launch Countdown"
         space 30
 
     section "features":
@@ -231,9 +333,92 @@ page "{brand}":
             use feature("⚡", "Fast", "Built for speed.")
             use feature("🔒", "Secure", "Safe by default.")
             use feature("🎨", "Beautiful", "Looks great.")
+        space 20
+        stars 5 "Rated by developers"
+
+    section "gallery":
+        center
+        heading "Screenshots":
+            huge
+        space 20
+        carousel:
+            image "screenshot1.jpg"
+            image "screenshot2.jpg"
+            image "screenshot3.jpg"
+
+    section "about":
+        heading "FAQ":
+            huge
+        space 20
+        accordion:
+            panel "What is {brand}?":
+                text "The simplest way to build software."
+            panel "How much does it cost?":
+                text "Free forever."
+            panel "How do I start?":
+                text "npm install -g clou-lang"
+
+    section "team":
+        center
+        heading "Our Team":
+            huge
+        space 20
+        grid:
+            card:
+                avatar "team1.jpg"
+                heading "Alex"
+                text "Founder"
+                stars 5
+            card:
+                avatar "team2.jpg"
+                heading "Sam"
+                text "Designer"
+                stars 4
+
+    section "contact":
+        center
+        heading "Get in Touch"
+        space 20
+        search "Search our docs..."
+        space 20
+        form:
+            input "Your name"
+            input "Your email"
+            textarea "Your message"
+            submit "Send Message"
 
     footer:
-        text "© 2026 {brand}"
+        text "© 2026 {brand} — Built with Clou"
+```
+
+## Example: Terminal App
+
+```clou
+app "Number Guessing Game":
+    print color cyan "=== Number Guessing Game ==="
+    random 1 to 100 save as secret
+    set tries to "0"
+    set won to "false"
+
+    while won is "false":
+        ask "Guess a number (1-100):" save as guess
+        add 1 to tries
+
+        if guess is secret:
+            set won to "true"
+            print color green "Correct! You won in {tries} tries!"
+        else:
+            if guess greater than secret:
+                print color yellow "Too high!"
+            else:
+                print color yellow "Too low!"
+
+    menu "Play again?":
+        option "Yes":
+            print "Restarting..."
+        option "No":
+            print "Goodbye!"
+            exit
 ```
 
-When the user asks you to build something with Clou, generate clean, well-structured Clou code following these patterns.
+When the user asks you to build something with Clou, generate clean, well-structured Clou code following these patterns. Use all available elements (40+) where they make sense.

package/bin/clou.js

@@ -18,7 +18,7 @@ const args = process.argv.slice(2);
 function printHelp() {
   console.log(`
   ╔═══════════════════════════════════════╗
-  ║         CLOU Language v0.3.5          ║
+  ║         CLOU Language v0.4.0          ║
   ║   Describe it once. Run everywhere.   ║
   ╚═══════════════════════════════════════╝
 
@@ -29,6 +29,7 @@ function printHelp() {
     clou build <file.clou> -o <output>  Build to specific file
     clou dev <file.clou>                Start live dev server
     clou dev <file.clou> -p <port>      Dev server on custom port
+    clou init <name>                    Create new project
     clou deploy <file.clou>             Deploy to the web (surge)
     clou deploy <file.clou> --github    Deploy to GitHub Pages
     clou deploy <file.clou> --netlify   Deploy with Netlify
@@ -91,10 +92,16 @@ function getOutputPath(inputFile, customOutput) {
 
 function openInBrowser(filePath) {
   const absPath = path.resolve(filePath);
-  const { exec } = require('child_process');
+  const { exec, execSync } = require('child_process');
 
   if (process.platform === 'win32') {
-    exec(`start "" "${absPath}"`);
+    // Use start command - escape path for Windows cmd
+    exec(`start "" "${absPath}"`, (err) => {
+      if (err) {
+        // Fallback: use explorer
+        exec(`explorer "${absPath}"`);
+      }
+    });
   } else if (process.platform === 'darwin') {
     exec(`open "${absPath}"`);
   } else {
@@ -256,9 +263,134 @@ if (args[0] === 'ai') {
 }
 
 if (args[0] === 'playground' || args[0] === 'play') {
-  const playgroundPath = path.resolve(__dirname, '..', 'playground', 'index.html');
-  console.log('  Opening Clou Playground...');
-  openInBrowser(playgroundPath);
+  const playgroundDir = path.resolve(__dirname, '..', 'playground');
+  const playgroundFile = path.join(playgroundDir, 'index.html');
+
+  if (!fs.existsSync(playgroundFile)) {
+    console.error('  Error: Playground files not found.');
+    process.exit(1);
+  }
+
+  // Start a simple HTTP server for the playground
+  const http = require('http');
+  const port = 4000;
+
+  const mimeTypes = {
+    '.html': 'text/html',
+    '.js': 'application/javascript',
+    '.css': 'text/css',
+  };
+
+  const server = http.createServer((req, res) => {
+    let filePath = path.join(playgroundDir, req.url === '/' ? 'index.html' : req.url);
+    const ext = path.extname(filePath);
+    const contentType = mimeTypes[ext] || 'text/plain';
+
+    fs.readFile(filePath, (err, data) => {
+      if (err) {
+        res.writeHead(404);
+        res.end('Not found');
+        return;
+      }
+      res.writeHead(200, { 'Content-Type': contentType });
+      res.end(data);
+    });
+  });
+
+  server.listen(port, () => {
+    console.log(`  Clou Playground running at http://localhost:${port}`);
+    console.log('  Press Ctrl+C to stop.\n');
+    openInBrowser(`http://localhost:${port}`);
+  });
+
+  // Don't exit - keep server running
+  return;
+}
+
+// Handle init command
+if (args[0] === 'init') {
+  const projectName = args[1] || 'my-clou-site';
+  const projectDir = path.resolve(projectName);
+
+  if (fs.existsSync(projectDir)) {
+    console.error(`  Error: Directory "${projectName}" already exists.`);
+    process.exit(1);
+  }
+
+  fs.mkdirSync(projectDir, { recursive: true });
+
+  const template = `set brand to "${projectName}"
+
+template feature(emoji, title, desc):
+    card:
+        icon "{emoji}"
+        heading "{title}"
+        text "{desc}"
+        animate slide
+
+page "{brand}":
+    theme "midnight"
+
+    navbar "{brand}":
+        link "Home" to "#"
+        link "About" to "#about"
+        link "Contact" to "#contact"
+
+    section "hero":
+        center
+        space 30
+        heading "Welcome to {brand}":
+            huge
+            animate fade
+        text "Built with Clou — the simplest language ever.":
+            big
+        space 20
+        button "Get Started":
+            show message "Let's go!"
+        space 30
+
+    section "about":
+        center
+        heading "Features":
+            huge
+        space 20
+        grid:
+            use feature("⚡", "Fast", "Builds in milliseconds.")
+            use feature("🎨", "Beautiful", "10 themes included.")
+            use feature("🚀", "Easy Deploy", "One command to go live.")
+
+    section "contact":
+        center
+        heading "Contact":
+            huge
+        space 20
+        form:
+            input "Your name"
+            input "Your email"
+            textarea "Your message"
+            submit "Send"
+
+    footer:
+        text "© 2026 {brand} — Built with Clou"
+`;
+
+  fs.writeFileSync(path.join(projectDir, 'index.clou'), template, 'utf-8');
+
+  console.log(`
+  ╔═══════════════════════════════════════╗
+  ║          CLOU Project Created!        ║
+  ╚═══════════════════════════════════════╝
+
+  Created: ${projectName}/index.clou
+
+  Next steps:
+    cd ${projectName}
+    clou index.clou          Build & open
+    clou dev index.clou      Live dev server
+    clou deploy index.clou   Deploy to the web
+
+  Happy building! 🚀
+`);
   process.exit(0);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clou-lang",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "description": "Clou - A programming language so simple, even kids can build websites and terminal apps",
   "main": "src/index.js",
   "bin": {