Hugging Face's logo

Spaces:
hugging2021
/
robojacky-s-ultimate-draft-clone
Running

App Files Community
hugging2021 commited on
Commit
b2a125d
·
verified ·
1 Parent(s): 7ba024d

ich möchte genau das. https://robojacky-ultimate-draft.static.hf.space/index.html

Browse files
Files changed (4) hide show
  1. README.md +8 -5
  2. index.html +119 -19
  3. script.js +42 -0
  4. style.css +35 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Robojacky S Ultimate Draft Clone
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: RoboJacky's Ultimate Draft Clone 🚀
3
+ colorFrom: green
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,119 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>RoboJacky's Ultimate Draft</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ darkMode: 'class',
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: {
18
+ 500: '#6366f1',
19
+ },
20
+ secondary: {
21
+ 500: '#8b5cf6',
22
+ }
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+ <body class="bg-gray-100 dark:bg-gray-900 min-h-screen">
30
+ <div class="container mx-auto px-4 py-8">
31
+ <header class="flex justify-between items-center mb-8">
32
+ <h1 class="text-3xl font-bold text-gray-800 dark:text-white">RoboJacky's Ultimate Draft</h1>
33
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
34
+ <i data-feather="moon" class="text-gray-800 dark:text-white"></i>
35
+ </button>
36
+ </header>
37
+
38
+ <main class="grid grid-cols-1 md:grid-cols-3 gap-6">
39
+ <!-- Draft Area -->
40
+ <div class="md:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
41
+ <div class="flex justify-between items-center mb-4">
42
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Draft Editor</h2>
43
+ <div class="flex space-x-2">
44
+ <button class="px-3 py-1 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition">
45
+ <i data-feather="save" class="w-4 h-4 inline mr-1"></i> Save
46
+ </button>
47
+ <button class="px-3 py-1 bg-secondary-500 text-white rounded-md hover:bg-secondary-600 transition">
48
+ <i data-feather="share-2" class="w-4 h-4 inline mr-1"></i> Share
49
+ </button>
50
+ </div>
51
+ </div>
52
+
53
+ <div class="mb-4">
54
+ <input type="text" placeholder="Title" class="w-full px-4 py-2 text-2xl font-bold bg-transparent border-b border-gray-200 dark:border-gray-700 focus:outline-none focus:border-primary-500 text-gray-800 dark:text-white">
55
+ </div>
56
+
57
+ <div class="prose dark:prose-invert max-w-none">
58
+ <textarea class="w-full h-96 px-4 py-2 bg-transparent text-gray-800 dark:text-white focus:outline-none" placeholder="Start writing your draft here..."></textarea>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Sidebar -->
63
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
64
+ <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Tools</h2>
65
+
66
+ <div class="space-y-4">
67
+ <div>
68
+ <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Formatting</h3>
69
+ <div class="flex flex-wrap gap-2">
70
+ <button class="p-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
71
+ <i data-feather="bold"></i>
72
+ </button>
73
+ <button class="p-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
74
+ <i data-feather="italic"></i>
75
+ </button>
76
+ <button class="p-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
77
+ <i data-feather="underline"></i>
78
+ </button>
79
+ </div>
80
+ </div>
81
+
82
+ <div>
83
+ <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Insert</h3>
84
+ <div class="flex flex-wrap gap-2">
85
+ <button class="p-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
86
+ <i data-feather="image"></i>
87
+ </button>
88
+ <button class="p-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
89
+ <i data-feather="link"></i>
90
+ </button>
91
+ <button class="p-2 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600">
92
+ <i data-feather="code"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+
97
+ <div>
98
+ <h3 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Recent Drafts</h3>
99
+ <div class="space-y-2">
100
+ <a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-800 dark:text-white">
101
+ <div class="font-medium">Project Proposal</div>
102
+ <div class="text-sm text-gray-500 dark:text-gray-400">Yesterday</div>
103
+ </a>
104
+ <a href="#" class="block p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-800 dark:text-white">
105
+ <div class="font-medium">Meeting Notes</div>
106
+ <div class="text-sm text-gray-500 dark:text-gray-400">2 days ago</div>
107
+ </a>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </main>
113
+ </div>
114
+
115
+ <script src="script.js"></script>
116
+ <script>feather.replace();</script>
117
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
118
+ </body>
119
+ </html>
script.js ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Theme toggle functionality
3
+ const themeToggle = document.getElementById('theme-toggle');
4
+ const htmlElement = document.documentElement;
5
+
6
+ // Check for saved theme preference or use preferred color scheme
7
+ if (localStorage.getItem('theme') === 'dark' ||
8
+ (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
9
+ htmlElement.classList.add('dark');
10
+ } else {
11
+ htmlElement.classList.remove('dark');
12
+ }
13
+
14
+ themeToggle.addEventListener('click', function() {
15
+ htmlElement.classList.toggle('dark');
16
+ localStorage.setItem('theme', htmlElement.classList.contains('dark') ? 'dark' : 'light');
17
+ feather.replace();
18
+ });
19
+
20
+ // Update feather icons when theme changes
21
+ const observer = new MutationObserver(function(mutations) {
22
+ mutations.forEach(function(mutation) {
23
+ if (mutation.attributeName === 'class') {
24
+ feather.replace();
25
+ }
26
+ });
27
+ });
28
+
29
+ observer.observe(htmlElement, {
30
+ attributes: true
31
+ });
32
+
33
+ // Initialize tooltips for buttons
34
+ const buttons = document.querySelectorAll('button');
35
+ buttons.forEach(button => {
36
+ if (button.querySelector('[data-feather]')) {
37
+ const icon = button.querySelector('[data-feather]');
38
+ const iconName = icon.getAttribute('data-feather');
39
+ button.setAttribute('title', iconName.charAt(0).toUpperCase() + iconName.slice(1));
40
+ }
41
+ });
42
+ });
style.css CHANGED
@@ -1,28 +1,45 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ }
6
+
7
+ .prose {
8
+ color: #374151;
9
+ }
10
+
11
+ .prose-dark {
12
+ color: #e5e7eb;
13
  }
14
 
15
+ /* Custom scrollbar */
16
+ ::-webkit-scrollbar {
17
+ width: 8px;
18
+ height: 8px;
19
  }
20
 
21
+ ::-webkit-scrollbar-track {
22
+ background: #f1f1f1;
23
+ border-radius: 4px;
 
 
24
  }
25
 
26
+ ::-webkit-scrollbar-thumb {
27
+ background: #888;
28
+ border-radius: 4px;
 
 
 
29
  }
30
 
31
+ ::-webkit-scrollbar-thumb:hover {
32
+ background: #555;
33
  }
34
+
35
+ .dark ::-webkit-scrollbar-track {
36
+ background: #374151;
37
+ }
38
+
39
+ .dark ::-webkit-scrollbar-thumb {
40
+ background: #6b7280;
41
+ }
42
+
43
+ .dark ::-webkit-scrollbar-thumb:hover {
44
+ background: #9ca3af;
45
+ }