Hugging Face's logo

Spaces:
maomaobj
/
medevolve-timeline-visualizer
Running

App Files Community
maomaobj commited on
Commit
241ea8a
·
verified ·
1 Parent(s): a015a2b

生成一张横向信息图，主题为“医学发展的三个阶段：经验医学 → 证据医学 → 智能医学”。

Browse files

视觉布局：
- 三个阶段依次从左到右排列（箭头连接），呈现演进关系。
- 左侧：经验医学（暖黄色，图标为医生与病人对话/古书）
- 中间：证据医学（蓝色，图标为数据图表/统计图）
- 右侧：智能医学（科技蓝或青色，图标为AI大脑/数字医生）
- 每个阶段下方简短描述一行关键词：
- 经验医学：以经验为主，依赖医生直觉
- 证据医学：以数据为据，循证与规范
- 智能医学：以智能为核，预测与精准
风格：扁平化科技风，背景为浅灰或白，带轻微渐变，居中标题“医学发展的三个阶段”。

输出格式：16:9，分辨率1920x1080，PNG。

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +210 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Medevolve Timeline Visualizer
3
- emoji: 🏃
4
- colorFrom: gray
5
- colorTo: yellow
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: MedEvolve Timeline Visualizer 🧬
3
+ colorFrom: pink
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://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,211 @@
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>Medical Evolution Timeline</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
16
+ overflow: hidden;
17
+ }
18
+
19
+ .timeline-container {
20
+ background: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);
21
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
22
+ border-radius: 24px;
23
+ position: relative;
24
+ overflow: hidden;
25
+ }
26
+
27
+ .stage-card {
28
+ transition: all 0.3s ease;
29
+ position: relative;
30
+ overflow: hidden;
31
+ }
32
+
33
+ .stage-card:hover {
34
+ transform: translateY(-8px);
35
+ }
36
+
37
+ .stage-card::before {
38
+ content: '';
39
+ position: absolute;
40
+ top: 0;
41
+ left: 0;
42
+ right: 0;
43
+ height: 4px;
44
+ background: currentColor;
45
+ opacity: 0.8;
46
+ }
47
+
48
+ .icon-container {
49
+ background: rgba(255, 255, 255, 0.9);
50
+ backdrop-filter: blur(10px);
51
+ border: 2px solid rgba(255, 255, 255, 0.3);
52
+ }
53
+
54
+ .arrow {
55
+ position: relative;
56
+ color: #64748b;
57
+ }
58
+
59
+ .arrow::before {
60
+ content: '';
61
+ position: absolute;
62
+ top: 50%;
63
+ left: 0;
64
+ right: 0;
65
+ height: 2px;
66
+ background: currentColor;
67
+ transform: translateY(-50%);
68
+ }
69
+
70
+ .arrow::after {
71
+ content: '';
72
+ position: absolute;
73
+ top: 50%;
74
+ right: 0;
75
+ width: 12px;
76
+ height: 12px;
77
+ border-right: 2px solid currentColor;
78
+ border-top: 2px solid currentColor;
79
+ transform: translateY(-50%) rotate(45deg);
80
+ }
81
+
82
+ @keyframes float {
83
+ 0%, 100% { transform: translateY(0px); }
84
+ 50% { transform: translateY(-10px); }
85
+ }
86
+
87
+ .floating {
88
+ animation: float 6s ease-in-out infinite;
89
+ }
90
+
91
+ .pulse-glow {
92
+ animation: pulse-glow 2s ease-in-out infinite alternate;
93
+ }
94
+
95
+ @keyframes pulse-glow {
96
+ from { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
97
+ to { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8); }
98
+ }
99
+ </style>
100
+ </head>
101
+ <body class="min-h-screen flex items-center justify-center p-8">
102
+ <div class="timeline-container w-full max-w-6xl aspect-video p-12">
103
+ <!-- Header -->
104
+ <div class="text-center mb-16">
105
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">医学发展的三个阶段</h1>
106
+ <p class="text-lg text-gray-600">The Three Stages of Medical Evolution</p>
107
+ </div>
108
+
109
+ <!-- Timeline -->
110
+ <div class="flex items-center justify-between relative">
111
+ <!-- Stage 1: Experience Medicine -->
112
+ <div class="stage-card flex-1 text-center mx-4" style="color: #f59e0b;">
113
+ <div class="icon-container w-32 h-32 rounded-2xl mx-auto mb-6 flex items-center justify-center floating">
114
+ <div class="relative">
115
+ <i data-feather="users" class="w-12 h-12" style="color: #f59e0b;"></i>
116
+ <i data-feather="book-open" class="w-8 h-8 absolute -bottom-2 -right-2" style="color: #d97706;"></i>
117
+ </div>
118
+ </div>
119
+ <h3 class="text-2xl font-semibold mb-4" style="color: #f59e0b;">经验医学</h3>
120
+ <p class="text-gray-600 text-lg leading-relaxed">以经验为主，依赖医生直觉</p>
121
+ <div class="mt-6 text-sm text-gray-500">
122
+ <p>传统智慧 · 临床经验 · 师徒传承</p>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Arrow 1 -->
127
+ <div class="arrow flex-1 mx-8">
128
+ <div class="text-center">
129
+ <i data-feather="arrow-right" class="w-8 h-8 mx-auto" style="color: #64748b;"></i>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Stage 2: Evidence Medicine -->
134
+ <div class="stage-card flex-1 text-center mx-4" style="color: #3b82f6;">
135
+ <div class="icon-container w-32 h-32 rounded-2xl mx-auto mb-6 flex items-center justify-center floating" style="animation-delay: 0.5s;">
136
+ <div class="relative">
137
+ <i data-feather="bar-chart-2" class="w-12 h-12" style="color: #3b82f6;"></i>
138
+ <i data-feather="database" class="w-8 h-8 absolute -bottom-2 -right-2" style="color: #1d4ed8;"></i>
139
+ </div>
140
+ </div>
141
+ <h3 class="text-2xl font-semibold mb-4" style="color: #3b82f6;">证据医学</h3>
142
+ <p class="text-gray-600 text-lg leading-relaxed">以数据为据，循证与规范</p>
143
+ <div class="mt-6 text-sm text-gray-500">
144
+ <p>临床试验 · 统计分析 · 标准指南</p>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Arrow 2 -->
149
+ <div class="arrow flex-1 mx-8">
150
+ <div class="text-center">
151
+ <i data-feather="arrow-right" class="w-8 h-8 mx-auto" style="color: #64748b;"></i>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Stage 3: Intelligent Medicine -->
156
+ <div class="stage-card flex-1 text-center mx-4" style="color: #06b6d4;">
157
+ <div class="icon-container w-32 h-32 rounded-2xl mx-auto mb-6 flex items-center justify-center floating pulse-glow" style="animation-delay: 1s;">
158
+ <div class="relative">
159
+ <i data-feather="cpu" class="w-12 h-12" style="color: #06b6d4;"></i>
160
+ <i data-feather="activity" class="w-8 h-8 absolute -bottom-2 -right-2" style="color: #0891b2;"></i>
161
+ </div>
162
+ </div>
163
+ <h3 class="text-2xl font-semibold mb-4" style="color: #06b6d4;">智能医学</h3>
164
+ <p class="text-gray-600 text-lg leading-relaxed">以智能为核，预测与精准</p>
165
+ <div class="mt-6 text-sm text-gray-500">
166
+ <p>人工智能 · 机器学习 · 精准医疗</p>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <!-- Progress Bar -->
172
+ <div class="mt-16">
173
+ <div class="flex justify-between items-center mb-4">
174
+ <span class="text-sm font-medium" style="color: #f59e0b;">19世纪前</span>
175
+ <span class="text-sm font-medium" style="color: #3b82f6;">20世纪</span>
176
+ <span class="text-sm font-medium" style="color: #06b6d4;">21世纪+</span>
177
+ </div>
178
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
179
+ <div class="h-full bg-gradient-to-r from-yellow-400 via-blue-500 to-cyan-500 rounded-full"></div>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <script>
185
+ feather.replace();
186
+
187
+ // Add some interactive animations
188
+ document.addEventListener('DOMContentLoaded', function() {
189
+ const cards = document.querySelectorAll('.stage-card');
190
+
191
+ cards.forEach((card, index) => {
192
+ card.addEventListener('mouseenter', () => {
193
+ cards.forEach(c => {
194
+ if (c !== card) {
195
+ c.style.opacity = '0.7';
196
+ c.style.transform = 'scale(0.95)';
197
+ }
198
+ });
199
+ });
200
+
201
+ card.addEventListener('mouseleave', () => {
202
+ cards.forEach(c => {
203
+ c.style.opacity = '1';
204
+ c.style.transform = 'scale(1)';
205
+ });
206
+ });
207
+ });
208
+ });
209
+ </script>
210
+ </body>
211
  </html>