user: This is my index.html, write me a watch.html which gets the ?id parameter and sends a get to this API with this sample response: GET /api/v1/videos/:id Schema:   {   "type": String, // "video"|"published"   "title": String,   "videoId": String,   "videoThumbnails": [     {       "quality": String,       "url": String,       "width": Int32,       "height": Int32     }   ],   "storyboards": [     {       "url": String,       "templateUrl": String,       "width": Int32,       "height": Int32,       "count": Int32,       "interval ": Int32,       "storyboardWidth": Int32,       "storyboardHeight": Int32,       "storyboardCount": Int32     }   ],    "description": String,   "descriptionHtml": String,   "published": Int64,   "publishedText": String,    "keywords": Array(String),   "viewCount": Int64,   "likeCount": Int32,   "dislikeCount": Int32,    "paid": Bool,   "premium": Bool,   "isFamilyFriendly": Bool,   "allowedRegions": Array(String),   "genre": String,   "genreUrl": String,    "author": String,   "authorId": String,   "authorUrl": String,   "authorThumbnails": [     {       "url": String,       "width": Int32,       "height": Int32     }   ],    "subCountText": String,   "lengthSeconds": Int32,   "allowRatings": Bool,   "rating": Float32,   "isListed": Bool,   "liveNow": Bool,   "isPostLiveDvr": Bool,   "isUpcoming": Bool,   "dashUrl:" String,   "premiereTimestamp": Int64?,    "hlsUrl": String?,   "adaptiveFormats": [     {       "index": String,       "bitrate": String,       "init": String,       "url": String,       "itag": String,       "type": String,       "clen": String,       "lmt": String,       "projectionType": Int32,       "container": String,       "encoding": String,       "qualityLabel": String?,       "resolution": String?     }   ],   "formatStreams": [     {       "url": String,       "itag": String,       "type": String,       "quality": String,       "container": String,       "encoding": String,       "qualityLabel": String,       "resolution": String,       "size": String     }   ],   "captions": [     {       "label": String,       "languageCode": String,       "url": String     }   ],   "recommendedVideos": [     {       "videoId": String,       "title": String,       "videoThumbnails": [         {           "quality": String,           "url": String,           "width": Int32,           "height": Int32         }       ],       "author": String,       "lengthSeconds": Int32,       "viewCountText": String     }   ] } Parameters:   region: ISO 3166 country code (default: "US")   : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>PlayBox - Video Watching Site</title>     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">     <style>         :root {             --bg-color: #181818;             --card-bg: #242424;             --text-primary: #FFFFFF;             --text-secondary: #B3B3B3;             --accent-color: #BB86FC;             --border-radius: 10px;             --transition-speed: 0.3s;         }         body {             font-family: 'Roboto', sans-serif;             margin: 0;             padding: 0;             background-color: var(--bg-color);             color: var(--text-primary);         }         .container {             max-width: 1200px;             margin: 0 auto;             padding: 20px;         }         header {             text-align: center;             padding: 40px 0;         }         h1 {             font-size: 3rem;             margin: 0;             color: var(--accent-color);         }         #search-container {             display: flex;             justify-content: center;             margin-bottom: 40px;             position: relative;         }         #search-input {             width: 60%;             max-width: 500px;             padding: 12px 20px;             font-size: 1rem;             border: none;             border-radius: var(--border-radius) 0 0 var(--border-radius);             background-color: var(--card-bg);             color: var(--text-primary);         }         #search-button {             padding: 12px 25px;             font-size: 1rem;             background-color: var(--accent-color);             color: var(--bg-color);             border: none;             border-radius: 0 var(--border-radius) var(--border-radius) 0;             cursor: pointer;             transition: background-color var(--transition-speed), transform var(--transition-speed);         }         #search-button:hover {             background-color: #9965DA;             transform: scale(1.05);         }         #suggestions {             position: absolute;             top: calc(100% + 5px);             left: 50%;             transform: translateX(-50%);             width: 60%;             max-width: 500px;             background-color: var(--card-bg);             border-radius: 0 0 var(--border-radius) var(--border-radius);             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);             z-index: 10;         }         .suggestion {             padding: 10px 20px;             cursor: pointer;             transition: background-color var(--transition-speed);         }         .suggestion:hover {             background-color: rgba(187, 134, 252, 0.1);         }         #results-container, #trending-container {             display: grid;             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));             gap: 20px;             margin-bottom: 40px;         }         .section-title {             font-size: 1.5rem;             margin-bottom: 20px;             color: var(--accent-color);             grid-column: 1 / -1;         }         .trending-videos {             display: contents;         }         .result-box {             background-color: var(--card-bg);             border-radius: var(--border-radius);             overflow: hidden;             transition: transform var(--transition-speed), box-shadow var(--transition-speed);             display: flex;             flex-direction: column;             cursor: pointer;         }         .result-box:hover {             transform: translateY(-5px);             box-shadow: 0 4px 20px rgba(0,0,0,0.2);         }         .result-box img {             width: 100%;             height: auto;             object-fit: cover;         }         .result-box .content {             padding: 15px;             text-align: left;         }         .result-box h3 {             margin-top: 10px;             margin-bottom: 5px;             font-size: 1.2rem;         }         .result-box p {             margin-bottom: 5px;             font-size: 0.9rem;             color: var(--text-secondary);         }         #next-page-container {             display: flex;             justify-content: flex-end;             margin-top: 20px;         }         #next-page-button {             padding: 10px 20px;             font-size: 1rem;             background-color: var(--accent-color);             color: var(--bg-color);             border: none;             border-radius: var(--border-radius);             cursor: pointer;             transition: background-color var(--transition-speed), transform var(--transition-speed);         }         #next-page-button:hover {             background-color: #9965DA;             transform: scale(1.05);         }         #no-more-results {             text-align: center;             margin-top: 20px;             font-size: 1.2rem;             color: var(--text-secondary);         }         @media (max-width: 600px) {             #search-input, #suggestions {                 width: calc(100% - 30px);             }             #results-container, #trending-container {                 grid-template-columns: repeat(2, minmax(140px, 1fr));             }         }         @media (max-width: 400px) {             h1 {                 font-size: 2.5rem;             }             #search-input, #search-button {                 font-size: 0.9rem;             }         }     </style> </head> <body>     <div class="container">         <header>             <h1>PlayBox</h1>         </header>         <div id="search-container">             <input type="text" id="search-input" placeholder="Search for videos...">             <button id="search-button">Search</button>             <div id="suggestions"></div>         </div>         <div id="trending-container">             <h2 class="section-title">Trending</h2>             <div class="trending-videos"></div>         </div>         <div id="results-container"></div>         <div id="next-page-container">             <button id="next-page-button" style="display:none;">Next Page</button>         </div>         <div id="no-more-results" style="display:none;">No more results.</div>     </div>      <script>         const searchInput = document.getElementById('search-input');         const searchButton = document.getElementById('search-button');         const resultsContainer = document.getElementById('results-container');         const suggestionsContainer = document.getElementById('suggestions');         const nextPageButton = document.getElementById('next-page-button');         const noMoreResultsMessage = document.getElementById('no-more-results');         const trendingContainer = document.getElementById('trending-container');          let currentPage = 1;         let currentQuery = '';          searchButton.addEventListener('click', () => performSearch(1));         searchInput.addEventListener('keypress', function(e) {             if (e.key === 'Enter') performSearch(1);         });         nextPageButton.addEventListener('click', () => performSearch(currentPage + 1));          searchInput.addEventListener('input', getSuggestions);          window.addEventListener('load', () => getTrendingContent());          async function getSuggestions() {             const query = searchInput.value.trim();             if (query.length < 2) {                 suggestionsContainer.style.display = 'none';                 return;             }              const apiUrl = `https://invidious.privacyredirect.com/api/v1/search/suggestions?q=${encodeURIComponent(query)}`;              try {                 const response = await fetch(apiUrl);                 const data = await response.json();                 displaySuggestions(data.suggestions);             } catch (error) {                 console.error('Error fetching suggestions:', error);             }         }          function displaySuggestions(suggestions) {             suggestionsContainer.innerHTML = '';             if (suggestions.length === 0) {                 suggestionsContainer.style.display = 'none';                 return;             }              suggestions.forEach(suggestion => {                 const div = document.createElement('div');                 div.className = 'suggestion';                 div.textContent = suggestion;                 div.addEventListener('click', () => {                     searchInput.value = suggestion;                     performSearch(1);                 });                 suggestionsContainer.appendChild(div);             });              suggestionsContainer.style.display = 'block';         }          async function performSearch(page) {             const query = searchInput.value.trim();             if (!query) return;              currentQuery = query;             currentPage = page;             suggestionsContainer.style.display = 'none';             trendingContainer.style.display = 'none';             const apiUrl = `https://invidious.privacyredirect.com/api/v1/search?q=${encodeURIComponent(query)}&page=${page}`;              try {                 const response = await fetch(apiUrl);                 const data = await response.json();                 displayResults(data);             } catch (error) {                 console.error('Error fetching search results:', error);             }         }          function displayResults(results) {             if (currentPage === 1) {                 resultsContainer.innerHTML = '';             }              if (results.length === 0) {                 nextPageButton.style.display = 'none';                 noMoreResultsMessage.style.display = 'block';                 return;             }              results.forEach(result => {                 if (result.type === 'video') {                     const videoBox = createVideoBox(result);                     resultsContainer.appendChild(videoBox);                 } else if (result.type === 'channel') {                     const channelBox = createChannelBox(result);                     resultsContainer.appendChild(channelBox);                 }             });              nextPageButton.style.display = 'block';             noMoreResultsMessage.style.display = 'none';         }          function createVideoBox(video) {             const box = document.createElement('div');             box.className = 'result-box';              const thumbnail = video.videoThumbnails[0].url || '';             const title = video.title || 'Untitled';             const author = video.author || 'Unknown';             const views = formatViews(video.viewCount);              box.innerHTML = `                 <img src="${thumbnail}" alt="${title}">                 <div class="content">                     <h3>${title}</h3>                     <p>${author}</p>                     <p>${views} views</p>                 </div>             `;              box.addEventListener('click', () => {                 window.location.href = `watch.html?id=${video.videoId}`;             });              return box;         }          function createChannelBox(channel) {             const box = document.createElement('div');             box.className = 'result-box channel-box';              const authorThumbnails = channel.authorThumbnails || [];             let bestThumbnailUrl = '';                          if (authorThumbnails.length > 0) {                 bestThumbnailUrl = 'https:' + authorThumbnails[authorThumbnails.length - 1].url;             }              const name = channel.author || 'Unknown';             const subs = formatSubs(channel.subCount);              box.innerHTML = `                 <div class="content">                     <img src="${bestThumbnailUrl}" alt="${name}">                     <h3>${name}</h3>                     <p>${subs} subscribers</p>                 </div>             `;              box.addEventListener('click', () => {                 window.location.href = `channel.html?id=${channel.authorId}`;             });              return box;         }          function formatViews(views) {             if (views >= 1000000) return (views / 1000000).toFixed(1) + 'M';             if (views >= 1000) return (views / 1000).toFixed(1) + 'K';             return views.toString();         }          function formatSubs(subs) {             if (subs >= 1000000) return (subs / 1000000).toFixed(1) + 'M';             if (subs >= 1000) return (subs / 1000).toFixed(1) + 'K';             return subs.toString();         }          async function getTrendingContent() {             const apiUrl = 'https://invidious.privacyredirect.com/api/v1/trending';             try {                 const response = await fetch(apiUrl);                 const data = await response.json();                 displayTrendingContent(data);             } catch (error) {                 console.error('Error fetching trending content:', error);             }         }          function displayTrendingContent(trendingVideos) {             const trendingVideosContainer = document.querySelector('.trending-videos');             trendingVideosContainer.innerHTML = '';             trendingVideos.slice(0, 8).forEach(video => {                 const videoBox = createVideoBox(video);                 trendingVideosContainer.appendChild(videoBox);             });         }          document.addEventListener('click', function(event) {             if (!event.target.closest('#search-container')) {                 suggestionsContainer.style.display = 'none';             }         });     </script> </body> </html>
PROMPT: user: This is my index.html, write me a watch.html which gets the ?id parameter and sends a get to this API with this sample response: GET /api/v1/videos/:id Schema:   {   "type": String, // "video"|"published"   "title": String,   "videoId": String,   "videoThumbnails": [     {       "quality": String,       "url": String,       "width": Int32,       "height": Int32     }   ],   "storyboards": [     {       "url": String,       "templateUrl": String,       "width": Int32,       "height": Int32,       "count": Int32,       "interval ": Int32,       "storyboardWidth": Int32,       "storyboardHeight": Int32,       "storyboardCount": Int32     }   ],    "description": String,   "descriptionHtml": String,   "published": Int64,   "publishedText": String,    "keywords": Array(String),   "viewCount": Int64,   "likeCount": Int32,   "dislikeCount": Int32,    "paid": Bool,   "premium": Bool,   "isFamilyFriendly": Bool,   "allowedRegions": Array(String),   "genre": String,   "genreUrl": String,    "author": String,   "authorId": String,   "authorUrl": String,   "authorThumbnails": [     {       "url": String,       "width": Int32,       "height": Int32     }   ],    "subCountText": String,   "lengthSeconds": Int32,   "allowRatings": Bool,   "rating": Float32,   "isListed": Bool,   "liveNow": Bool,   "isPostLiveDvr": Bool,   "isUpcoming": Bool,   "dashUrl:" String,   "premiereTimestamp": Int64?,    "hlsUrl": String?,   "adaptiveFormats": [     {       "index": String,       "bitrate": String,       "init": String,       "url": String,       "itag": String,       "type": String,       "clen": String,       "lmt": String,       "projectionType": Int32,       "container": String,       "encoding": String,       "qualityLabel": String?,       "resolution": String?     }   ],   "formatStreams": [     {       "url": String,       "itag": String,       "type": String,       "quality": String,       "container": String,       "encoding": String,       "qualityLabel": String,       "resolution": String,       "size": String     }   ],   "captions": [     {       "label": String,       "languageCode": String,       "url": String     }   ],   "recommendedVideos": [     {       "videoId": String,       "title": String,       "videoThumbnails": [         {           "quality": String,           "url": String,           "width": Int32,           "height": Int32         }       ],       "author": String,       "lengthSeconds": Int32,       "viewCountText": String     }   ] } Parameters:   region: ISO 3166 country code (default: "US")   : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>PlayBox - Video Watching Site</title>     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">     <style>         :root {             --bg-color: #181818;             --card-bg: #242424;             --text-primary: #FFFFFF;             --text-secondary: #B3B3B3;             --accent-color: #BB86FC;             --border-radius: 10px;             --transition-speed: 0.3s;         }         body {             font-family: 'Roboto', sans-serif;             margin: 0;             padding: 0;             background-color: var(--bg-color);             color: var(--text-primary);         }         .container {             max-width: 1200px;             margin: 0 auto;             padding: 20px;         }         header {             text-align: center;             padding: 40px 0;         }         h1 {             font-size: 3rem;             margin: 0;             color: var(--accent-color);         }         #search-container {             display: flex;             justify-content: center;             margin-bottom: 40px;             position: relative;         }         #search-input {             width: 60%;             max-width: 500px;             padding: 12px 20px;             font-size: 1rem;             border: none;             border-radius: var(--border-radius) 0 0 var(--border-radius);             background-color: var(--card-bg);             color: var(--text-primary);         }         #search-button {             padding: 12px 25px;             font-size: 1rem;             background-color: var(--accent-color);             color: var(--bg-color);             border: none;             border-radius: 0 var(--border-radius) var(--border-radius) 0;             cursor: pointer;             transition: background-color var(--transition-speed), transform var(--transition-speed);         }         #search-button:hover {             background-color: #9965DA;             transform: scale(1.05);         }         #suggestions {             position: absolute;             top: calc(100% + 5px);             left: 50%;             transform: translateX(-50%);             width: 60%;             max-width: 500px;             background-color: var(--card-bg);             border-radius: 0 0 var(--border-radius) var(--border-radius);             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);             z-index: 10;         }         .suggestion {             padding: 10px 20px;             cursor: pointer;             transition: background-color var(--transition-speed);         }         .suggestion:hover {             background-color: rgba(187, 134, 252, 0.1);         }         #results-container, #trending-container {             display: grid;             grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));             gap: 20px;             margin-bottom: 40px;         }         .section-title {             font-size: 1.5rem;             margin-bottom: 20px;             color: var(--accent-color);             grid-column: 1 / -1;         }         .trending-videos {             display: contents;         }         .result-box {             background-color: var(--card-bg);             border-radius: var(--border-radius);             overflow: hidden;             transition: transform var(--transition-speed), box-shadow var(--transition-speed);             display: flex;             flex-direction: column;             cursor: pointer;         }         .result-box:hover {             transform: translateY(-5px);             box-shadow: 0 4px 20px rgba(0,0,0,0.2);         }         .result-box img {             width: 100%;             height: auto;             object-fit: cover;         }         .result-box .content {             padding: 15px;             text-align: left;         }         .result-box h3 {             margin-top: 10px;             margin-bottom: 5px;             font-size: 1.2rem;         }         .result-box p {             margin-bottom: 5px;             font-size: 0.9rem;             color: var(--text-secondary);         }         #next-page-container {             display: flex;             justify-content: flex-end;             margin-top: 20px;         }         #next-page-button {             padding: 10px 20px;             font-size: 1rem;             background-color: var(--accent-color);             color: var(--bg-color);             border: none;             border-radius: var(--border-radius);             cursor: pointer;             transition: background-color var(--transition-speed), transform var(--transition-speed);         }         #next-page-button:hover {             background-color: #9965DA;             transform: scale(1.05);         }         #no-more-results {             text-align: center;             margin-top: 20px;             font-size: 1.2rem;             color: var(--text-secondary);         }         @media (max-width: 600px) {             #search-input, #suggestions {                 width: calc(100% - 30px);             }             #results-container, #trending-container {                 grid-template-columns: repeat(2, minmax(140px, 1fr));             }         }         @media (max-width: 400px) {             h1 {                 font-size: 2.5rem;             }             #search-input, #search-button {                 font-size: 0.9rem;             }         }     </style> </head> <body>     <div class="container">         <header>             <h1>PlayBox</h1>         </header>         <div id="search-container">             <input type="text" id="search-input" placeholder="Search for videos...">             <button id="search-button">Search</button>             <div id="suggestions"></div>         </div>         <div id="trending-container">             <h2 class="section-title">Trending</h2>             <div class="trending-videos"></div>         </div>         <div id="results-container"></div>         <div id="next-page-container">             <button id="next-page-button" style="display:none;">Next Page</button>         </div>         <div id="no-more-results" style="display:none;">No more results.</div>     </div>      <script>         const searchInput = document.getElementById('search-input');         const searchButton = document.getElementById('search-button');         const resultsContainer = document.getElementById('results-container');         const suggestionsContainer = document.getElementById('suggestions');         const nextPageButton = document.getElementById('next-page-button');         const noMoreResultsMessage = document.getElementById('no-more-results');         const trendingContainer = document.getElementById('trending-container');          let currentPage = 1;         let currentQuery = '';          searchButton.addEventListener('click', () => performSearch(1));         searchInput.addEventListener('keypress', function(e) {             if (e.key === 'Enter') performSearch(1);         });         nextPageButton.addEventListener('click', () => performSearch(currentPage + 1));          searchInput.addEventListener('input', getSuggestions);          window.addEventListener('load', () => getTrendingContent());          async function getSuggestions() {             const query = searchInput.value.trim();             if (query.length < 2) {                 suggestionsContainer.style.display = 'none';                 return;             }              const apiUrl = `https://invidious.privacyredirect.com/api/v1/search/suggestions?q=${encodeURIComponent(query)}`;              try {                 const response = await fetch(apiUrl);                 const data = await response.json();                 displaySuggestions(data.suggestions);             } catch (error) {                 console.error('Error fetching suggestions:', error);             }         }          function displaySuggestions(suggestions) {             suggestionsContainer.innerHTML = '';             if (suggestions.length === 0) {                 suggestionsContainer.style.display = 'none';                 return;             }              suggestions.forEach(suggestion => {                 const div = document.createElement('div');                 div.className = 'suggestion';                 div.textContent = suggestion;                 div.addEventListener('click', () => {                     searchInput.value = suggestion;                     performSearch(1);                 });                 suggestionsContainer.appendChild(div);             });              suggestionsContainer.style.display = 'block';         }          async function performSearch(page) {             const query = searchInput.value.trim();             if (!query) return;              currentQuery = query;             currentPage = page;             suggestionsContainer.style.display = 'none';             trendingContainer.style.display = 'none';             const apiUrl = `https://invidious.privacyredirect.com/api/v1/search?q=${encodeURIComponent(query)}&page=${page}`;              try {                 const response = await fetch(apiUrl);                 const data = await response.json();                 displayResults(data);             } catch (error) {                 console.error('Error fetching search results:', error);             }         }          function displayResults(results) {             if (currentPage === 1) {                 resultsContainer.innerHTML = '';             }              if (results.length === 0) {                 nextPageButton.style.display = 'none';                 noMoreResultsMessage.style.display = 'block';                 return;             }              results.forEach(result => {                 if (result.type === 'video') {                     const videoBox = createVideoBox(result);                     resultsContainer.appendChild(videoBox);                 } else if (result.type === 'channel') {                     const channelBox = createChannelBox(result);                     resultsContainer.appendChild(channelBox);                 }             });              nextPageButton.style.display = 'block';             noMoreResultsMessage.style.display = 'none';         }          function createVideoBox(video) {             const box = document.createElement('div');             box.className = 'result-box';              const thumbnail = video.videoThumbnails[0].url || '';             const title = video.title || 'Untitled';             const author = video.author || 'Unknown';             const views = formatViews(video.viewCount);              box.innerHTML = `                 <img src="${thumbnail}" alt="${title}">                 <div class="content">                     <h3>${title}</h3>                     <p>${author}</p>                     <p>${views} views</p>                 </div>             `;              box.addEventListener('click', () => {                 window.location.href = `watch.html?id=${video.videoId}`;             });              return box;         }          function createChannelBox(channel) {             const box = document.createElement('div');             box.className = 'result-box channel-box';              const authorThumbnails = channel.authorThumbnails || [];             let bestThumbnailUrl = '';                          if (authorThumbnails.length > 0) {                 bestThumbnailUrl = 'https:' + authorThumbnails[authorThumbnails.length - 1].url;             }              const name = channel.author || 'Unknown';             const subs = formatSubs(channel.subCount);              box.innerHTML = `                 <div class="content">                     <img src="${bestThumbnailUrl}" alt="${name}">                     <h3>${name}</h3>                     <p>${subs} subscribers</p>                 </div>             `;              box.addEventListener('click', () => {                 window.location.href = `channel.html?id=${channel.authorId}`;             });              return box;         }          function formatViews(views) {             if (views >= 1000000) return (views / 1000000).toFixed(1) + 'M';             if (views >= 1000) return (views / 1000).toFixed(1) + 'K';             return views.toString();         }          function formatSubs(subs) {             if (subs >= 1000000) return (subs / 1000000).toFixed(1) + 'M';             if (subs >= 1000) return (subs / 1000).toFixed(1) + 'K';             return subs.toString();         }          async function getTrendingContent() {             const apiUrl = 'https://invidious.privacyredirect.com/api/v1/trending';             try {                 const response = await fetch(apiUrl);                 const data = await response.json();                 displayTrendingContent(data);             } catch (error) {                 console.error('Error fetching trending content:', error);             }         }          function displayTrendingContent(trendingVideos) {             const trendingVideosContainer = document.querySelector('.trending-videos');             trendingVideosContainer.innerHTML = '';             trendingVideos.slice(0, 8).forEach(video => {                 const videoBox = createVideoBox(video);                 trendingVideosContainer.appendChild(videoBox);             });         }          document.addEventListener('click', function(event) {             if (!event.target.closest('#search-container')) {                 suggestionsContainer.style.display = 'none';             }         });     </script> </body> </html>