Hugging Face's logo

Spaces:
kritsanan
/
instructa
Running

App Files Community
kritsanan commited on
Commit
5b60024
·
verified ·
1 Parent(s): 8dca1a8

UI/UX Design Layout Clean and futuristic layout, enhancing usability for advanced content tools and 3D visualization. Fully responsive design for seamless use across devices. Look & Feel Sleek, modern aesthetics with emphasis on immersive and interactive design elements. Consistent brand identity through color schemes and typography. Pages Main Dashboard AI Content Creation Advanced Scheduling 3D Analytics Dashboard 3D Content Preview Team Management Post History Components AI Content Generator Form Sentiment and Trend Analysis Panel Multi-Language Selector 3D Interactive Widgets Team Collaboration Tools - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +755 -342
index.html CHANGED
@@ -1,427 +1,840 @@
1
  <!DOCTYPE html>
2
- <html lang="th">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ที่นี่วังสามหมอ - Tour Der Wang</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
- <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;700&display=swap" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <script>
11
  tailwind.config = {
12
  theme: {
13
  extend: {
14
  colors: {
15
- 'pastel-orange-light': '#FFE5CC',
16
- 'pastel-orange': '#FFCC99',
17
- 'pastel-orange-dark': '#e6b889',
 
18
  },
19
  fontFamily: {
20
- 'sarabun': ['Sarabun', 'sans-serif']
21
  }
22
  }
23
  }
24
  }
25
  </script>
26
  <style>
 
 
 
 
 
 
