Custom Component (AI Generated) - Feedback wanted! šŸ’”

All good! I am at the same stage with this as are a lot of us I think. I appreciate your comments. Iā€™m sure that this is going to be amazing as it evolves over the coming months.

2 Likes

Any notice from the CODE component, is not working by here
print:
image

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
    />
    <style>
      body {
        font-family: 'Roboto', sans-serif;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        overflow: hidden;
      }

      .card-container {
        perspective: 1000px;
        width: 80%;
        opacity: 0;
        animation: fadeIn 1s ease forwards;
      }

      .card {
        position: relative;
        width: 100%;
        height: 200px;
        transform-style: preserve-3d;
        transition: transform 1s;
        box-shadow: none;
        border-radius: 10px;
      }

      .front, .back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
        border-radius: 10px;
      }

      .back {
        transform: rotateY(180deg);
      }

      .progress-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 10px;
      }

      .progress-label {
        font-size: 18px;
        color: #ffd700;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        margin-right: 10px;
      }

      .progress-bar {
        height: 10px;
        width: calc(100% - 120px);
        background-color: #fff;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
      }

      .progress-fill {
        height: 100%;
        width: 0%;
        background-image: linear-gqradient(to right, #ffd700, #e7c266);
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
        transition: width 0.3s ease, background-color 0.3s ease;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
      }

      .counter {
        font-size: 36px;
        letter-spacing: 2px;
        font-variant-numeric: tabular-nums;
        color: #ffd700;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        margin-top: 20px;
      }

      .bottom-text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 10px;
      }

      .title {
        font-size: 18px;
        color: #ffd700;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        margin-top: 20px;
      }

      @keyframes slideIn {
        0% {
          transform: translateX(-100%);
          opacity: 0;
        }
        100% {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes rotate {
        0% {
          transform: rotateY(0deg);
        }
        100% {
          transform: rotateY(180deg);
        }
      }

      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="card-container">
      <div class="card" id="card">
        <div class="front">
          <div class="progress-container">
            <div class="progress-label">Inicio</div>
            <div class="progress-bar">
              <div class="progress-fill"></div>
            </div>
            <div class="progress-label">Hoje</div>
          </div>
          <div class="counter">
            <span id="counter-number">R$0,00</span>
          </div>
        </div>
        <div class="back">
          <div class="counter">
            <span id="total-number">R$0,00</span>
          </div>
          <div class="title">Em negĆ³cios gerados</div>
          <div class="bottom-text">Entre maƧons</div>
        </div>
      </div>
    </div>
    <script>
      const finalValue = 5756226;
      const duration = 2000;

      const counterElement = document.getElementById(
        "counter-number"
      );
      const totalElement =
        document.getElementById("total-number");
      const progressBar = document.querySelector(
        ".progress-fill"
      );
      const card = document.getElementById("card");

      const animateValue = (start, end, duration) => {
        const startTime = performance.now();

        const updateCounterAndProgress = () => {
          const currentTime = performance.now();
          const elapsedTime = currentTime - startTime;

          if (elapsedTime >= duration) {
            counterElement.textContent =
              formatCurrency(end);
            progressBar.style.width = "100%";
            card.style.animation = "rotate 1s forwards";
            totalElement.textContent = formatCurrency(end);
          } else {
            const progress = (elapsedTime / duration) * 100;
            progressBar.style.width = `${progress}%`;
            counterElement.textContent = formatCurrency(
              start +
                Math.floor(
                  (end - start) * (elapsedTime / duration)
                )
            );
            progressBar.style.backgroundImage = `linear-gradient(to right, #ffd700, #e7c266)`;
            requestAnimationFrame(updateCounterAndProgress);
          }
        };

        requestAnimationFrame(updateCounterAndProgress);
      };

      const formatCurrency = (value) => {
        return value.toLocaleString("pt-BR", {
          style: "currency",
          currency: "BRL",
        });
      };

      // Inicia a animaĆ§Ć£o imediatamente
      animateValue(0, finalValue, duration);
    </script>
  </body>
</html>

No updates on that front.

1 Like

Can we also PLEASE PLEASE get an action for starting/stopping audio recording so that we can use a custom component for transcriptions etc.

1 Like

Is it possible to create an ai component that can access the userā€™s mic? I want to make my own audio recorder component but not sure if this is possible yet? is it?

I just want to show this custom component when the audio is recording & hide it when its not. So close , yet so far away at the moment :frowning:

Do you have access to CSS? I guess you can use a display: none rule for that custom component when the root has a ā€œRecordā€ button?

Iā€™m trying to make a horizontal tab component. The component is generated correctly, and the result is great. However, Iā€™m trying to make the tab component write the selected tabā€™s value to my table, and I couldnā€™t do that.

I would like it if you could help me achieve that, thanks!

I have already given detailed feedback about the Google Form. What I noticed with ā€œInputā€ components, i.e. components that are supposed to write values to the database, is that when opening Glide it apparently only describes the field again when it is selected again in the component, which is a pity because you canā€™t currently use input fields with AI generation.

Will give it a try manā€¦I just feel the audio recorder has been a forgotten component for some time now. Hopefully some updates coming soon

2 Likes

I was testing the AI ā€‹ā€‹component and managed to create a color picker very easily.

6 Likes

Hi guys,

I think thereā€™s a bug with actions, because in every AI component where Iā€™ve set an action, when I click on it, it appears as ā€œNo configurationā€ :frowning:

Is it temporary or do I have to reconfigure all the actions?

1 Like

For me, the bug that is happening with the actions and AI is with the New Screen action, because in the editor it works perfectly, but in the app/website it doesnā€™t work, the component just blinks and nothing happens.

1 Like

Yes, exactlyā€¦ but with the action you just set, because if you set a new action with New Screen, it works!

1 Like

I didnā€™t understand exactly how to make the action work, can you help me with this? I saw that the problem is not only with New Screens, Forms too.

Iā€™d give it a try again. A couple big fixes just went in today.

5 Likes

All fixed, working perfectly

I tried the button action (navigation, show new screen) just now. It works! Thank you!

3 Likes

What was your prompt for this? Iā€™m getting some interesting results when asking for a color picker