<what>
props = "active_step, title"
defaults.active_step = "0"
defaults.title = "wwwhat Tutorial"
</what>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#title# — wwwhat Tutorial</title>
<style>
.tut-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--w-bg, #f9fafb);
}
.tut-topnav {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
height: 56px;
background: #fff;
border-bottom: 1px solid #e5e7eb;
}
.tut-topnav-brand {
font-weight: 700;
font-size: 1rem;
color: #111827;
text-decoration: none;
letter-spacing: -0.02em;
}
.tut-topnav-brand span { color: #6366f1; }
.tut-topnav-meta {
font-size: 0.8rem;
color: #9ca3af;
}
.tut-topnav-meta a {
color: #6366f1;
text-decoration: none;
font-weight: 500;
}
.tut-topnav-meta a:hover { text-decoration: underline; }
.tut-body {
display: flex;
flex: 1;
}
.tut-sidebar {
width: 248px;
flex-shrink: 0;
background: #fff;
border-right: 1px solid #e5e7eb;
padding: 1.5rem 1rem;
position: sticky;
top: 56px;
height: calc(100vh - 56px);
overflow-y: auto;
}
.tut-sidebar-heading {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
padding: 0 0.5rem;
margin-bottom: 0.75rem;
}
.tut-sidebar-progress {
font-size: 0.75rem;
color: #6b7280;
padding: 0 0.5rem;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tut-progress-bar {
flex: 1;
height: 4px;
background: #e5e7eb;
border-radius: 9999px;
overflow: hidden;
}
.tut-progress-fill {
height: 100%;
background: #6366f1;
border-radius: 9999px;
transition: width 300ms ease;
}
.tut-nav-item {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.625rem;
border-radius: 0.375rem;
text-decoration: none;
font-size: 0.8rem;
color: #6b7280;
transition: background 150ms, color 150ms;
margin-bottom: 1px;
}
.tut-nav-item:hover {
background: #f3f4f6;
color: #111827;
}
.tut-nav-item.active {
background: #eef2ff;
color: #4338ca;
font-weight: 600;
}
.tut-nav-item.active .tut-step-num {
background: #6366f1;
color: #fff;
}
.tut-step-num {
width: 20px;
height: 20px;
border-radius: 50%;
background: #e5e7eb;
color: #6b7280;
font-size: 0.65rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tut-nav-home {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.625rem;
border-radius: 0.375rem;
text-decoration: none;
font-size: 0.8rem;
color: #6b7280;
transition: background 150ms, color 150ms;
margin-bottom: 0.75rem;
}
.tut-nav-home:hover { background: #f3f4f6; color: #111827; }
.tut-nav-home.active { background: #eef2ff; color: #4338ca; font-weight: 600; }
.tut-main {
flex: 1;
min-width: 0;
padding: 2.5rem 3rem;
max-width: 800px;
}
.tut-footnav {
border-top: 1px solid #e5e7eb;
padding: 1rem 3rem;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
margin-top: 3rem;
}
.tut-footnav a {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: #6366f1;
text-decoration: none;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
transition: background 150ms;
}
.tut-footnav a:hover { background: #eef2ff; }
.tut-footnav-center {
font-size: 0.75rem;
color: #9ca3af;
}
@media (max-width: 768px) {
.tut-sidebar { display: none; }
.tut-main { padding: 1.5rem; }
.tut-topnav-meta { display: none; }
}
</style>
</head>
<body>
<div class="tut-shell">
<header class="tut-topnav">
<a href="/" class="tut-topnav-brand">www<span>what</span> tutorial</a>
<div class="tut-topnav-meta">
Built with wwwhat — <a href="https://getwhatnow.com" target="_blank">getwhatnow.com</a>
</div>
</header>
<div class="tut-body">
<aside class="tut-sidebar">
<div class="tut-sidebar-heading">Progress</div>
<div class="tut-sidebar-progress">
<if active_step == 0>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 0%"></div></div>
<span>0 / 10</span>
</if>
<if active_step == 1>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 10%"></div></div>
<span>1 / 10</span>
</if>
<if active_step == 2>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 20%"></div></div>
<span>2 / 10</span>
</if>
<if active_step == 3>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 30%"></div></div>
<span>3 / 10</span>
</if>
<if active_step == 4>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 40%"></div></div>
<span>4 / 10</span>
</if>
<if active_step == 5>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 50%"></div></div>
<span>5 / 10</span>
</if>
<if active_step == 6>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 60%"></div></div>
<span>6 / 10</span>
</if>
<if active_step == 7>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 70%"></div></div>
<span>7 / 10</span>
</if>
<if active_step == 8>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 80%"></div></div>
<span>8 / 10</span>
</if>
<if active_step == 9>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 90%"></div></div>
<span>9 / 10</span>
</if>
<if active_step == 10>
<div class="tut-progress-bar"><div class="tut-progress-fill" style="width: 100%"></div></div>
<span>10 / 10</span>
</if>
</div>
<a href="/" class="tut-nav-home <if active_step == 0>active</if>">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Welcome
</a>
<a href="/tutorial/1" class="tut-nav-item <if active_step == 1>active</if>">
<span class="tut-step-num">1</span> Routing
</a>
<a href="/tutorial/2" class="tut-nav-item <if active_step == 2>active</if>">
<span class="tut-step-num">2</span> Variables & Filters
</a>
<a href="/tutorial/3" class="tut-nav-item <if active_step == 3>active</if>">
<span class="tut-step-num">3</span> Components
</a>
<a href="/tutorial/4" class="tut-nav-item <if active_step == 4>active</if>">
<span class="tut-step-num">4</span> Layouts
</a>
<a href="/tutorial/5" class="tut-nav-item <if active_step == 5>active</if>">
<span class="tut-step-num">5</span> Sessions & State
</a>
<a href="/tutorial/6" class="tut-nav-item <if active_step == 6>active</if>">
<span class="tut-step-num">6</span> Loops & Conditionals
</a>
<a href="/tutorial/7" class="tut-nav-item <if active_step == 7>active</if>">
<span class="tut-step-num">7</span> Database & CRUD
</a>
<a href="/tutorial/8" class="tut-nav-item <if active_step == 8>active</if>">
<span class="tut-step-num">8</span> Forms & Validation
</a>
<a href="/tutorial/9" class="tut-nav-item <if active_step == 9>active</if>">
<span class="tut-step-num">9</span> Authentication
</a>
<a href="/tutorial/10" class="tut-nav-item <if active_step == 10>active</if>">
<span class="tut-step-num">10</span> Deploy
</a>
</aside>
<div style="flex: 1; display: flex; flex-direction: column;">
<main class="tut-main">
<slot/>
</main>
<footer class="tut-footnav">
<if active_step == 0>
<span></span>
<span class="tut-footnav-center">Start the tutorial to begin</span>
<a href="/tutorial/1">Step 1: Routing →</a>
</if>
<if active_step == 1>
<a href="/">← Welcome</a>
<span class="tut-footnav-center">Step 1 of 10</span>
<a href="/tutorial/2">Step 2: Variables →</a>
</if>
<if active_step == 2>
<a href="/tutorial/1">← Step 1: Routing</a>
<span class="tut-footnav-center">Step 2 of 10</span>
<a href="/tutorial/3">Step 3: Components →</a>
</if>
<if active_step == 3>
<a href="/tutorial/2">← Step 2: Variables</a>
<span class="tut-footnav-center">Step 3 of 10</span>
<a href="/tutorial/4">Step 4: Layouts →</a>
</if>
<if active_step == 4>
<a href="/tutorial/3">← Step 3: Components</a>
<span class="tut-footnav-center">Step 4 of 10</span>
<a href="/tutorial/5">Step 5: Sessions →</a>
</if>
<if active_step == 5>
<a href="/tutorial/4">← Step 4: Layouts</a>
<span class="tut-footnav-center">Step 5 of 10</span>
<a href="/tutorial/6">Step 6: Loops →</a>
</if>
<if active_step == 6>
<a href="/tutorial/5">← Step 5: Sessions</a>
<span class="tut-footnav-center">Step 6 of 10</span>
<a href="/tutorial/7">Step 7: Database →</a>
</if>
<if active_step == 7>
<a href="/tutorial/6">← Step 6: Loops</a>
<span class="tut-footnav-center">Step 7 of 10</span>
<a href="/tutorial/8">Step 8: Forms →</a>
</if>
<if active_step == 8>
<a href="/tutorial/7">← Step 7: Database</a>
<span class="tut-footnav-center">Step 8 of 10</span>
<a href="/tutorial/9">Step 9: Auth →</a>
</if>
<if active_step == 9>
<a href="/tutorial/8">← Step 8: Forms</a>
<span class="tut-footnav-center">Step 9 of 10</span>
<a href="/tutorial/10">Step 10: Deploy →</a>
</if>
<if active_step == 10>
<a href="/tutorial/9">← Step 9: Auth</a>
<span class="tut-footnav-center">Step 10 of 10</span>
<a href="https://getwhatnow.com" target="_blank">Docs →</a>
</if>
</footer>
</div>
</div>
</div>
</body>
</html>