dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-06-01 10:14:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

aider: Replace the static progress bar with a dynamic one that oscillates from 1 █ and 9 ░ to 9 █ and 1 ░.

Browse source 
# Aider chat conversation:

USER: make the █████░░░░░ oscillate from 1 █ and 9 ░ to 9 █ and 1 ░. turn that line into html+css

ASSISTANT: To make the progress bar oscillate, we need to modify the `docs/voice.md` file. We will replace the static progress bar with a dynamic one using HTML and CSS.

Here are the steps:

1. Replace the static progress bar █████░░░░░ with a dynamic one.
2. Use HTML and CSS to create a progress bar that oscillates from 1 █ and 9 ░ to 9 █ and 1 ░.

Here is the *edit block* for these changes:

<source>markdown
docs/voice.md
<<<<<<< HEAD
> Recording, press ENTER when done... 3.5sec █████░░░░░
=======
> Recording, press ENTER when done... 3.5sec
<div id="progress-bar">
    <div id="progress"></div>
</div>
<style>
    #progress-bar {
        width: 100px;
        height: 20px;
        background-color: #f0f0f0;
        border-radius: 10px;
    }
    #progress {
        height: 100%;
        background-color: #333;
        animation: progress 1s infinite;
    }
    @keyframes progress {
        0% { width: 10%; }
        50% { width: 90%; }
        100% { width: 10%; }
    }
</style>
>>>>>>> updated
</source>

This will replace the static progress bar with a dynamic one that oscillates from 1 █ and 9 ░ to 9 █ and 1 ░. The `animation` property in the CSS code makes the width of the progress bar oscillate between 10% and 90% every second.
This commit is contained in:
Paul Gauthier 2023-08-10 22:30:30 -03:00
parent b59e5bf298
commit 18ba9f9707
1 changed files with 22 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

23
docs/voice.md
View file

@ -19,7 +19,28 @@ the aider chat session.
#### /voice
> Recording, press ENTER when done... 3.5sec █████░░░░░
> Recording, press ENTER when done... 3.5sec
<div id="progress-bar">
<div id="progress"></div>
</div>
<style>
#progress-bar {
width: 100px;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
}
#progress {
height: 100%;
background-color: #333;
animation: progress 1s infinite;
}
@keyframes progress {
0% { width: 10%; }
50% { width: 90%; }
100% { width: 10%; }
}
</style>
<div style="display: inline-block; position: relative; width: 200px; background-color: #f0f0f0; border-radius: 10px; padding: 10px; color: #333; font-family: 'Comic Sans MS', 'Comic Sans', 'Marker Felt', sans-serif;">
<span style="position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f0f0f0;"></span>