Hugging Face's logo

Spaces:
kadirnar
/
Personal-Activity
Running

App Files Community
1
kadirnar commited on
Commit
6ac339d
·
verified ·
1 Parent(s): cad7954

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +93 -32
index.html CHANGED
@@ -3,7 +3,6 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <title>My Hugging Face Heatmaps</title>
6
- <!-- Google Fonts: Inter -->
7
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800&display=swap" rel="stylesheet">
8
  <style>
9
  body {
@@ -14,7 +13,7 @@
14
  padding: 0;
15
  }
16
  .container {
17
- max-width: 1100px;
18
  margin: 0 auto;
19
  padding: 32px 20px 64px 20px;
20
  }
@@ -26,11 +25,12 @@
26
  -webkit-text-fill-color: transparent;
27
  background-clip: text;
28
  text-fill-color: transparent;
29
- margin-bottom: 40px;
30
  display: flex;
31
  align-items: center;
32
  gap: 18px;
33
  letter-spacing: -1px;
 
34
  }
35
  .modern-title img {
36
  height: 2.7rem;
@@ -39,43 +39,100 @@
39
  background: #fff;
40
  padding: 2px;
41
  }
42
- .heatmap-block {
43
- background: #181818;
44
- border-radius: 18px;
45
- padding: 18px 18px 8px 18px;
46
- margin-bottom: 32px;
47
- box-shadow: 0 2px 24px #0003;
48
- border: 1.5px solid #222;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
  .heatmap-label {
51
- font-size: 1.25rem;
52
- font-weight: 700;
53
- margin-bottom: 12px;
54
- margin-left: 4px;
55
  letter-spacing: 0.5px;
 
 
 
 
 
56
  }
57
  iframe {
58
  width: 100%;
59
- height: 300px;
60
  border-radius: 10px;
61
  border: none;
62
  background: #222;
63
  margin-bottom: 0;
 
 
 
64
  }
65
  @media (max-width: 700px) {
66
  .modern-title {
67
  font-size: 1.5rem;
68
  }
69
- .heatmap-label {
70
- font-size: 1.05rem;
71
- }
72
  .container {
73
  padding: 12px 4px 32px 4px;
74
  }
 
 
 
75
  iframe {
76
- height: 210px;
77
  }
78
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  </style>
80
  </head>
81
  <body>
@@ -85,19 +142,23 @@
85
  My Hugging Face Heatmaps
86
  </h1>
87
 
88
- <div class="heatmap-block">
89
- <div class="heatmap-label">Kadir Nar</div>
90
- <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar"></iframe>
91
- </div>
92
-
93
- <div class="heatmap-block">
94
- <div class="heatmap-label">OpenSpeechHub</div>
95
- <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub"></iframe>
96
- </div>
97
-
98
- <div class="heatmap-block">
99
- <div class="heatmap-label">Closed-TTS</div>
100
- <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS"></iframe>
 
 
 
 
101
  </div>
102
  </div>
103
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <title>My Hugging Face Heatmaps</title>
 
6
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800&display=swap" rel="stylesheet">
7
  <style>
8
  body {
 
13
  padding: 0;
14
  }
15
  .container {
16
+ max-width: 1200px;
17
  margin: 0 auto;
18
  padding: 32px 20px 64px 20px;
19
  }
 
25
  -webkit-text-fill-color: transparent;
26
  background-clip: text;
27
  text-fill-color: transparent;
28
+ margin-bottom: 48px;
29
  display: flex;
30
  align-items: center;
31
  gap: 18px;
32
  letter-spacing: -1px;
33
+ animation: fadeInDown 1.2s cubic-bezier(.18,.89,.32,1.28);
34
  }
35
  .modern-title img {
36
  height: 2.7rem;
 
39
  background: #fff;
40
  padding: 2px;
41
  }
42
+ .card-grid {
43
+ display: grid;
44
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
45
+ gap: 32px;
46
+ }
47
+ .heatmap-card {
48
+ background: linear-gradient(135deg, #232526 0%, #2c3e50 100%);
49
+ border-radius: 24px;
50
+ box-shadow: 0 8px 36px #0007, 0 1.5px 8px #00c3ff44;
51
+ padding: 24px 18px 18px 18px;
52
+ display: flex;
53
+ flex-direction: column;
54
+ align-items: center;
55
+ transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.23s;
56
+ position: relative;
57
+ overflow: hidden;
58
+ border: 1.5px solid #232526;
59
+ animation: cardFadeIn 1.2s cubic-bezier(.18,.89,.32,1.28);
60
+ }
61
+ .heatmap-card::before {
62
+ content: '';
63
+ position: absolute;
64
+ top: -60px;
65
+ right: -60px;
66
+ width: 120px;
67
+ height: 120px;
68
+ background: radial-gradient(circle at 40% 40%, #ffcc33aa 0%, #00c3ff00 100%);
69
+ z-index: 0;
70
+ pointer-events: none;
71
+ transition: opacity 0.3s;
72
+ opacity: 0.5;
73
+ }
74
+ .heatmap-card:hover {
75
+ transform: translateY(-12px) scale(1.025);
76
+ box-shadow: 0 16px 52px #00c3ff44, 0 2px 18px #ffb34733;
77
+ border: 1.5px solid #ffcc33;
78
+ }
79
+ .heatmap-card:hover::before {
80
+ opacity: 0.9;
81
  }
82
  .heatmap-label {
83
+ position: relative;
84
+ z-index: 1;
85
+ font-size: 1.3rem;
86
+ font-weight: 800;
87
  letter-spacing: 0.5px;
88
+ margin-bottom: 16px;
89
+ color: #ffcc33;
90
+ text-shadow: 0 2px 12px #0008;
91
+ text-align: center;
92
+ animation: fadeInUp 1.1s cubic-bezier(.18,.89,.32,1.28);
93
  }
94
  iframe {
95
  width: 100%;
96
+ height: 260px;
97
  border-radius: 10px;
98
  border: none;
99
  background: #222;
100
  margin-bottom: 0;
101
+ box-shadow: 0 1px 12px #0005;
102
+ z-index: 1;
103
+ animation: fadeIn 1.5s cubic-bezier(.18,.89,.32,1.28);
104
  }
105
  @media (max-width: 700px) {
106
  .modern-title {
107
  font-size: 1.5rem;
108
  }
 
 
 
109
  .container {
110
  padding: 12px 4px 32px 4px;
111
  }
112
+ .heatmap-label {
113
+ font-size: 1.09rem;
114
+ }
115
  iframe {
116
+ height: 180px;
117
  }
118
  }
119
+ /* Animations */
120
+ @keyframes fadeInDown {
121
+ 0% { opacity: 0; transform: translateY(-40px);}
122
+ 100% { opacity: 1; transform: translateY(0);}
123
+ }
124
+ @keyframes fadeInUp {
125
+ 0% { opacity: 0; transform: translateY(40px);}
126
+ 100% { opacity: 1; transform: translateY(0);}
127
+ }
128
+ @keyframes fadeIn {
129
+ 0% { opacity: 0;}
130
+ 100% { opacity: 1;}
131
+ }
132
+ @keyframes cardFadeIn {
133
+ 0% { opacity: 0; transform: scale(0.98);}
134
+ 100% { opacity: 1; transform: scale(1);}
135
+ }
136
  </style>
137
  </head>
138
  <body>
 
142
  My Hugging Face Heatmaps
143
  </h1>
144
 
145
+ <div class="card-grid">
146
+ <div class="heatmap-card">
147
+ <div class="heatmap-label">Kadir Nar</div>
148
+ <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar"></iframe>
149
+ </div>
150
+ <div class="heatmap-card">
151
+ <div class="heatmap-label">OpenSpeechHub</div>
152
+ <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub"></iframe>
153
+ </div>
154
+ <div class="heatmap-card">
155
+ <div class="heatmap-label">Closed-TTS</div>
156
+ <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS"></iframe>
157
+ </div>
158
+ <div class="heatmap-card">
159
+ <div class="heatmap-label">Vyvo</div>
160
+ <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Vyvo"></iframe>
161
+ </div>
162
  </div>
163
  </div>
164
  </body>