Catcrafts/Crafter.CppDOM
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

website dark mode

Browse source
This commit is contained in:
Jorijn van der Graaf 2025-11-12 17:52:46 +01:00
commit d5ab5faaf8
1 changed files with 20 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

36
examples/Website/frontend/main.cpp
View file

@ -23,37 +23,40 @@ HtmlElementView* head = new HtmlElementView("head", R"(
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
background-color: #f5f5f5; background-color: #121212;
color: #e0e0e0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; /* Horizontal centering */ justify-content: center;
align-items: center; /* Vertical centering */ align-items: center;
} }
.app-container { .app-container {
background-color: white; background-color: #1e1e1e;
padding: 20px; padding: 20px;
border-radius: 8px; 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; width: 50vw;
max-width: 600px; max-width: 600px;
} }
h1 { h1 {
color: #333; color: #ffffff;
text-align: center; text-align: center;
} }
.input-section { .input-section {
margin-bottom: 20px; margin-bottom: 20px;
padding: 15px; padding: 15px;
background-color: #f9f9f9; background-color: #2d2d2d;
border-radius: 5px; border-radius: 5px;
} }
.input-section textarea { .input-section textarea {
width: 100%; width: 100%;
height: 80px; height: 80px;
border: 1px solid #ddd; border: 1px solid #444;
border-radius: 4px; border-radius: 4px;
resize: vertical; resize: vertical;
background-color: #333;
color: #fff;
} }
.input-section button { .input-section button {
background-color: #4CAF50; background-color: #4CAF50;
@ -68,7 +71,7 @@ HtmlElementView* head = new HtmlElementView("head", R"(
background-color: #45a049; background-color: #45a049;
} }
.notes-section h2 { .notes-section h2 {
color: #555; color: #ffffff;
border-bottom: 2px solid #4CAF50; border-bottom: 2px solid #4CAF50;
padding-bottom: 5px; padding-bottom: 5px;
} }
@ -78,7 +81,7 @@ HtmlElementView* head = new HtmlElementView("head", R"(
.note-item { .note-item {
padding: 15px; padding: 15px;
margin-bottom: 10px; margin-bottom: 10px;
background-color: #f0f8ff; background-color: #2d2d2d;
border-left: 4px solid #4CAF50; border-left: 4px solid #4CAF50;
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
@ -88,6 +91,7 @@ HtmlElementView* head = new HtmlElementView("head", R"(
.note-content { .note-content {
flex-grow: 1; flex-grow: 1;
word-wrap: break-word; word-wrap: break-word;
color: #e0e0e0;
} }
.delete-btn { .delete-btn {
background-color: #f44336; background-color: #f44336;
@ -107,14 +111,14 @@ HtmlElementView* head = new HtmlElementView("head", R"(
border-radius: 4px; border-radius: 4px;
} }
#error { #error {
background-color: #ffebee; background-color: #780000;
color: #c62828; color: #ff9999;
border: 1px solid #ffcdd2; border: 1px solid #ff5555;
} }
#loading { #loading {
background-color: #e3f2fd; background-color: #003366;
color: #1565c0; color: #99ccff;
border: 1px solid #bbdefb; border: 1px solid #6699cc;
} }
</style> </style>
)"); )");