关于想做个打卡的数据库，想请教大神帮忙

无奈自己是个代码白痴，只能在此请教大神了，跪谢。

大概表述如下：

1. 我要做一周的打卡，一周能大于或等于 4 天，那个圈圈就填满 100%（也就是周 1 打勾算 1 天，周一、周三、周四 3 天打勾算 3 天）
2. 向这种打卡数据库怎么才能一周自动建立一次，或者别的思路能建立的方便点

附代码

.action{ $input := 70 }
.action{ $denominator := 100 }
.action{ $show_number := true }
.action{ $display_mode := ternary "none" "flex" (eq $input nil) }
.action{ $progress := ternary 0 (div (mul 100 ($input | int)) $denominator) (eq $input nil) }
.action{ $progress = ternary 100 $progress (gt $progress 100) }
.action{ $pi := 3.14159265358979323846264338327950288 }
.action{ $circumference := mulf 2 $pi 9 }
.action{ $mainOffset := subf $circumference (mulf (divf $progress 100) $circumference) }
.action{ $extraPadding := mulf $circumference 0.04 }
.action{ $bgOffsetLeft  := subf $mainOffset $extraPadding }
.action{ $bgOffsetRight := subf $mainOffset (divf $extraPadding 2) }
<div style="display: .action{ $display_mode }; flex-wrap: wrap; gap: 6px 8px; justify-content: end;">
    <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px 8px; line-height: 1.5; word-break: break-word;">
        .action{ ternary $input "" $show_number }
        <div role="progressbar" aria-valuenow=".action{ $progress }" style="height: 21px; width: 21px; pointer-events: auto;">
            <svg viewBox="0 0 21 21" color="transparent" style="width: 100%; height: 100%; transform: rotate(-90deg); transform-origin: 50% 50%;">
                <!-- 背景圆 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(199, 198, 196, 0.5)" stroke-linecap="round" fill="transparent">
                </circle>
                <!-- 进度条底色 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(231, 243, 248, 1)" stroke-linecap="round" stroke-dasharray=".action{ $circumference } .action{ $bgOffsetLeft }" stroke-dashoffset=".action{ $bgOffsetRight }" fill="transparent">
                </circle>
                <!-- 当前进度 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(91, 151, 189, 1)" stroke-linecap="round" stroke-dasharray=".action{ $circumference }" stroke-dashoffset=".action{ $mainOffset }" fill="transparent">
                </circle>
                <!-- 进度文本 -->
                <text x="10.5" y="10.5" text-anchor="middle" 
                    dominant-baseline="middle" fill="rgba(120, 119, 116, 1)" font-size="0.75em" 
                    style="transform-origin: 50% 50%; transform: rotate(90deg);">
                </text>
            </svg>
        </div>
    </div>
</div>
​