Merge pull request #44 from ATLAS-PJK-GM007/selly/frontend

feat(ui): add green leaf favicon using SVG data URI
2026-06-16 22:00:36 +07:00 · 2026-06-16 21:59:43 +07:00 · 2026-06-16 19:20:20 +07:00 · 2026-06-16 19:12:44 +07:00
2 changed files with 24 additions and 1 deletions
@@ -4,6 +4,11 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ZeaVis Edu</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322C55E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 22l10-10'/%3E%3C/svg%3E"
+    />
  </head>
  <body>
    <div id="root"></div>
@@ -33,6 +33,7 @@ export function ScanPage() {
  const imageRef = useRef<HTMLImageElement | null>(null);
  const navigate = useNavigate();
  const queryClient = useQueryClient();
+  const [isDragging, setIsDragging] = useState(false);

  // Camera mode state
  const [useCamera, setUseCamera] = useState(false);
@@ -164,8 +165,25 @@ export function ScanPage() {
                  ) : (
                    <>
                      <div
-                        className="w-full border-2 border-dashed border-green-300 rounded-md p-10 h-60 text-center cursor-pointer"
+                        className={`w-full border-2 border-dashed rounded-md p-10 h-60 text-center cursor-pointer transition-colors duration-200 ${
+                          isDragging
+                            ? "border-blue-500 bg-blue-100"
+                            : "border-green-300"
+                        }`}
                        onClick={() => inputRef.current?.click()}
+                        onDragOver={(e) => {
+                          e.preventDefault();
+                          setIsDragging(true);
+                        }}
+                        onDragLeave={() => setIsDragging(false)}
+                        onDrop={(e) => {
+                          e.preventDefault();
+                          setIsDragging(false);
+                          const droppedFile = e.dataTransfer.files?.[0];
+                          if (droppedFile) {
+                            handleFile(droppedFile);
+                          }
+                        }}
                      >
                        <Upload
                          className="mx-auto text-green-500 mb-3"
Author	SHA1	Message	Date
Selly SupriyatinandGitHub	74e17386ee	Merge pull request #44 from ATLAS-PJK-GM007/selly/frontend feat(ui): add green leaf favicon using SVG data URI	2026-06-16 22:00:36 +07:00
seriouselly	a9ef795c90	feat(ui): add green leaf favicon using SVG data URI - Update index.html to include a Lucide leaf icon as the tab favicon. - Use URL-encoded SVG data URI to apply the ZeaVis Edu green brand color (#22C55E) directly without needing external image files.	2026-06-16 21:59:43 +07:00
Selly SupriyatinandGitHub	153abf4352	Merge pull request #43 from ATLAS-PJK-GM007/selly/frontend feat(scan): implement drag and drop functionality for image upload	2026-06-16 19:20:20 +07:00
seriouselly	da5c7c1cfa	feat(scan): implement drag and drop functionality for image upload - Add `onDragOver`, `onDragLeave`, and `onDrop` event handlers to capture dragged files. - Introduce `isDragging` state to provide visual UI feedback when a file is hovered over the drop zone. - Wire the dropped file data to the existing `handleFile` processing logic.	2026-06-16 19:12:44 +07:00