robert
/
xjs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Targets - List</title>
    <link rel="stylesheet" href="../list.css">
    <style>
        /* Targets-specific card previews (to match anime.js docs vibe) */
        .card {
            min-height: 120px;
            padding: 18px 18px 16px 18px;
        }

        .card-preview {
            height: 62px;
            border-radius: 10px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.04);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
        }

        .preview-grid {
            width: 100%;
            padding: 0 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .preview-stack {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .preview-sq {
            width: 12px;
            height: 12px;
            border-radius: 3px;
            background: #3a3a3a;
            transition: transform 0.35s ease, background 0.2s ease;
        }

        .preview-sq.orange { background: #ff9f43; }
        .preview-sq.red { background: #ff4b4b; }

        /* Hover gives a subtle “replay” feel like anime.js cards */
        .card:hover .preview-stack.left .preview-sq {
            transform: translateX(10px);
        }
        .card:hover .preview-stack.right .preview-sq {
            transform: translateX(-10px);
        }

        .preview-pill {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            color: #9a9a9a;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 13px;
            letter-spacing: 0.2px;
        }
    </style>
</head>
<body>
    <div class="search-header">
        <div class="search-title">Targets</div>
        <div class="search-input-container">
            <div class="search-icon"></div>
            <input type="text" class="search-input" placeholder="Filter targets...">
        </div>
    </div>

    <div class="grid-section">
        
        <!-- Header Card (Overview) -->
        <div class="header-card active" 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" data-content="targets/test_css_selector.html" onclick="selectItem('test_css_selector.html', this)">
                <div class="card-preview">
                    <div class="preview-grid">
                        <div class="preview-stack left" aria-hidden="true">
                            <div class="preview-sq"></div>
                            <div class="preview-sq"></div>
                            <div class="preview-sq"></div>
                        </div>
                        <div class="preview-stack right" aria-hidden="true">
                            <div class="preview-sq orange"></div>
                            <div class="preview-sq orange"></div>
                            <div class="preview-sq orange"></div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">CSS Selector</div>
            </div>
            
            <!-- DOM Elements -->
            <div class="card" data-content="targets/test_dom_elements.html" onclick="selectItem('test_dom_elements.html', this)">
                <div class="card-preview">
                    <div class="preview-grid">
                        <div class="preview-stack left" aria-hidden="true">
                            <div class="preview-sq"></div>
                            <div class="preview-sq"></div>
                            <div class="preview-sq"></div>
                        </div>
                        <div class="preview-stack right" aria-hidden="true">
                            <div class="preview-sq red"></div>
                            <div class="preview-sq"></div>
                            <div class="preview-sq"></div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">DOM Elements</div>
            </div>

            <!-- JS Objects -->
            <div class="card" data-content="targets/test_js_objects.html" onclick="selectItem('test_js_objects.html', this)">
                <div class="card-preview">
                    <div class="preview-pill">{ "x": 0, "y": 0 }</div>
                </div>
                <div class="card-footer">JavaScript Objects <span class="tag">JS</span></div>
            </div>
            
            <!-- Arrays -->
            <div class="card" data-content="targets/test_array_targets.html" onclick="selectItem('test_array_targets.html', this)">
                <div class="card-preview">
                    <div class="preview-pill">{ "x": "0" }</div>
                </div>
                <div class="card-footer">Array of targets</div>
            </div>
        </div>
    </div>

    <script>
        function selectItem(url, el) {
            // Manage active state for standard cards
            document.querySelectorAll('.card').forEach(c => c.classList.remove('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) {
                window.parent.loadContent('targets/' + url);
            }
        }

        // Called from parent to keep active selection in sync with the right iframe
        function setActiveByContentUrl(contentUrl) {
            const normalized = String(contentUrl || '').replace(/^\.\//, '');
            const header = document.querySelector('.header-card');
            const cards = Array.from(document.querySelectorAll('.card[data-content]'));

            document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
            document.querySelectorAll('.header-card').forEach(c => c.classList.remove('active'));

            if (!normalized) return;

            if (normalized.includes('targets/overview.html')) {
                header?.classList.add('active');
                return;
            }

            const match = cards.find(c => normalized.endsWith(c.dataset.content) || normalized.includes(c.dataset.content));
            if (match) match.classList.add('active');
        }

        // expose for parent iframe access
        window.setActiveByContentUrl = setActiveByContentUrl;
    </script>
</body>
</html>