Hugging Face's logo

Spaces:
AK51
/
electron_cloud_visualizer
Running

App Files Community
AK51 commited on
Commit
2f80f4a
·
verified ·
1 Parent(s): a07febe

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +4 -1
  2. styles.css +98 -0
index.html CHANGED
@@ -2,7 +2,10 @@
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>Electron Cloud Visualizer</title>
7
  <meta name="author" content="Andy Kong">
8
  <meta name="description" content="Interactive 3D visualization of electron orbitals and atomic electron clouds">
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
6
+ <meta name="mobile-web-app-capable" content="yes">
7
+ <meta name="apple-mobile-web-app-capable" content="yes">
8
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9
  <title>Electron Cloud Visualizer</title>
10
  <meta name="author" content="Andy Kong">
11
  <meta name="description" content="Interactive 3D visualization of electron orbitals and atomic electron clouds">
styles.css CHANGED
@@ -8,12 +8,16 @@ body {
8
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
  overflow: hidden;
10
  background: #000;
 
 
 
11
  }
12
 
13
  #canvas {
14
  display: block;
15
  width: 100vw;
16
  height: 100vh;
 
17
  }
18
 
19
  #loading-overlay {
@@ -47,6 +51,8 @@ body {
47
  #loading-overlay p {
48
  margin-top: 20px;
49
  font-size: 16px;
 
 
50
  }
51
 
52
  #error-container {
@@ -60,6 +66,7 @@ body {
60
  justify-content: center;
61
  align-items: center;
62
  z-index: 2000;
 
63
  }
64
 
65
  .error-message {
@@ -67,6 +74,7 @@ body {
67
  padding: 30px;
68
  border-radius: 10px;
69
  max-width: 500px;
 
70
  text-align: center;
71
  }
72
 
@@ -98,3 +106,93 @@ body {
98
  font-family: monospace;
99
  font-size: 11px;
100
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
  overflow: hidden;
10
  background: #000;
11
+ -webkit-touch-callout: none;
12
+ -webkit-user-select: none;
13
+ user-select: none;
14
  }
15
 
16
  #canvas {
17
  display: block;
18
  width: 100vw;
19
  height: 100vh;
20
+ touch-action: none;
21
  }
22
 
23
  #loading-overlay {
 
51
  #loading-overlay p {
52
  margin-top: 20px;
53
  font-size: 16px;
54
+ padding: 0 20px;
55
+ text-align: center;
56
  }
57
 
58
  #error-container {
 
66
  justify-content: center;
67
  align-items: center;
68
  z-index: 2000;
69
+ padding: 20px;
70
  }
71
 
72
  .error-message {
 
74
  padding: 30px;
75
  border-radius: 10px;
76
  max-width: 500px;
77
+ width: 100%;
78
  text-align: center;
79
  }
80
 
 
106
  font-family: monospace;
107
  font-size: 11px;
108
  }
109
+
110
+ /* Mobile-specific styles */
111
+ @media (max-width: 768px) {
112
+ .lil-gui {
113
+ --width: calc(100vw - 20px);
114
+ max-width: 320px;
115
+ --widget-height: 24px;
116
+ --name-width: 45%;
117
+ font-size: 11px;
118
+ }
119
+
120
+ .lil-gui.root {
121
+ position: fixed !important;
122
+ top: 10px !important;
123
+ right: 10px !important;
124
+ max-height: calc(100vh - 20px) !important;
125
+ overflow-y: auto !important;
126
+ z-index: 1000 !important;
127
+ }
128
+
129
+ .lil-gui .title {
130
+ font-size: 13px;
131
+ padding: 8px;
132
+ }
133
+
134
+ .lil-gui .controller {
135
+ margin-bottom: 2px;
136
+ }
137
+
138
+ .lil-gui input {
139
+ font-size: 11px;
140
+ }
141
+
142
+ .lil-gui button {
143
+ font-size: 11px;
144
+ padding: 6px 8px;
145
+ }
146
+
147
+ /* Make color pickers easier to tap */
148
+ .lil-gui input[type="color"] {
149
+ min-height: 28px;
150
+ }
151
+
152
+ /* Improve slider usability on mobile */
153
+ .lil-gui input[type="range"] {
154
+ min-height: 24px;
155
+ }
156
+
157
+ #loading-overlay p {
158
+ font-size: 14px;
159
+ }
160
+
161
+ .error-message {
162
+ padding: 20px;
163
+ font-size: 14px;
164
+ }
165
+ }
166
+
167
+ /* Landscape mobile optimization */
168
+ @media (max-width: 768px) and (orientation: landscape) {
169
+ .lil-gui.root {
170
+ max-height: calc(100vh - 10px) !important;
171
+ top: 5px !important;
172
+ right: 5px !important;
173
+ }
174
+ }
175
+
176
+ /* Very small screens */
177
+ @media (max-width: 480px) {
178
+ .lil-gui {
179
+ --width: calc(100vw - 20px);
180
+ max-width: 280px;
181
+ font-size: 10px;
182
+ }
183
+
184
+ .lil-gui .title {
185
+ font-size: 12px;
186
+ }
187
+ }
188
+
189
+ /* Touch-friendly improvements */
190
+ @media (hover: none) and (pointer: coarse) {
191
+ .lil-gui button {
192
+ min-height: 32px;
193
+ }
194
+
195
+ .lil-gui .controller {
196
+ min-height: 28px;
197
+ }
198
+ }