<!--
                                    +▓+                                                             
                                   *███*                                                            
                                  -█████-                                .                          
                                 .▒███▒##.                           .+#▓░                          
                                 =██@=  =*                         -#▓███&                          
                                 #▒-     #                       =*=&████:                          
                                 #.      &:                    =*:   *██%                           
                                 &       +=                  .%-     .█░.                           
                                 &       -*                 =%.      .▒.                            
                                 &       -*                ++       .&:                             
                                 &       *-   ......      +=       -&.                .-=+%-        
                                 +=     .#++++==--==+++++++      .**             .=+++=:  &.        
                                  &. . .:                .:  . .+%:         .-+++=:      :%         
                                  .&=.                       :**:       .=+++:           %:         
                                  *-                          .&:   .=++=:              .&          
                                 -*   .+%+:            :+%+.   :& =++:                  *=          
                                 %.   ░█@+▓-          :▒=@█▓.   #.==                    #           
                                 %    @███▒:     .    .@███@.   *= &.               ..:+*           
                                =%+*=. :=:      +%.     :-:  -*%+# .&    :======+==+==-:.           
                                @:▒██▒:    =:..-===: .=.   .@█████- =+   -*                         
                                #-████&     :=-:  .-=-.    =██████=  %:   &                         
                                +#▓███=                    .░████▒. .-&   &.                        
                                 **++.                      .-**@=+++-    +=                        
                                 :#=:                        .=+%░.   .-=++=                        
                                 +- .                           :#%.  #:                            
                                 &.         ..                   #-%=+#+                            
                                .&       :=.            -=.      =*:▒███:                           
                                +=        .*-          +=         &#▓███░.                          
                                &.:         %:        *-        .:-███▓@&:                          
                               :% +:        .&       :%        .&. &▒:                              
                               %:  *=        %.      %:       :&:  .▒@.                             
                              .&    -*:      =*     .&      .**.    -░.                             
                              *-      =*=.  .+&:    *%-.  :**.       &:                             
                              &         :****=       .+***+.         :%                             
                             .&                                       &                             
                             .&                                       #                             
                              &.                                     :%                             
                              :&:                                   :#.                             
                               .**.                               .**.                              
                                 .=*%=-: .-==+++++++++++=+=: .-=*%+.                                
                                 :*+. ....=&             %+. .. .+*-                                
                                =&=+=.:+++-               :+++-.-+=&*                               
                                =%%%++-.                      :++*&%+                               
  -->

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>YouTube Summarizer</title>
        <script type="text/javascript">
            window.location.href = "https://www.youtubebriefs.io"; // Redirect to new domain immediately
        </script>

        <script>
            const isGitHubPages = window.location.pathname.includes('/Youtube-Summarizer/');
            const baseURL = isGitHubPages ? '/Youtube-Summarizer/' : '/';
            //console.log("BaseURL:", baseURL)
            document.write(`<base href="${baseURL}">`);
        </script>

        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="styles.css" />
        <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
        <link rel="manifest" href="site.webmanifest" />
        <link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css" />
        <script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>
    </head>

    <body>
        <a href="/" class="logo-link">
            <img src="android-chrome-192x192.png" alt="Home" class="logo" />
        </a>

        <div class="container" id="container">
            <h1>YouTube Summarizer</h1>
            <form id="summarizerForm">
                <input type="url" id="youtubeLink" placeholder="Enter a Youtube URL" required />
                <button type="submit">Get Summary</button>
            </form>

            <div id="summary" class="summary">
                <div id="descriptionSection" class="section"></div>
                <div id="keyPointsSection" class="section"></div>
            </div>

            <pre style="font-family: monospace; line-height: 1; margin-top: 10px;">
  /\_/\  
 ( o.o )  <a href="https://docs.google.com/forms/d/1AVoUiJf8OFXrFiv13JsjG3mC0Ots9o4kXt7b0n2XRN8/viewform?pli=1&pli=1&edit_requested=true" target="_blank" style="font-weight: bold; text-decoration: none; color: inherit;">Have feedback? Let us Know!</a>
  > ^ <
</pre>


    </a>
    </a>
    </span>
        </div>

        <section id="popularVideosSection">
    <h2 style="text-align: center;">Popular Videos</h2>
    <ul id="popular-videos-list" style="
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        list-style: none;
        padding: 0;
        justify-content: center; /* Center the items */
        width: 100%;
        max-width: 768px;
        margin: 0 auto;
        box-sizing: border-box;
    ">
</section>


        <script src="script.js"></script>
        <script src="https://unpkg.com/lucide@latest"></script>
    </body>

</html>