Spaces:

hugging2021
/

robojacky-s-ultimate-draft-clone

Running

App Files Files Community

hugging2021 commited on Jan 7

Commit

d20e0bd

verified ·

1 Parent(s): b2a125d

warum hörst du auf ?

Browse files

Files changed (5) hide show

about.html +75 -0
components/footer.js +60 -0
components/navbar.js +52 -0
index.html +8 -5
style.css +60 -2

about.html ADDED Viewed

	@@ -0,0 +1,75 @@

+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About - RoboJacky's Ultimate Draft</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            500: '#6366f1',
+                        },
+                        secondary: {
+                            500: '#8b5cf6',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <div class="container mx-auto px-4 py-8 flex-grow">
+        <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
+            <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">About RoboJacky's Ultimate Draft</h1>
+            <div class="prose dark:prose-invert">
+                <p class="mb-4">RoboJacky's Ultimate Draft is a powerful drafting tool designed for writers, developers, and creators who need a clean, distraction-free environment to capture their ideas.</p>
+                <h2 class="text-2xl font-semibold mt-6 mb-4">Features</h2>
+                <ul class="list-disc pl-6 mb-6">
+                    <li class="mb-2">Real-time Markdown support</li>
+                    <li class="mb-2">Dark/Light mode toggle</li>
+                    <li class="mb-2">Cloud synchronization</li>
+                    <li class="mb-2">Version history</li>
+                    <li class="mb-2">Collaborative editing</li>
+                </ul>
+                <h2 class="text-2xl font-semibold mt-6 mb-4">Our Team</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <div class="flex items-center space-x-4">
+                        <img src="http://static.photos/people/200x200/1" alt="Team Member" class="w-16 h-16 rounded-full">
+                        <div>
+                            <h3 class="font-semibold">Alex Johnson</h3>
+                            <p class="text-gray-600 dark:text-gray-400">Founder & Lead Developer</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center space-x-4">
+                        <img src="http://static.photos/people/200x200/2" alt="Team Member" class="w-16 h-16 rounded-full">
+                        <div>
+                            <h3 class="font-semibold">Sam Wilson</h3>
+                            <p class="text-gray-600 dark:text-gray-400">UX Designer</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

components/footer.js ADDED Viewed

	@@ -0,0 +1,60 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: #f9fafb;
+          padding: 2rem;
+          text-align: center;
+          margin-top: 2rem;
+          border-top: 1px solid #e5e7eb;
+        }
+        .dark footer {
+          background: #111827;
+          border-top: 1px solid #374151;
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          margin-bottom: 1rem;
+        }
+        .footer-links a {
+          color: #4b5563;
+          text-decoration: none;
+        }
+        .dark .footer-links a {
+          color: #9ca3af;
+        }
+        .footer-links a:hover {
+          color: #6366f1;
+        }
+        .copyright {
+          color: #6b7280;
+          font-size: 0.875rem;
+        }
+        .dark .copyright {
+          color: #9ca3af;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-links">
+            <a href="/privacy.html">Privacy</a>
+            <a href="/terms.html">Terms</a>
+            <a href="/contact.html">Contact</a>
+          </div>
+          <div class="copyright">
+            © ${new Date().getFullYear()} RoboJacky's Ultimate Draft. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,52 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: #ffffff;
+          padding: 1rem 2rem;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .dark nav {
+          background: #1f2937;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+        }
+        .logo {
+          font-size: 1.5rem;
+          font-weight: bold;
+          color: #6366f1;
+          text-decoration: none;
+        }
+        .nav-links {
+          display: flex;
+          gap: 1.5rem;
+        }
+        .nav-links a {
+          color: #4b5563;
+          text-decoration: none;
+          font-weight: 500;
+          transition: color 0.2s;
+        }
+        .dark .nav-links a {
+          color: #d1d5db;
+        }
+        .nav-links a:hover {
+          color: #6366f1;
+        }
+      </style>
+      <nav>
+        <a href="/" class="logo">RoboJacky</a>
+        <div class="nav-links">
+          <a href="/">Home</a>
+          <a href="/about.html">About</a>
+          <a href="/drafts.html">Drafts</a>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -26,9 +26,10 @@
         }
     </script>
 </head>
-<body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
-    <div class="container mx-auto px-4 py-8">
-        <header class="flex justify-between items-center mb-8">
             <h1 class="text-3xl font-bold text-gray-800 dark:text-white">RoboJacky's Ultimate Draft</h1>
             <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
                 <i data-feather="moon" class="text-gray-800 dark:text-white"></i>
@@ -111,9 +112,11 @@
             </div>
         </main>
     </div>
     <script src="script.js"></script>
-    <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

         }
     </script>
 </head>
+<body class="bg-gray-100 dark:bg-gray-900 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <div class="container mx-auto px-4 py-8 flex-grow">
+<header class="flex justify-between items-center mb-8">
             <h1 class="text-3xl font-bold text-gray-800 dark:text-white">RoboJacky's Ultimate Draft</h1>
             <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
                 <i data-feather="moon" class="text-gray-800 dark:text-white"></i>
             </div>
         </main>
     </div>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
     <script src="script.js"></script>
+<script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

style.css CHANGED Viewed

@@ -39,7 +39,65 @@ body {
 .dark ::-webkit-scrollbar-thumb {
     background: #6b7280;
 }
 .dark ::-webkit-scrollbar-thumb:hover {
     background: #9ca3af;
-}

 .dark ::-webkit-scrollbar-thumb {
     background: #6b7280;
 }
 .dark ::-webkit-scrollbar-thumb:hover {
     background: #9ca3af;
+}
+/* Prose styles for markdown content */
+.prose {
+    max-width: 65ch;
+    font-size: 1rem;
+    line-height: 1.75;
+}
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4 {
+    color: inherit;
+    font-weight: 600;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+}
+.prose h1 {
+    font-size: 2em;
+}
+.prose h2 {
+    font-size: 1.5em;
+}
+.prose h3 {
+    font-size: 1.25em;
+}
+.prose p {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+.prose ul,
+.prose ol {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    padding-left: 1.5em;
+}
+.prose li {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+.prose a {
+    color: #6366f1;
+    text-decoration: none;
+}
+.prose a:hover {
+    text-decoration: underline;
+}
+.prose-dark a {
+    color: #8b5cf6;
+}