Hugging Face's logo

Spaces:
AutomatumData
/
README
Running

App Files Community
AutomatumPaul commited on
Commit
1f3d080
·
verified ·
1 Parent(s): 8bb5e57

Update org card with logo, hero image, and scenario thumbnails

Browse files
Files changed (1) hide show
  1. index.html +97 -5
index.html CHANGED
@@ -10,13 +10,37 @@
10
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
11
  color: #1a1a2e;
12
  background: transparent;
13
- line-height: 1.6;
14
  }
15
  .org-card {
16
- max-width: 900px;
17
  margin: 0 auto;
18
- padding: 24px;
19
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  .org-desc {
21
  font-size: 1.02em;
22
  color: #334155;
@@ -30,11 +54,44 @@
30
  .org-desc a:hover { text-decoration: underline; }
31
 
32
  h2 {
33
- font-size: 1.2em;
34
  margin-bottom: 14px;
35
  color: #0f172a;
36
  }
37
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  .dataset-grid {
39
  display: grid;
40
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
@@ -65,6 +122,7 @@
65
  color: #64748b;
66
  }
67
 
 
68
  .install-section {
69
  margin-bottom: 20px;
70
  }
@@ -73,6 +131,7 @@
73
  padding: 3px 8px;
74
  border-radius: 5px;
75
  font-size: 0.92em;
 
76
  }
77
 
78
  .footer-note {
@@ -87,6 +146,17 @@
87
  <body>
88
  <div class="org-card">
89
 
 
 
 
 
 
 
 
 
 
 
 
90
  <p class="org-desc">
91
  <strong>Automatum Data</strong> provides high-precision drone-based traffic datasets
92
  for autonomous driving research. Our data contains detailed trajectories, velocities,
@@ -99,8 +169,29 @@
99
  <a href="https://automatum-data.com/de" target="_blank">automatum-data.com</a>.
100
  </p>
101
 
102
- <h2>&#128230; Available Datasets</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
 
 
 
104
  <div class="dataset-grid">
105
  <a class="dataset-card" href="https://huggingface.co/datasets/AutomatumData/automatum-data-crossing">
106
  <h3>&#128256; T-Crossing Dataset</h3>
@@ -120,6 +211,7 @@
120
  </a>
121
  </div>
122
 
 
123
  <div class="install-section">
124
  <h2>&#128295; Python Library</h2>
125
  <p class="org-desc">
 
10
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
11
  color: #1a1a2e;
12
  background: transparent;
13
+ line-height: 1.65;
14
  }
15
  .org-card {
16
+ max-width: 920px;
17
  margin: 0 auto;
18
+ padding: 28px 24px 20px;
19
  }
20
+
21
+ /* Logo */
22
+ .logo-wrap {
23
+ margin-bottom: 18px;
24
+ }
25
+ .logo-wrap img {
26
+ height: 52px;
27
+ width: auto;
28
+ }
29
+
30
+ /* Hero image */
31
+ .hero-wrap {
32
+ margin-bottom: 22px;
33
+ border-radius: 12px;
34
+ overflow: hidden;
35
+ box-shadow: 0 2px 12px rgba(0,0,0,0.08);
36
+ }
37
+ .hero-wrap img {
38
+ width: 100%;
39
+ height: auto;
40
+ display: block;
41
+ }
42
+
43
+ /* Description */
44
  .org-desc {
45
  font-size: 1.02em;
46
  color: #334155;
 
54
  .org-desc a:hover { text-decoration: underline; }
55
 
56
  h2 {
57
+ font-size: 1.18em;
58
  margin-bottom: 14px;
59
  color: #0f172a;
60
  }
61
 
62
+ /* Scenario thumbnails */
63
+ .scenario-grid {
64
+ display: grid;
65
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
66
+ gap: 12px;
67
+ margin-bottom: 30px;
68
+ }
69
+ .scenario-card {
70
+ border-radius: 10px;
71
+ overflow: hidden;
72
+ box-shadow: 0 1px 6px rgba(0,0,0,0.07);
73
+ transition: box-shadow 0.2s, transform 0.2s;
74
+ }
75
+ .scenario-card:hover {
76
+ box-shadow: 0 4px 16px rgba(0,0,0,0.12);
77
+ transform: translateY(-2px);
78
+ }
79
+ .scenario-card img {
80
+ width: 100%;
81
+ height: 120px;
82
+ object-fit: cover;
83
+ display: block;
84
+ }
85
+ .scenario-card .label {
86
+ padding: 8px 10px;
87
+ font-size: 0.85em;
88
+ font-weight: 600;
89
+ color: #1e3a5f;
90
+ background: #f8fafc;
91
+ text-align: center;
92
+ }
93
+
94
+ /* Dataset cards */
95
  .dataset-grid {
96
  display: grid;
97
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 
122
  color: #64748b;
123
  }
124
 
125
+ /* Install section */
126
  .install-section {
127
  margin-bottom: 20px;
128
  }
 
131
  padding: 3px 8px;
132
  border-radius: 5px;
133
  font-size: 0.92em;
134
+ font-family: 'SF Mono', 'Fira Code', monospace;
135
  }
136
 
137
  .footer-note {
 
146
  <body>
147
  <div class="org-card">
148
 
149
+ <!-- Logo -->
150
+ <div class="logo-wrap">
151
+ <img src="images/logo.png" alt="Automatum Data Logo" />
152
+ </div>
153
+
154
+ <!-- Hero Image -->
155
+ <div class="hero-wrap">
156
+ <img src="images/hero.jpg" alt="Automatum Data - Drone Traffic Analysis" />
157
+ </div>
158
+
159
+ <!-- Description -->
160
  <p class="org-desc">
161
  <strong>Automatum Data</strong> provides high-precision drone-based traffic datasets
162
  for autonomous driving research. Our data contains detailed trajectories, velocities,
 
169
  <a href="https://automatum-data.com/de" target="_blank">automatum-data.com</a>.
170
  </p>
171
 
172
+ <!-- Scenario Thumbnails -->
173
+ <h2>&#128205; Covered Scenarios</h2>
174
+ <div class="scenario-grid">
175
+ <div class="scenario-card">
176
+ <img src="images/icon_tcrossing.jpg" alt="T-Crossing Scenario" />
177
+ <div class="label">T-Crossing</div>
178
+ </div>
179
+ <div class="scenario-card">
180
+ <img src="images/icon_roundabout.jpg" alt="Roundabout Scenario" />
181
+ <div class="label">Roundabout</div>
182
+ </div>
183
+ <div class="scenario-card">
184
+ <img src="images/dataset_ramps.jpg" alt="Highway with Ramps" />
185
+ <div class="label">Highway Ramps</div>
186
+ </div>
187
+ <div class="scenario-card">
188
+ <img src="images/dataset_open.jpg" alt="Open Highway" />
189
+ <div class="label">Open Highway</div>
190
+ </div>
191
+ </div>
192
 
193
+ <!-- Dataset Cards -->
194
+ <h2>&#128230; Available Datasets</h2>
195
  <div class="dataset-grid">
196
  <a class="dataset-card" href="https://huggingface.co/datasets/AutomatumData/automatum-data-crossing">
197
  <h3>&#128256; T-Crossing Dataset</h3>
 
211
  </a>
212
  </div>
213
 
214
+ <!-- Python Library -->
215
  <div class="install-section">
216
  <h2>&#128295; Python Library</h2>
217
  <p class="org-desc">