templates/website/page/indexes/test-selection.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Select a TOEFL Test - Vrshikyans</title>
  8.     <link rel="icon" href="/students/Vrshikyan_logo.ico" />
  9.     <style>
  10.         :root {
  11.             --bg: #0f1320;
  12.             --bg-2: #101626;
  13.             --surface: rgba(255, 255, 255, 0.06);
  14.             --surface-strong: rgba(255, 255, 255, 0.10);
  15.             --border: rgba(255, 255, 255, 0.18);
  17.             --text: #eef3ff;
  18.             --muted: #b8c2e6;
  20.             --accent: #74a3ff;
  21.             /* default blue */
  22.             --accent-2: #66e6d2;
  23.             /* teal */
  24.             --green: #35d49f;
  25.             /* completed */
  26.             --amber: #ffd166;
  27.             /* partial */
  28.             --red: #ff6b7c;
  29.             /* not started */
  31.             --radius-sm: 10px;
  32.             --radius-md: 14px;
  33.             --radius-lg: 18px;
  35.             --shadow-1: 0 6px 20px rgba(0, 0, 0, .25);
  36.             --shadow-2: 0 14px 40px rgba(0, 0, 0, .35);
  38.             --blur: 14px;
  39.             --speed-fast: .15s;
  40.             --speed: .25s;
  42.             --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  43.         }
  45.         * {
  46.             box-sizing: border-box;
  47.         }
  49.         html,
  50.         body {
  51.             margin: 0;
  52.             padding: 0;
  53.             min-height: 100%;
  54.             color: var(--text);
  55.             font-family: var(--font);
  56.             background:
  57.                     radial-gradient(1000px 1000px at 10% -10%, #1a2240, transparent 60%),
  58.                     radial-gradient(1400px 800px at 100% 10%, #18244a, transparent 40%),
  59.                     linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  60.             background-attachment: fixed;
  61.         }
  62.         body::before {
  63.             content: "";
  64.             position: fixed;
  65.             inset: 0;
  66.             background-image:
  67.                     radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, .14) 50%, transparent 51%),
  68.                     radial-gradient(2px 2px at 70% 30%, rgba(255, 255, 255, .09) 50%, transparent 51%),
  69.                     radial-gradient(2px 2px at 30% 80%, rgba(255, 255, 255, .07) 50%, transparent 51%),
  70.                     radial-gradient(2px 2px at 80% 60%, rgba(255, 255, 255, .10) 50%, transparent 51%);
  71.             pointer-events: none;
  72.             opacity: .35;
  73.             z-index: 0;
  74.         }
  75.         .topp{
  76.             margin: auto;
  77.             /* border: 2px solid whitesmoke; */
  78.             backdrop-filter: blur(8px);
  79.             -webkit-backdrop-filter: blur(9px);
  80.             width: min(1200px, 94%);
  81.             height: 10vh;
  82.             border-bottom-left-radius: 15px;
  83.             border-bottom-right-radius: 15px;
  84.         }
  85.         .shell {
  86.             width: min(1200px, 94%);
  87.             margin: 32px auto 80px;
  88.             position: relative;
  89.             z-index: 1;
  90.         }
  92.         .header {
  93.             background: var(--surface);
  94.             border: 1px solid var(--border);
  95.             border-radius: var(--radius-lg);
  96.             padding: 16px;
  97.             box-shadow: var(--shadow-2);
  98.             backdrop-filter: blur(var(--blur));
  99.             display: grid;
  100.             grid-template-columns: 1fr auto;
  101.             gap: 12px;
  102.             align-items: center;
  103.         }
  105.         .header h2 {
  106.             margin: 0;
  107.             font-size: 28px;
  108.             letter-spacing: .2px;
  109.         }
  111.         .tools {
  112.             display: flex;
  113.             gap: 10px;
  114.             align-items: center;
  115.         }
  117.         .search {
  118.             position: relative;
  119.         }
  121.         .search input {
  122.             width: 220px;
  123.             height: 40px;
  124.             padding: 0 12px;
  125.             border-radius: 12px;
  126.             border: 1px solid var(--border);
  127.             background: var(--surface-strong);
  128.             color: var(--text);
  129.             outline: none;
  130.             transition: box-shadow var(--speed), transform var(--speed-fast);
  131.         }
  133.         .search input::placeholder {
  134.             color: rgba(255, 255, 255, .55);
  135.         }
  137.         .search input:focus {
  138.             box-shadow: 0 0 0 3px rgba(116, 163, 255, .25);
  139.             transform: translateY(-1px);
  140.         }
  142.         .filter {
  143.             height: 40px;
  144.             border-radius: 12px;
  145.             border: 1px solid var(--border);
  146.             background: var(--surface-strong);
  147.             color: var(--text);
  148.             padding: 0 12px;
  149.             color: gray;
  150.             outline: none;
  151.             min-width: 150px;
  152.         }
  154.         #testList {
  155.             display: grid;
  156.             grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  157.             gap: 14px;
  158.             margin-top: 16px;
  159.             background: var(--surface);
  160.             border: 1px solid var(--border);
  161.             border-radius: var(--radius-lg);
  162.             padding: 16px;
  163.             box-shadow: var(--shadow-2);
  164.             backdrop-filter: blur(var(--blur));
  165.             min-height: 160px;
  166.         }
  168.         .emptyState {
  169.             grid-column: 1 / -1;
  170.             text-align: center;
  171.             color: var(--muted);
  172.             padding: 26px 0;
  173.             font-size: 14px;
  174.         }
  176.         .testButton {
  177.             height: 120px;
  178.             border: 1px solid var(--border);
  179.             border-radius: 16px;
  180.             background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  181.             color: var(--text);
  182.             font-weight: 900;
  183.             font-size: 22px;
  184.             letter-spacing: .3px;
  185.             display: flex;
  186.             align-items: center;
  187.             justify-content: center;
  188.             cursor: pointer;
  189.             position: relative;
  190.             overflow: hidden;
  191.             transition: transform var(--speed-fast), box-shadow var(--speed), border-color var(--speed), background var(--speed);
  192.             box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, .06);
  193.             user-select: none;
  194.             animation: popIn .35s ease forwards;
  195.             opacity: 0;
  196.             transform: translateY(4px) scale(.98);
  197.         }
  199.         .testButton::before {
  200.             content: "";
  201.             position: absolute;
  202.             inset: 0;
  203.             background: radial-gradient(600px 300px at -10% -10%, rgba(116, 163, 255, .15), transparent 60%);
  204.             opacity: .4;
  205.             pointer-events: none;
  206.         }
  208.         .testButton:hover {
  209.             transform: translateY(-2px) scale(1.02);
  210.             box-shadow: 0 16px 36px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .08);
  211.             border-color: rgba(116, 163, 255, .55);
  212.             background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  213.         }
  215.         @keyframes popIn {
  216.             to {
  217.                 opacity: 1;
  218.                 transform: translateY(0) scale(1);
  219.             }
  220.         }
  222.         .ribbon {
  223.             position: absolute;
  224.             top: 10px;
  225.             right: -38px;
  226.             width: 140px;
  227.             text-align: center;
  228.             transform: rotate(35deg);
  229.             font-size: 11px;
  230.             font-weight: 900;
  231.             letter-spacing: .3px;
  232.             color: #071b14;
  233.             padding: 4px 0;
  234.             box-shadow: 0 4px 14px rgba(0, 0, 0, .20);
  235.             border: 1px solid rgba(0, 0, 0, .1);
  236.         }
  238.         .ribbon.done {
  239.             background: linear-gradient(180deg, #35d49f, #18b98a);
  240.         }
  242.         .ribbon.part {
  243.             background: linear-gradient(180deg, #ffd166, #ffbf55);
  244.         }
  246.         .ribbon.none {
  247.             background: linear-gradient(180deg, #ff9aa8, #ff6b7c);
  248.         }
  250.         .testButton.completed {
  251.             box-shadow: 0 12px 26px rgba(53, 212, 159, .20), inset 0 1px 0 rgba(255, 255, 255, .08);
  252.             border-color: rgba(53, 212, 159, .45);
  253.         }
  255.         .testButton.partial {
  256.             box-shadow: 0 12px 26px rgba(255, 209, 102, .20), inset 0 1px 0 rgba(255, 255, 255, .08);
  257.             border-color: rgba(255, 209, 102, .45);
  258.         }
  260.         .testButton.not-started {
  261.             box-shadow: 0 12px 26px rgba(255, 107, 124, .20), inset 0 1px 0 rgba(255, 255, 255, .08);
  262.             border-color: rgba(255, 107, 124, .45);
  263.         }
  265.         .legend {
  266.             display: flex;
  267.             gap: 10px;
  268.             align-items: center;
  269.             margin-top: 10px;
  270.             color: var(--muted);
  271.             font-size: 13px;
  272.         }
  273.         .topp button{min-width: 35%; background:linear-gradient(180deg,#35d49f,#18b98a);color:#041b12;box-shadow:0 10px 20px rgba(24,185,138,.18), inset 0 1px 0 rgba(255,255,255,.5); height:46px;min-width:160px;padding:0 18px;border:0;border-radius:14px;font-weight:900;letter-spacing:.2px;cursor:pointer;transition:transform var(--speed-fast), box-shadow var(--speed)}
  274.         .topp button:hover{transform:translateY(-1px)}
  276.         .dot {
  277.             width: 10px;
  278.             height: 10px;
  279.             border-radius: 50%;
  280.             display: inline-block;
  281.             margin-right: 6px;
  282.         }
  284.         .dot.done {
  285.             background: var(--green);
  286.         }
  288.         .dot.part {
  289.             background: var(--amber);
  290.         }
  292.         .dot.none {
  293.             background: var(--red);
  294.         }
  296.         .testButton[title] {
  297.             position: relative;
  298.         }
  300.         .testButton[title]:hover::after {
  301.             content: attr(title);
  302.             position: absolute;
  303.             bottom: -34px;
  304.             left: 50%;
  305.             transform: translateX(-50%);
  306.             background: rgba(0, 0, 0, .75);
  307.             color: #fff;
  308.             padding: 6px 10px;
  309.             border-radius: 8px;
  310.             font-size: 12px;
  311.             white-space: nowrap;
  312.             pointer-events: none;
  313.         }
  314.         #go{height:40px;width:20%;text-align:center; padding:0 18px;border:0;border-radius:14px;font-weight:900;letter-spacing:.2px;cursor:pointer;transition:transform var(--speed-fast), box-shadow var(--speed), filter var(--speed); background:linear-gradient(180deg, rgb(244, 228, 228), rgb(98, 91, 91));color:#041b12;box-shadow:0 10px 24px rgba(24,185,138,.22), inset 0 1px 0 rgba(255,255,255,.5)}
  315.         #go:hover{transform: translateY(-5px);}
  316.         @media (max-width: 700px) {
  317.             .header {
  318.                 grid-template-columns: 1fr;
  319.             }
  320.             #go{width: 100%; margin-top: 10px;}
  321.             .tools {
  322.                 display:contents;
  323.             }
  325.             .search input {
  326.                 width: 100%;
  327.             }
  328.         }
  329.     </style>
  330.     <link rel="stylesheet" href="{{ asset('css/navbar.css') }}" />
  331.     <script>
  332.   (() => {
  333.     const saved = localStorage.getItem('theme');
  334.     if (saved) {
  335.       document.documentElement.setAttribute('data-theme', saved);
  336.     } else {
  337.       document.documentElement.setAttribute(
  338.         'data-theme',
  339.         matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  340.       );
  341.     }
  342.   })();
  343. </script>
  344. </head>
  346. <body>
  347.   <nav class="nav" role="navigation" aria-label="Primary">
  348.   <div class="nav-inner">
  349.     <a class="brand" href="/" aria-label="Exam-hub">
  350.       <span class="logo" aria-hidden="true" style="overflow: hidden;">
  351.         <img src="../students/Vrshikyan_logo.ico" width="39px" alt="Vrshikyans logo">
  352.       </span>
  353.       <span>Vrshikyans</span>&nbsp;&nbsp;
  354.     </a>
  356.     <div class="nav-links">
  357.       <a class="nav-link" data-section="toefl" href="./test-selection?type=toefl" id="toeflNav">TOEFL</a>
  358.       <a class="nav-link" data-section="sat" href="./test-sat-selection#sat" >SAT</a>
  359.       <a class="nav-link" data-section="act" href="./test-sat-selection#act">ACT</a>
  360.       <a class="nav-link" data-section="reading" href="./test-selection?type=readingPractice" id="readingPrNav">Reading Practice</a>
  361.       <a class="nav-link" data-section="support" href="./support">Support</a>
  362.       <a class="nav-link" data-section="reviews" href="./reviews">Reviews</a>
  363.     </div>
  365.     <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
  367.     <div class="spacer"></div>
  368.     <button id="themeToggle" class="theme-btn" aria-label="Toggle theme">🌑</button>
  369.     <a class="cta" id="startTop" href="../indexes/account" aria-label="Account"
  370.       style="width: 40px; height: 40px; background: whitesmoke;">👤</a>
  371.   </div>
  372. </nav>
  373. <div class="mobile-menu" id="mobileMenu">
  374.   <div class="mobile-nav-links">
  375.     <a class="mobile-nav-link" href="./test-selection?type=toefl">TOEFL</a>
  376.     <a class="mobile-nav-link" href="./test-sat-selection#sat">SAT</a>
  377.     <a class="mobile-nav-link" href="./test-sat-selection#act">ACT</a>
  378.     <a class="mobile-nav-link" href="./test-selection?type=readingPractice">Reading Practice</a>
  379.     <a class="mobile-nav-link" href="./support">Support</a>
  380.     <a class="mobile-nav-link" href="./reviews">Reviews</a>
  381.   </div>
  382. </div>
  383. <div class="shell">
  384.     <div class="header">
  385.         <h2>Select a Test</h2>
  386.         <div class="tools">
  387.             <select id="typeFilter" class="filter" title="Test type">
  388.                 <option value="toefl">TPO</option>
  389.                 <option value="sh">SH</option>
  390.                 <option value="toefl2026">TOEFL 2026</option>
  391.                 <option value="readingPractice">Reading practice</option>
  392.             </select>
  394.             <div class="search">
  395.                 <input id="quickFind" type="number" min="1" placeholder="Go to test #" />
  396.                 <button id="go">Go</button>
  397.             </div>
  399.             <select id="statusFilter" class="filter" title="Filter by status">
  400.                 <option value="all">All</option>
  401.                 <option value="completed">Completed</option>
  402.                 <option value="partial">In progress</option>
  403.                 <option value="not-started">Not started</option>
  404.             </select>
  405.         </div>
  406.     </div>
  408.     <div class="legend">
  409.         <span><span class="dot done"></span>Completed</span>
  410.         <span><span class="dot part"></span>In progress</span>
  411.         <span><span class="dot none"></span>Not started</span>
  412.     </div>
  414.     <div id="testList"></div>
  415. </div>
  416. <script src="{{ asset('js/navbar.js') }}"></script>
  417. <script>
  418.     const TEST_TYPES = {
  419.         toefl: { label: 'TPO', total: 65 },
  420.         sh: { label: 'SH', total: 4 },
  421.         toefl2026: { label: 'TOEFL 2026', total: 10 },
  422.         readingPractice: { label: 'Reading practice', total: 66 }
  423.     };
  425.     const SECTION_PAGE = '/indexes/section-selection';
  427.     const testListEl = document.getElementById('testList');
  428.     const quickFind = document.getElementById('quickFind');
  429.     const statusFilter = document.getElementById('statusFilter');
  430.     const typeFilter = document.getElementById('typeFilter');
  432. const qs = new URLSearchParams(location.search);
  434. // ✅ don't blindly toLowerCase() because readingPractice is camelCase
  435. let initialType = qs.get('type') || localStorage.getItem('TEST_TYPE') || 'toefl';
  437. // if it's not a known key, try lowercase fallback, else default to toefl
  438. if (!TEST_TYPES[initialType]) {
  439.   const lower = String(initialType).toLowerCase();
  440.   if (TEST_TYPES[lower]) {
  441.     initialType = lower;
  442.   } else {
  443.     initialType = 'toefl';
  444.   }
  445. }
  447. typeFilter.value = initialType;
  450.     function updateQuickFindPlaceholder() {
  451.         const t = typeFilter.value;
  452.         const total = TEST_TYPES[t].total;
  453.         quickFind.placeholder = `Go to ${TEST_TYPES[t].label} test # (1–${total})`;
  454.         quickFind.max = String(total);
  455.     }
  457.     updateQuickFindPlaceholder();
  459.     function getKey(type, id, section) {
  460.         return `result_${type}_${id}_${section}`;
  461.     }
  463.     function getLegacyKey(id, section) {
  464.         return `result_${id}_${section}`;
  465.     }
  467.     function getStatusForTest(type, id) {
  468.         // Reading practice: only reading section matters
  469.         if (type === 'readingPractice') {
  470.             const r = localStorage.getItem(getKey(type, id, 'reading'));
  471.             if (r) return 'completed';
  472.             return 'not-started';
  473.         }
  475.         // For TOEFL 2026, we'll use the new key format only
  476.         if (type === 'toefl2026') {
  477.             const r = localStorage.getItem(getKey(type, id, 'reading'));
  478.             const l = localStorage.getItem(getKey(type, id, 'listening'));
  479.             const s = localStorage.getItem(getKey(type, id, 'speaking'));
  480.             const w = localStorage.getItem(getKey(type, id, 'writing'));
  482.             const hasAny = r || l || s || w;
  483.             const hasAll = r && l && w;
  484.             if (hasAll) return 'completed';
  485.             if (hasAny) return 'partial';
  486.             return 'not-started';
  487.         }
  489.         // For TPO and SH, keep the existing logic with legacy support
  490.         const r = localStorage.getItem(getKey(type, id, 'reading')) || (type === 'toefl' ? localStorage.getItem(getLegacyKey(id, 'reading')) : null);
  491.         const l = localStorage.getItem(getKey(type, id, 'listening')) || (type === 'toefl' ? localStorage.getItem(getLegacyKey(id, 'listening')) : null);
  492.         const s = localStorage.getItem(getKey(type, id, 'speaking')) || (type === 'toefl' ? localStorage.getItem(getLegacyKey(id, 'speaking')) : null);
  493.         const w = localStorage.getItem(getKey(type, id, 'writing')) || (type === 'toefl' ? localStorage.getItem(getLegacyKey(id, 'writing')) : null);
  495.         const hasAny = r || l || s || w;
  496.         const hasAll = r && l && w;
  497.         if (hasAll) return 'completed';
  498.         if (hasAny) return 'partial';
  499.         return 'not-started';
  500.     }
  502.     function ribbonFor(status) {
  503.         if (status === 'completed') return '<span class="ribbon done">COMPLETED</span>';
  504.         if (status === 'partial') return '<span class="ribbon part">IN&nbsp;PROGRESS</span>';
  505.         return '<span class="ribbon none">NOT&nbsp;STARTED</span>';
  506.     }
  508.     function titleFor(status) {
  509.         if (status === 'completed') return 'All sections recorded for this test';
  510.         if (status === 'partial') return 'You started this test';
  511.         return 'No sections done yet';
  512.     }
  514.     function renderGrid() {
  515.         const curType = typeFilter.value;
  516.         const total = TEST_TYPES[curType].total;
  517.         testListEl.innerHTML = '';
  519.         if (!total || total < 1) {
  520.             const empty = document.createElement('div');
  521.             empty.className = 'emptyState';
  522.             empty.textContent = `${TEST_TYPES[curType].label} tests are not defined yet.`;
  523.             testListEl.appendChild(empty);
  524.             return;
  525.         }
  527.         let rendered = 0;
  528.         for (let i = 1; i <= total; i++) {
  529.             const status = getStatusForTest(curType, i);
  530.             if (statusFilter.value !== 'all' && statusFilter.value !== status) continue;
  532.             const btn = document.createElement('button');
  533.             btn.className = `testButton ${status}`;
  534.             btn.title = titleFor(status);
  535.             btn.style.animationDelay = `${i * 8}ms`;
  536.             btn.innerHTML = `${ribbonFor(status)}${TEST_TYPES[curType].label} ${i}`;
  538.             btn.onclick = () => {
  539.                 sessionStorage.setItem('TEST_ID', String(i));
  540.                 sessionStorage.setItem('TEST_TYPE', curType);
  541.                 const url = `${SECTION_PAGE}?type=${encodeURIComponent(curType)}&test=${i}`;
  542.                 window.location.href = url;
  543.             };
  545.             testListEl.appendChild(btn);
  546.             rendered++;
  547.         }
  549.         if (!rendered) {
  550.             const empty = document.createElement('div');
  551.             empty.className = 'emptyState';
  552.             empty.textContent = 'No tests match the current filters.';
  553.             testListEl.appendChild(empty);
  554.         }
  555.     }
  557.     quickFind.addEventListener('keydown', (e) => {
  558.         if (e.key === 'Enter') {
  559.             findTest()
  560.         }
  561.     });
  563.     function findTest() {
  564.         const n = parseInt(quickFind.value, 10);
  565.         const curType = typeFilter.value;
  566.         const total = TEST_TYPES[curType].total;
  567.         if (!Number.isNaN(n) && n >= 1 && n <= total) {
  568.             sessionStorage.setItem('TEST_ID', String(n));
  569.             sessionStorage.setItem('TEST_TYPE', curType);
  570.             const url = `${SECTION_PAGE}?type=${encodeURIComponent(curType)}&test=${n}`;
  571.             window.location.href = url;
  572.         } else {
  573.             quickFind.style.transition = '0.5s';
  574.             quickFind.style.color = 'red';
  575.             setTimeout(() => { quickFind.style.color = ''; }, 2000);
  576.         }
  577.     }
  579.     const go = document.getElementById("go")
  580.     go.addEventListener("click", findTest);
  582.     statusFilter.addEventListener('change', renderGrid);
  584.     typeFilter.addEventListener('change', () => {
  585.         // persist selection, update UI, re-render
  586.         localStorage.setItem('TEST_TYPE', typeFilter.value);
  587.         updateQuickFindPlaceholder();
  588.         renderGrid();
  589.     });
  591. function updateActiveNav() {
  592.   const toeflNav = document.getElementById('toeflNav');
  593.   const readingPrNav = document.getElementById('readingPrNav');
  595.   toeflNav.classList.toggle('active', typeFilter.value === 'toefl');
  596.   readingPrNav.classList.toggle('active', typeFilter.value === 'readingPractice');
  597. }
  599. updateActiveNav();
  600. typeFilter.addEventListener('change', updateActiveNav);
  603.     const headingEl = document.querySelector('.header h2');
  605.     function setTypeInURL(t) {
  606.         const url = new URL(location.href);
  607.         url.searchParams.set('type', t);
  608.         history.replaceState(null, '', url);
  609.     }
  611.     function updateTitles(t) {
  612.         const label = TEST_TYPES[t].label;
  613.         headingEl.textContent = `Select ${label} Tests`;
  614.         document.title = `Select ${label} Tests`;
  615.     }
  617.     (function normalizeWeirdParam() {
  618.         const sp = new URLSearchParams(location.search);
  619.         if (!sp.has('type') && location.search.startsWith('?=')) {
  620.             const val = location.search.slice(2); // after '?='
  621.             if (val === 'toefl' || val === 'sh' || val === 'toefl2026' || val === 'readingPractice') {
  622.                 const url = new URL(location.href);
  623.                 url.search = `?type=${val}`;
  624.                 history.replaceState(null, '', url);
  625.             }
  626.         }
  627.     })();
  629.     updateTitles(typeFilter.value);
  630.     setTypeInURL(typeFilter.value);
  632.     typeFilter.addEventListener('change', () => {
  633.         localStorage.setItem('TEST_TYPE', typeFilter.value);
  634.         updateQuickFindPlaceholder();
  635.         updateTitles(typeFilter.value);
  636.         setTypeInURL(typeFilter.value);
  637.         renderGrid();
  638.     });
  640.     renderGrid();
  641.     document.addEventListener("contextmenu", (e)=> e.preventDefault());
  643. </script>
  644. </body>
  646. </html>