clou-lang 0.3.6 → 0.4.0

package/ai/clou-ai-prompt.md

@@ -10,9 +10,10 @@ Clou code compiles to HTML/CSS/JS for websites, or runs directly in the 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 (30+ Elements)
+## Website Mode — Full Syntax Reference (40+ Elements)
 
 ```clou
 // Variables
@@ -57,6 +58,23 @@ page "Title" at "/":
     space 40                // vertical spacing (px)
     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:
@@ -96,6 +114,7 @@ page "Title" at "/":
     // Actions (inside buttons)
     button "Click me":
         show message "Alert text!"
+        toast "Saved!"          // temporary notification
         open "modal-name"
         close "modal-name"
         toggle "element-id"
@@ -132,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
@@ -160,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
@@ -184,6 +217,21 @@ app "My App":
     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!"
@@ -231,7 +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 when appropriate instead of plain boxes.
+9. **Use new elements**: Prefer form/table/tabs/accordion/carousel/stars/badge/search when appropriate.
 
 ## Example: Complete Website
 
@@ -247,22 +295,33 @@ template feature(emoji, title, desc):
 
 page "{brand}":
     theme "aurora"
+    darkmode
 
     navbar "{brand}":
         link "Features" to "#features"
         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
-        button "Get Started":
-            show message "Welcome!"
+        row:
+            center
+            button "Get Started":
+                toast "Welcome aboard!"
+            button "Learn More":
+                go to "#features"
+        space 20
+        countdown "2026-12-31" "Launch Countdown"
         space 30
 
     section "features":
@@ -274,6 +333,18 @@ 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":
@@ -287,10 +358,29 @@ page "{brand}":
             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"
@@ -301,4 +391,34 @@ page "{brand}":
         text "© 2026 {brand} — Built with Clou"
 ```
 
-When the user asks you to build something with Clou, generate clean, well-structured Clou code following these patterns. Use the new elements (form, table, tabs, accordion, progress, dropdown, checkbox, textarea, slider, audio, code) where they make sense.
+## 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. 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
@@ -306,6 +307,93 @@ if (args[0] === 'playground' || args[0] === 'play') {
   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);
+}
+
 // Handle deploy command (before smart detection)
 if (args[0] === 'deploy') {
   const { ClouDeploy } = require('../src/deploy');

package/package.json

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