Merge pull request #37 from herrschmidt/improve-layout-and-content

feat: improve layout and content
herrschmidt · Jan 11, 2025 · aee3ae2 · aee3ae2
2 parents 0ba5baa + 1595762
commit aee3ae2
Showing 1 changed file with 37 additions and 3 deletions.
diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -3,9 +3,21 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document to Markdown Converter</title>
+    <title>Magic Markdown</title>
     <link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.3/dist/full.css" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        magic: ['Righteous', 'cursive'],
+                    },
+                },
+            },
+        }
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
         .markdown-content {
@@ -46,14 +58,36 @@
     </style>
 </head>
 <body class="min-h-screen bg-base-200 p-4">
-    <div class="container mx-auto">
+    <div class="container mx-auto lg:px-[10%]">
         <div class="card bg-base-100 shadow-xl">
             <div class="card-body">
-                <h2 class="card-title">Document to Markdown Converter</h2>
+                <div class="mb-8">
+                    <div class="flex items-baseline gap-4 mb-4">
+                        <h2 class="card-title text-3xl font-magic text-primary">Magic Markdown</h2>
+                        <p class="text-xl text-base-content/70">From any document to perfectly structured markdown in seconds.</p>
+                    </div>
+                    <div class="text-base-content/70 space-y-1">
+                        <p>Supports PDFs, scans / images, Docx, Html and PowerPoint documents.</p>
+                        <p>Preserves page layout, reading order and tables.</p>
+                    </div>
+                </div>
 
                 <!-- Drag and Drop Zone -->
                 <div id="dropZone" data-testid="dropZone"></div>
 
+                <!-- Footer -->
+                <div class="flex justify-between items-center mt-8 text-base-content/60 text-sm">
+                    <div class="flex items-center gap-1">
+                        Backend: <a href="https://github.com/DS4SD/docling" class="link link-primary" target="_blank">docling</a>
+                    </div>
+                    <a href="https://github.com/herrschmidt/magic-markdown" class="flex items-center gap-2 hover:text-primary transition-colors" target="_blank">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+                        </svg>
+                        <span>GitHub</span>
+                    </a>
+                </div>
+
                 <!-- File Input (Hidden) -->
                 <input type="file" id="fileInput" data-testid="fileInput" class="hidden" accept="image/*,.pdf,.doc,.docx,.txt" multiple>