hp tempus magicae || сюжет || NC-21
- Подпись автора
[html]<div class="battery-wrapper" data-level="6">
<div class="battery">
<div class="title">MY SOCIAL BATTERY</div><div class="segments">
<div class="seg">😢</div>
<div class="seg">🙁</div>
<div class="seg">😕</div>
<div class="seg">😐</div>
<div class="seg">🙂</div>
<div class="seg">😊</div>
<div class="seg">😄</div><div class="track">
<div class="indicator">⚡</div>
</div>
</div>
</div><div class="side"></div>
</div><style>
@font-face { font-family: 'Cinzel'; src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
}
.battery-wrapper{
position: relative;
width: 300px;
transform: scale(0.7);
transform-origin: top left;
margin: 0 auto;
}.battery{
background:#000;
border-radius:16px;
padding:12px;
color:#fff;
font-family:sans-serif;
}.side{
position:absolute;
right:-14px;
top:50%;
transform:translateY(-50%);
width:14px;
height:50%;
background:#000;
border-radius:0 8px 8px 0;
}.title{
text-align:center;
margin-bottom:10px;
font-size:20px;
font-family: 'Cinzel';
}.segments{
display:flex;
overflow:hidden;
border-radius:10px;
margin-bottom:8px;
position:relative;
}.seg{
flex:1;
text-align:center;
padding:8px 0 40px;
font-size:14px;
}.seg:nth-child(1){background:#ff3b3b;}
.seg:nth-child(2){background:#ff6b3b;}
.seg:nth-child(3){background:#ff9b3b;}
.seg:nth-child(4){background:#ffd93b;}
.seg:nth-child(5){background:#b7e23b;}
.seg:nth-child(6){background:#6be23b;}
.seg:nth-child(7){background:#2be23b;}.track{
position:absolute;
left:8px;
right:8px;
bottom:8px;
height:10px;
background:#222;
border-radius:999px;
z-index:2;
}.indicator{
position:absolute;
top:50%;
transform:translate(-50%, -50%);
font-size:20px;
transition:0.3s ease;
}
</style><script>
function updateAll() {
document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
const level = parseInt(wrapper.dataset.level) || 1;const indicator = wrapper.querySelector('.indicator');
const segments = wrapper.querySelectorAll('.seg');
const count = segments.length;// центр сегмента + маленький сдвиг вправо
const offsetPercent = 2; // смещение вправо в процентах
const percent = ((level - 0.5) / count * 100) + offsetPercent;indicator.style.left = percent + '%';
});
}window.onload = updateAll;
window.onresize = updateAll;
</script>[/html]
