I want to make YouTube Video Downloading Tool, you must use, you must use Tailwind CSS, and they components. Must use Light mode theme, use Inter font and use black main color. Use unique name and make nav, hero page, fetures page, how is work, FAQ and last make modern professional footer. Use modern icons. Make sure i need to much modern UI of YouTube downloader tool, when user input link then show Loading circle with text message in that button. Snd fetch all the details like, Video Title, thumbnail, Size, and etc possible all the detail fetch. Only must use html, css and js. Use google api, and tell me which api i want to enable. 

Please use Franken UI and must use they components

Here is example of html "<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>Franken UI</title>

    <link rel="preconnect" href="https://rsms.me/" />

    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />


    <style>

      :root {

        font-family: Inter, sans-serif;

        font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */

      }

      @supports (font-variation-settings: normal) {

        :root {

          font-family: InterVariable, sans-serif;

        }

      }

    </style>


    <!-- For stability in production, it's recommended that you hardcode the latest version in the CDN link. -->


    <link

      rel="stylesheet"

      href="https://unpkg.com/franken-ui@internal/dist/css/core.min.css"

    />

    <link

      rel="stylesheet"

      href="https://unpkg.com/franken-ui@internal/dist/css/utilities.min.css"

    />


    <script>

      const htmlElement = document.documentElement;


      const __FRANKEN__ = JSON.parse(

        localStorage.getItem("__FRANKEN__") || "{}"

      );


      if (

        __FRANKEN__.mode === "dark" ||

        (!__FRANKEN__.mode &&

          window.matchMedia("(prefers-color-scheme: dark)").matches)

      ) {

        htmlElement.classList.add("dark");

      } else {

        htmlElement.classList.remove("dark");

      }


      htmlElement.classList.add(__FRANKEN__.theme || "uk-theme-zinc");

      htmlElement.classList.add(__FRANKEN__.radii || "uk-radii-md");

      htmlElement.classList.add(__FRANKEN__.shadows || "uk-shadows-sm");

      htmlElement.classList.add(__FRANKEN__.font || "uk-font-sm");

      htmlElement.classList.add(__FRANKEN__.chart || "uk-chart-default");

    </script>


    <script

      type="module"

      src="https://unpkg.com/franken-ui@internal/dist/js/core.iife.js"

    ></script>

    <script

      type="module"

      src="https://unpkg.com/franken-ui@internal/dist/js/icon.iife.js"

    ></script>


    <!-- <script

      type="module"

      src="https://unpkg.com/franken-ui@internal/dist/js/chart.iife.js"

    ></script> -->

  </head>

  <body class="bg-background text-foreground">

    <!-- START CODING HERE -->

    <div class="uk-container mt-40">

      <div class="space-y-4">

        <h1 class="uk-hero-sm text-center font-bold">Franken UI: Dos</h1>

        <div class="flex justify-center gap-x-2">

          <a

            class="uk-btn uk-btn-primary"

            href="https://franken-ui.dev/docs/introduction"

          >

            Learn

          </a>

          <a

            class="uk-btn uk-btn-default"

            href="https://github.com/franken-ui"

            target="_blank"

          >

            Follow

          </a>

        </div>

      </div>

    </div>

    <!-- END -->

  </body>

</html>"


Please must be use Franken UI Icons, here ie example "<div class="size-4"><uk-icon icon="smile"></uk-icon></div>" please use more size of icon. And use proper main menu with hover affect. Show animation to send to others section when user click on menu. Use icons in main menu and buttons, feature section. Please use card for how Is work section. Use drop-down FAQ section. Please use black underline for footer links in hover. Possible then make more Enahehed UI of my site. And use Design with love Kaiiddo Team use heart animation of beating. 

Comments

Post a Comment