Hugging Face's logo

Spaces:
protae5544
/
tre
Running

App Files Community
protae5544 commited on
Commit
375bfce
·
verified ·
1 Parent(s): b014f47

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +142 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tre
3
- emoji: 🐨
4
- colorFrom: pink
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: tre
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,142 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Elegant Profile Page</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ .divider {
11
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
12
+ }
13
+ .profile-shadow {
14
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
15
+ }
16
+ </style>
17
+ </head>
18
+ <body class="bg-white font-sans antialiased">
19
+ <div class="max-w-4xl mx-auto p-4">
20
+ <!-- Logo Section -->
21
+ <div class="flex justify-center mb-8">
22
+ <img src="https://via.placeholder.com/200x80?text=LOGO" alt="Company Logo" class="h-20">
23
+ </div>
24
+
25
+ <!-- Section 1: Header Bar -->
26
+ <div class="bg-gray-800 p-4 rounded-t-lg shadow-md opacity-95">
27
+ <div class="flex items-center justify-between">
28
+ <div class="text-white text-2xl font-bold tracking-wider">PROFILE</div>
29
+ <div class="text-white text-sm">EST. 2023</div>
30
+ </div>
31
+ </div>
32
+
33
+ <!-- Section 2: Profile Image -->
34
+ <div class="bg-white p-8 flex justify-center items-center">
35
+ <div class="w-64 h-80 md:w-72 md:h-96 relative overflow-hidden rounded-lg profile-shadow">
36
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
37
+ alt="Profile Image"
38
+ class="w-full h-full object-cover object-center">
39
+ <div class="absolute inset-0 bg-black bg-opacity-10"></div>
40
+ </div>
41
+ </div>
42
+
43
+ <!-- Section 3: Information Section -->
44
+ <div class="bg-white p-6 rounded-lg profile-shadow opacity-95">
45
+ <div id="profile-info" class="space-y-6">
46
+ <!-- Data will be populated from JSON -->
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Section 4: Footer -->
51
+ <div class="bg-gray-800 p-6 rounded-b-lg mt-4 profile-shadow opacity-95">
52
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
53
+ <div class="text-center md:text-left">
54
+ <h3 class="font-semibold text-white mb-3">Contact Info</h3>
55
+ <p class="text-gray-300"><i class="fas fa-map-marker-alt mr-2"></i> 123 Main St, City</p>
56
+ <p class="text-gray-300"><i class="fas fa-phone-alt mr-2"></i> (123) 456-7890</p>
57
+ <p class="text-gray-300"><i class="fas fa-envelope mr-2"></i> [email protected]</p>
58
+ </div>
59
+ <div class="text-center md:text-right">
60
+ <h3 class="font-semibold text-white mb-3">Quick Links</h3>
61
+ <p class="text-gray-300 hover:text-white cursor-pointer">About Us</p>
62
+ <p class="text-gray-300 hover:text-white cursor-pointer">Services</p>
63
+ <p class="text-gray-300 hover:text-white cursor-pointer">Contact</p>
64
+ </div>
65
+ </div>
66
+ <div class="mt-6 text-center text-gray-400 text-sm">
67
+ &copy; 2023 Your Company. All rights reserved.
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <script>
73
+ // JSON data for profile information
74
+ // Easy-to-edit profile data structure
75
+ const profileData = {
76
+ "basic": {
77
+ "title": "Basic Information",
78
+ "items": [
79
+ {"label": "Name", "value": "John Doe"},
80
+ {"label": "Position", "value": "Senior Developer"},
81
+ {"label": "Experience", "value": "8+ Years"},
82
+ {"label": "Location", "value": "Bangkok, Thailand"}
83
+ ]
84
+ },
85
+ "details": {
86
+ "title": "Professional Details",
87
+ "items": [
88
+ {"label": "Specialization", "value": "Web Development"},
89
+ {"label": "Technologies", "value": "JavaScript, React, Node.js"},
90
+ {"label": "Education", "value": "MSc Computer Science"},
91
+ {"label": "Availability", "value": "Full-time"}
92
+ ]
93
+ }
94
+ };
95
+
96
+ // Function to populate profile information
97
+ function populateProfileInfo() {
98
+ const container = document.getElementById('profile-info');
99
+
100
+ for (const [key, section] of Object.entries(profileData)) {
101
+ // Create section container
102
+ const sectionDiv = document.createElement('div');
103
+ sectionDiv.className = 'divider pb-6 last:border-0 last:pb-0';
104
+
105
+ // Create section title
106
+ const title = document.createElement('h2');
107
+ title.className = 'text-xl font-bold text-gray-800 mb-4';
108
+ title.textContent = section.title;
109
+ sectionDiv.appendChild(title);
110
+
111
+ // Create items grid
112
+ const itemsGrid = document.createElement('div');
113
+ itemsGrid.className = 'grid grid-cols-1 md:grid-cols-2 gap-4';
114
+
115
+ // Add items
116
+ section.items.forEach(item => {
117
+ const itemDiv = document.createElement('div');
118
+ itemDiv.className = 'flex flex-col md:flex-row';
119
+
120
+ const label = document.createElement('span');
121
+ label.className = 'text-gray-600 font-medium md:w-1/3';
122
+ label.textContent = item.label;
123
+
124
+ const value = document.createElement('span');
125
+ value.className = 'text-gray-800 md:w-2/3';
126
+ value.textContent = item.value;
127
+
128
+ itemDiv.appendChild(label);
129
+ itemDiv.appendChild(value);
130
+ itemsGrid.appendChild(itemDiv);
131
+ });
132
+
133
+ sectionDiv.appendChild(itemsGrid);
134
+ container.appendChild(sectionDiv);
135
+ }
136
+ }
137
+
138
+ // Call the function when the page loads
139
+ document.addEventListener('DOMContentLoaded', populateProfileInfo);
140
+ </script>
141
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=protae5544/tre" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
142
+ </html>