robert
/
xjs


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animatable Properties - List</title>
    <link rel="stylesheet" href="../list.css">
    <style>
        /* Specific overrides or additions for this list */
        .preview-transforms {
            display: flex; gap: 10px; flex-direction: column;
        }
        .transform-item { height: 16px; width: 16px; background: #666; border-radius: 2px; }
        
        .var-line { height: 14px; width: 14px; background: #666; border-radius: 2px; }
        .preview-vars { display: flex; flex-direction: column; gap: 5px; } /* Override default row */

        .preview-obj {
            background: #222; padding: 10px; font-family: monospace; font-size: 10px; color: #888; border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="search-header">
        <div class="search-title">Animatable properties</div>
        <div style="background: #2a251c; border: 1px solid #4a3b2a; border-radius: 6px; padding: 15px; margin-bottom: 20px; color: #888; font-size: 12px; height: 60px; display: flex; align-items: center; justify-content: center; opacity: 0.5;">
            ..................................
        </div>
    </div>

    <div class="grid-section">
        
        <!-- CSS Properties -->
        <div class="card-grid">
            <div class="card active" onclick="selectItem('test_css_props.html', this)">
                <div class="preview-box"></div>
                <div class="card-footer">CSS Properties</div>
            </div>
        </div>
        
        <!-- CSS Transforms -->
        <div class="card-grid" style="margin-top: 40px;">
            <div class="card" onclick="selectItem('test_transforms.html', this)">
                <div class="preview-transforms">
                    <div class="transform-item"></div>
                    <div class="transform-item" style="opacity: 0.5"></div>
                </div>
                <div class="card-footer">CSS transforms</div>
            </div>
        </div>

        <!-- CSS Variables -->
        <div class="card-grid" style="margin-top: 40px;">
             <div class="card" onclick="selectItem('test_css_vars.html', this)">
                <div class="preview-vars">
                    <div class="var-line"></div>
                    <div class="var-line"></div>
                    <div class="var-line"></div>
                </div>
                <div class="card-footer">CSS Variables <span class="tag">JS</span></div>
            </div>
        </div>

        <!-- JS Object Properties -->
        <div class="card-grid" style="margin-top: 40px;">
             <div class="card" onclick="selectItem('test_js_props.html', this)">
                <div class="preview-obj">{"number":1337,"unit":"42%"}</div>
                <div class="card-footer">JavaScript Object properties <span class="tag">JS</span></div>
            </div>
        </div>

    </div>

    <script>
        function selectItem(url, el) {
            document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
            el.classList.add('active');
            
            if (window.parent && window.parent.loadContent) {
                window.parent.loadContent('animatable_properties/' + url);
            }
        }
    </script>
</body>
</html>