Create demo-article-view-svg-fallback.html

therealtimex · Dec 19, 2024 · 75b0b11 · 75b0b11
1 parent 6227bbc
commit 75b0b11
Showing 1 changed file with 53 additions and 0 deletions.
diff --git a/html/demo-article-view-svg-fallback.html b/html/demo-article-view-svg-fallback.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        :root {
+            /* Main theme colors as shown in the UI */
+            --color_theme_primary: #00BFA5;
+            /* The green color used in "APPROVE REQUEST" */
+            --color_theme_secondary: #6B7280;
+            /* Used in secondary text */
+            --color_theme_accent: #4A90E2;
+            /* Blue accent color */
+            --color_theme_success: #00BFA5;
+            /* Green checkmark color */
+            --color_theme_danger: #EF4444;
+            /* Red X mark color */
+            --color_theme_background: #FFFFFF;
+            /* White background */
+            --color_theme_surface: #F9FAFB;
+            /* Card background color */
+            --color_theme_text_primary: #111827;
+            /* Main text color */
+            --color_theme_text_secondary: #6B7280;
+            /* Secondary text color */
+            --color_theme_neutral_light: #F3F4F6;
+            /* Light gray background */
+            --color_theme_neutral_medium: #E5E7EB;
+            /* Medium gray */
+            --color_theme_neutral_dark: #4B5563;
+            /* Dark gray text */
+        }
+    </style>
+</head>
+
+<body>
+
+
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <rect width="512" height="512" fill="var(--color_theme_surface)" />
+        <path fill="#dee2e6"
+            d="M160 128h192c17.7 0 32 14.3 32 32v192c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32z" />
+        <circle cx="256" cy="216" r="32" fill="#adb5bd" />
+        <path fill="#adb5bd" d="M384 384H128l64-96 48 32 96-128 48 64z" />
+    </svg>
+
+
+
+</body>
+
+</html>