Hugging Face's logo

Spaces:
tatht
/
jquery-magic-template-wizard
Running

App Files Community
tatht commited on
Commit
f3217d0
·
verified ·
1 Parent(s): 605b66f

gen ra giao diện đơn giản

Browse files
Files changed (4) hide show
  1. components/navbar.js +13 -14
  2. index.html +20 -14
  3. script.js +9 -43
  4. style.css +14 -9
components/navbar.js CHANGED
@@ -5,30 +5,29 @@ class CustomNavbar extends HTMLElement {
5
  <style>
6
  .navbar {
7
  background-color: white;
8
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
9
  }
10
  .nav-link {
11
- transition: all 0.2s ease;
 
12
  }
13
  .nav-link:hover {
14
- color: #3b82f6;
 
 
15
  }
16
  </style>
17
- <nav class="navbar py-4 px-6">
18
  <div class="container mx-auto flex justify-between items-center">
19
- <a href="#" class="text-xl font-bold text-gray-800">jQuery Magic</a>
20
- <div class="hidden md:flex space-x-8">
21
- <a href="#" class="nav-link text-gray-600 hover:text-blue-500">Home</a>
22
- <a href="#" class="nav-link text-gray-600 hover:text-blue-500">Templates</a>
23
- <a href="#" class="nav-link text-gray-600 hover:text-blue-500">Docs</a>
24
- <a href="#" class="nav-link text-gray-600 hover:text-blue-500">Examples</a>
25
  </div>
26
- <button class="md:hidden">
27
- <i data-feather="menu" class="text-gray-600"></i>
28
- </button>
29
  </div>
30
  </nav>
31
- `;
32
  }
33
  }
34
 
 
5
  <style>
6
  .navbar {
7
  background-color: white;
8
+ border-bottom: 1px solid #e5e7eb;
9
  }
10
  .nav-link {
11
+ color: #4b5563;
12
+ padding: 0.5rem 1rem;
13
  }
14
  .nav-link:hover {
15
+ color: #1f2937;
16
+ background-color: #f3f4f6;
17
+ border-radius: 0.375rem;
18
  }
19
  </style>
20
+ <nav class="navbar py-3 px-6">
21
  <div class="container mx-auto flex justify-between items-center">
22
+ <a href="/" class="text-lg font-medium text-gray-800">Simple UI</a>
23
+ <div class="hidden md:flex space-x-2">
24
+ <a href="/" class="nav-link">Home</a>
25
+ <a href="#" class="nav-link">About</a>
26
+ <a href="#" class="nav-link">Contact</a>
 
27
  </div>
 
 
 
28
  </div>
29
  </nav>
30
+ `;
31
  }
32
  }
33
 
index.html CHANGED
@@ -12,24 +12,30 @@
12
  <script src="https://cdn.jsdelivr.net/npm/jquery-templates@1.0.0/jquery.tmpl.min.js"></script>
13
  </head>
14
  <body class="bg-gray-100 min-h-screen">
15
- <div class="container mx-auto px-4 py-12">
16
- <header class="text-center mb-12">
17
- <h1 class="text-4xl font-bold text-gray-800 mb-2">jQuery Template Wizard</h1>
18
- <p class="text-xl text-gray-600">Powerful templates with jQuery magic</p>
19
  </header>
20
 
21
- <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
22
- <h2 class="text-2xl font-semibold mb-6 text-gray-800">Simple Template Example</h2>
23
- <div id="templateContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
24
- </div>
25
-
26
- <div class="bg-white rounded-xl shadow-lg p-8">
27
- <h2 class="text-2xl font-semibold mb-6 text-gray-800">Dynamic Data Binding</h2>
28
- <div id="dynamicDataContainer" class="grid grid-cols-1 md:grid-cols-2 gap-6"></div>
 
 
 
 
 
 
 
29
  </div>
30
  </div>
31
-
32
- <!-- Sample Template -->
33
  <script id="simpleTemplate" type="text/x-jquery-tmpl">
34
  <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
35
  <div class="flex items-center mb-4">
 
12
  <script src="https://cdn.jsdelivr.net/npm/jquery-templates@1.0.0/jquery.tmpl.min.js"></script>
13
  </head>
14
  <body class="bg-gray-100 min-h-screen">
