uploading bar
This commit is contained in:
@@ -582,3 +582,96 @@ put it to the right, actually
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
_**Agent (model default, mode Agent)**_
|
||||||
|
|
||||||
|
|
||||||
|
Moving the upload button to the right:
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<tool-use data-tool-type="write" data-tool-name="edit_file_v2">
|
||||||
|
|
||||||
|
<details><summary>Tool use: **edit_file_v2** • Edit file: Assets/DOJ/index.html</summary>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</tool-use>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<tool-use data-tool-type="write" data-tool-name="edit_file_v2">
|
||||||
|
|
||||||
|
<details><summary>Tool use: **edit_file_v2** • Edit file: Assets/DOJ/index.html</summary>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</tool-use>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Moved the upload button to the right. It's now aligned to the right edge of the zip file container, positioned to the right of the zip file icon.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
_**User**_
|
||||||
|
|
||||||
|
good. let's make it so when the user clicks upload, it displays an quick uploading bar.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
_**Agent (model default, mode Agent)**_
|
||||||
|
|
||||||
|
|
||||||
|
Adding a progress bar that appears when the upload button is clicked.
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<tool-use data-tool-type="read" data-tool-name="read_file_v2">
|
||||||
|
<details><summary>Tool use: **read_file_v2** • Read file: Assets/DOJ/index.html</summary>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
</tool-use>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Adding CSS for the progress bar, then JavaScript to handle the upload click:
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<tool-use data-tool-type="write" data-tool-name="edit_file_v2">
|
||||||
|
|
||||||
|
<details><summary>Tool use: **edit_file_v2** • Edit file: Assets/DOJ/index.html</summary>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</tool-use>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<tool-use data-tool-type="write" data-tool-name="edit_file_v2">
|
||||||
|
|
||||||
|
<details><summary>Tool use: **edit_file_v2** • Edit file: Assets/DOJ/index.html</summary>
|
||||||
|
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</tool-use>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
Added an upload progress bar that appears when the upload button is clicked. It:
|
||||||
|
|
||||||
|
1. **Disables the button** and changes the text to "UPLOADING..." while uploading
|
||||||
|
2. **Shows a progress bar** below the button, aligned to the right
|
||||||
|
3. **Animates progress** from 0% to 100% with random increments to simulate upload
|
||||||
|
4. **Resets** after completion, hiding the progress bar and restoring the button
|
||||||
|
|
||||||
|
The progress bar uses a blue gradient matching the upload button and displays the percentage as it fills. Click the upload button to see it in action.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -239,6 +239,46 @@
|
|||||||
transform: translateY(1px);
|
transform: translateY(1px);
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.upload-button:disabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container {
|
||||||
|
display: none;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: 20px;
|
||||||
|
align-self: flex-end;
|
||||||
|
margin-right: calc(50% - 300px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-container.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #0066cc 0%, #0052a3 100%);
|
||||||
|
width: 0%;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -292,8 +332,52 @@
|
|||||||
<div class="zip-file-icon">
|
<div class="zip-file-icon">
|
||||||
<div class="zip-file-label">EpsteinFiles.zip</div>
|
<div class="zip-file-label">EpsteinFiles.zip</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="upload-button">UPLOAD</button>
|
<button class="upload-button" id="uploadBtn">UPLOAD</button>
|
||||||
|
<div class="progress-container" id="progressContainer">
|
||||||
|
<div class="progress-bar-wrapper">
|
||||||
|
<div class="progress-bar" id="progressBar"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const uploadBtn = document.getElementById('uploadBtn');
|
||||||
|
const progressContainer = document.getElementById('progressContainer');
|
||||||
|
const progressBar = document.getElementById('progressBar');
|
||||||
|
|
||||||
|
uploadBtn.addEventListener('click', function() {
|
||||||
|
// Disable button
|
||||||
|
uploadBtn.disabled = true;
|
||||||
|
uploadBtn.textContent = 'UPLOADING...';
|
||||||
|
|
||||||
|
// Show progress bar
|
||||||
|
progressContainer.classList.add('show');
|
||||||
|
progressBar.style.width = '0%';
|
||||||
|
progressBar.textContent = '0%';
|
||||||
|
|
||||||
|
// Simulate upload progress
|
||||||
|
let progress = 0;
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
progress += Math.random() * 15;
|
||||||
|
if (progress >= 100) {
|
||||||
|
progress = 100;
|
||||||
|
clearInterval(interval);
|
||||||
|
progressBar.textContent = '100%';
|
||||||
|
|
||||||
|
// Reset after a moment
|
||||||
|
setTimeout(() => {
|
||||||
|
progressContainer.classList.remove('show');
|
||||||
|
uploadBtn.disabled = false;
|
||||||
|
uploadBtn.textContent = 'UPLOAD';
|
||||||
|
progressBar.style.width = '0%';
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
progressBar.style.width = progress + '%';
|
||||||
|
progressBar.textContent = Math.round(progress) + '%';
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user