Update modular_graph_and_candidates.py
Browse files
modular_graph_and_candidates.py
CHANGED
|
@@ -949,6 +949,35 @@ svg{ width:100vw; height:100vh; }
|
|
| 949 |
margin-right:8px;
|
| 950 |
cursor:pointer;
|
| 951 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 952 |
"""
|
| 953 |
|
| 954 |
TIMELINE_JS = """
|
|
@@ -1261,17 +1290,14 @@ TIMELINE_HTML = """
|
|
| 1261 |
<html lang='en'><head><meta charset='UTF-8'>
|
| 1262 |
<title>Transformers Chronological Timeline</title>
|
| 1263 |
<style>__TIMELINE_CSS__</style></head><body>
|
| 1264 |
-
|
| 1265 |
<div id='controls'>
|
| 1266 |
-
<div style='font-weight:600;
|
| 1267 |
-
|
| 1268 |
<label><input type="checkbox" id="toggleRed" checked> Show candidates</label>
|
| 1269 |
-
<input id="searchBox" type="text" placeholder="Search model…"
|
| 1270 |
-
<div
|
| 1271 |
-
Models positioned by creation date<br>
|
| 1272 |
-
Scroll & zoom to explore timeline
|
| 1273 |
-
</div>
|
| 1274 |
</div>
|
|
|
|
| 1275 |
<svg id='timeline-svg'></svg>
|
| 1276 |
<script src='https://d3js.org/d3.v7.min.js'></script>
|
| 1277 |
<script>__TIMELINE_JS__</script></body></html>
|
|
|
|
| 949 |
margin-right:8px;
|
| 950 |
cursor:pointer;
|
| 951 |
}
|
| 952 |
+
|
| 953 |
+
/* Compact controls */
|
| 954 |
+
#controls{
|
| 955 |
+
position:absolute; top:12px; left:12px;
|
| 956 |
+
width:200px; max-width:42vw;
|
| 957 |
+
padding:10px 12px;
|
| 958 |
+
font-size:12px; line-height:1.25;
|
| 959 |
+
background:rgba(0,0,0,.04);
|
| 960 |
+
border:1px solid rgba(0,0,0,.08);
|
| 961 |
+
border-radius:10px; border-left-width:2px;
|
| 962 |
+
backdrop-filter:saturate(140%) blur(6px);
|
| 963 |
+
z-index:5;
|
| 964 |
+
}
|
| 965 |
+
#controls b, #controls strong{ font-weight:600; }
|
| 966 |
+
#controls > div:first-child{ margin-bottom:6px; font-size:12px; }
|
| 967 |
+
#controls label{ display:block; margin-top:6px; }
|
| 968 |
+
#controls input[type="text"]{
|
| 969 |
+
margin-top:8px; width:100%;
|
| 970 |
+
padding:4px 6px; font-size:12px;
|
| 971 |
+
border-radius:6px; border:1px solid #ccc; background:transparent;
|
| 972 |
+
}
|
| 973 |
+
#controls .hint{ margin-top:8px; font-size:11px; color:var(--muted); }
|
| 974 |
+
|
| 975 |
+
/* Slightly smaller on narrow embeds */
|
| 976 |
+
@media (max-width: 900px){
|
| 977 |
+
#controls{ width:180px; font-size:11px; padding:8px 10px; }
|
| 978 |
+
#controls input[type="text"]{ font-size:11px; padding:3px 6px; }
|
| 979 |
+
}
|
| 980 |
+
|
| 981 |
"""
|
| 982 |
|
| 983 |
TIMELINE_JS = """
|
|
|
|
| 1290 |
<html lang='en'><head><meta charset='UTF-8'>
|
| 1291 |
<title>Transformers Chronological Timeline</title>
|
| 1292 |
<style>__TIMELINE_CSS__</style></head><body>
|
|
|
|
| 1293 |
<div id='controls'>
|
| 1294 |
+
<div style='font-weight:600;'>Chronological Timeline</div>
|
| 1295 |
+
<div style="margin:4px 0 6px 0;">🟡 base · 🔵 modular · 🔴 candidate</div>
|
| 1296 |
<label><input type="checkbox" id="toggleRed" checked> Show candidates</label>
|
| 1297 |
+
<input id="searchBox" type="text" placeholder="Search model…">
|
| 1298 |
+
<div class="hint">Positioned by creation date. Scroll & zoom to explore.</div>
|
|
|
|
|
|
|
|
|
|
| 1299 |
</div>
|
| 1300 |
+
|
| 1301 |
<svg id='timeline-svg'></svg>
|
| 1302 |
<script src='https://d3js.org/d3.v7.min.js'></script>
|
| 1303 |
<script>__TIMELINE_JS__</script></body></html>
|