15
+ <div class="container mx-auto px-4 py-8">
16
+ <header class="text-center mb-8">
17
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Simple Interface</h1>
18
+ <p class="text-lg text-gray-600">Clean and minimal design</p>
19
  </header>
20
 
21
+ <div class="bg-white rounded-lg p-6 mb-6">
22
+ <div id="contentArea" class="space-y-4">
23
+ <div class="p-4 border border-gray-200 rounded-lg">
24
+ <h3 class="font-medium text-lg">Welcome</h3>
25
+ <p class="text-gray-600">This is a simple interface example.</p>
26
+ </div>
27
+ <div class="p-4 border border-gray-200 rounded-lg">
28
+ <h3 class="font-medium text-lg">Features</h3>
29
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
30
+ <li>Clean design</li>
31
+ <li>Minimal styling</li>
32
+ <li>Easy to use</li>
33
+ </ul>
34
+ </div>
35
+ </div>
36
  </div>
37
  </div>
38
+ <!-- Sample Template -->
 
39
  <script id="simpleTemplate" type="text/x-jquery-tmpl">
40
  <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
41
  <div class="flex items-center mb-4">
script.js CHANGED
@@ -1,49 +1,15 @@
1
- $(document).ready(function() {
2
- // Sample data for simple template
3
- const simpleData = [
4
- {
5
- title: "Feature One",
6
- description: "This is a description for feature one with some sample text."
7
- },
8
- {
9
- title: "Feature Two",
10
- description: "Another description here for the second feature card."
11
- },
12
- {
13
- title: "Feature Three",
14
- description: "Third feature with a slightly longer description text to show variation."
15
- }
16
- ];
17
-
18
- // Render simple template
19
- $("#simpleTemplate").tmpl(simpleData).appendTo("#templateContainer");
20
 
21
- // Sample data for dynamic template
22
- const dynamicData = [
23
- {
24
- name: "John Doe",
25
- role: "Frontend Developer",
26
- bio: "Specializes in creating beautiful user interfaces with modern technologies.",
27
- skills: ["JavaScript", "React", "Vue", "CSS"]
28
- },
29
- {
30
- name: "Jane Smith",
31
- role: "Backend Engineer",
32
- bio: "Builds scalable server-side applications and APIs for various platforms.",
33
- skills: ["Node.js", "Python", "SQL", "Docker"]
34
- }
35
- ];
36
-
37
- // Render dynamic template
38
- $("#dynamicTemplate").tmpl(dynamicData).appendTo("#dynamicDataContainer");
39
-
40
- // Add hover effect to all template items
41
- $(".template-item").hover(
42
  function() {
43
- $(this).addClass("shadow-lg");
44
  },
45
  function() {
46
- $(this).removeClass("shadow-lg");
47
  }
48
  );
49
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
2
+ $(document).ready(function() {
3
+ // Simple initialization
4
+ console.log("Simple interface loaded");
5
+
6
+ // Basic hover effect
7
+ $("div[class*='border']").hover(
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  function() {
9
+ $(this).css('border-color', '#e5e7eb');
10
  },
11
  function() {
12
+ $(this).css('border-color', '#d1d5db');
13
  }
14
  );
15
+ });
style.css CHANGED
@@ -1,21 +1,26 @@
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
- transition: all 0.3s ease;
 
 
 
 
 
 
 
 
6
  }
7
 
8
- /* Custom animations */
9
- @keyframes fadeIn {
10
- from { opacity: 0; transform: translateY(20px); }
11
- to { opacity: 1; transform: translateY(0); }
12
  }
13
 
14
- .template-item {
15
- animation: fadeIn 0.5s ease forwards;
 
16
  }
17
 
18
- /* Custom scrollbar */
19
  ::-webkit-scrollbar {
20
  width: 8px;
21
  height: 8px;
 
1
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
2
  body {
3
  font-family: 'Inter', sans-serif;
4
+ background-color: #f9fafb;
5
+ }
6
+
7
+ .container {
8
+ max-width: 800px;
9
+ }
10
+
11
+ header h1 {
12
+ color: #1f2937;
13
  }
14
 
15
+ header p {
16
+ color: #6b7280;
 
 
17
  }
18
 
19
+ .bg-white {
20
+ background-color: #ffffff;
21
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
22
  }
23
 
 
24
  ::-webkit-scrollbar {
25
  width: 8px;
26
  height: 8px;