Initial project scaffold
Full-stack homeschool web app with FastAPI backend, Vue 3 frontend, MySQL database, and Docker Compose orchestration. Includes JWT auth, WebSocket real-time TV dashboard, schedule builder, activity logging, and multi-child support. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
29
frontend/src/components/ProgressBar.vue
Normal file
29
frontend/src/components/ProgressBar.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="progress-track">
|
||||
<div
|
||||
class="progress-fill"
|
||||
:style="{ width: `${Math.min(100, Math.max(0, percent))}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({ percent: { type: Number, default: 0 } })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.progress-track {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #0f172a;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #4f46e5, #818cf8);
|
||||
border-radius: 999px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user