二级菜单

animal.js

@@ -20,6 +20,8 @@
     return [];
   };
 
+  const $ = (targets) => toArray(targets);
+
   const UNITLESS_KEYS = ['opacity', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'zIndex', 'fontWeight', 'strokeDashoffset', 'strokeDasharray', 'strokeWidth'];
 
   const getUnit = (val, prop) => {
@@ -438,7 +440,8 @@
     svgDraw,
     inViewAnimate,
     spring,
-    scroll
+    scroll,
+    $
   };
 
 })));

doc/index.html

@@ -212,7 +212,7 @@
             <div class="tree-group">
                 <div class="tree-header active-header" onclick="toggleTree(this)">Animation</div>
                 <div class="tree-children expanded">
-                    <div class="nav-item active" onclick="selectCategory('targets/list.html', 'targets/test_css_selector.html', this)">Targets</div>
+                    <div class="nav-item active" onclick="selectCategory('targets/list.html', 'targets/overview.html', this)">Targets</div>
                     <div class="nav-item" onclick="selectCategory('animatable_properties/list.html', 'animatable_properties/test_css_props.html', this)">Animatable properties</div>
                     <div class="nav-item" onclick="selectCategory('tween_value_types/list.html', 'tween_value_types/test_numerical.html', this)">Tween value types</div>
             <div class="nav-item">Tween parameters</div>

doc/list.css

