index.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./img/circle.ico" type="image/x-icon" />
    <meta name="robots" content="index, follow" />
    <meta
      name="description"
      content="En el emocionante evento de El_Hackathon, nuestro equipo logró alcanzar la cima al presentar una solución innovadora que combina la potencia de la API de ChatGPT con el poder de DALL·E 2.0 en una app desarrollada completamente con Vanilla JavaScript. Genera imágenes únicas, guiones para videos, descripciones de post y hashtags para redes sociales." />
    <meta name="author" content="Esleiter" />
    <title>Equipo #1 <el_hackathon></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <a href="/" id="refresh" onclick="window.reload">
      <i class="bx bx-refresh"></i>
    </a>

    <div id="background"></div>

    <div
      class="mx-auto flex justify-center max-w-3xl md:mb-8 mt-4 bg-white rounded-lg items-center relative md:p-0 p-8">
      <div class="w-full p-2">
        <div
          id="partials"
          class="focus:outline-none w-full rounded-lg p-2 text-sm bg-gray-100 border border-transparent appearance-none rounded-tg text-gray-400"></div>
        <footer class="text-center mt-2 w-full">
          <button
            id="submit"
            onclick="generate()"
            disabled
            class="p-2 rounded-lg text-base bg-blue-600 text-white shadow-lg">
            Generar
          </button>
          <div id="loader" style="display: none">
            <i class="load bx bx-loader-circle"></i>
          </div>
        </footer>
      </div>
    </div>

    <div
      id="section-post"
      style="display: block"
      class="mx-auto flex justify-center max-w-3xl md:mb-8 mt-4 bg-white rounded-lg items-center relative md:p-0 p-8">
      <div class="h-full relative">
        <div class="py-2 px-2">
          <div class="flex justify-between items-center py-2">
            <div class="relative mt-1 flex">
              <div class="mr-2">
                <a href="https://www.publifyer.com/es/" target="_blank">
                  <img
                    src="img/publifyer.jpg"
                    class="w-10 h-10 rounded-full object-cover" />
                </a>
              </div>

              <div class="ml-3 flex justify-start flex-col items-start">
                <a href="https://www.publifyer.com/es/" target="_blank">
                  <p class="text-gray-900 text-sm">Publifyer</p>
                </a>
                <p class="text-gray-600 text-xs">
                  Publifyer | Influencer Marketing Platform
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="relative w-full h-full">
          <div id="post" class="w-full h-full bg-gray-400 text-gray-800"></div>
        </div>
        <div>
          <div class="flex justify-between items-start p-2 py-">
            <div class="flex space-x-2 items-center">
              <i class="icons bx bx-heart"></i>
              <i class="icons bx bx-message-rounded"></i>
              <i class="icons bx bx-send"></i>
            </div>
            <div class="flex space-x-2 items-center">
              <i class="icons bx bx-bookmark"></i>
            </div>
          </div>
          <div class="p-2 flex flex-col space-y-3">
            <div class="w-full">
              <p class="font-bold text-sm text-gray-700">234 reacciones</p>
            </div>
            <div class="w-full">
              <p class="font-normal text-xs text-gray-500">hace 10 horas</p>
            </div>
            <div class="w-full">
              <div id="description"></div>
              <br /><br />
              <div id="hashtags"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="powered" class="text-center">
      Powered by
      <a class="links" href="https://esleiter.com" target="_blank">
        esleiter.com
      </a>
      for
      <a
        class="links"
        href="https://guayaquiltech.ec/hackathon/"
        target="_blank">
        el_hackathon
      </a>
      Volumen 1
    </div>

    <script src="js/main.js" type="module"></script>
  </body>
</html>