readme change

examples/HelloElement/README.md

@@ -2,6 +2,8 @@
 
 This sample demonstrates how to use the HtmlElement class in Crafter.CppDOM.
 
+![](https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM/src/branch/master/examples/HelloWorld/HelloWorld.png)
+
 ## Features
 
 - Shows how to create and manipulate HTML elements

examples/HelloWorld/README.md

@@ -2,6 +2,8 @@
 
 This sample demonstrates a simple hello world application using Crafter.CppDOM.
 
+![](https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM/src/branch/master/examples/HelloWorld/HelloWorld.png)
+
 ## Usage
 
 ```cpp

examples/Website/README.md

@@ -0,0 +1,71 @@
+# Website Example
+
+This example demonstrates a full-stack web application using Crafter.CppDOM with both frontend and backend components.
+
+## Features
+
+- Shows how to create a complete web application with HTML/CSS/JavaScript frontend
+- Illustrates communication between frontend and backend using HTTP requests
+- Shows how to handle form inputs and dynamic content rendering
+- Demonstrates CRUD operations (Create, Read, Delete) for notes
+- Includes proper error handling and loading states
+
+## Usage
+
+The application consists of two components:
+
+1. **Frontend**: Handles UI rendering and user interactions
+2. **Backend**: Manages data storage and API endpoints
+
+### Frontend Code
+
+```cpp
+import Crafter.CppDOM;
+import std;
+using namespace Crafter;
+using namespace Crafter::CppDOMBindings;
+
+// Create the UI with HTML and CSS
+HtmlElementView* head = new HtmlElementView("head", R"(
+    <title>Note Taking App</title>
+    <style>
+        /* CSS styles for the application */
+    </style>
+)");
+    
+HtmlElementView* body = new HtmlElementView("body", R"(
+    <div class="app-container">
+        <h1>📝 Note Taking App</h1>
+        <!-- UI elements -->
+    </div>
+)");
+
+// Handle user interactions
+addNoteBtn->AddClickListener([&](MouseEvent event) {
+    std::string noteValue = noteInput->GetValue();
+    // Send note to backend
+    Fetch("http://localhost:3000/createNote", noteValue, [&noteValue](std::string content) {
+        // Update UI with new note
+        RenderNotes();
+    });
+});
+```
+
+## Building and Running
+
+First, start the backend server:
+```bash
+cd backend
+crafter-build build executable -r
+```
+
+Then start the frontend:
+```bash
+cd frontend
+crafter-build build executable
+./run.sh
+```
+
+Then navigate to `http://localhost:8080/` in your browser.
+
+If caddy is not installed, you can use your favorite static file server instead.

examples/Website/frontend/main.cpp

@@ -22,38 +22,40 @@ HtmlElementView* head = new HtmlElementView("head", R"(
         body {
             font-family: Arial, sans-serif;
             margin: 0 auto;
-            padding: 20px;
-            background-color: #f5f5f5;
+            background-color: #121212;
+            color: #e0e0e0;
             width: 100vw;
             height: 100vh;
             display: flex;
-            justify-content: center; /* Horizontal centering */
-            align-items: center;     /* Vertical centering */
+            justify-content: center;
+            align-items: center;
         }
         .app-container {
-            background-color: white;
+            background-color: #1e1e1e;
             padding: 20px;
             border-radius: 8px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
             width: 50vw;
             max-width: 600px;
         }
         h1 {
-            color: #333;
+            color: #ffffff;
             text-align: center;
         }
         .input-section {
             margin-bottom: 20px;
             padding: 15px;
-            background-color: #f9f9f9;
+            background-color: #2d2d2d;
             border-radius: 5px;
         }
         .input-section textarea {
             width: 100%;
             height: 80px;
-            border: 1px solid #ddd;
+            border: 1px solid #444;
             border-radius: 4px;
             resize: vertical;
+            background-color: #333;
+            color: #fff;
         }
         .input-section button {
             background-color: #4CAF50;
@@ -68,7 +70,7 @@ HtmlElementView* head = new HtmlElementView("head", R"(
             background-color: #45a049;
         }
         .notes-section h2 {
-            color: #555;
+            color: #ffffff;
             border-bottom: 2px solid #4CAF50;
             padding-bottom: 5px;
         }
@@ -78,7 +80,7 @@ HtmlElementView* head = new HtmlElementView("head", R"(
         .note-item {
             padding: 15px;
             margin-bottom: 10px;
-            background-color: #f0f8ff;
+            background-color: #2d2d2d;
             border-left: 4px solid #4CAF50;
             border-radius: 4px;
             display: flex;
@@ -88,6 +90,7 @@ HtmlElementView* head = new HtmlElementView("head", R"(
         .note-content {
             flex-grow: 1;
             word-wrap: break-word;
+            color: #e0e0e0;
         }
         .delete-btn {
             background-color: #f44336;
@@ -107,14 +110,14 @@ HtmlElementView* head = new HtmlElementView("head", R"(
             border-radius: 4px;
         }
         #error {
-            background-color: #ffebee;
-            color: #c62828;
-            border: 1px solid #ffcdd2;
+            background-color: #780000;
+            color: #ff9999;
+            border: 1px solid #ff5555;
         }
         #loading {
-            background-color: #e3f2fd;
-            color: #1565c0;
-            border: 1px solid #bbdefb;
+            background-color: #003366;
+            color: #99ccff;
+            border: 1px solid #6699cc;
         }
     </style>
 )");
@@ -215,7 +218,6 @@ void RenderNotes() {
     }
 }
 
-
 // Main function
 int main() {
     FetchNotes();
@@ -226,7 +228,8 @@ int main() {
         std::cout << noteValue << std::endl;
         if (!noteValue.empty()) {
             loadingIndicator->SetInnerHTML("<p>Saving note...</p>");
-            Fetch("http://localhost:3000/createNote", noteValue, [&noteValue](std::string content) {
+            Fetch("http://localhost:3000/createNote", noteValue, [noteValue](std::string content) {
+                std::cout << noteValue << std::endl;
                 notes->push_back({static_cast<std::uint32_t>(std::stoi(content)), noteValue});
                 noteInput->SetValue("");
                 RenderNotes();