@@ -72,7 +72,7 @@ body {
 .section-title {
     font-size: 14px;
     color: #888;
-   
+    margin-bottom: 15px;
     font-weight: 500;
 }
 
@@ -89,7 +89,6 @@ body {
     background: #1a1a1a;
     border-radius: 8px;
     padding: 20px;
-    margin-bottom: 17px;
     display: flex;
     flex-direction: column;
     cursor: pointer;
@@ -161,3 +160,58 @@ body {
     position: absolute; top: 4px;
 }
 
+/* --- Added from recent update (restored) --- */
+
+/* New Icon Styles */
+.icon-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.icon-square {
+    width: 14px;
+    height: 14px;
+    background: #444; /* Default inactive */
+    border-radius: 2px;
+}
+.card:hover .icon-square {
+    background: #555;
+}
+.card.active .icon-square {
+    background: #666; /* or lighter */
+}
+
+/* Header Card Specifics */
+.header-card {
+    height: 100px;
+    background-color: #2a251c; /* Dark orange/brown tint */
+    border: 1px solid #4a3b2a;
+    border-radius: 8px;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+    transition: border-color 0.2s;
+}
+.header-card.active {
+    border-color: var(--orange, #FF8F42);
+}
+.header-card:hover {
+    border-color: #665;
+}
+
+.header-dots {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-image: radial-gradient(#4a3b2a 1px, transparent 1px);
+    background-size: 8px 8px;
+    opacity: 0.5;
+}
+
+.header-title {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    color: var(--orange, #FF8F42);
+    font-size: 14px;
+    font-weight: 600;
+}

doc/targets/list.html

@@ -16,30 +16,47 @@
     </div>
 
     <div class="grid-section">
-        <!-- Selectors & Objects Header Removed/Replaced -->
-        <div class="section-title">Selectors & Objects</div>
-        <div class="card-grid">
+        
+        <!-- Header Card (Overview) -->
+        <div class="header-card" onclick="selectItem('overview.html', this)">
+            <div class="header-dots"></div>
+            <div class="header-title">Targets</div>
+        </div>
+
+        <div class="card-grid" style="margin-top: 40px;">
             <!-- CSS Selector -->
-            <div class="card active" onclick="selectItem('test_css_selector.html', this)">
-                <div class="card-large-icon">#</div>
+            <div class="card" onclick="selectItem('test_css_selector.html', this)">
+                <div class="card-large-icon">
+                    <div class="icon-stack">
+                        <div class="icon-square"></div>
+                        <div class="icon-square"></div>
+                        <div class="icon-square"></div>
+                    </div>
+                </div>
                 <div class="card-footer">CSS Selector</div>
             </div>
             
             <!-- DOM Elements -->
             <div class="card" onclick="selectItem('test_dom_elements.html', this)">
-                <div class="card-large-icon">&lt;&gt;</div>
+                <div class="card-large-icon">
+                    <div class="icon-stack">
+                        <div class="icon-square"></div>
+                        <div class="icon-square"></div>
+                        <div class="icon-square"></div>
+                    </div>
+                </div>
                 <div class="card-footer">DOM Elements</div>
             </div>
 
             <!-- JS Objects -->
             <div class="card" onclick="selectItem('test_js_objects.html', this)">
-                <div class="card-large-icon">{}</div>
-                <div class="card-footer">JavaScript Objects</div>
+                <div class="card-large-icon" style="color: #666; font-size: 14px;">{}</div> <!-- Keep text icon but style it -->
+                <div class="card-footer">JavaScript Objects <span class="tag">JS</span></div>
             </div>
             
             <!-- Arrays -->
             <div class="card" onclick="selectItem('test_array_targets.html', this)">
-                <div class="card-large-icon">[]</div>
+                <div class="card-large-icon" style="color: #666; font-size: 14px;">[]</div>
                 <div class="card-footer">Array of targets</div>
             </div>
         </div>
@@ -47,11 +64,17 @@
 
     <script>
         function selectItem(url, el) {
+            // Manage active state for standard cards
             document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
-            el.classList.add('active');
+            document.querySelectorAll('.header-card').forEach(c => c.classList.remove('active'));
+            
+            if (el.classList.contains('header-card')) {
+                el.classList.add('active');
+            } else {
+                el.classList.add('active');
+            }
             
             if (window.parent && window.parent.loadContent) {
-                // Pass path relative to index.html (targets/...)
                 window.parent.loadContent('targets/' + url);
             }
         }

doc/targets/overview.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Targets - Overview</title>
+    <link rel="stylesheet" href="../demo.css">
+    <style>
+        .code-block {
+            background: #111;
+            padding: 20px;
+            border-radius: 6px;
+            font-family: 'Roboto Mono', monospace;
+            font-size: 13px;
+            color: #abb2bf;
+            position: relative;
+        }
+        .code-highlight {
+            border: 1px solid #333;
+            padding: 2px 4px;
+            border-radius: 4px;
+            display: inline-block;
+        }
+        .annotation {
+            color: #E69F3C;
+            font-size: 12px;
+            margin-left: 10px;
+            position: absolute;
+        }
+        .annotation::before {
+            content: '— ';
+        }
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        <div style="font-size: 10px; font-weight: bold; letter-spacing: 1px; color: #ff4b4b; margin-bottom: 20px;">ANIMATION > TARGETS</div>
+        
+        <h1>Targets</h1>
+        <p class="description">Specify the elements to which property value changes are applied.<br>
+        Animation targets are defined in the first argument of the <code class="inline">animate()</code> function.</p>
+
+        <div class="box-container" style="margin-top: 30px;">
+            <div class="code-view active" style="background: #161616; padding: 40px;">
+                <span class="fun">animate</span>(<br>
+                &nbsp;&nbsp;<span class="code-highlight"><span class="str">'.square'</span></span><span class="annotation">Targets</span>,<br>
+                &nbsp;&nbsp;{<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;translateX: <span class="num">100</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;scale: <span class="num">2</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;opacity: <span class="num">.5</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;duration: <span class="num">400</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;delay: <span class="num">250</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;ease: <span class="str">'out(3)'</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;loop: <span class="num">3</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;alternate: <span class="kwd">true</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;autoplay: <span class="kwd">false</span>,<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;<span class="fun">onBegin</span>: () => {},<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;<span class="fun">onLoop</span>: () => {},<br>
+                &nbsp;&nbsp;&nbsp;&nbsp;<span class="fun">onUpdate</span>: () => {},<br>
+                &nbsp;&nbsp;}<br>
+                );
+            </div>
+        </div>
+        
+        <div style="margin-top: 40px; border-top: 1px solid #222; padding-top: 20px;">
+            <div style="color: #666; font-size: 14px;">In this section</div>
+            <ul style="list-style: none; padding: 0; margin-top: 15px; color: #888;">
+                <li style="margin-bottom: 8px;">CSS Selector</li>
+                <li style="margin-bottom: 8px;">DOM Elements</li>
+                <li style="margin-bottom: 8px;">JavaScript Objects</li>
+                <li style="margin-bottom: 8px;">Array of targets</li>
+            </ul>
+        </div>
+
+    </div>
+
+</body>
+</html>
+