diff --git a/examples/HelloElement/README.md b/examples/HelloElement/README.md
index fb06a68..1a4ec5a 100644
--- a/examples/HelloElement/README.md
+++ b/examples/HelloElement/README.md
@@ -2,8 +2,6 @@
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 ffc4b68..34004ee 100644
--- a/examples/HelloWorld/README.md
+++ b/examples/HelloWorld/README.md
@@ -2,8 +2,6 @@
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
deleted file mode 100644
index af8d3fa..0000000
--- a/examples/Website/README.md
+++ /dev/null
@@ -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"(
- 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
deleted file mode 100644
index cad2698..0000000
Binary files a/examples/Website/Website.png and /dev/null differ
diff --git a/examples/Website/frontend/main.cpp b/examples/Website/frontend/main.cpp
index 739b334..6eaaca7 100644
--- a/examples/Website/frontend/main.cpp
+++ b/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;
}
)");
@@ -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("Saving note...
");
- Fetch("http://localhost:3000/createNote", noteValue, [noteValue](std::string content) {
- std::cout << noteValue << std::endl;
+ Fetch("http://localhost:3000/createNote", noteValue, [¬eValue](std::string content) {
notes->push_back({static_cast(std::stoi(content)), noteValue});
noteInput->SetValue("");
RenderNotes();
diff --git a/hello.png b/hello.png
new file mode 100644
index 0000000..6e85a78
Binary files /dev/null and b/hello.png differ