27
  body {
28
- font-family: 'Sarabun', sans-serif;
29
- background-color: #fffdf5;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  }
31
- .phra-chedi-divider {
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  position: relative;
33
- padding-bottom: 50px;
 
34
  }
35
- .phra-chedi-divider:after {
36
- content: "";
 
37
  position: absolute;
38
- bottom: 0;
39
- left: calc(50% - 25px);
40
- width: 50px;
41
- height: 50px;
42
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FF9A3D' d='M24 4.3l-20 10v10l2 2h36l2-2v-10l-20-10zm-2 15.7h4v6h-4v-6zm4 8h-4v4h4v-4z'/%3E%3C/svg%3E");
43
- background-repeat: no-repeat;
44
- background-size: contain;
45
  }
46
- .section-transition {
47
- transition: opacity 0.4s ease, transform 0.4s ease;
 
48
  }
49
- @keyframes floating {
50
- 0% { transform: translateY(0px); }
51
- 50% { transform: translateY(-12px); }
52
- 100% { transform: translateY(0px); }
53
  }
54
- .floating {
55
- animation: floating 6s ease-in-out infinite;
 
56
  }
57
- .gradient-bg {
58
- background: radial-gradient(circle, rgba(255,229,204,0.7) 0%, rgba(255,255,255,0.8) 70%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  }
60
  </style>
61
  </head>
62
- <body class="min-h-screen flex flex-col bg-gradient-to-b from-pastel-orange-light to-white text-gray-800">
63
- <!-- Header -->
64
- <header class="bg-white shadow-md sticky top-0 z-50">
65
- <div class="container mx-auto px-4">
66
- <div class="flex justify-between items-center py-4">
67
- <!-- Logo -->
68
- <div class="flex items-center space-x-2">
69
- <div class="w-12 h-12 rounded-lg bg-pastel-orange flex items-center justify-center">
70
- <i class="fas fa-pagoda text-white text-xl"></i>
71
- </div>
72
- <h1 class="text-xl md:text-2xl font-bold">ที่นี่<span class="text-orange-600">วังสามหมอ</span></h1>
73
- </div>
74
-
75
- <!-- Desktop Navigation -->
76
- <nav class="hidden lg:flex space-x-1">
77
- <a href="#" data-target="home" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">หน้าหลัก</a>
78
- <a href="#" data-target="history" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">ประวัติศาสตร์</a>
79
- <a href="#" data-target="content" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">คอนเทนท์</a>
80
- <a href="#" data-target="business" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">ร้านอาหาร-ห้องพัก</a>
81
- <a href="#" data-target="jobs" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">หางาน-หาพนักงาน</a>
82
- <a href="#" data-target="pricing" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">ค่าบริการ</a>
83
- <a href="#" data-target="about" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition">เกี่ยวกับเรา</a>
84
- <a href="#" data-target="login" class="px-4 py-2 rounded-lg bg-orange-500 text-white hover:bg-orange-600 transition">เข้าสู่ระบบ</a>
85
- </nav>
86
-
87
- <!-- Mobile Menu Button -->
88
- <button id="mobileMenuButton" class="lg:hidden text-2xl">
89
- <i class="fas fa-bars"></i>
90
- </button>
91
  </div>
92
 
93
- <!-- Mobile Navigation -->
94
- <nav id="mobileMenu" class="hidden lg:hidden py-4 border-t">
95
- <div class="flex flex-col space-y-2">
96
- <a href="#" data-target="home" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">หน้าหลัก</a>
97
- <a href="#" data-target="history" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">ประวัติศาสตร์</a>
98
- <a href="#" data-target="content" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">คอนเทนท์</a>
99
- <a href="#" data-target="business" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">ร้านอาหาร-ห้องพัก</a>
100
- <a href="#" data-target="jobs" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">หางาน-หาพนักงาน</a>
101
- <a href="#" data-target="pricing" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">ค่าบริการ</a>
102
- <a href="#" data-target="about" class="page-link px-4 py-2 rounded-lg hover:bg-pastel-orange-light transition text-center">เกี่ยวกับเรา</a>
103
- <a href="#" data-target="login" class="px-4 py-2 rounded-lg bg-orange-500 text-white hover:bg-orange-600 transition text-center">เข้าสู่ระบบ</a>
104
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  </nav>
 
 
 
 
 
 
 
 
 
 
 
 
106
  </div>
107
- </header>
108
-
109
- <main class="flex-grow">
110
- <!-- Homepage -->
111
- <section id="home" class="page-section py-12 gradient-bg min-h-[calc(100vh-150px)]">
112
- <div class="container mx-auto px-4 relative">
113
- <!-- Floating decorations -->
114
- <div class="absolute -top-16 right-10 w-24 h-24 bg-pastel-orange rounded-full opacity-30 floating"></div>
115
- <div class="absolute -bottom-12 left-4 w-36 h-36 bg-pastel-orange rounded-full opacity-20 floating" style="animation-delay: 2s;"></div>
116
- <div class="absolute top-1/4 left-24 w-14 h-14 bg-orange-200 rounded-full opacity-40 floating" style="animation-delay: 4s;"></div>
117
-
118
- <div class="flex flex-col lg:flex-row items-center">
119
- <div class="lg:w-1/2 z-10">
120
- <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
121
- ยินดีต้อนรับสู่ <span class="text-amber-700">"วังสามหมอ"</span> <br>จุดหมายปลายทางของทุกสิ่ง
122
- </h2>
123
- <p class="text-lg mb-8 max-w-xl">
124
- เพลิดเพลินไปกับประสบการณ์การเดินทางท่องเที่ยว ผสมผสานวัฒนธรรม การรับประทานอาหารชั้นเลิศ และโอกาสทางอาชีพใต้ท้องฟ้าแสนสวยของเรา
125
- </p>
126
- <div class="flex flex-wrap gap-4">
127
- <a href="#" data-target="business" class="px-6 py-3 bg-orange-500 text-white rounded-full text-lg font-medium hover:bg-orange-600 transition flex items-center">
128
- <i class="fas fa-map-marked-alt mr-2"></i> ค้นหาสถานที่ท่องเที่ยว
129
- </a>
130
- <a href="#" data-target="jobs" class="px-6 py-3 bg-white text-orange-600 border border-orange-500 rounded-full text-lg font-medium hover:bg-orange-50 transition flex items-center">
131
- <i class="fas fa-briefcase mr-2"></i> หางานในท้องถิ่น
132
- </a>
133
  </div>
 
134
  </div>
135
- <div class="lg:w-1/2 z-10 mt-10 lg:mt-0">
 
 
 
 
 
 
 
136
  <div class="relative">
137
- <div class="rounded-2xl overflow-hidden shadow-xl">
138
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-80 md:h-96"></div>
139
- </div>
140
- <div class="absolute -bottom-5 -right-5 w-32 h-32 bg-pastel-orange rounded-full flex items-center justify-center">
141
- <div class="text-amber-800 text-center">
142
- <i class="fas fa-umbrella-beach text-4xl mb-1"></i>
143
- <p class="font-bold">วังสามหมอ</p>
144
- </div>
 
 
145
  </div>
146
  </div>
147
  </div>
148
  </div>
149
-
150
- <!-- Features Section -->
151
- <div class="mt-16 pt-12 phra-chedi-divider">
152
- <h2 class="text-3xl font-bold text-center mb-12">บริการของเรา</h2>
153
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
154
- <div class="feature-card bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition">
155
- <div class="w-16 h-16 rounded-full bg-pastel-orange-light flex items-center justify-center mb-4">
156
- <i class="fas fa-hotel text-2xl text-amber-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  </div>
158
- <h3 class="text-xl font-bold mb-2">ที่พักและร้านอาหาร</h3>
159
- <p class="text-gray-600">ค้นพบที่พักดีๆ และรสชาติอาหารท้องถิ่นที่หาไม่ได้จากที่อื่น</p>
160
  </div>
161
- <div class="feature-card bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition">
162
- <div class="w-16 h-16 rounded-full bg-pastel-orange-light flex items-center justify-center mb-4">
163
- <i class="fas fa-briefcase text-2xl text-amber-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
164
  </div>
165
- <h3 class="text-xl font-bold mb-2">โอกาสทางอาชีพ</h3>
166
- <p class="text-gray-600">เชื่อมโยงผู้หางานกับนายจ้างในธุรกิจท้องถิ่น</p>
167
  </div>
168
- <div class="feature-card bg-white p-6 rounded-2xl shadow-md hover:shadow-xl transition">
169
- <div class="w-16 h-16 rounded-full bg-pastel-orange-light flex items-center justify-center mb-4">
170
- <i class="fas fa-map-signs text-2xl text-amber-600"></i>
 
 
 
 
 
 
 
 
 
 
 
 
171
  </div>
172
- <h3 class="text-xl font-bold mb-2">ทัวร์และประสบการณ์</h3>
173
- <p class="text-gray-600">เปิดโลกเที่ยวชมสถานที่สวยงามและวัฒนธรรมของวังสามหมอ</p>
174
  </div>
175
  </div>
176
- </div>
177
- </div>
178
- </section>
179
-
180
- <!-- History Page -->
181
- <section id="history" class="page-section hidden py-16 min-h-screen bg-white">
182
- <div class="container mx-auto px-4">
183
- <div class="text-center mb-12">
184
- <h2 class="text-3xl font-bold">ประวัติศาสตร์<span class="text-amber-700">แห่งวังสามหมอ</span></h2>
185
- <div class="w-24 h-1 bg-amber-500 mx-auto mt-3"></div>
186
- </div>
187
-
188
- <div class="flex flex-col lg:flex-row gap-8 items-center">
189
- <div class="lg:w-1/2">
190
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-80"></div>
191
- </div>
192
- <div class="lg:w-1/2">
193
- <h3 class="text-2xl font-bold mb-4">เรื่องเล่าขานของเมือง</h3>
194
- <p class="mb-4">
195
- วังสามหมอเป็นตำบลในพื้นที่อำเภอโนนสูงของจังหวัดนครราชสีมา โดยมีสถานที่ที่ขึ้นชื่อคือ วัดสามัคคีธรรมวนาราม หรือชาวบ้านเรียกติดปากว่า "วัดเขาใหญ่" ด้วยสถาปัตยกรรมที่สวยงามของวิหารแก้วกลางน้ำ แม้ว่ามีผู้คนมาสักการะน้อยลงเนื่องจากความลาดชันและความแข็งแรงของสถานที่ แต่ก็ยังเป็นสถานที่ท่องเที่ยวที่สำคัญ
196
- </p>
197
- <p>
198
- ชื่อ "วังสามหมอ" นั้นมีที่มาจากตำนานเล่าขานว่า ในอดีตมีหมออยู่สามท่านที่เป็นภิกษุและมีความรู้ด้านแพทย์แผนโบราณอย่างเชี่ยวชาญ สามารถรักษาผู้คนได้อย่างยอดเยี่ยม จึงเป็นที่รักใคร่นับถือของชาวบ้าน และตั้งหมู่บ้านชื่อว่า "หมู่บ้านวังสามหมอ" จนทุกวันนี้
199
- </p>
200
- </div>
201
- </div>
202
-
203
- <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8">
204
- <div class="bg-pastel-orange-light rounded-2xl p-6">
205
- <h4 class="text-xl font-bold mb-3">วัฒนธรรมและประเพณี</h4>
206
- <p>
207
- ประเพณีสำคัญของชาววังสามหมอคือ การทำบุญวันมาฆบูชาและวันสำคัญทางศาสนา ถือเป็นประเพณีที่กระทำกันมาช้านาน นอกจากนี้ยังมีการรักษาวิถีชีวิตพื้นบ้านแบบดั้งเดิมไว้อย่างเหนียวแน่น
208
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
209
  </div>
210
- <div class="bg-pastel-orange-light rounded-2xl p-6">
211
- <h4 class="text-xl font-bold mb-3">แหล่งท่องเที่ยวสำคัญ</h4>
212
- <p>
213
- น้ำตกถ้ำสวย มูลนิธิหลวงพ่อโต ถ้ำนางคอย และสถานปฏิบัติธรรมถ้ำคนองเป็นสถานที่น่าสนใจในท้องถิ่นนอกจากวัดเขาใหญ่ ทั้งเป็นสถานที่ศักดิ์สิทธิ์และมีธรรมชาติอันสวยงาม
214
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
  </div>
216
  </div>
217
- </div>
218
- </section>
219
-
220
- <!-- Content Page -->
221
- <section id="content" class="page-section hidden py-16 min-h-screen bg-pastel-orange-light">
222
- <div class="container mx-auto px-4">
223
- <div class="text-center mb-12">
224
- <h2 class="text-3xl font-bold">คอนเทนท์<span class="text-amber-700">ท้องถิ่น</span></h2>
225
- <p class="text-xl">การเดินทาง วัฒนธรรม และสถานที่น่าสนใจ</p>
226
- <div class="w-24 h-1 bg-amber-500 mx-auto mt-3"></div>
227
- </div>
228
 
229
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
230
- <!-- Placeholder cards for content -->
231
- <div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition">
232
- <div class="bg-gray-200 border-2 border-dashed w-full h-48"></div>
233
- <div class="p-5">
234
- <span class="text-orange-600 font-medium text-sm"><i class="fas fa-calendar-alt mr-1"></i> 5 สิงหาคม 2566</span>
235
- <h3 class="text-xl font-bold my-2">เส้นทางผจญภัยบนเขาใหญ่สุดมัน</h3>
236
- <p class="text-gray-600">สำรวจเส้นทางเดินป่าและจุดชมวิวยอดฮิตน่าไปทำเป็นกิจกรรมครั้งหนึ่งในชีวิต</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </div>
238
  </div>
239
 
240
- <div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition">
241
- <div class="bg-gray-200 border-2 border-dashed w-full h-48"></div>
242
- <div class="p-5">
243
- <span class="text-orange-600 font-medium text-sm"><i class="fas fa-calendar-alt mr-1"></i> 21 กรกฎาคม 2566</span>
244
- <h3 class="text-xl font-bold my-2">สูตรลับแกงคั่วหอยขมแม่ศรีจันทร์</h3>
245
- <p class="text-gray-600">แกะรอยตำรับอาหารพื้นบ้านเพื่อสุขภาพที่สืบทอดกันมานานหลายชั่วอายุคน</p>
 
 
 
 
 
 
 
 
 
 
246
  </div>
247
- </div>
248
-
249
- <div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition">
250
- <div class="bg-gray-200 border-2 border-dashed w-full h-48"></div>
251
- <div class="p-5">
252
- <span class="text-orange-600 font-medium text-sm"><i class="fas fa-calendar-alt mr-1"></i> 4 กรกฎาคม 2566</span>
253
- <h3 class="text-xl font-bold my-2">งานเลี้ยงบุญขนครชัยเมืองวังสามหมอ</h3>
254
- <p class="text-gray-600">ร่วมเรียนรู้ประเพณีเก่าแก่ที่ยังคงมีลมหายใจแม้ว่าจะก้าวสู่ศตวรรษที่ 21</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
255
  </div>
256
  </div>
257
  </div>
258
 
259
- <!-- Video section -->
260
- <div class="mt-16 bg-white rounded-2xl p-6 shadow-md">
261
- <h3 class="text-2xl font-bold mb-6">วังสามหมอบนภาพยนตร์</h3>
262
- <div class="flex flex-col lg:flex-row gap-8 items-center">
263
- <div class="lg:w-1/2">
264
- <div class="bg-gray-200 border-2 border-dashed rounded-xl w-full h-96"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
265
  </div>
266
- <div class="lg:w-1/2">
267
- <h4 class="text-xl font-bold mb-3">สำรวจเบื้องหลังความงามผ่านลวดกล้อง</h4>
268
- <p>
269
- หนังสั้นเรื่อง "ทางลัดวังสามหมอ" ซึ่งได้รับการคัดเลือกแสดงในเทศกาลภาพยนตร์ท้องถิ่น ได้นำเสนอด้านน้อยรู้ของวัฒนธรรมและธรรมชาติอันเขียวชอุ่ม ได้เสียงวิจารณ์ที่ดีจากผู้ชมและนักวิจารณ์ได้อย่างภาคภูมิ
270
- </p>
271
- <div class="mt-4 flex gap-3">
272
- <a href="#" class="px-4 py-2 bg-orange-500 text-white rounded-full text-sm">ดูทั้งหมด</a>
273
- <a href="#" class="px-4 py-2 border border-orange-500 text-orange-500 rounded-full text-sm">แบ่งปัน</a>
 
 
 
 
 
 
 
 
 
 
274
  </div>
275
  </div>
276
  </div>
277
  </div>
278
- </div>
279
- </section>
280
-
281
- <!-- Business Directory Page (simplified for layout) -->
282
- <section id="business" class="page-section hidden py-16 min-h-screen bg-white">
283
- <div class="container mx-auto px-4">
284
- <!-- Section content would be similar structured -->
285
- </div>
286
- </section>
287
-
288
- <!-- Jobs Page (simplified for layout) -->
289
- <section id="jobs" class="page-section hidden py-16 min-h-screen bg-pastel-orange-light">
290
- <div class="container mx-auto px-4">
291
- <!-- Section content would be similar structured -->
292
- </div>
293
- </section>
294
-
295
- <!-- Pricing Page (simplified for layout) -->
296
- <section id="pricing" class="page-section hidden py-16 min-h-screen bg-white">
297
- <div class="container mx-auto px-4">
298
- <!-- Section content would be similar structured -->
299
- </div>
300
- </section>
301
-
302
- <!-- About Us Page (simplified for layout) -->
303
- <section id="about" class="page-section hidden py-16 min-h-screen bg-pastel-orange-light">
304
- <div class="container mx-auto px-4">
305
- <!-- Section content would be similar structured -->
306
- </div>
307
- </section>
308
-
309
- <!-- Login Page (simplified for layout) -->
310
- <section id="login" class="page-section hidden py-16 min-h-screen bg-white">
311
- <div class="container mx-auto px-4">
312
- <!-- Section content would be similar structured -->
313
- </div>
314
- </section>
315
- </main>
316
-
317
- <!-- Footer -->
318
- <footer class="bg-gray-900 text-white pt-12 pb-4">
319
- <div class="container mx-auto px-4">
320
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
321
- <div>
322
- <div class="flex items-center space-x-2 mb-4">
323
- <div class="w-10 h-10 rounded-lg bg-pastel-orange flex items-center justify-center">
324
- <i class="fas fa-pagoda text-white"></i>
325
- </div>
326
- <h2 class="text-xl font-bold">ที่นี่<span class="text-orange-400">วังสามหมอ</span></h2>
327
  </div>
328
- <p class="text-gray-400">
329
- แพลตฟอร์มเพื่อการท่องเที่ยวและโอกาสทางอาชีพในชุมชนวังสามหมอ อำเภอโนนสูง จังหวัดนครราชสีมา
330
- </p>
331
  </div>
332
 
333
- <div>
334
- <h3 class="text-lg font-bold mb-4">ลิงก์สำคัญ</h3>
335
- <ul class="space-y-2">
336
- <li><a href="#" class="text-gray-400 hover:text-white transition">นโยบายความเป็นส่วนตัว</a></li>
337
- <li><a href="#" class="text-gray-400 hover:text-white transition">ข้อกำหนดการใช้งาน</a></li>
338
- <li><a href="#" class="text-gray-400 hover:text-white transition">คำถามที่พบบ่อย</a></li>
339
- <li><a href="#" class="text-gray-400 hover:text-white transition">คำติชม</a></li>
340
- </ul>
341
  </div>
342
 
343
- <div>
344
- <h3 class="text-lg font-bold mb-4">ติดต่อเรา</h3>
345
- <ul class="space-y-2">
346
- <li class="flex items-start">
347
- <i class="fas fa-map-marker-alt text-orange-500 mt-1 mr-2"></i>
348
- <span class="text-gray-400">ตำบลวังสามหมอ อำเภอโนนสูง จังหวัดนครราชสีมา</span>
349
- </li>
350
- <li class="flex items-start">
351
- <i class="fas fa-phone text-orange-500 mt-1 mr-2"></i>
352
- <span class="text-gray-400">044-123456</span>
353
- </li>
354
- <li class="flex items-start">
355
- <i class="fas fa-envelope text-orange-500 mt-1 mr-2"></i>
356
- <span class="text-gray-400">info@wangsammo.com</span>
357
- </li>
358
- </ul>
359
  </div>
360
 
361
- <div>
362
- <h3 class="text-lg font-bold mb-4">ติดตามเรา</h3>
363
- <div class="flex space-x-3">
364
- <a href="#" class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center hover:bg-orange-700 transition">
365
- <i class="fab fa-facebook-f"></i>
366
- </a>
367
- <a href="#" class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center hover:bg-orange-700 transition">
368
- <i class="fab fa-instagram"></i>
369
- </a>
370
- <a href="#" class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center hover:bg-orange-700 transition">
371
- <i class="fab fa-line"></i>
372
- </a>
373
- <a href="#" class="w-10 h-10 rounded-full bg-orange-600 flex items-center justify-center hover:bg-orange-700 transition">
374
- <i class="fab fa-youtube"></i>
375
- </a>
376
  </div>
377
  </div>
378
  </div>
379
-
380
- <div class="border-t border-gray-800 mt-8 pt-4 text-center text-gray-500">
381
- <p>&copy; 2023 ที่นี่วังสามหมอ - ทัวร์ เดอร์ หวัง. สงวนลิขสิทธิ์.</p>
382
- </div>
383
  </div>
384
- </footer>
385
-
386
- <!-- JavaScript for navigation and interactions -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
387
  <script>
388
- // Toggle mobile menu
389
- document.getElementById('mobileMenuButton').addEventListener('click', function() {
390
- const menu = document.getElementById('mobileMenu');
391
- menu.classList.toggle('hidden');
392
- });
393
-
394
  // Page navigation
395
- const navLinks = document.querySelectorAll('.page-link');
396
- const sections = document.querySelectorAll('.page-section');
397
-
398
- function navigateTo(targetId) {
399
- sections.forEach(section => {
400
- section.classList.add('hidden');
401
- section.classList.remove('section-transition');
402
- });
403
-
404
- document.getElementById(targetId).classList.remove('hidden');
405
- document.getElementById(targetId).classList.add('section-transition');
406
-
407
- const mobileMenu = document.getElementById('mobileMenu');
408
- mobileMenu.classList.add('hidden');
409
-
410
- // Scroll to top
411
- window.scrollTo(0, 0);
412
- }
413
-
414
- navLinks.forEach(link => {
415
  link.addEventListener('click', function(e) {
416
  e.preventDefault();
417
- const target = this.dataset.target;
418
- navigateTo(target);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
419
  });
420
  });
421
-
422
- // Set homepage as default
423
- window.addEventListener('DOMContentLoaded', () => {
424
- navigateTo('home');
 
 
 
 
 
 
 
 
 
425
  });
426
  </script>
427
  <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=kritsanan/instructa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
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>NexusFlow | Advanced Content Management</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
9
  <script>
10
  tailwind.config = {
11
  theme: {
12
  extend: {
13
  colors: {
14
+ primary: '#6366f1',
15
+ secondary: '#8b5cf6',
16
+ dark: '#0f172a',
17
+ accent: '#06b6d4'
18
  },
19
  fontFamily: {
20
+ sans: ['Inter', 'sans-serif']
21
  }
22
  }
23
  }
24
  }
25
  </script>
26
  <style>
27
+ :root {
28
+ --glass-bg: rgba(255, 255, 255, 0.08);
29
+ --glass-border: rgba(255, 255, 255, 0.1);
30
+ --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
31
+ }
32
+
33
  body {
34
+ background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
35
+ color: #e2e8f0;
36
+ min-height: 100vh;
37
+ overflow-x: hidden;
38
+ }
39
+
40
+ .glass-panel {
41
+ background: var(--glass-bg);
42
+ backdrop-filter: blur(12px);
43
+ -webkit-backdrop-filter: blur(12px);
44
+ border: 1px solid var(--glass-border);
45
+ box-shadow: var(--glass-shadow);
46
+ border-radius: 16px;
47
+ }
48
+
49
+ .neumorphic {
50
+ border-radius: 16px;
51
+ background: linear-gradient(145deg, #1e293b, #0f172a);
52
+ box-shadow: 10px 10px 20px #0d1425,
53
+ -10px -10px 20px #1e2c4b;
54
+ }
55
+
56
+ .cube {
57
+ transform-style: preserve-3d;
58
+ transform: rotateX(-20deg) rotateY(30deg);
59
+ animation: rotate 15s infinite linear;
60
+ }
61
+
62
+ .cube-face {
63
+ position: absolute;
64
+ width: 100px;
65
+ height: 100px;
66
+ border: 2px solid rgba(99, 102, 241, 0.6);
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ background: rgba(15, 23, 42, 0.7);
71
  }
72
+
73
+ .front { transform: translateZ(50px); }
74
+ .back { transform: rotateY(180deg) translateZ(50px); }
75
+ .right { transform: rotateY(90deg) translateZ(50px); }
76
+ .left { transform: rotateY(-90deg) translateZ(50px); }
77
+ .top { transform: rotateX(90deg) translateZ(50px); }
78
+ .bottom { transform: rotateX(-90deg) translateZ(50px); }
79
+
80
+ @keyframes rotate {
81
+ 0% { transform: rotateX(-20deg) rotateY(0deg); }
82
+ 100% { transform: rotateX(-20deg) rotateY(360deg); }
83
+ }
84
+
85
+ .gradient-border {
86
  position: relative;
87
+ background: linear-gradient(135deg, #0f172a, #1e293b);
88
+ border-radius: 16px;
89
  }
90
+
91
+ .gradient-border::before {
92
+ content: '';
93
  position: absolute;
94
+ top: -2px;
95
+ left: -2px;
96
+ right: -2px;
97
+ bottom: -2px;
98
+ background: linear-gradient(45deg, #6366f1, #8b5cf6, #06b6d4);
99
+ border-radius: 18px;
100
+ z-index: -1;
101
  }
102
+
103
+ .page-transition {
104
+ transition: all 0.3s ease;
105
  }
106
+
107
+ .active-tab {
108
+ background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
109
+ border-left: 3px solid #8b5cf6;
110
  }
111
+
112
+ .chart-bar {
113
+ transition: height 0.5s ease;
114
  }
115
+
116
+ .pulse {
117
+ animation: pulse 2s infinite;
118
+ }
119
+
120
+ @keyframes pulse {
121
+ 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
122
+ 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
123
+ 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
124
+ }
125
+
126
+ @media (max-width: 768px) {
127
+ .mobile-menu {
128
+ position: fixed;
129
+ bottom: 0;
130
+ left: 0;
131
+ right: 0;
132
+ z-index: 50;
133
+ }
134
  }
135
  </style>
136
  </head>
137
+ <body class="font-sans">
138
+ <!-- Main Layout -->
139
+ <div class="flex flex-col md:flex-row h-screen">
140
+ <!-- Sidebar -->
141
+ <div class="w-full md:w-64 bg-dark p-4 flex flex-col">
142
+ <div class="mb-8">
143
+ <h1 class="text-2xl font-bold text-white flex items-center">
144
+ <span class="bg-gradient-to-r from-primary to-secondary text-transparent bg-clip-text">Nexus</span>Flow
145
+ </h1>
146
+ <p class="text-slate-400 text-sm">Advanced Content Platform</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
147
  </div>
148
 
149
+ <nav class="flex-1">
150
+ <ul class="space-y-1">
151
+ <li>
152
+ <a href="#" data-page="dashboard" class="nav-link active-tab">
153
+ <span>📊</span> Dashboard
154
+ </a>
155
+ </li>
156
+ <li>
157
+ <a href="#" data-page="content" class="nav-link">
158
+ <span>🧠</span> AI Content Creation
159
+ </a>
160
+ </li>
161
+ <li>
162
+ <a href="#" data-page="scheduling" class="nav-link">
163
+ <span>⏱️</span> Advanced Scheduling
164
+ </a>
165
+ </li>
166
+ <li>
167
+ <a href="#" data-page="analytics" class="nav-link">
168
+ <span>📈</span> 3D Analytics
169
+ </a>
170
+ </li>
171
+ <li>
172
+ <a href="#" data-page="preview" class="nav-link">
173
+ <span>👁️</span> 3D Content Preview
174
+ </a>
175
+ </li>
176
+ <li>
177
+ <a href="#" data-page="team" class="nav-link">
178
+ <span>👥</span> Team Management
179
+ </a>
180
+ </li>
181
+ <li>
182
+ <a href="#" data-page="history" class="nav-link">
183
+ <span>🕒</span> Post History
184
+ </a>
185
+ </li>
186
+ </ul>
187
  </nav>
188
+
189
+ <div class="mt-auto">
190
+ <div class="flex items-center gap-3 p-3 glass-panel rounded-xl">
191
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
192
+ <span class="text-white font-bold">A</span>
193
+ </div>
194
+ <div>
195
+ <p class="text-sm font-medium">Admin User</p>
196
+ <p class="text-xs text-slate-400">admin@nexusflow.com</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
  </div>
201
+
202
+ <!-- Main Content -->
203
+ <div class="flex-1 overflow-auto">
204
+ <!-- Top Bar -->
205
+ <div class="p-4 border-b border-slate-800 flex justify-between items-center">
206
+ <h2 class="text-xl font-semibold" id="page-title">Dashboard</h2>
207
+ <div class="flex items-center gap-4">
208
+ <div class="relative">
209
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
210
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
211
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
212
+ </svg>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  </div>
214
+ <input type="text" class="bg-slate-800 border border-slate-700 rounded-lg py-2 pl-10 pr-4 text-sm focus:outline-none focus:ring-1 focus:ring-primary" placeholder="Search...">
215
  </div>
216
+
217
+ <div class="flex gap-3">
218
+ <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition">
219
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
220
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
221
+ </svg>
222
+ </button>
223
+
224
  <div class="relative">
225
+ <select class="appearance-none bg-slate-800 border border-slate-700 rounded-lg py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-1 focus:ring-primary">
226
+ <option>English</option>
227
+ <option>Spanish</option>
228
+ <option>French</option>
229
+ <option>German</option>
230
+ </select>
231
+ <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
232
+ <svg class="h-4 w-4 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
233
+ <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
234
+ </svg>
235
  </div>
236
  </div>
237
  </div>
238
  </div>
239
+ </div>
240
+
241
+ <!-- Page Content -->
242
+ <div id="page-content" class="p-4 md:p-6">
243
+ <!-- Dashboard Page -->
244
+ <div id="dashboard" class="page page-transition">
245
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
246
+ <div class="glass-panel p-5 rounded-xl">
247
+ <div class="flex justify-between items-start">
248
+ <div>
249
+ <p class="text-slate-400">Content Generated</p>
250
+ <p class="text-2xl font-bold mt-1">1,248</p>
251
+ </div>
252
+ <div class="p-3 rounded-lg bg-primary/10">
253
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
254
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
255
+ </svg>
256
+ </div>
257
+ </div>
258
+ <div class="mt-3 h-2 bg-slate-700 rounded-full overflow-hidden">
259
+ <div class="h-full bg-primary rounded-full" style="width: 75%"></div>
260
  </div>
 
 
261
  </div>
262
+
263
+ <div class="glass-panel p-5 rounded-xl">
264
+ <div class="flex justify-between items-start">
265
+ <div>
266
+ <p class="text-slate-400">Scheduled Posts</p>
267
+ <p class="text-2xl font-bold mt-1">84</p>
268
+ </div>
269
+ <div class="p-3 rounded-lg bg-secondary/10">
270
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
271
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
272
+ </svg>
273
+ </div>
274
+ </div>
275
+ <div class="mt-3 h-2 bg-slate-700 rounded-full overflow-hidden">
276
+ <div class="h-full bg-secondary rounded-full" style="width: 60%"></div>
277
  </div>
 
 
278
  </div>
279
+
280
+ <div class="glass-panel p-5 rounded-xl">
281
+ <div class="flex justify-between items-start">
282
+ <div>
283
+ <p class="text-slate-400">Team Members</p>
284
+ <p class="text-2xl font-bold mt-1">12</p>
285
+ </div>
286
+ <div class="p-3 rounded-lg bg-accent/10">
287
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
288
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
289
+ </svg>
290
+ </div>
291
+ </div>
292
+ <div class="mt-3 h-2 bg-slate-700 rounded-full overflow-hidden">
293
+ <div class="h-full bg-accent rounded-full" style="width: 90%"></div>
294
  </div>
 
 
295
  </div>
296
  </div>
297
+
298
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
299
+ <div class="glass-panel p-5 rounded-xl">
300
+ <div class="flex justify-between items-center mb-4">
301
+ <h3 class="font-semibold">Engagement Analytics</h3>
302
+ <button class="text-sm text-primary">View Report</button>
303
+ </div>
304
+ <div class="h-64">
305
+ <div class="flex items-end h-5/6 gap-4 mt-6">
306
+ <div class="flex-1 flex flex-col items-center">
307
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 70%"></div>
308
+ <span class="text-xs mt-2 text-slate-400">Mon</span>
309
+ </div>
310
+ <div class="flex-1 flex flex-col items-center">
311
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 85%"></div>
312
+ <span class="text-xs mt-2 text-slate-400">Tue</span>
313
+ </div>
314
+ <div class="flex-1 flex flex-col items-center">
315
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 65%"></div>
316
+ <span class="text-xs mt-2 text-slate-400">Wed</span>
317
+ </div>
318
+ <div class="flex-1 flex flex-col items-center">
319
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 90%"></div>
320
+ <span class="text-xs mt-2 text-slate-400">Thu</span>
321
+ </div>
322
+ <div class="flex-1 flex flex-col items-center">
323
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 75%"></div>
324
+ <span class="text-xs mt-2 text-slate-400">Fri</span>
325
+ </div>
326
+ <div class="flex-1 flex flex-col items-center">
327
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 95%"></div>
328
+ <span class="text-xs mt-2 text-slate-400">Sat</span>
329
+ </div>
330
+ <div class="flex-1 flex flex-col items-center">
331
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 80%"></div>
332
+ <span class="text-xs mt-2 text-slate-400">Sun</span>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="glass-panel p-5 rounded-xl">
339
+ <div class="flex justify-between items-center mb-4">
340
+ <h3 class="font-semibold">Sentiment Analysis</h3>
341
+ <div class="flex gap-2">
342
+ <button class="text-xs px-2 py-1 rounded bg-slate-800">Week</button>
343
+ <button class="text-xs px-2 py-1 rounded bg-primary text-white">Month</button>
344
+ <button class="text-xs px-2 py-1 rounded bg-slate-800">Year</button>
345
+ </div>
346
+ </div>
347
+ <div class="flex items-center justify-center h-64">
348
+ <div class="relative w-48 h-48">
349
+ <div class="absolute inset-0 rounded-full border-8 border-slate-700"></div>
350
+ <div class="absolute inset-0 rounded-full border-8 border-primary border-t-transparent border-r-transparent transform -rotate-45" style="clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);"></div>
351
+ <div class="absolute inset-0 rounded-full border-8 border-secondary border-b-transparent border-l-transparent transform rotate-45" style="clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);"></div>
352
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
353
+ <span class="text-2xl font-bold">78%</span>
354
+ <span class="text-xs text-slate-400">Positive</span>
355
+ </div>
356
+ </div>
357
+ <div class="ml-8">
358
+ <div class="flex items-center mb-3">
359
+ <div class="w-3 h-3 rounded-full bg-primary mr-2"></div>
360
+ <span class="text-sm">Positive: 78%</span>
361
+ </div>
362
+ <div class="flex items-center mb-3">
363
+ <div class="w-3 h-3 rounded-full bg-secondary mr-2"></div>
364
+ <span class="text-sm">Neutral: 15%</span>
365
+ </div>
366
+ <div class="flex items-center">
367
+ <div class="w-3 h-3 rounded-full bg-rose-500 mr-2"></div>
368
+ <span class="text-sm">Negative: 7%</span>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
  </div>
374
+
375
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
376
+ <div class="glass-panel p-5 rounded-xl">
377
+ <h3 class="font-semibold mb-4">Recent Activity</h3>
378
+ <div class="space-y-4">
379
+ <div class="flex">
380
+ <div class="mr-3">
381
+ <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
382
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
383
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
384
+ </svg>
385
+ </div>
386
+ </div>
387
+ <div>
388
+ <p class="text-sm font-medium">New blog post published</p>
389
+ <p class="text-xs text-slate-400">2 hours ago</p>
390
+ </div>
391
+ </div>
392
+ <div class="flex">
393
+ <div class="mr-3">
394
+ <div class="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center">
395
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
396
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
397
+ </svg>
398
+ </div>
399
+ </div>
400
+ <div>
401
+ <p class="text-sm font-medium">Content scheduled</p>
402
+ <p class="text-xs text-slate-400">5 hours ago</p>
403
+ </div>
404
+ </div>
405
+ <div class="flex">
406
+ <div class="mr-3">
407
+ <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center">
408
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent" fill="none" viewBox="0 0 24 24" stroke="currentColor">
409
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
410
+ </svg>
411
+ </div>
412
+ </div>
413
+ <div>
414
+ <p class="text-sm font-medium">AI content generated</p>
415
+ <p class="text-xs text-slate-400">Yesterday</p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="glass-panel p-5 rounded-xl lg:col-span-2">
422
+ <h3 class="font-semibold mb-4">Top Trending Topics</h3>
423
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
424
+ <div class="gradient-border p-4 rounded-xl">
425
+ <div class="text-lg font-bold">#AI</div>
426
+ <div class="text-xs text-slate-400 mt-1">12.5K mentions</div>
427
+ </div>
428
+ <div class="gradient-border p-4 rounded-xl">
429
+ <div class="text-lg font-bold">#Web3</div>
430
+ <div class="text-xs text-slate-400 mt-1">8.2K mentions</div>
431
+ </div>
432
+ <div class="gradient-border p-4 rounded-xl">
433
+ <div class="text-lg font-bold">#Metaverse</div>
434
+ <div class="text-xs text-slate-400 mt-1">7.9K mentions</div>
435
+ </div>
436
+ <div class="gradient-border p-4 rounded-xl">
437
+ <div class="text-lg font-bold">#SaaS</div>
438
+ <div class="text-xs text-slate-400 mt-1">6.7K mentions</div>
439
+ </div>
440
+ <div class="gradient-border p-4 rounded-xl">
441
+ <div class="text-lg font-bold">#Blockchain</div>
442
+ <div class="text-xs text-slate-400 mt-1">5.8K mentions</div>
443
+ </div>
444
+ <div class="gradient-border p-4 rounded-xl">
445
+ <div class="text-lg font-bold">#UXDesign</div>
446
+ <div class="text-xs text-slate-400 mt-1">5.3K mentions</div>
447
+ </div>
448
+ </div>
449
+ </div>
450
  </div>
451
  </div>
 
 
 
 
 
 
 
 
 
 
 
452
 
453
+ <!-- AI Content Creation Page -->
454
+ <div id="content" class="page page-transition hidden">
455
+ <div class="glass-panel p-6 rounded-xl mb-6">
456
+ <h2 class="text-xl font-bold mb-4">AI Content Generator</h2>
457
+
458
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
459
+ <div>
460
+ <div class="mb-4">
461
+ <label class="block text-sm font-medium mb-2">Content Type</label>
462
+ <select class="w-full bg-slate-800 border border-slate-700 rounded-lg py-2 px-3 focus:outline-none focus:ring-1 focus:ring-primary">
463
+ <option>Blog Post</option>
464
+ <option>Social Media Post</option>
465
+ <option>Email Newsletter</option>
466
+ <option>Product Description</option>
467
+ <option>Press Release</option>
468
+ </select>
469
+ </div>
470
+
471
+ <div class="mb-4">
472
+ <label class="block text-sm font-medium mb-2">Topic</label>
473
+ <input type="text" class="w-full bg-slate-800 border border-slate-700 rounded-lg py-2 px-3 focus:outline-none focus:ring-1 focus:ring-primary" placeholder="Enter topic...">
474
+ </div>
475
+
476
+ <div class="mb-4">
477
+ <label class="block text-sm font-medium mb-2">Keywords</label>
478
+ <input type="text" class="w-full bg-slate-800 border border-slate-700 rounded-lg py-2 px-3 focus:outline-none focus:ring-1 focus:ring-primary" placeholder="Enter keywords (comma separated)...">
479
+ </div>
480
+
481
+ <div class="mb-4">
482
+ <label class="block text-sm font-medium mb-2">Tone</label>
483
+ <div class="flex flex-wrap gap-2">
484
+ <button class="px-3 py-1 rounded-full bg-slate-800 text-sm hover:bg-slate-700">Professional</button>
485
+ <button class="px-3 py-1 rounded-full bg-slate-800 text-sm hover:bg-slate-700">Casual</button>
486
+ <button class="px-3 py-1 rounded-full bg-slate-800 text-sm hover:bg-slate-700">Enthusiastic</button>
487
+ <button class="px-3 py-1 rounded-full bg-slate-800 text-sm hover:bg-slate-700">Informative</button>
488
+ <button class="px-3 py-1 rounded-full bg-primary text-white text-sm">Persuasive</button>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="mb-4">
493
+ <label class="block text-sm font-medium mb-2">Length</label>
494
+ <div class="flex items-center">
495
+ <span class="text-sm mr-2">Short</span>
496
+ <input type="range" class="w-full" min="1" max="3" value="2">
497
+ <span class="text-sm ml-2">Long</span>
498
+ </div>
499
+ </div>
500
+
501
+ <button class="w-full py-3 bg-gradient-to-r from-primary to-secondary rounded-lg font-medium flex items-center justify-center">
502
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
503
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
504
+ </svg>
505
+ Generate Content
506
+ </button>
507
+ </div>
508
+
509
+ <div class="bg-slate-900 rounded-xl p-4">
510
+ <div class="flex justify-between items-center mb-4">
511
+ <h3 class="font-medium">Generated Content Preview</h3>
512
+ <div class="flex gap-2">
513
+ <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700">
514
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
515
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
516
+ </svg>
517
+ </button>
518
+ <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700">
519
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
520
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
521
+ </svg>
522
+ </button>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="bg-slate-800 rounded-lg p-4 h-80 overflow-auto">
527
+ <div class="animate-pulse">
528
+ <div class="h-4 bg-slate-700 rounded w-3/4 mb-3"></div>
529
+ <div class="h-4 bg-slate-700 rounded w-full mb-3"></div>
530
+ <div class="h-4 bg-slate-700 rounded w-5/6 mb-3"></div>
531
+ <div class="h-4 bg-slate-700 rounded w-4/5 mb-4"></div>
532
+
533
+ <div class="h-4 bg-slate-700 rounded w-2/3 mb-3"></div>
534
+ <div class="h-4 bg-slate-700 rounded w-full mb-3"></div>
535
+ <div class="h-4 bg-slate-700 rounded w-3/4 mb-3"></div>
536
+ </div>
537
+ </div>
538
+
539
+ <div class="flex gap-2 mt-4">
540
+ <button class="flex-1 py-2 rounded-lg bg-slate-800 hover:bg-slate-700">Regenerate</button>
541
+ <button class="flex-1 py-2 rounded-lg bg-gradient-to-r from-primary to-secondary">Save & Schedule</button>
542
+ </div>
543
+ </div>
544
  </div>
545
  </div>
546
 
547
+ <div class="glass-panel p-6 rounded-xl">
548
+ <h2 class="text-xl font-bold mb-4">Sentiment & Trend Analysis</h2>
549
+
550
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
551
+ <div class="gradient-border p-4 rounded-xl">
552
+ <div class="text-2xl font-bold text-green-400">84%</div>
553
+ <div class="text-sm text-slate-400 mt-1">Positive Sentiment</div>
554
+ </div>
555
+ <div class="gradient-border p-4 rounded-xl">
556
+ <div class="text-2xl font-bold">12.4K</div>
557
+ <div class="text-sm text-slate-400 mt-1">Estimated Reach</div>
558
+ </div>
559
+ <div class="gradient-border p-4 rounded-xl">
560
+ <div class="text-2xl font-bold text-amber-400">Medium</div>
561
+ <div class="text-sm text-slate-400 mt-1">Competition Level</div>
562
+ </div>
563
  </div>
564
+
565
+ <div class="bg-slate-900 rounded-xl p-4">
566
+ <h3 class="font-medium mb-4">Topic Performance Over Time</h3>
567
+ <div class="h-64">
568
+ <div class="flex items-end h-5/6 gap-4 mt-6">
569
+ <div class="flex-1 flex flex-col items-center">
570
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 40%"></div>
571
+ <span class="text-xs mt-2 text-slate-400">Jan</span>
572
+ </div>
573
+ <div class="flex-1 flex flex-col items-center">
574
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 55%"></div>
575
+ <span class="text-xs mt-2 text-slate-400">Feb</span>
576
+ </div>
577
+ <div class="flex-1 flex flex-col items-center">
578
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 65%"></div>
579
+ <span class="text-xs mt-2 text-slate-400">Mar</span>
580
+ </div>
581
+ <div class="flex-1 flex flex-col items-center">
582
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 75%"></div>
583
+ <span class="text-xs mt-2 text-slate-400">Apr</span>
584
+ </div>
585
+ <div class="flex-1 flex flex-col items-center">
586
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 90%"></div>
587
+ <span class="text-xs mt-2 text-slate-400">May</span>
588
+ </div>
589
+ <div class="flex-1 flex flex-col items-center">
590
+ <div class="chart-bar w-full bg-gradient-to-t from-primary to-secondary rounded-t-md" style="height: 95%"></div>
591
+ <span class="text-xs mt-2 text-slate-400">Jun</span>
592
+ </div>
593
+ </div>
594
+ </div>
595
  </div>
596
  </div>
597
  </div>
598
 
599
+ <!-- 3D Analytics Page -->
600
+ <div id="analytics" class="page page-transition hidden">
601
+ <div class="glass-panel p-6 rounded-xl mb-6">
602
+ <h2 class="text-xl font-bold mb-4">3D Analytics Dashboard</h2>
603
+
604
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
605
+ <div class="gradient-border p-5 rounded-xl flex flex-col items-center justify-center">
606
+ <div class="relative w-32 h-32 mb-4">
607
+ <div class="cube">
608
+ <div class="cube-face front"></div>
609
+ <div class="cube-face back"></div>
610
+ <div class="cube-face right"></div>
611
+ <div class="cube-face left"></div>
612
+ <div class="cube-face top"></div>
613
+ <div class="cube-face bottom"></div>
614
+ </div>
615
+ </div>
616
+ <h3 class="text-lg font-bold mb-1">Engagement</h3>
617
+ <p class="text-slate-400">3D Visualization</p>
618
+ </div>
619
+
620
+ <div class="gradient-border p-5 rounded-xl">
621
+ <h3 class="text-lg font-bold mb-4">Performance Metrics</h3>
622
+ <div class="space-y-4">
623
+ <div>
624
+ <div class="flex justify-between text-sm mb-1">
625
+ <span>Impressions</span>
626
+ <span>12.4K</span>
627
+ </div>
628
+ <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
629
+ <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 85%"></div>
630
+ </div>
631
+ </div>
632
+ <div>
633
+ <div class="flex justify-between text-sm mb-1">
634
+ <span>Engagement</span>
635
+ <span>8.7K</span>
636
+ </div>
637
+ <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
638
+ <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 72%"></div>
639
+ </div>
640
+ </div>
641
+ <div>
642
+ <div class="flex justify-between text-sm mb-1">
643
+ <span>Click-through</span>
644
+ <span>3.2K</span>
645
+ </div>
646
+ <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
647
+ <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 45%"></div>
648
+ </div>
649
+ </div>
650
+ <div>
651
+ <div class="flex justify-between text-sm mb-1">
652
+ <span>Conversions</span>
653
+ <span>1.1K</span>
654
+ </div>
655
+ <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
656
+ <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 32%"></div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+
662
+ <div class="gradient-border p-5 rounded-xl">
663
+ <h3 class="text-lg font-bold mb-4">Audience Insights</h3>
664
+ <div class="space-y-4">
665
+ <div class="flex items-center">
666
+ <div class="mr-3 w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
667
+ <span class="text-white text-xs">18-24</span>
668
+ </div>
669
+ <div class="flex-1">
670
+ <div class="flex justify-between text-sm">
671
+ <span>18-24 years</span>
672
+ <span>32%</span>
673
+ </div>
674
+ <div class="h-2 bg-slate-700 rounded-full overflow-hidden mt-1">
675
+ <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 32%"></div>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ <div class="flex items-center">
680
+ <div class="mr-3 w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
681
+ <span class="text-white text-xs">25-34</span>
682
+ </div>
683
+ <div class="flex-1">
684
+ <div class="flex justify-between text-sm">
685
+ <span>25-34 years</span>
686
+ <span>45%</span>
687
+ </div>
688
+ <div class="h-2 bg-slate-700 rounded-full overflow-hidden mt-1">
689
+ <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 45%"></div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ <div class="flex items-center">
694
+ <div class="mr-3 w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
695
+ <span class="text-white text-xs">35-44</span>
696
+ </div>
697
+ <div class="flex-1">
698
+ <div class="flex justify-between text-sm">
699
+ <span>35-44 years</span>
700
+ <span>18%</span>
701
+ </div>
702
+ <div class="h-2 bg-slate-700 rounded-full overflow-hidden mt-1">
703
+ <div class="h-full bg-gradient-to-r from-primary to-secondary rounded-full" style="width: 18%"></div>
704
+ </div>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ </div>
709
  </div>
710
+
711
+ <div class="bg-slate-900 rounded-xl p-4">
712
+ <h3 class="font-medium mb-4">3D Engagement Map</h3>
713
+ <div class="h-96 flex items-center justify-center relative">
714
+ <div class="absolute w-64 h-64 rounded-full border-2 border-primary/30"></div>
715
+ <div class="absolute w-48 h-48 rounded-full border-2 border-secondary/30"></div>
716
+ <div class="absolute w-32 h-32 rounded-full border-2 border-accent/30"></div>
717
+
718
+ <div class="absolute top-1/4 left-1/4 w-8 h-8 rounded-full bg-primary pulse"></div>
719
+ <div class="absolute top-1/3 right-1/3 w-6 h-6 rounded-full bg-secondary pulse"></div>
720
+ <div class="absolute bottom-1/4 left-1/3 w-10 h-10 rounded-full bg-accent pulse"></div>
721
+ <div class="absolute bottom-1/3 right-1/4 w-7 h-7 rounded-full bg-primary pulse"></div>
722
+ <div class="absolute top-1/2 left-1/2 w-5 h-5 rounded-full bg-secondary pulse"></div>
723
+
724
+ <div class="text-center z-10 bg-slate-900/80 p-4 rounded-xl">
725
+ <h4 class="font-bold">Interactive Engagement Map</h4>
726
+ <p class="text-sm text-slate-400 mt-1">Visualize audience interactions in 3D space</p>
727
+ </div>
728
  </div>
729
  </div>
730
  </div>
731
  </div>
732
+
733
+ <!-- Other pages would go here -->
734
+
735
+ <!-- Placeholder for other pages -->
736
+ <div id="scheduling" class="page page-transition hidden">
737
+ <div class="glass-panel p-6 rounded-xl text-center py-12">
738
+ <div class="text-5xl mb-4">⏱️</div>
739
+ <h2 class="text-2xl font-bold mb-2">Advanced Scheduling</h2>
740
+ <p class="text-slate-400">Schedule your content across multiple platforms</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
741
  </div>
 
 
 
742
  </div>
743
 
744
+ <div id="preview" class="page page-transition hidden">
745
+ <div class="glass-panel p-6 rounded-xl text-center py-12">
746
+ <div class="text-5xl mb-4">👁️</div>
747
+ <h2 class="text-2xl font-bold mb-2">3D Content Preview</h2>
748
+ <p class="text-slate-400">Preview your content in immersive 3D environments</p>
749
+ </div>
 
 
750
  </div>
751
 
752
+ <div id="team" class="page page-transition hidden">
753
+ <div class="glass-panel p-6 rounded-xl text-center py-12">
754
+ <div class="text-5xl mb-4">👥</div>
755
+ <h2 class="text-2xl font-bold mb-2">Team Management</h2>
756
+ <p class="text-slate-400">Collaborate with your team members</p>
757
+ </div>
 
 
 
 
 
 
 
 
 
 
758
  </div>
759
 
760
+ <div id="history" class="page page-transition hidden">
761
+ <div class="glass-panel p-6 rounded-xl text-center py-12">
762
+ <div class="text-5xl mb-4">🕒</div>
763
+ <h2 class="text-2xl font-bold mb-2">Post History</h2>
764
+ <p class="text-slate-400">Review your historical content performance</p>
 
 
 
 
 
 
 
 
 
 
765
  </div>
766
  </div>
767
  </div>
 
 
 
 
768
  </div>
769
+ </div>
770
+
771
+ <!-- Mobile Navigation -->
772
+ <div class="mobile-menu md:hidden fixed bottom-0 left-0 right-0 bg-dark border-t border-slate-800">
773
+ <div class="flex justify-around p-3">
774
+ <a href="#" data-page="dashboard" class="p-3 rounded-lg">
775
+ <span class="text-xl">📊</span>
776
+ </a>
777
+ <a href="#" data-page="content" class="p-3 rounded-lg">
778
+ <span class="text-xl">🧠</span>
779
+ </a>
780
+ <a href="#" data-page="analytics" class="p-3 rounded-lg">
781
+ <span class="text-xl">📈</span>
782
+ </a>
783
+ <a href="#" data-page="team" class="p-3 rounded-lg">
784
+ <span class="text-xl">👥</span>
785
+ </a>
786
+ </div>
787
+ </div>
788
+
789
  <script>
 
 
 
 
 
 
790
  // Page navigation
791
+ document.querySelectorAll('.nav-link, .mobile-menu a').forEach(link => {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
792
  link.addEventListener('click', function(e) {
793
  e.preventDefault();
794
+
795
+ // Get target page
796
+ const targetPage = this.getAttribute('data-page');
797
+
798
+ // Hide all pages
799
+ document.querySelectorAll('.page').forEach(page => {
800
+ page.classList.add('hidden');
801
+ });
802
+
803
+ // Show target page
804
+ document.getElementById(targetPage).classList.remove('hidden');
805
+
806
+ // Update page title
807
+ const pageTitles = {
808
+ 'dashboard': 'Dashboard',
809
+ 'content': 'AI Content Creation',
810
+ 'scheduling': 'Advanced Scheduling',
811
+ 'analytics': '3D Analytics',
812
+ 'preview': '3D Content Preview',
813
+ 'team': 'Team Management',
814
+ 'history': 'Post History'
815
+ };
816
+ document.getElementById('page-title').textContent = pageTitles[targetPage];
817
+
818
+ // Update active tab
819
+ document.querySelectorAll('.nav-link').forEach(tab => {
820
+ tab.classList.remove('active-tab');
821
+ });
822
+ this.classList.add('active-tab');
823
  });
824
  });
825
+
826
+ // Initialize animations for charts
827
+ document.querySelectorAll('.chart-bar').forEach(bar => {
828
+ // Store original height
829
+ const originalHeight = bar.style.height;
830
+
831
+ // Reset to 0 for animation
832
+ bar.style.height = '0';
833
+
834
+ // Animate after a short delay
835
+ setTimeout(() => {
836
+ bar.style.height = originalHeight;
837
+ }, 300);
838
  });
839
  </script>
840
  <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=kritsanan/instructa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>