Spaces:
Running
Running
Upload index.html with huggingface_hub
Browse files- index.html +52 -0
index.html
CHANGED
|
@@ -31,6 +31,7 @@
|
|
| 31 |
:root{--bg:#f8f9fc;--surface:#ffffff;--surface2:#f0f1f5;--border:#e2e4ea;
|
| 32 |
--text:#1a1a2e;--text2:#6b7084;--accent:#7c3aed;--accent2:#a855f7}
|
| 33 |
html,body{height:100%;overflow:hidden;font-family:'DM Sans','Space Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--text)}
|
|
|
|
| 34 |
#app{position:relative;z-index:1;display:flex;height:100vh;opacity:0;transition:opacity 0.6s ease 0.4s}
|
| 35 |
#app.visible{opacity:1}
|
| 36 |
|
|
@@ -79,6 +80,57 @@ select:hover,select:focus{border-color:var(--accent)}
|
|
| 79 |
.colorbar{position:absolute;right:2px;top:0;bottom:0;width:16px;display:flex;flex-direction:column;
|
| 80 |
align-items:center;justify-content:space-between;font-size:0.52rem;color:var(--text2)}
|
| 81 |
.colorbar-gradient{width:8px;flex:1;border-radius:3px;margin:2px 0;border:1px solid var(--border)}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 82 |
</style>
|
| 83 |
</head>
|
| 84 |
<body>
|
|
|
|
| 31 |
:root{--bg:#f8f9fc;--surface:#ffffff;--surface2:#f0f1f5;--border:#e2e4ea;
|
| 32 |
--text:#1a1a2e;--text2:#6b7084;--accent:#7c3aed;--accent2:#a855f7}
|
| 33 |
html,body{height:100%;overflow:hidden;font-family:'DM Sans','Space Grotesk',system-ui,sans-serif;background:var(--bg);color:var(--text)}
|
| 34 |
+
@media(max-width:768px){html,body{overflow:auto}}
|
| 35 |
#app{position:relative;z-index:1;display:flex;height:100vh;opacity:0;transition:opacity 0.6s ease 0.4s}
|
| 36 |
#app.visible{opacity:1}
|
| 37 |
|
|
|
|
| 80 |
.colorbar{position:absolute;right:2px;top:0;bottom:0;width:16px;display:flex;flex-direction:column;
|
| 81 |
align-items:center;justify-content:space-between;font-size:0.52rem;color:var(--text2)}
|
| 82 |
.colorbar-gradient{width:8px;flex:1;border-radius:3px;margin:2px 0;border:1px solid var(--border)}
|
| 83 |
+
|
| 84 |
+
/* ── Mobile / Responsive ── */
|
| 85 |
+
@media(max-width:768px){
|
| 86 |
+
/* Splash */
|
| 87 |
+
#splash-content h1{font-size:2rem}
|
| 88 |
+
#splash-content p{font-size:0.9rem;margin-bottom:24px}
|
| 89 |
+
#splash-content .cta{font-size:0.78rem;padding:8px 22px}
|
| 90 |
+
|
| 91 |
+
/* App: vertical layout */
|
| 92 |
+
#app{flex-direction:column;height:100vh;overflow-y:auto;overflow-x:hidden}
|
| 93 |
+
|
| 94 |
+
/* Sidebar → top panel */
|
| 95 |
+
#sidebar{width:100%;min-width:unset;flex-direction:column;gap:10px;padding:14px 16px;
|
| 96 |
+
border-right:none;border-bottom:1px solid var(--border);max-height:none}
|
| 97 |
+
#sidebar h1{font-size:1.1rem}
|
| 98 |
+
#sidebar p.sub{display:none}
|
| 99 |
+
.control-group{flex-direction:row;align-items:center;gap:8px}
|
| 100 |
+
.control-group label{min-width:fit-content;margin:0;white-space:nowrap}
|
| 101 |
+
select{flex:1;min-width:0;font-size:0.78rem;padding:8px 30px 8px 8px}
|
| 102 |
+
|
| 103 |
+
/* Info card: horizontal legend */
|
| 104 |
+
.info-card{padding:10px}
|
| 105 |
+
.legend{flex-direction:row;flex-wrap:wrap;gap:6px}
|
| 106 |
+
.legend-item{font-size:0.6rem}
|
| 107 |
+
|
| 108 |
+
.credits{display:none}
|
| 109 |
+
|
| 110 |
+
/* Main content fills remaining */
|
| 111 |
+
#main{flex:1;min-height:0}
|
| 112 |
+
#viewer-container{min-height:280px;flex:1}
|
| 113 |
+
#viewer-label{font-size:0.6rem;top:6px;left:8px;padding:2px 8px}
|
| 114 |
+
|
| 115 |
+
/* Fields panel: stack vertically, smaller */
|
| 116 |
+
#fields-panel{height:auto;min-height:unset;flex-direction:column}
|
| 117 |
+
.field-container{padding:8px 12px}
|
| 118 |
+
.field-container+.field-container{border-left:none;border-top:1px solid var(--border)}
|
| 119 |
+
.field-title{font-size:0.72rem;margin-bottom:4px}
|
| 120 |
+
.field-canvas-wrap{height:120px}
|
| 121 |
+
.field-canvas-wrap canvas{max-height:110px}
|
| 122 |
+
}
|
| 123 |
+
|
| 124 |
+
/* Small phones */
|
| 125 |
+
@media(max-width:480px){
|
| 126 |
+
#splash-content h1{font-size:1.6rem}
|
| 127 |
+
#splash-content p{font-size:0.8rem}
|
| 128 |
+
#sidebar{padding:10px 12px;gap:8px}
|
| 129 |
+
.control-group{flex-direction:column;gap:4px}
|
| 130 |
+
#viewer-container{min-height:220px}
|
| 131 |
+
.field-canvas-wrap{height:100px}
|
| 132 |
+
.field-canvas-wrap canvas{max-height:90px}
|
| 133 |
+
}
|
| 134 |
</style>
|
| 135 |
</head>
|
| 136 |
<body>
|