list.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Targets - List</title>
  7. <link rel="stylesheet" href="../list.css">
  8. </head>
  9. <body>
  10. <div class="search-header">
  11. <div class="search-title">Targets</div>
  12. <div class="search-input-container">
  13. <div class="search-icon"></div>
  14. <input type="text" class="search-input" placeholder="Filter targets...">
  15. </div>
  16. </div>
  17. <div class="grid-section">
  18. <!-- Selectors & Objects Header Removed/Replaced -->
  19. <div class="section-title">Selectors & Objects</div>
  20. <div class="card-grid">
  21. <!-- CSS Selector -->
  22. <div class="card active" onclick="selectItem('test_css_selector.html', this)">
  23. <div class="card-large-icon">#</div>
  24. <div class="card-footer">CSS Selector</div>
  25. </div>
  26. <!-- DOM Elements -->
  27. <div class="card" onclick="selectItem('test_dom_elements.html', this)">
  28. <div class="card-large-icon">&lt;&gt;</div>
  29. <div class="card-footer">DOM Elements</div>
  30. </div>
  31. <!-- JS Objects -->
  32. <div class="card" onclick="selectItem('test_js_objects.html', this)">
  33. <div class="card-large-icon">{}</div>
  34. <div class="card-footer">JavaScript Objects</div>
  35. </div>
  36. <!-- Arrays -->
  37. <div class="card" onclick="selectItem('test_array_targets.html', this)">
  38. <div class="card-large-icon">[]</div>
  39. <div class="card-footer">Array of targets</div>
  40. </div>
  41. </div>
  42. </div>
  43. <script>
  44. function selectItem(url, el) {
  45. document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
  46. el.classList.add('active');
  47. if (window.parent && window.parent.loadContent) {
  48. // Pass path relative to index.html (targets/...)
  49. window.parent.loadContent('targets/' + url);
  50. }
  51. }
  52. </script>
  53. </body>
  54. </html>