gawo2025-ws-json-html

2026-03-05 14:00:26 +01:00
commit 819e8cde08
15 changed files with 710 additions and 0 deletions
@@ -0,0 +1,67 @@
+{
+  "head": {
+    "title": "Examplary",
+    "styles": "body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: red; text-align: center; }\n.container { width: 80%; margin: 20px auto; padding: 20px; background: green; border-radius: 10px; box-shadow: 0 128px 512px rgba(100,100,200,50); }\n.nav-list { list-style-type: none; padding: 0; text-align: left; width: fit-content; margin: 0 auto 20px 0; }\n.nav-list li { padding: 5px 0; font-size: 18px; }\n.card { width: 60%; margin: 20px auto; background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 128px 1024px rgba(200,50,100,40); }\n.card-body { padding: 20px; }\n.card-title { font-size: 24px; font-weight: bold; }\n.bg-card-gradient { background: linear-gradient(45deg, green, purple); color: white; padding: 30px; }\n.bg-holder { height: 150px; background: url('https://via.placeholder.com/150') no-repeat center center; background-size: cover; border-radius: 10px; }\n.button { display: inline-block; padding: 10px 20px; background: green; color: white; text-decoration: none; border-radius: 5px; margin-top: 10px; }"
+  },
+  "body": {
+    "content": [
+      {
+        "element": "div",
+        "attributes": { "class": "container" },
+        "content": [
+          { "element": "h1", "value": "Examplary Website." },
+          { "element": "p", "value": "Facharbeitswebsite" },
+          {
+            "element": "ul",
+            "attributes": { "class": "nav-list" },
+            "content": [
+              { "element": "li", "value": "Basic" },
+              { "element": "li", "value": "Elements" }
+            ]
+          },
+          { "element": "hr" },
+          {
+            "element": "div",
+            "attributes": { "class": "col-md-5 text-center bg-card-gradient" },
+            "content": [
+              {
+                "element": "div",
+                "attributes": { "class": "card-body" },
+                "content": [
+                  {
+                    "element": "div",
+                    "attributes": { "class": "card-body" },
+                    "content": [
+                      {
+                        "element": "div",
+                        "attributes": { "class": "nav-list" },
+                        "content": [
+                          { "element": "h2", "attributes": { "class": "card-title" }, "value": "Special Card Section" },
+                          { "element": "p", "value": "This card has a gradient background and an image holder." },
+                          {
+                            "element": "a",
+                            "attributes": { "href": "output2.html", "class": "button" },
+                            "value": "Learn Less"
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          { "element": "hr" },
+          { "element": "h2", "value": "This isn`t a card." },
+          { "element": "p", "value": "Here couldn`t be a card text." },
+          {
+            "element": "footer",
+            "content": [
+              { "element": "p", "value": "Schlechte Facharbeit" }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}