Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
robert
/
xjs
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Strom: 73dd7ce6ec
Branche Tagy
xjs
/
doc
/
list_targets.html

list_targets.html 3.8 KB
História Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. 

  6.     <title>Targets - List</title>
    7. 

  7.     <link rel="stylesheet" href="demo.css">
    8. 

  8.     <style>
    9. 

  9.         body { padding: 20px; display: block; }
    10. 

  10.         .search-header { margin-bottom: 30px; }
    11. 

  11.         .search-title { font-size: 14px; font-weight: 600; color: #888; margin-bottom: 15px; }
    12. 

  12.         .search-input-container { position: relative; width: 100%; }
    13. 

  13.         .search-input { width: 100%; background: #1a1a1a; border: 1px solid #333; color: #fff; padding: 12px 40px; border-radius: 6px; font-size: 14px; box-sizing: border-box; outline: none; }
    14. 

  14.         .search-input:focus { border-color: var(--orange); }
    15. 

  15.         .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 2px solid #666; border-radius: 50%; }
    16. 

  16.         .search-icon:after { content: ''; position: absolute; top: 10px; left: 10px; width: 4px; height: 2px; background: #666; transform: rotate(45deg); }
    17. 

  17.         .grid-section { margin-bottom: 30px; }
    18. 

  18.         .section-title { font-size: 14px; color: #888; margin-bottom: 15px; font-weight: 500; }
    19. 

  19.         .card-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } /* Single column for sidebar list usually better? Or grid? Screenshot showed grid. sticking to grid but maybe 1 col if narrow. */
    20. 

  20.         .card { background: #1a1a1a; border-radius: 8px; padding: 15px; display: flex; align-items: center; cursor: pointer; transition: background 0.2s; border: 1px solid transparent; }
    21. 

  21.         .card:hover { background: #222; border-color: #333; }
    22. 

  22.         .card.active { border-color: var(--orange); background: #222; }
    23. 

  23.         .card-icon { width: 30px; height: 30px; background: #333; border-radius: 4px; margin-right: 15px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #888; font-size: 12px; }
    24. 

  24.         .card-text { color: #ccc; font-size: 14px; font-weight: 500; }
    25. 

  25.     </style>
    26. 

  26. </head>
    27. 

  27. <body>
    28. 

  28.     <div class="search-header">
    29. 

  29.         <div class="search-title">Targets</div>
    30. 

  30.         <div class="search-input-container">
    31. 

  31.             <div class="search-icon"></div>
    32. 

  32.             <input type="text" class="search-input" placeholder="Filter targets...">
    33. 

  33.         </div>
    34. 

  34.     </div>
    35. 

  35. 

  36.     <div class="grid-section">
    37. 

  37.         <div class="section-title">Selectors & Objects</div>
    38. 

  38.         <div class="card-grid">
    39. 

  39.             <!-- CSS Selector -->
    40. 

  40.             <div class="card" onclick="selectItem('test_css_selector.html', this)">
    41. 

  41.                 <div class="card-icon">#</div>
    42. 

  42.                 <div class="card-text">CSS Selector</div>
    43. 

  43.             </div>
    44. 

  44.             
    45. 

  45.             <!-- DOM Elements -->
    46. 

  46.             <div class="card" onclick="selectItem('test_css_selector.html', this)"> <!-- Reuse same test for demo -->
    47. 

  47.                 <div class="card-icon">&lt;&gt;</div>
    48. 

  48.                 <div class="card-text">DOM Elements</div>
    49. 

  49.             </div>
    50. 

  50. 

  51.             <!-- JS Objects -->
    52. 

  52.             <div class="card" onclick="selectItem('test_css_selector.html', this)">
    53. 

  53.                 <div class="card-icon">{}</div>
    54. 

  54.                 <div class="card-text">JavaScript Objects</div>
    55. 

  55.             </div>
    56. 

  56.             
    57. 

  57.             <!-- Arrays -->
    58. 

  58.             <div class="card">
    59. 

  59.                 <div class="card-icon">[]</div>
    60. 

  60.                 <div class="card-text">Array of targets</div>
    61. 

  61.             </div>
    62. 

  62.         </div>
    63. 

  63.     </div>
    64. 

  64. 

  65.     <script>
    66. 

  66.         function selectItem(url, el) {
    67. 

  67.             // Update UI
    68. 

  68.             document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
    69. 

  69.             el.classList.add('active');
    70. 

  70.             
    71. 

  71.             // Call parent to load content
    72. 

  72.             if (window.parent && window.parent.loadContent) {
    73. 

  73.                 window.parent.loadContent(url);
    74. 

  74.             }
    75. 

  75.         }
    76. 

  76.     </script>
    77. 

  77. </body>
    78. 

  78. </html>
    79. 

  79.