examples/HelloElement/README.md

@@ -2,8 +2,6 @@
 
 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,8 +2,6 @@
 
 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

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