Add card headline and description in simulation UI: enhance the card layout by introducing a headline and a description for improved context and user engagement in the interactive time series explorer.

Sangwon91 · Sangwon91 · commit de326344a41c · 2025-11-03T22:21:03.000+09:00
diff --git a/examples/sim-force/index.html b/examples/sim-force/index.html
@@ -20,14 +20,19 @@
         .card { border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,0.04); max-width: fit-content; }
         .card-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; }
         .card-title { margin: 0; font-size: 16px; font-weight: 600; color: #111827; }
+        .card-headline { display: flex; flex-direction: column; gap: 2px; }
+        .card-description { margin: 0; font-size: 12px; color: #6B7280; }
         .card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
         .card-content { padding: 12px 16px 16px 16px; }
     </style>
 </head>
 <body>
 <div class="card">
     <div class="card-header">
-        <h2 class="card-title">Interactive Time Series and Similarity Explorer</h2>
+        <div class="card-headline">
+            <h2 class="card-title">Interactive Time Series and Similarity Explorer</h2>
+            <p class="card-description">Click nodes to view time-series visualization</p>
+        </div>
         <div id="target-controls" class="card-actions"></div>
     </div>
     <div class="card-content">
diff --git a/examples/sim-force/index.single.html b/examples/sim-force/index.single.html
@@ -38,14 +38,19 @@
         .card { border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,0.04); max-width: fit-content; }
         .card-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #F3F4F6; }
         .card-title { margin: 0; font-size: 16px; font-weight: 600; color: #111827; }
+        .card-headline { display: flex; flex-direction: column; gap: 2px; }
+        .card-description { margin: 0; font-size: 12px; color: #6B7280; }
         .card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
         .card-content { padding: 12px 16px 16px 16px; }
     </style>
 </head>
 <body>
 <div class="card">
     <div class="card-header">
-        <h2 class="card-title">Interactive Time Series and Similarity Explorer</h2>
+        <div class="card-headline">
+            <h2 class="card-title">Interactive Time Series and Similarity Explorer</h2>
+            <p class="card-description">Click nodes to view time-series visualization</p>
+        </div>
         <div id="target-controls" class="card-actions"></div>
     </div>
     <div class="card-content">
