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.
Any notice from the CODE component, is not working by here
print:
<!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.
Can we also PLEASE PLEASE get an action for starting/stopping audio recording so that we can use a custom component for transcriptions etc.
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
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
I was testing the AI āācomponent and managed to create a color picker very easily.
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ā
Is it temporary or do I have to reconfigure all the actions?
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.
Yes, exactlyā¦ but with the action you just set, because if you set a new action with New Screen, it works!
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.
All fixed, working perfectly
I tried the button action (navigation, show new screen) just now. It works! Thank you!
What was your prompt for this? Iām getting some interesting results when asking for a color picker