diff --git a/examples/HelloElement/README.md b/examples/HelloElement/README.md
index 1a4ec5a..fb06a68 100644
--- a/examples/HelloElement/README.md
+++ b/examples/HelloElement/README.md
@@ -2,6 +2,8 @@
This sample demonstrates how to use the HtmlElement class in Crafter.CppDOM.
+
+
## Features
- Shows how to create and manipulate HTML elements
diff --git a/examples/HelloWorld/README.md b/examples/HelloWorld/README.md
index 34004ee..ffc4b68 100644
--- a/examples/HelloWorld/README.md
+++ b/examples/HelloWorld/README.md
@@ -2,6 +2,8 @@
This sample demonstrates a simple hello world application using Crafter.CppDOM.
+
+
## Usage
```cpp
diff --git a/examples/Website/README.md b/examples/Website/README.md
new file mode 100644
index 0000000..af8d3fa
--- /dev/null
+++ b/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"(
+ Note Taking App
+
+)");
+
+HtmlElementView* body = new HtmlElementView("body", R"(
+
+
📝 Note Taking App
+
+
+)");
+
+// Handle user interactions
+addNoteBtn->AddClickListener([&](MouseEvent event) {
+ std::string noteValue = noteInput->GetValue();
+ // Send note to backend
+ Fetch("http://localhost:3000/createNote", noteValue, [¬eValue](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.
\ No newline at end of file
diff --git a/examples/Website/Website.png b/examples/Website/Website.png
new file mode 100644
index 0000000..cad2698
Binary files /dev/null and b/examples/Website/Website.png differ
diff --git a/examples/Website/frontend/main.cpp b/examples/Website/frontend/main.cpp
index 6eaaca7..739b334 100644
--- a/examples/Website/frontend/main.cpp
+++ b/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;
}
)");
@@ -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("Saving note...
");
- Fetch("http://localhost:3000/createNote", noteValue, [¬eValue](std::string content) {
+ Fetch("http://localhost:3000/createNote", noteValue, [noteValue](std::string content) {
+ std::cout << noteValue << std::endl;
notes->push_back({static_cast(std::stoi(content)), noteValue});
noteInput->SetValue("");
RenderNotes();
diff --git a/hello.png b/hello.png
deleted file mode 100644
index 6e85a78..0000000
Binary files a/hello.png and /dev/null differ