moved static into source
This commit is contained in:
samantha42
@@ -0,0 +1,130 @@
|
||||
|
||||
<!-- row ~5% -->
|
||||
<div class="absolute" style="left:5%;top:3%;"><p class="text-red-500 rotate-12">49,020.00</p></div>
|
||||
<div class="absolute" style="left:38%;top:6%;"><img src="/static/images/mac.png" width="50px" class="rotate-6"></div>
|
||||
<div class="absolute" style="left:55%;top:4%;"><img src="/static/images/coffe.png" width="50px" class="rotate-45"></div>
|
||||
<div class="absolute" style="left:72%;top:7%;"><img src="/static/images/book.png" width="50px" class="-rotate-12"></div>
|
||||
<div class="absolute" style="left:88%;top:8%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-20"></div>
|
||||
<div class="absolute" style="left:88%;top:3%;"><img src="/static/images/books.png" width="50px" class="rotate-20"></div>
|
||||
<div class="absolute" style="left:92%;top:3%;"><img src="/static/images/calc.png" width="50px" class="rotate-20"></div>
|
||||
<div class="absolute" style="left:65%;top:2%;"><p class="text-green-600 -rotate-6">1,204.50</p></div>
|
||||
<div class="absolute" style="left:20%;top:1%;"><img src="/static/images/keyboard.png" width="50px" class="-rotate-12"></div>
|
||||
<div class="absolute" style="left:45%;top:0%;"><img src="/static/images/calc.png" width="50px" class="rotate-30"></div>
|
||||
<div class="absolute" style="left:30%;top:5%;"><p class="text-red-500 rotate-8">-750.00</p></div>
|
||||
|
||||
<!-- row ~11% -->
|
||||
<div class="absolute" style="left:2%;top:11%;"><img src="/static/images/book.png" width="50px" class="rotate-25"></div>
|
||||
<div class="absolute" style="left:25%;top:10%;"><img src="/static/images/calc.png" width="50px" class="-rotate-15"></div>
|
||||
<div class="absolute" style="left:42%;top:12%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-10"></div>
|
||||
<div class="absolute" style="left:60%;top:11%;"><img src="/static/images/mac.png" width="50px" class="-rotate-30"></div>
|
||||
<div class="absolute" style="left:78%;top:10%;"><p class="text-green-500 rotate-5">3,180.00</p></div>
|
||||
<div class="absolute" style="left:93%;top:12%;"><img src="/static/images/coffe.png" width="50px" class="rotate-15"></div>
|
||||
|
||||
<!-- row ~18% -->
|
||||
<div class="absolute" style="left:3%;top:18%;"><img src="/static/images/coffe.png" width="50px" class="rotate-78"></div>
|
||||
<div class="absolute" style="left:15%;top:20%;"><img src="/static/images/mac.png" width="50px" class="-rotate-6"></div>
|
||||
<div class="absolute" style="left:47%;top:19%;"><img src="/static/images/books.png" width="50px" class="-rotate-20"></div>
|
||||
<div class="absolute" style="left:78%;top:21%;"><img src="/static/images/coffe.png" width="50px" class="-rotate-35"></div>
|
||||
<div class="absolute" style="left:92%;top:18%;"><img src="/static/images/mac.png" width="50px" class="rotate-90"></div>
|
||||
<div class="absolute" style="left:10%;top:12%;"><p class="text-green-500 rotate-6">8,300.00</p></div>
|
||||
<div class="absolute" style="left:30%;top:17%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-20"></div>
|
||||
<div class="absolute" style="left:62%;top:18%;"><img src="/static/images/calc.png" width="50px" class="-rotate-10"></div>
|
||||
<div class="absolute" style="left:55%;top:22%;"><p class="text-red-500 -rotate-12">-5,900.00</p></div>
|
||||
|
||||
<!-- row ~25% -->
|
||||
<div class="absolute" style="left:8%;top:25%;"><img src="/static/images/calc.png" width="50px" class="-rotate-20"></div>
|
||||
<div class="absolute" style="left:20%;top:26%;"><p class="text-green-600 rotate-10">14,750.00</p></div>
|
||||
<div class="absolute" style="left:38%;top:24%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-15"></div>
|
||||
<div class="absolute" style="left:55%;top:27%;"><img src="/static/images/book.png" width="50px" class="-rotate-25"></div>
|
||||
<div class="absolute" style="left:72%;top:25%;"><img src="/static/images/coffe.png" width="50px" class="rotate-40"></div>
|
||||
<div class="absolute" style="left:87%;top:26%;"><p class="text-red-500 rotate-18">-320.00</p></div>
|
||||
|
||||
<!-- row ~32% -->
|
||||
<div class="absolute" style="left:8%;top:32%;"><img src="/static/images/book.png" width="50px" class="rotate-20"></div>
|
||||
<div class="absolute" style="left:22%;top:34%;"><img src="/static/images/coffe.png" width="50px" class="-rotate-12"></div>
|
||||
<div class="absolute" style="left:37%;top:31%;"><img src="/static/images/mac.png" width="50px" class="rotate-35"></div>
|
||||
<div class="absolute" style="left:67%;top:30%;"><img src="/static/images/books.png" width="50px" class="rotate-6"></div>
|
||||
<div class="absolute" style="left:22%;top:34%;"><p class="text-red-500 -rotate-6">-412.80</p></div>
|
||||
<div class="absolute" style="left:52%;top:33%;"><p class="text-green-600 rotate-15">88,500.00</p></div>
|
||||
<div class="absolute" style="left:83%;top:32%;"><p class="text-red-500 -rotate-20">-2,047.00</p></div>
|
||||
<div class="absolute" style="left:45%;top:36%;"><img src="/static/images/keyboard.png" width="50px" class="-rotate-30"></div>
|
||||
<div class="absolute" style="left:75%;top:35%;"><img src="/static/images/calc.png" width="50px" class="rotate-12"></div>
|
||||
|
||||
<!-- row ~39% -->
|
||||
<div class="absolute" style="left:2%;top:39%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-18"></div>
|
||||
<div class="absolute" style="left:15%;top:41%;"><p class="text-green-500 -rotate-8">620.00</p></div>
|
||||
<div class="absolute" style="left:30%;top:40%;"><img src="/static/images/mac.png" width="50px" class="rotate-25"></div>
|
||||
<div class="absolute" style="left:57%;top:38%;"><img src="/static/images/coffe.png" width="50px" class="-rotate-20"></div>
|
||||
<div class="absolute" style="left:71%;top:41%;"><img src="/static/images/books.png" width="50px" class="rotate-30"></div>
|
||||
<div class="absolute" style="left:88%;top:40%;"><p class="text-red-500 rotate-6">-11,200.00</p></div>
|
||||
|
||||
<!-- row ~46% -->
|
||||
<div class="absolute" style="left:17%;top:48%;"><img src="/static/images/books.png" width="50px" class="rotate-15"></div>
|
||||
<div class="absolute" style="left:49%;top:47%;"><img src="/static/images/coffe.png" width="50px" class="rotate-35"></div>
|
||||
<div class="absolute" style="left:64%;top:44%;"><img src="/static/images/mac.png" width="50px" class="-rotate-15"></div>
|
||||
<div class="absolute" style="left:80%;top:49%;"><img src="/static/images/book.png" width="50px" class="rotate-45"></div>
|
||||
<div class="absolute" style="left:4%;top:45%;"><img src="/static/images/calc.png" width="50px" class="-rotate-25"></div>
|
||||
<div class="absolute" style="left:33%;top:46%;"><p class="text-green-600 rotate-12">2,890.00</p></div>
|
||||
<div class="absolute" style="left:92%;top:47%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-8"></div>
|
||||
|
||||
<!-- row ~53% -->
|
||||
<div class="absolute" style="left:10%;top:53%;"><img src="/static/images/book.png" width="50px" class="rotate-30"></div>
|
||||
<div class="absolute" style="left:26%;top:55%;"><img src="/static/images/calc.png" width="50px" class="-rotate-18"></div>
|
||||
<div class="absolute" style="left:42%;top:52%;"><p class="text-red-500 rotate-20">-8,640.00</p></div>
|
||||
<div class="absolute" style="left:60%;top:54%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-14"></div>
|
||||
<div class="absolute" style="left:76%;top:53%;"><img src="/static/images/books.png" width="50px" class="-rotate-40"></div>
|
||||
<div class="absolute" style="left:91%;top:55%;"><p class="text-green-500 -rotate-10">47,000.00</p></div>
|
||||
|
||||
<!-- row ~60% -->
|
||||
<div class="absolute" style="left:6%;top:60%;"><img src="/static/images/mac.png" width="50px" class="rotate-12"></div>
|
||||
<div class="absolute" style="left:20%;top:62%;"><img src="/static/images/coffe.png" width="50px" class="-rotate-45"></div>
|
||||
<div class="absolute" style="left:36%;top:59%;"><img src="/static/images/books.png" width="50px" class="rotate-20"></div>
|
||||
<div class="absolute" style="left:51%;top:63%;"><img src="/static/images/book.png" width="50px" class="-rotate-12"></div>
|
||||
<div class="absolute" style="left:65%;top:61%;"><img src="/static/images/calc.png" width="50px" class="rotate-35"></div>
|
||||
<div class="absolute" style="left:80%;top:60%;"><p class="text-red-500 rotate-10">-990.00</p></div>
|
||||
<div class="absolute" style="left:93%;top:62%;"><img src="/static/images/keyboard.png" width="50px" class="-rotate-20"></div>
|
||||
|
||||
<!-- row ~67% -->
|
||||
<div class="absolute" style="left:2%;top:67%;"><p class="text-green-600 rotate-15">5,500.00</p></div>
|
||||
<div class="absolute" style="left:18%;top:68%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-22"></div>
|
||||
<div class="absolute" style="left:35%;top:66%;"><img src="/static/images/mac.png" width="50px" class="-rotate-10"></div>
|
||||
<div class="absolute" style="left:52%;top:69%;"><img src="/static/images/coffe.png" width="50px" class="rotate-50"></div>
|
||||
<div class="absolute" style="left:70%;top:67%;"><img src="/static/images/book.png" width="50px" class="-rotate-30"></div>
|
||||
<div class="absolute" style="left:85%;top:68%;"><img src="/static/images/calc.png" width="50px" class="rotate-5"></div>
|
||||
|
||||
<!-- row ~74% -->
|
||||
<div class="absolute" style="left:4%;top:74%;"><img src="/static/images/books.png" width="50px" class="rotate-35"></div>
|
||||
<div class="absolute" style="left:34%;top:73%;"><img src="/static/images/coffe.png" width="50px" class="rotate-15"></div>
|
||||
<div class="absolute" style="left:50%;top:77%;"><img src="/static/images/mac.png" width="50px" class="-rotate-35"></div>
|
||||
<div class="absolute" style="left:66%;top:75%;"><img src="/static/images/book.png" width="50px" class="rotate-45"></div>
|
||||
<div class="absolute" style="left:95%;top:76%;"><img src="/static/images/coffe.png" width="50px" class="rotate-20"></div>
|
||||
<div class="absolute" style="left:90%;top:75%;"><img src="/static/images/calc.png" width="50px" class="rotate-30"></div>
|
||||
<div class="absolute" style="left:18%;top:75%;"><img src="/static/images/keyboard.png" width="50px" class="-rotate-15"></div>
|
||||
<div class="absolute" style="left:40%;top:72%;"><p class="text-green-500 rotate-8">19,300.00</p></div>
|
||||
<div class="absolute" style="left:78%;top:73%;"><p class="text-red-500 -rotate-12">-3,750.00</p></div>
|
||||
|
||||
<!-- row ~81% -->
|
||||
<div class="absolute" style="left:8%;top:81%;"><img src="/static/images/calc.png" width="50px" class="rotate-20"></div>
|
||||
<div class="absolute" style="left:22%;top:83%;"><img src="/static/images/book.png" width="50px" class="-rotate-35"></div>
|
||||
<div class="absolute" style="left:40%;top:82%;"><p class="text-red-500 rotate-16">-60.50</p></div>
|
||||
<div class="absolute" style="left:55%;top:80%;"><img src="/static/images/keyboard.png" width="50px" class="rotate-28"></div>
|
||||
<div class="absolute" style="left:70%;top:83%;"><img src="/static/images/mac.png" width="50px" class="-rotate-8"></div>
|
||||
<div class="absolute" style="left:85%;top:81%;"><img src="/static/images/books.png" width="50px" class="rotate-42"></div>
|
||||
|
||||
<!-- row ~88% -->
|
||||
<div class="absolute" style="left:25%;top:90%;"><img src="/static/images/mac.png" width="50px" class="rotate-45"></div>
|
||||
<div class="absolute" style="left:58%;top:91%;"><img src="/static/images/books.png" width="50px" class="rotate-12"></div>
|
||||
<div class="absolute" style="left:74%;top:89%;"><img src="/static/images/coffe.png" width="50px" class="-rotate-45"></div>
|
||||
<div class="absolute" style="left:90%;top:88%;"><img src="/static/images/book.png" width="50px" class="rotate-30"></div>
|
||||
<div class="absolute" style="left:90%;top:88%;"><img src="/static/images/calc.png" width="50px" class="rotate-30"></div>
|
||||
<div class="absolute" style="left:5%;top:89%;"><img src="/static/images/keyboard.png" width="50px" class="-rotate-22"></div>
|
||||
<div class="absolute" style="left:42%;top:92%;"><p class="text-green-600 rotate-6">7,840.00</p></div>
|
||||
<div class="absolute" style="left:13%;top:91%;"><img src="/static/images/calc.png" width="50px" class="rotate-18"></div>
|
||||
|
||||
<!-- row ~95% -->
|
||||
<div class="absolute" style="left:10%;top:96%;"><img src="/static/images/coffe.png" width="50px" class="rotate-30"></div>
|
||||
<div class="absolute" style="left:30%;top:97%;"><img src="/static/images/book.png" width="50px" class="-rotate-20"></div>
|
||||
<div class="absolute" style="left:50%;top:95%;"><img src="/static/images/mac.png" width="50px" class="rotate-15"></div>
|
||||
<div class="absolute" style="left:67%;top:98%;"><img src="/static/images/keyboard.png" width="50px" class="-rotate-35"></div>
|
||||
<div class="absolute" style="left:82%;top:96%;"><p class="text-red-500 rotate-22">-1,130.00</p></div>
|
||||
<div class="absolute" style="left:93%;top:95%;"><img src="/static/images/books.png" width="50px" class="rotate-10"></div>
|
||||
@@ -0,0 +1,161 @@
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500&display=swap');
|
||||
.eq-wrap { font-family: 'IBM Plex Sans', monospace; padding: 2rem 0 1rem; }
|
||||
.eq-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; }
|
||||
.eq-title { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; color: var(--color-text-secondary); text-transform: uppercase; }
|
||||
.eq-ytd { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 500; color: var(--color-text-primary); margin: 0.1rem 0 1.5rem; }
|
||||
.eq-ytd span { font-size: 13px; font-weight: 400; color: #1D9E75; margin-left: 8px; }
|
||||
.eq-divider { border: none; border-top: 0.5px solid var(--color-border-tertiary); margin-bottom: 1.5rem; }
|
||||
.eq-legend { display: flex; gap: 20px; margin-bottom: 0.75rem; font-size: 12px; font-family: 'IBM Plex Mono', monospace; color: var(--color-text-secondary); align-items: center; }
|
||||
.eq-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 1.5rem; }
|
||||
.eq-stat { background: var(--color-background-secondary); border-radius: var(--border-radius-md); padding: 0.75rem 1rem; }
|
||||
.eq-stat-label { font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: var(--color-text-secondary); letter-spacing: 0.05em; margin-bottom: 4px; }
|
||||
.eq-stat-val { font-size: 16px; font-weight: 500; font-family: 'IBM Plex Mono', monospace; }
|
||||
.eq-stat-val.pos { color: #1D9E75; }
|
||||
.eq-stat-val.neg { color: #E24B4A; }
|
||||
.eq-note { font-size: 11px; color: var(--color-text-secondary); margin-top: 1rem; font-family: 'IBM Plex Mono', monospace; }
|
||||
</style>
|
||||
|
||||
<div class="eq-wrap">
|
||||
<p class="eq-title">Equity · Portfolio Performance</p>
|
||||
<div class="eq-header">
|
||||
<div class="eq-ytd">+18.61% <span>YTD</span></div>
|
||||
<span style="font-size:11px; font-family:'IBM Plex Mono',monospace; color:var(--color-text-secondary);">2026</span>
|
||||
</div>
|
||||
<hr class="eq-divider">
|
||||
|
||||
<div class="eq-legend">
|
||||
<span style="display:flex;align-items:center;gap:6px;">
|
||||
<span style="width:16px;height:2px;background:#1D9E75;border-radius:1px;display:inline-block;"></span>cumulative
|
||||
</span>
|
||||
<span style="display:flex;align-items:center;gap:6px;">
|
||||
<span style="width:16px;height:10px;background:rgba(29,158,117,0.25);border:1px solid #1D9E75;border-radius:2px;display:inline-block;"></span>monthly
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style="position:relative; width:100%; height:220px;">
|
||||
<canvas id="eqChart" role="img" aria-label="Line chart of cumulative and monthly equity returns. Cumulative YTD is plus 18.61%.">
|
||||
Monthly: Jan +7.75%, Feb −11.71%, Mar +0.91%, Apr +6.67%, May +3.13%, Jun −0.04%, Jul +2.66%, Now +9.45%. Cumulative: Jan +7.75%, Feb −4.87%, Mar −4.00%, Apr +2.40%, May +5.60%, Jun +5.56%, Jul +8.37%, Now +18.61%.
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
<div class="eq-stats">
|
||||
<div class="eq-stat">
|
||||
<div class="eq-stat-label">best month</div>
|
||||
<div class="eq-stat-val pos">+9.45%</div>
|
||||
</div>
|
||||
<div class="eq-stat">
|
||||
<div class="eq-stat-label">worst month</div>
|
||||
<div class="eq-stat-val neg">−11.71%</div>
|
||||
</div>
|
||||
<div class="eq-stat">
|
||||
<div class="eq-stat-label">cumulative YTD</div>
|
||||
<div class="eq-stat-val pos">+18.61%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="eq-note">// data through 2026 YTD · monthly returns & cumulative</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const monthly = [7.75, -11.71, 0.91, 6.67, 3.13, -0.04, 2.66, 9.45];
|
||||
const cumul = [7.75, -4.87, -4.00, 2.40, 5.60, 5.56, 8.37, 18.61];
|
||||
const labels = ['jan','feb','mar','apr','may','jun','jul','now'];
|
||||
|
||||
function initChart() {
|
||||
const isDark = matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
const gridColor = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)';
|
||||
const textColor = isDark ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.45)';
|
||||
const zeroColor = isDark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.15)';
|
||||
|
||||
new Chart(document.getElementById('eqChart'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
type: 'line',
|
||||
label: 'cumulative',
|
||||
data: cumul,
|
||||
borderColor: '#1D9E75',
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#1D9E75',
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6,
|
||||
tension: 0.35,
|
||||
fill: { target: 'origin', above: 'rgba(29,158,117,0.08)', below: 'rgba(226,75,74,0.08)' },
|
||||
yAxisID: 'y',
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
label: 'monthly',
|
||||
data: monthly,
|
||||
backgroundColor: monthly.map(v => v >= 0 ? 'rgba(29,158,117,0.25)' : 'rgba(226,75,74,0.25)'),
|
||||
borderColor: monthly.map(v => v >= 0 ? '#1D9E75' : '#E24B4A'),
|
||||
borderWidth: 1,
|
||||
borderRadius: 3,
|
||||
yAxisID: 'y',
|
||||
order: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
backgroundColor: isDark ? '#2C2C2A' : '#fff',
|
||||
borderColor: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.1)',
|
||||
borderWidth: 1,
|
||||
titleColor: textColor,
|
||||
bodyColor: isDark ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.8)',
|
||||
titleFont: { family: "'IBM Plex Mono', monospace", size: 11 },
|
||||
bodyFont: { family: "'IBM Plex Mono', monospace", size: 12 },
|
||||
padding: 10,
|
||||
callbacks: {
|
||||
label: ctx => {
|
||||
const sign = ctx.parsed.y >= 0 ? '+' : '';
|
||||
return ` ${ctx.dataset.label}: ${sign}${ctx.parsed.y.toFixed(2)}%`;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { display: false },
|
||||
border: { display: false },
|
||||
ticks: { color: textColor, font: { family: "'IBM Plex Mono', monospace", size: 11 }, autoSkip: false }
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
color: ctx => ctx.tick.value === 0 ? zeroColor : gridColor,
|
||||
lineWidth: ctx => ctx.tick.value === 0 ? 1 : 0.5
|
||||
},
|
||||
border: { display: false },
|
||||
ticks: {
|
||||
color: textColor,
|
||||
font: { family: "'IBM Plex Mono', monospace", size: 11 },
|
||||
callback: v => (v >= 0 ? '+' : '') + v.toFixed(1) + '%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof Chart !== 'undefined') {
|
||||
initChart();
|
||||
} else {
|
||||
var s = document.createElement('script');
|
||||
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js';
|
||||
s.onload = initChart;
|
||||
document.head.appendChild(s);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@@ -0,0 +1,33 @@
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem; padding: 20px;">
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
|
||||
<img src="/static/gamesbanners/minecraft.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
|
||||
<p style="margin: 0; text-align: center;">Minecraft</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
|
||||
<img src="/static/gamesbanners/Tombraider.png" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
|
||||
<p style="margin: 0; text-align: center;">Rise of the Tomb Raider</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
|
||||
<img src="/static/gamesbanners/planetzoo.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
|
||||
<p style="margin: 0; text-align: center;">Planet Zoo</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
|
||||
<img src="/static/gamesbanners/gtav.webp" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
|
||||
<p style="margin: 0; text-align: center;">GTA V</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
|
||||
<img src="/static/gamesbanners/factorio.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
|
||||
<p style="margin: 0; text-align: center;">Factorio</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
|
||||
<img src="/static/gamesbanners/detroitbecomehuman.jpg" height="100" width="190" style="object-fit: cover; border-radius: 8px;">
|
||||
<p style="margin: 0; text-align: center;">Detroit: Become Human</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="row">
|
||||
<div class="toggle-wrap" role="switch" aria-checked="true" tabindex="0" id="toggle"
|
||||
aria-label="Toggle day/night mode">
|
||||
<div class="track day" id="track">
|
||||
<div class="stars">
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
<div class="star"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="knob day" id="knob">
|
||||
<div class="sun-rays" id="rays"></div>
|
||||
<div class="moon-crater" style="width:4px;height:4px;top:3px;left:5px;"></div>
|
||||
<div class="moon-crater" style="width:3px;height:3px;top:9px;left:9px;"></div>
|
||||
<div class="moon-crater" style="width:2px;height:2px;top:4px;left:11px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user