chore: add brainstorming docs and design reference
This commit is contained in:
achmad
@@ -0,0 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kotobane — Directus Workflow</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #0D0D14; color: #F3F5F7; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; padding: 32px; }
|
||||
h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
|
||||
.subtitle { font-size: 14px; color: #7D8795; margin-bottom: 32px; }
|
||||
|
||||
.flow { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }
|
||||
|
||||
.step { background: #1D212B; border: 1px solid #2A3140; border-radius: 12px; padding: 20px; display: flex; gap: 16px; align-items: flex-start; }
|
||||
.step-num { background: #00B4D8; color: #000; font-size: 12px; font-weight: 800; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.step-body { flex: 1; }
|
||||
.step-title { font-size: 14px; font-weight: 700; color: #F3F5F7; margin-bottom: 6px; }
|
||||
.step-desc { font-size: 13px; color: #B8C0CC; line-height: 1.6; }
|
||||
.step-note { margin-top: 8px; background: #0D0D14; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #7D8795; border-left: 2px solid #2A3140; }
|
||||
.step-note.cyan { border-left-color: #00B4D8; color: #B8C0CC; }
|
||||
.step-note.violet { border-left-color: #7C3AED; }
|
||||
.step-note.amber { border-left-color: #FFB300; }
|
||||
|
||||
.connector { display: flex; justify-content: flex-start; padding-left: 34px; }
|
||||
.connector-line { width: 2px; height: 20px; background: #2A3140; border-radius: 1px; }
|
||||
|
||||
.field-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
|
||||
.field { background: #0D0D14; border-radius: 6px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; }
|
||||
.field-name { font-family: monospace; font-size: 11px; color: #00B4D8; }
|
||||
.field-type { font-size: 11px; color: #5C6470; }
|
||||
.field-req { font-size: 9px; color: #D64545; font-weight: 700; margin-left: auto; }
|
||||
.field-opt { font-size: 9px; color: #5C6470; margin-left: auto; }
|
||||
|
||||
.divider { height: 1px; background: #2A3140; max-width: 860px; margin: 24px auto; }
|
||||
.section-label { font-size: 11px; letter-spacing: 2px; color: #7D8795; max-width: 860px; margin: 0 auto 12px; }
|
||||
|
||||
.faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
|
||||
.faq-item { background: #1D212B; border: 1px solid #2A3140; border-radius: 10px; padding: 16px; }
|
||||
.faq-q { font-size: 13px; font-weight: 600; color: #F3F5F7; margin-bottom: 6px; }
|
||||
.faq-a { font-size: 13px; color: #B8C0CC; line-height: 1.6; }
|
||||
.faq-a code { background: #0D0D14; border-radius: 3px; padding: 1px 5px; font-size: 12px; color: #00B4D8; font-family: monospace; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="max-width:860px;margin:0 auto">
|
||||
<h2>How You'll Add Content in Directus</h2>
|
||||
<p class="subtitle">cms.achmad.dev — step by step, every time you want to publish something</p>
|
||||
</div>
|
||||
|
||||
<div class="flow">
|
||||
|
||||
<div class="step">
|
||||
<div class="step-num">1</div>
|
||||
<div class="step-body">
|
||||
<div class="step-title">Go to Collections → Articles → Create Item</div>
|
||||
<div class="step-desc">In the Directus sidebar, click <strong>Content</strong>, then <strong>articles</strong>, then the <strong>+ New</strong> button in the top right. A form opens with all the fields you need.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connector"><div class="connector-line"></div></div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-num">2</div>
|
||||
<div class="step-body">
|
||||
<div class="step-title">Fill in the required fields</div>
|
||||
<div class="step-desc">These are the only ones you must fill in to publish:</div>
|
||||
<div class="field-list">
|
||||
<div class="field"><span class="field-name">title</span><span class="field-type">text</span><span class="field-req">required</span></div>
|
||||
<div class="field"><span class="field-name">slug</span><span class="field-type">auto-generated</span><span class="field-req">required</span></div>
|
||||
<div class="field"><span class="field-name">content</span><span class="field-type">rich text editor</span><span class="field-req">required</span></div>
|
||||
<div class="field"><span class="field-name">category</span><span class="field-type">dropdown</span><span class="field-req">required</span></div>
|
||||
<div class="field"><span class="field-name">excerpt</span><span class="field-type">short text</span><span class="field-opt">optional</span></div>
|
||||
<div class="field"><span class="field-name">featured_image</span><span class="field-type">file upload</span><span class="field-opt">optional</span></div>
|
||||
</div>
|
||||
<div class="step-note cyan">The <strong>slug</strong> is the URL. If your title is "Frieren Season 2 Announced", Directus auto-fills it as <code>frieren-season-2-announced</code>. The article will live at <code>/anime/frieren-season-2-announced</code>.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connector"><div class="connector-line"></div></div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-num">3</div>
|
||||
<div class="step-body">
|
||||
<div class="step-title">Write your content in the WYSIWYG editor</div>
|
||||
<div class="step-desc">The <strong>content</strong> field uses a rich text editor — it works like Google Docs. You can write paragraphs, add headings (H2, H3), bold/italic text, embed images, add blockquotes, and paste links. No HTML needed.</div>
|
||||
<div class="step-note cyan">Images inside articles can be uploaded via the file manager icon in the editor toolbar. They're stored in Directus and served from <code>cms.achmad.dev/assets/...</code>.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connector"><div class="connector-line"></div></div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-num">4</div>
|
||||
<div class="step-body">
|
||||
<div class="step-title">Set status to "Published" and save</div>
|
||||
<div class="step-desc">In the top-right corner of the editor, there's a <strong>Status</strong> dropdown. Switch it from <strong>Draft</strong> → <strong>Published</strong>, then click <strong>Save</strong>. That's it.</div>
|
||||
<div class="step-note" style="border-left-color:#00D166;color:#B8C0CC">At this moment, Directus automatically fires a webhook → Next.js regenerates the article page, the category page, and the homepage. <strong>Your article is live within seconds.</strong> No login to any server, no terminal, no redeploy.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
<div class="section-label">SPECIAL TASKS</div>
|
||||
|
||||
<div class="flow">
|
||||
|
||||
<div class="step">
|
||||
<div class="step-num" style="background:#7C3AED;color:#fff">★</div>
|
||||
<div class="step-body">
|
||||
<div class="step-title">Changing the homepage hero article</div>
|
||||
<div class="step-desc">Go to <strong>Content → site_settings</strong> (there's only one record). Click the <strong>hero_article</strong> field and pick a different article from the dropdown. Save. The homepage regenerates automatically.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connector"><div class="connector-line"></div></div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-num" style="background:#FFB300;color:#000">★</div>
|
||||
<div class="step-body">
|
||||
<div class="step-title">Adding a new category</div>
|
||||
<div class="step-desc">Go to <strong>Content → categories → + New</strong>. Add the name (e.g. "Cosplay") and slug (e.g. "cosplay"). Save. It immediately appears in the category dropdown when creating articles — no code changes needed.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="connector"><div class="connector-line"></div></div>
|
||||
|
||||
<div class="step">
|
||||
<div class="step-num" style="background:#D64545;color:#fff">★</div>
|
||||
<div class="step-body">
|
||||
<div class="step-title">Marking an article as Trending or Featured</div>
|
||||
<div class="step-desc">When editing an article, the <strong>is_featured</strong> toggle makes it eligible for the homepage hero. Trending/New badges are separate status badges you can set per-article. No code changes.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
<div class="section-label">COMMON QUESTIONS</div>
|
||||
|
||||
<div class="faq">
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">What is a "collection"?</div>
|
||||
<div class="faq-a">A collection in Directus is like a spreadsheet or a database table. The <code>articles</code> collection holds all your articles, one row per article. The <code>categories</code> collection holds all categories. You'll mostly live in the <code>articles</code> collection.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">Can I save a draft and come back later?</div>
|
||||
<div class="faq-a">Yes — leave the status as <strong>Draft</strong> and save. The article won't appear on the site until you change it to <strong>Published</strong>. You can have as many drafts as you want.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">What if I make a typo after publishing?</div>
|
||||
<div class="faq-a">Just edit the article in Directus and save again. The webhook fires again and the page regenerates with the corrected content within seconds.</div>
|
||||
</div>
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">What about the tags (hololive, spring 2026, etc.)?</div>
|
||||
<div class="faq-a">Tags are typed freely in the article editor — you pick from existing tags or create new ones inline. They appear as clickable chips below the article body and are searchable.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,122 @@
|
||||
<h2>Final Locked Palette</h2>
|
||||
<p class="subtitle">Complete color system for Kotobane — ready for implementation</p>
|
||||
|
||||
<div style="max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:24px">
|
||||
|
||||
<!-- Brand -->
|
||||
<div>
|
||||
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">BRAND ACCENT</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px">
|
||||
<div style="background:#1D212B;border:2px solid #00B4D8;border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center">
|
||||
<div style="width:56px;height:56px;border-radius:10px;background:#00B4D8;flex-shrink:0"></div>
|
||||
<div>
|
||||
<div style="font-size:13px;font-weight:700;color:#F3F5F7;margin-bottom:2px">Sky Cyan — Primary</div>
|
||||
<div style="font-family:monospace;font-size:12px;color:#00B4D8">#00B4D8</div>
|
||||
<div style="font-size:11px;color:#5C6470;margin-top:4px">Buttons, links, active nav, "Read →", focus rings</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center">
|
||||
<div style="width:56px;height:56px;border-radius:10px;background:#00D4FF;flex-shrink:0"></div>
|
||||
<div>
|
||||
<div style="font-size:13px;font-weight:700;color:#F3F5F7;margin-bottom:2px">Sky Cyan — Hover</div>
|
||||
<div style="font-family:monospace;font-size:12px;color:#00D4FF">#00D4FF</div>
|
||||
<div style="font-size:11px;color:#5C6470;margin-top:4px">Hover state for links and buttons</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status colors -->
|
||||
<div>
|
||||
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">STATUS & BADGE COLORS</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
|
||||
<div style="width:100%;height:44px;border-radius:8px;background:#7C3AED;margin-bottom:12px;display:flex;align-items:center;justify-content:center">
|
||||
<span style="color:#fff;font-size:10px;font-weight:700">FEATURED</span>
|
||||
</div>
|
||||
<div style="font-family:monospace;font-size:11px;color:#7C3AED;margin-bottom:4px">#7C3AED</div>
|
||||
<div style="font-size:11px;color:#5C6470">Violet · Featured / hero badges</div>
|
||||
</div>
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
|
||||
<div style="width:100%;height:44px;border-radius:8px;background:#D64545;margin-bottom:12px;display:flex;align-items:center;justify-content:center">
|
||||
<span style="color:#fff;font-size:10px;font-weight:700">TRENDING</span>
|
||||
</div>
|
||||
<div style="font-family:monospace;font-size:11px;color:#D64545;margin-bottom:4px">#D64545</div>
|
||||
<div style="font-size:11px;color:#5C6470">Coral · Trending / breaking</div>
|
||||
</div>
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
|
||||
<div style="width:100%;height:44px;border-radius:8px;background:#FFB300;margin-bottom:12px;display:flex;align-items:center;justify-content:center">
|
||||
<span style="color:#000;font-size:10px;font-weight:700">NEW</span>
|
||||
</div>
|
||||
<div style="font-family:monospace;font-size:11px;color:#FFB300;margin-bottom:4px">#FFB300</div>
|
||||
<div style="font-size:11px;color:#5C6470">Amber · New / alert</div>
|
||||
</div>
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
|
||||
<div style="width:100%;height:44px;border-radius:8px;background:#00D166;margin-bottom:12px;display:flex;align-items:center;justify-content:center">
|
||||
<span style="color:#000;font-size:10px;font-weight:700">PUBLISHED</span>
|
||||
</div>
|
||||
<div style="font-family:monospace;font-size:11px;color:#00D166;margin-bottom:4px">#00D166</div>
|
||||
<div style="font-size:11px;color:#5C6470">Green · Published / success</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backgrounds -->
|
||||
<div>
|
||||
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">BACKGROUNDS — layered dark</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
|
||||
<div style="border-radius:12px;overflow:hidden;border:1px solid #2A3140">
|
||||
<div style="background:#0D0D14;height:48px"></div>
|
||||
<div style="padding:10px 12px;background:#171A21">
|
||||
<div style="font-family:monospace;font-size:11px;color:#7D8795">#0D0D14</div>
|
||||
<div style="font-size:11px;color:#5C6470">Main background</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-radius:12px;overflow:hidden;border:1px solid #2A3140">
|
||||
<div style="background:#171A21;height:48px"></div>
|
||||
<div style="padding:10px 12px;background:#171A21">
|
||||
<div style="font-family:monospace;font-size:11px;color:#7D8795">#171A21</div>
|
||||
<div style="font-size:11px;color:#5C6470">Navbar / elevated</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-radius:12px;overflow:hidden;border:1px solid #2A3140">
|
||||
<div style="background:#1D212B;height:48px"></div>
|
||||
<div style="padding:10px 12px;background:#171A21">
|
||||
<div style="font-family:monospace;font-size:11px;color:#7D8795">#1D212B</div>
|
||||
<div style="font-size:11px;color:#5C6470">Cards</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="border-radius:12px;overflow:hidden;border:1px solid #2A3140">
|
||||
<div style="background:#2A3140;height:48px"></div>
|
||||
<div style="padding:10px 12px;background:#171A21">
|
||||
<div style="font-family:monospace;font-size:11px;color:#7D8795">#2A3140</div>
|
||||
<div style="font-size:11px;color:#5C6470">Borders</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text -->
|
||||
<div>
|
||||
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">TEXT HIERARCHY</div>
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline">
|
||||
<span style="color:#F3F5F7;font-size:18px;font-weight:600">Headlines & primary body</span>
|
||||
<span style="font-family:monospace;font-size:11px;color:#5C6470">#F3F5F7</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline">
|
||||
<span style="color:#B8C0CC;font-size:15px">Excerpts, captions, secondary text</span>
|
||||
<span style="font-family:monospace;font-size:11px;color:#5C6470">#B8C0CC</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline">
|
||||
<span style="color:#7D8795;font-size:13px">Timestamps, category labels, metadata</span>
|
||||
<span style="font-family:monospace;font-size:11px;color:#5C6470">#7D8795</span>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline">
|
||||
<span style="color:#5C6470;font-size:12px">Disabled / placeholder</span>
|
||||
<span style="font-family:monospace;font-size:11px;color:#5C6470">#5C6470</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,111 @@
|
||||
<h2>Color Usage Map</h2>
|
||||
<p class="subtitle">What each color is actually for — categories are neutral, colors go on UI elements</p>
|
||||
|
||||
<div style="max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:24px">
|
||||
|
||||
<!-- Palette with correct usage -->
|
||||
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:10px">
|
||||
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
|
||||
<div style="width:100%;height:48px;border-radius:8px;background:#00B4D8;margin-bottom:12px"></div>
|
||||
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Cyan</div>
|
||||
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#00B4D8</div>
|
||||
<div style="font-size:11px;color:#5C6470;line-height:1.5">Primary buttons, links, active nav, "Read →", focus rings</div>
|
||||
</div>
|
||||
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
|
||||
<div style="width:100%;height:48px;border-radius:8px;background:#7C3AED;margin-bottom:12px"></div>
|
||||
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Violet</div>
|
||||
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#7C3AED</div>
|
||||
<div style="font-size:11px;color:#5C6470;line-height:1.5">Featured / hero badges, secondary actions, search highlight</div>
|
||||
</div>
|
||||
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
|
||||
<div style="width:100%;height:48px;border-radius:8px;background:#FF6B6B;margin-bottom:12px"></div>
|
||||
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Coral</div>
|
||||
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#FF6B6B</div>
|
||||
<div style="font-size:11px;color:#5C6470;line-height:1.5">Trending badge, breaking news label, error states</div>
|
||||
</div>
|
||||
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
|
||||
<div style="width:100%;height:48px;border-radius:8px;background:#FFB300;margin-bottom:12px"></div>
|
||||
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Amber</div>
|
||||
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#FFB300</div>
|
||||
<div style="font-size:11px;color:#5C6470;line-height:1.5">Alerts, warnings, "new" indicator dots</div>
|
||||
</div>
|
||||
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
|
||||
<div style="width:100%;height:48px;border-radius:8px;background:#00D166;margin-bottom:12px"></div>
|
||||
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Green</div>
|
||||
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#00D166</div>
|
||||
<div style="font-size:11px;color:#5C6470;line-height:1.5">Published status, success states</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navbar — categories neutral -->
|
||||
<div>
|
||||
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">NAVBAR — categories are uniform, active one gets the brand cyan</div>
|
||||
<div style="background:#171A21;border:1px solid #2A3140;border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap">
|
||||
<div style="font-size:16px;font-weight:700;color:#00B4D8;letter-spacing:3px">言羽</div>
|
||||
<div style="width:1px;height:16px;background:#2A3140"></div>
|
||||
<div style="font-size:12px;color:#00B4D8;font-weight:600;border-bottom:2px solid #00B4D8;padding-bottom:2px">Anime</div>
|
||||
<div style="font-size:12px;color:#B8C0CC;font-weight:500">VTubers</div>
|
||||
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Manga</div>
|
||||
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Games</div>
|
||||
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Music</div>
|
||||
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Japan</div>
|
||||
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Culture</div>
|
||||
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Industry</div>
|
||||
<div style="margin-left:auto;font-size:12px;color:#7D8795">⌘K</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Article card showing correct badge usage -->
|
||||
<div>
|
||||
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">ARTICLE CARDS — category label is muted, colors reserved for status badges</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px">
|
||||
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
|
||||
<div style="display:flex;gap:6px;margin-bottom:10px;align-items:center">
|
||||
<div style="color:#7D8795;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase">Anime</div>
|
||||
<div style="background:#FF6B6B;color:#fff;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:0.5px">TRENDING</div>
|
||||
</div>
|
||||
<div style="font-size:13px;font-weight:600;color:#F3F5F7;line-height:1.4;margin-bottom:6px">Frieren S2 Production Confirmed</div>
|
||||
<div style="font-size:11px;color:#7D8795;margin-bottom:10px">28 May 2026</div>
|
||||
<div style="font-size:11px;color:#00B4D8;font-weight:600">Read →</div>
|
||||
</div>
|
||||
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
|
||||
<div style="display:flex;gap:6px;margin-bottom:10px;align-items:center">
|
||||
<div style="color:#7D8795;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase">VTubers</div>
|
||||
<div style="background:#7C3AED;color:#fff;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:0.5px">FEATURED</div>
|
||||
</div>
|
||||
<div style="font-size:13px;font-weight:600;color:#F3F5F7;line-height:1.4;margin-bottom:6px">Hololive EN Gen 4 Debuts This Weekend</div>
|
||||
<div style="font-size:11px;color:#7D8795;margin-bottom:10px">27 May 2026</div>
|
||||
<div style="font-size:11px;color:#00B4D8;font-weight:600">Read →</div>
|
||||
</div>
|
||||
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
|
||||
<div style="display:flex;gap:6px;margin-bottom:10px;align-items:center">
|
||||
<div style="color:#7D8795;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase">Games</div>
|
||||
<div style="background:#FFB300;color:#000;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:0.5px">NEW</div>
|
||||
</div>
|
||||
<div style="font-size:13px;font-weight:600;color:#F3F5F7;line-height:1.4;margin-bottom:6px">Blue Protocol Global Launch Date Revealed</div>
|
||||
<div style="font-size:11px;color:#7D8795;margin-bottom:10px">26 May 2026</div>
|
||||
<div style="font-size:11px;color:#00B4D8;font-weight:600">Read →</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UI elements -->
|
||||
<div>
|
||||
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">UI ELEMENTS — buttons, tags, states</div>
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center">
|
||||
<button style="background:#00B4D8;color:#000;border:none;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer">Primary button</button>
|
||||
<button style="background:transparent;color:#00B4D8;border:1px solid #00B4D8;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer">Secondary</button>
|
||||
<div style="background:#7C3AED;color:#fff;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:700">FEATURED</div>
|
||||
<div style="background:#FF6B6B;color:#fff;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:700">TRENDING</div>
|
||||
<div style="background:#FFB300;color:#000;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:700">NEW</div>
|
||||
<div style="background:#00D166;color:#000;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:700">PUBLISHED</div>
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;color:#B8C0CC;font-size:11px;padding:3px 10px;border-radius:4px">hololive</div>
|
||||
<div style="background:#1D212B;border:1px solid #2A3140;color:#B8C0CC;font-size:11px;padding:3px 10px;border-radius:4px">spring 2026</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kotobane — Article Page Preview</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #0D0D14; color: #F3F5F7; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; }
|
||||
|
||||
nav { background: #171A21; border-bottom: 1px solid #2A3140; padding: 0 32px; height: 52px; display: flex; align-items: center; gap: 24px; }
|
||||
.logo { font-size: 18px; font-weight: 800; color: #00B4D8; letter-spacing: 3px; }
|
||||
.nav-divider { width: 1px; height: 16px; background: #2A3140; }
|
||||
.nav-link { font-size: 12px; font-weight: 500; color: #7D8795; white-space: nowrap; }
|
||||
.nav-link.active { color: #00B4D8; }
|
||||
.kbd { background: #2A3140; border-radius: 3px; padding: 1px 5px; font-size: 10px; color: #7D8795; font-family: monospace; margin-left: auto; }
|
||||
|
||||
.article-wrap { max-width: 780px; margin: 0 auto; padding: 48px 32px; }
|
||||
|
||||
/* BREADCRUMB */
|
||||
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 12px; color: #5C6470; }
|
||||
.breadcrumb a { color: #7D8795; cursor: pointer; }
|
||||
.breadcrumb a:hover { color: #00B4D8; }
|
||||
.breadcrumb span { color: #2A3140; }
|
||||
|
||||
/* ARTICLE HEADER */
|
||||
.article-cat { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #7D8795; text-transform: uppercase; margin-bottom: 14px; }
|
||||
.article-title { font-size: 36px; font-weight: 700; line-height: 1.25; color: #F3F5F7; margin-bottom: 16px; }
|
||||
.article-excerpt { font-size: 17px; color: #B8C0CC; line-height: 1.65; margin-bottom: 24px; font-weight: 400; }
|
||||
.article-meta { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #2A3140; border-bottom: 1px solid #2A3140; margin-bottom: 32px; }
|
||||
.article-meta-date { font-size: 12px; color: #7D8795; }
|
||||
.article-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #2A3140; }
|
||||
.article-meta-read { font-size: 12px; color: #7D8795; }
|
||||
.badge { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; }
|
||||
|
||||
/* HERO IMAGE */
|
||||
.article-hero-img { width: 100%; height: 400px; background: linear-gradient(135deg, #0D0D14 0%, #1a1730 50%, #0d1a2e 100%); border-radius: 12px; margin-bottom: 36px; display: flex; align-items: center; justify-content: center; }
|
||||
.article-hero-img span { font-size: 12px; color: #2A3140; }
|
||||
|
||||
/* BODY */
|
||||
.article-body { font-size: 16px; line-height: 1.8; color: #B8C0CC; }
|
||||
.article-body p { margin-bottom: 20px; }
|
||||
.article-body h2 { font-size: 22px; font-weight: 700; color: #F3F5F7; margin: 36px 0 16px; }
|
||||
.article-body h3 { font-size: 17px; font-weight: 600; color: #F3F5F7; margin: 28px 0 12px; }
|
||||
.article-body strong { color: #F3F5F7; font-weight: 600; }
|
||||
.article-body blockquote { border-left: 3px solid #00B4D8; padding: 12px 20px; background: #1D212B; border-radius: 0 8px 8px 0; margin: 24px 0; }
|
||||
.article-body blockquote p { margin: 0; color: #B8C0CC; font-style: italic; }
|
||||
|
||||
/* TAGS */
|
||||
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 28px 0; border-top: 1px solid #2A3140; margin-top: 32px; }
|
||||
.tag { background: #1D212B; border: 1px solid #2A3140; color: #B8C0CC; font-size: 11px; padding: 4px 12px; border-radius: 6px; cursor: pointer; }
|
||||
.tag:hover { border-color: #00B4D8; color: #00B4D8; }
|
||||
|
||||
/* RELATED */
|
||||
.related { max-width: 780px; margin: 0 auto 48px; padding: 0 32px; }
|
||||
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
|
||||
.section-title { font-size: 12px; font-weight: 700; color: #F3F5F7; letter-spacing: 1px; text-transform: uppercase; }
|
||||
.section-line { flex: 1; height: 1px; background: #2A3140; }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||||
.card { background: #1D212B; border: 1px solid #2A3140; border-radius: 12px; overflow: hidden; cursor: pointer; }
|
||||
.card-img { height: 120px; background: linear-gradient(135deg, #0D0D14, #1a1730); }
|
||||
.card-body { padding: 12px; }
|
||||
.card-cat { font-size: 10px; font-weight: 600; color: #7D8795; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
|
||||
.card-title { font-size: 12px; font-weight: 600; color: #F3F5F7; line-height: 1.4; margin-bottom: 8px; }
|
||||
.card-read { font-size: 11px; color: #00B4D8; font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<div class="logo">言羽</div>
|
||||
<div class="nav-divider"></div>
|
||||
<a class="nav-link active">Anime</a>
|
||||
<a class="nav-link">VTubers</a>
|
||||
<a class="nav-link">Manga</a>
|
||||
<a class="nav-link">Games</a>
|
||||
<a class="nav-link">Music</a>
|
||||
<a class="nav-link">Japan</a>
|
||||
<div class="kbd" style="margin-left:auto">⌘K</div>
|
||||
</nav>
|
||||
|
||||
<div class="article-wrap">
|
||||
|
||||
<div class="breadcrumb">
|
||||
<a>Home</a>
|
||||
<span>›</span>
|
||||
<a>Anime</a>
|
||||
<span>›</span>
|
||||
<span style="color:#7D8795">Frieren Season 2 Production Confirmed</span>
|
||||
</div>
|
||||
|
||||
<div class="article-cat">Anime</div>
|
||||
<h1 class="article-title">Frieren: Beyond Journey's End Season 2 Officially Announced — Production Already Underway at Madhouse</h1>
|
||||
<p class="article-excerpt">The beloved fantasy series returns for a second cour. Studio Madhouse confirmed production is already underway, with the original staff and full cast returning.</p>
|
||||
|
||||
<div class="article-meta">
|
||||
<span class="badge" style="background:#7C3AED;color:#fff">FEATURED</span>
|
||||
<span class="badge" style="background:#D64545;color:#fff">TRENDING</span>
|
||||
<div class="article-meta-dot"></div>
|
||||
<span class="article-meta-date">28 May 2026</span>
|
||||
<div class="article-meta-dot"></div>
|
||||
<span class="article-meta-read">4 min read</span>
|
||||
</div>
|
||||
|
||||
<div class="article-hero-img">
|
||||
<span>Featured image from Directus assets</span>
|
||||
</div>
|
||||
|
||||
<div class="article-body">
|
||||
<p>Studio Madhouse has officially confirmed that <strong>Frieren: Beyond Journey's End</strong> will return for a second season. The announcement came via the series' official Twitter account and was accompanied by a short teaser image featuring the main cast.</p>
|
||||
|
||||
<h2>What We Know So Far</h2>
|
||||
<p>According to the official announcement, the core production team remains unchanged. Director Keiichiro Saito and series composer Tomohiro Suzuki both confirmed their return, alongside the full original voice cast.</p>
|
||||
|
||||
<blockquote><p>"We're incredibly grateful for the response to the first season. We want to give the second the same care and time it deserves."<br>— Director Keiichiro Saito</p></blockquote>
|
||||
|
||||
<p>No release window has been confirmed yet, though industry sources suggest a late 2026 or early 2027 premiere is most likely given the production timeline.</p>
|
||||
|
||||
<h3>Production at Madhouse</h3>
|
||||
<p>The series will again be animated at <strong>Madhouse</strong>, the studio behind acclaimed productions such as Death Note, Hunter x Hunter, and One Punch Man Season 1. The studio's scheduling suggests a full production cycle rather than a rushed turnaround.</p>
|
||||
|
||||
<h2>What Comes Next in the Story</h2>
|
||||
<p>The first season adapted through the Granat arc. Season 2 is expected to begin with the Auberst arc and move into the series' most celebrated material, including the Lügner confrontation — widely considered the manga's peak so far.</p>
|
||||
</div>
|
||||
|
||||
<div class="article-tags">
|
||||
<div class="tag">frieren</div>
|
||||
<div class="tag">madhouse</div>
|
||||
<div class="tag">anime season 2</div>
|
||||
<div class="tag">fantasy anime</div>
|
||||
<div class="tag">2026 anime</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- RELATED -->
|
||||
<div class="related">
|
||||
<div class="section-header">
|
||||
<div class="section-title">More from Anime</div>
|
||||
<div class="section-line"></div>
|
||||
</div>
|
||||
<div class="grid-3">
|
||||
<div class="card">
|
||||
<div class="card-img"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-cat">Anime</div>
|
||||
<div class="card-title">Summer 2026 Season Preview: Every Series Ranked</div>
|
||||
<div class="card-read">Read →</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-img" style="background:linear-gradient(135deg,#0d1a18,#152a26)"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-cat">Anime</div>
|
||||
<div class="card-title">Re:Zero Season 4 Production Officially Confirmed by White Fox</div>
|
||||
<div class="card-read">Read →</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-img" style="background:linear-gradient(135deg,#1a1200,#2a1f00)"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-cat">Anime</div>
|
||||
<div class="card-title">Dungeon Meshi Season 2 — Confirmed for Winter 2027</div>
|
||||
<div class="card-read">Read →</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kotobane — Homepage Preview</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #0D0D14; color: #F3F5F7; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; }
|
||||
|
||||
/* NAV */
|
||||
nav { background: #171A21; border-bottom: 1px solid #2A3140; padding: 0 32px; height: 52px; display: flex; align-items: center; gap: 28px; position: sticky; top: 0; z-index: 10; }
|
||||
.logo { font-size: 18px; font-weight: 800; color: #00B4D8; letter-spacing: 3px; margin-right: 8px; }
|
||||
.nav-divider { width: 1px; height: 16px; background: #2A3140; }
|
||||
.nav-link { font-size: 12px; font-weight: 500; color: #7D8795; cursor: pointer; transition: color 0.15s; white-space: nowrap; }
|
||||
.nav-link.active { color: #00B4D8; border-bottom: 2px solid #00B4D8; padding-bottom: 2px; }
|
||||
.nav-link:hover { color: #B8C0CC; }
|
||||
.nav-search { margin-left: auto; display: flex; align-items: center; gap: 6px; background: #1D212B; border: 1px solid #2A3140; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
|
||||
.nav-search span { font-size: 11px; color: #5C6470; }
|
||||
.kbd { background: #2A3140; border-radius: 3px; padding: 1px 5px; font-size: 10px; color: #7D8795; font-family: monospace; }
|
||||
|
||||
/* HERO */
|
||||
.hero { display: grid; grid-template-columns: 1fr 380px; gap: 2px; max-width: 1200px; margin: 32px auto; padding: 0 32px; }
|
||||
.hero-main { background: #1D212B; border-radius: 16px 0 0 16px; overflow: hidden; position: relative; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
|
||||
.hero-img { position: absolute; inset: 0; background: linear-gradient(135deg, #0D0D14 0%, #1a1730 50%, #0d1a2e 100%); }
|
||||
.hero-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #0D0D14 0%, transparent 60%); }
|
||||
.hero-content { position: relative; z-index: 1; padding: 28px; }
|
||||
.hero-badges { display: flex; gap: 8px; margin-bottom: 14px; }
|
||||
.badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px; letter-spacing: 0.5px; }
|
||||
.badge-featured { background: #7C3AED; color: #fff; }
|
||||
.badge-category { background: transparent; border: 1px solid #2A3140; color: #7D8795; }
|
||||
.hero-title { font-size: 26px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; color: #F3F5F7; }
|
||||
.hero-excerpt { font-size: 13px; color: #B8C0CC; line-height: 1.6; margin-bottom: 16px; }
|
||||
.hero-meta { font-size: 11px; color: #5C6470; display: flex; gap: 12px; align-items: center; }
|
||||
.hero-read { font-size: 12px; color: #00B4D8; font-weight: 600; margin-left: auto; }
|
||||
|
||||
.hero-stack { display: flex; flex-direction: column; gap: 2px; }
|
||||
.hero-side { background: #1D212B; padding: 18px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; }
|
||||
.hero-side:first-child { border-radius: 0 16px 0 0; }
|
||||
.hero-side:last-child { border-radius: 0 0 16px 0; }
|
||||
.hero-side-img { position: absolute; inset: 0; background: linear-gradient(135deg, #0d1a2e 0%, #1a1730 100%); opacity: 0.7; }
|
||||
.hero-side-content { position: relative; z-index: 1; }
|
||||
.hero-side-title { font-size: 13px; font-weight: 600; color: #F3F5F7; line-height: 1.4; margin: 8px 0 6px; }
|
||||
.hero-side-meta { font-size: 10px; color: #5C6470; }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { max-width: 1200px; margin: 0 auto 40px; padding: 0 32px; }
|
||||
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
|
||||
.section-title { font-size: 13px; font-weight: 700; color: #F3F5F7; letter-spacing: 1px; text-transform: uppercase; }
|
||||
.section-line { flex: 1; height: 1px; background: #2A3140; }
|
||||
.section-more { font-size: 11px; color: #00B4D8; font-weight: 600; cursor: pointer; white-space: nowrap; }
|
||||
|
||||
/* ARTICLE GRID */
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||||
|
||||
.card { background: #1D212B; border: 1px solid #2A3140; border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s; }
|
||||
.card:hover { border-color: #3a4560; }
|
||||
.card-img { height: 140px; background: linear-gradient(135deg, #0D0D14 0%, #1a1730 100%); }
|
||||
.card-img.games { background: linear-gradient(135deg, #1a1200 0%, #2a1f00 100%); }
|
||||
.card-img.vtubers { background: linear-gradient(135deg, #120d1a 0%, #1e1530 100%); }
|
||||
.card-img.manga { background: linear-gradient(135deg, #1a0d0d 0%, #2a1515 100%); }
|
||||
.card-img.music { background: linear-gradient(135deg, #0d1a18 0%, #152a26 100%); }
|
||||
.card-body { padding: 14px; }
|
||||
.card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
|
||||
.card-cat { font-size: 10px; font-weight: 600; color: #7D8795; letter-spacing: 1px; text-transform: uppercase; }
|
||||
.card-title { font-size: 13px; font-weight: 600; color: #F3F5F7; line-height: 1.4; margin-bottom: 8px; }
|
||||
.card-excerpt { font-size: 11px; color: #7D8795; line-height: 1.5; margin-bottom: 10px; }
|
||||
.card-footer { display: flex; justify-content: space-between; align-items: center; }
|
||||
.card-date { font-size: 10px; color: #5C6470; }
|
||||
.card-read { font-size: 11px; color: #00B4D8; font-weight: 600; }
|
||||
|
||||
/* WIDE CARD */
|
||||
.card-wide { background: #1D212B; border: 1px solid #2A3140; border-radius: 12px; display: flex; overflow: hidden; cursor: pointer; }
|
||||
.card-wide-img { width: 180px; flex-shrink: 0; background: linear-gradient(135deg, #0D0D14, #1a1730); }
|
||||
.card-wide-body { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
|
||||
|
||||
/* TICKER */
|
||||
.ticker { background: #171A21; border-top: 1px solid #2A3140; border-bottom: 1px solid #2A3140; padding: 8px 32px; display: flex; align-items: center; gap: 16px; overflow: hidden; margin-bottom: 32px; }
|
||||
.ticker-label { background: #00B4D8; color: #000; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 3px; white-space: nowrap; letter-spacing: 0.5px; }
|
||||
.ticker-items { display: flex; gap: 24px; overflow: hidden; }
|
||||
.ticker-item { font-size: 11px; color: #B8C0CC; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
|
||||
.ticker-dot { width: 3px; height: 3px; border-radius: 50%; background: #2A3140; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<nav>
|
||||
<div class="logo">言羽</div>
|
||||
<div class="nav-divider"></div>
|
||||
<a class="nav-link active">Anime</a>
|
||||
<a class="nav-link">VTubers</a>
|
||||
<a class="nav-link">Manga</a>
|
||||
<a class="nav-link">Games</a>
|
||||
<a class="nav-link">Music</a>
|
||||
<a class="nav-link">Japan</a>
|
||||
<a class="nav-link">Culture</a>
|
||||
<a class="nav-link">Industry</a>
|
||||
<div class="nav-search">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#5C6470" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
|
||||
<span>Search</span>
|
||||
<div class="kbd">⌘K</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- NEWS TICKER -->
|
||||
<div class="ticker">
|
||||
<div class="ticker-label">LATEST</div>
|
||||
<div class="ticker-items">
|
||||
<div class="ticker-item">Hololive EN Gen 4 debuts announced <div class="ticker-dot"></div></div>
|
||||
<div class="ticker-item">Blue Protocol global release date confirmed <div class="ticker-dot"></div></div>
|
||||
<div class="ticker-item">Chainsaw Man Part 3 begins serialization <div class="ticker-dot"></div></div>
|
||||
<div class="ticker-item">Yoasobi world tour dates revealed <div class="ticker-dot"></div></div>
|
||||
<div class="ticker-item">Summer 2026 anime season preview</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="hero">
|
||||
<div class="hero-main">
|
||||
<div class="hero-img"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-badges">
|
||||
<span class="badge badge-featured">FEATURED</span>
|
||||
<span class="badge badge-category">ANIME</span>
|
||||
</div>
|
||||
<div class="hero-title">Frieren: Beyond Journey's End Season 2 Officially Announced — Production Already Underway at Madhouse</div>
|
||||
<div class="hero-excerpt">The beloved fantasy series returns for a second cour. Studio Madhouse confirmed production is already underway, with original staff and cast returning in full.</div>
|
||||
<div class="hero-meta">
|
||||
<span>28 May 2026</span>
|
||||
<span>·</span>
|
||||
<span>4 min read</span>
|
||||
<span class="hero-read">Read article →</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-stack">
|
||||
<div class="hero-side">
|
||||
<div class="hero-side-img"></div>
|
||||
<div class="hero-side-content">
|
||||
<div style="display:flex;gap:6px;align-items:center">
|
||||
<span class="badge" style="background:#D64545;color:#fff;font-size:9px;padding:2px 6px">TRENDING</span>
|
||||
<span style="font-size:10px;color:#7D8795;font-weight:600;letter-spacing:1px">VTUBERS</span>
|
||||
</div>
|
||||
<div class="hero-side-title">Hololive EN Gen 4 — Full Lineup and Debut Schedule Revealed</div>
|
||||
<div class="hero-side-meta">27 May 2026 · 3 min read</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-side">
|
||||
<div class="hero-side-img" style="background:linear-gradient(135deg,#1a1200,#2a1f00);opacity:0.7"></div>
|
||||
<div class="hero-side-content">
|
||||
<div style="display:flex;gap:6px;align-items:center">
|
||||
<span class="badge" style="background:#FFB300;color:#000;font-size:9px;padding:2px 6px">NEW</span>
|
||||
<span style="font-size:10px;color:#7D8795;font-weight:600;letter-spacing:1px">GAMES</span>
|
||||
</div>
|
||||
<div class="hero-side-title">Blue Protocol Global Launch: Everything You Need to Know</div>
|
||||
<div class="hero-side-meta">26 May 2026 · 6 min read</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LATEST -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Latest</div>
|
||||
<div class="section-line"></div>
|
||||
<div class="section-more">See all →</div>
|
||||
</div>
|
||||
<div class="grid-4">
|
||||
<div class="card">
|
||||
<div class="card-img vtubers"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-meta">
|
||||
<span class="card-cat">VTubers</span>
|
||||
<span class="badge" style="background:#D64545;color:#fff;font-size:9px;padding:1px 5px">TRENDING</span>
|
||||
</div>
|
||||
<div class="card-title">Nijisanji EN Announces Three New Wave Members</div>
|
||||
<div class="card-footer"><span class="card-date">28 May</span><span class="card-read">Read →</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-img manga"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-meta"><span class="card-cat">Manga</span></div>
|
||||
<div class="card-title">Chainsaw Man Part 3 First Chapter Review: Fujimoto Raises the Stakes</div>
|
||||
<div class="card-footer"><span class="card-date">27 May</span><span class="card-read">Read →</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-img games"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-meta"><span class="card-cat">Games</span></div>
|
||||
<div class="card-title">Elden Ring DLC Shadow of the Erdtree — Final Sales Numbers Released</div>
|
||||
<div class="card-footer"><span class="card-date">27 May</span><span class="card-read">Read →</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-img music"></div>
|
||||
<div class="card-body">
|
||||
<div class="card-meta"><span class="card-cat">Music</span><span class="badge" style="background:#FFB300;color:#000;font-size:9px;padding:1px 5px">NEW</span></div>
|
||||
<div class="card-title">Yoasobi Drops Surprise Single for Frieren S2 Opening Theme</div>
|
||||
<div class="card-footer"><span class="card-date">26 May</span><span class="card-read">Read →</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ANIME SECTION -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Anime</div>
|
||||
<div class="section-line"></div>
|
||||
<div class="section-more">See all →</div>
|
||||
</div>
|
||||
<div class="grid-3">
|
||||
<div class="card-wide">
|
||||
<div class="card-wide-img"></div>
|
||||
<div class="card-wide-body">
|
||||
<div>
|
||||
<div class="card-meta" style="margin-bottom:8px"><span class="card-cat">Anime</span></div>
|
||||
<div style="font-size:13px;font-weight:600;color:#F3F5F7;line-height:1.4;margin-bottom:6px">Summer 2026 Season Preview: Every Series Ranked</div>
|
||||
<div style="font-size:11px;color:#7D8795;line-height:1.5">A complete guide to every series airing this season — from returning favorites to new originals.</div>
|
||||
</div>
|
||||
<div class="card-footer" style="margin-top:10px"><span class="card-date">25 May 2026</span><span class="card-read">Read →</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-wide" style="flex-direction:column">
|
||||
<div class="card-img" style="height:120px;width:100%"></div>
|
||||
<div class="card-body" style="flex:1">
|
||||
<div class="card-meta"><span class="card-cat">Anime</span></div>
|
||||
<div class="card-title">Dungeon Meshi Season 2 — Confirmed for Winter 2027</div>
|
||||
<div class="card-footer"><span class="card-date">24 May</span><span class="card-read">Read →</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-wide" style="flex-direction:column">
|
||||
<div class="card-img" style="height:120px;width:100%;background:linear-gradient(135deg,#0d1a18,#152a26)"></div>
|
||||
<div class="card-body" style="flex:1">
|
||||
<div class="card-meta"><span class="card-cat">Anime</span></div>
|
||||
<div class="card-title">Re:Zero Season 4 Production Officially Confirmed by White Fox</div>
|
||||
<div class="card-footer"><span class="card-date">23 May</span><span class="card-read">Read →</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer style="border-top:1px solid #2A3140;padding:24px 32px;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center">
|
||||
<div style="font-size:16px;font-weight:800;color:#00B4D8;letter-spacing:3px">言羽</div>
|
||||
<div style="font-size:11px;color:#5C6470">© 2026 Kotobane · Japanese pop culture news</div>
|
||||
<div style="display:flex;gap:16px">
|
||||
<span style="font-size:11px;color:#7D8795;cursor:pointer">About</span>
|
||||
<span style="font-size:11px;color:#7D8795;cursor:pointer">Archive</span>
|
||||
<span style="font-size:11px;color:#7D8795;cursor:pointer">RSS</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
{"reason":"idle timeout","timestamp":1779980507520}
|
||||
@@ -0,0 +1,31 @@
|
||||
{"type":"server-started","port":58602,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:58602","screen_dir":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content","state_dir":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/state"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/approaches.html"}
|
||||
{"source":"user-event","type":"click","text":"B\n \n ISR + On-Demand Revalidation Recommended\n Pages are pre-built as static files. When you publish in Directus, a webhook pings Next.js to regenerate only the changed pages — no full redeploy, no full rebuild.\n \n ProsStatic speed (CDN-level fast)Content live within seconds of publishDirectus going down doesn't break the live siteNo redeploy, no rebuild\n ConsRequires a Directus Flow/webhook to trigger revalidationSlightly more setup than pure SSR","choice":"b","id":null,"timestamp":1779976559553}
|
||||
{"source":"user-event","type":"click","text":"B\n \n ISR + On-Demand Revalidation Recommended\n Pages are pre-built as static files. When you publish in Directus, a webhook pings Next.js to regenerate only the changed pages — no full redeploy, no full rebuild.\n \n ProsStatic speed (CDN-level fast)Content live within seconds of publishDirectus going down doesn't break the live siteNo redeploy, no rebuild\n ConsRequires a Directus Flow/webhook to trigger revalidationSlightly more setup than pure SSR","choice":"b","id":null,"timestamp":1779976571136}
|
||||
{"source":"user-event","type":"click","text":"B\n \n ISR + On-Demand Revalidation Recommended\n Pages are pre-built as static files. When you publish in Directus, a webhook pings Next.js to regenerate only the changed pages — no full redeploy, no full rebuild.\n \n ProsStatic speed (CDN-level fast)Content live within seconds of publishDirectus going down doesn't break the live siteNo redeploy, no rebuild\n ConsRequires a Directus Flow/webhook to trigger revalidationSlightly more setup than pure SSR","choice":"b","id":null,"timestamp":1779976571353}
|
||||
{"source":"user-event","type":"click","text":"B\n \n ISR + On-Demand Revalidation Recommended\n Pages are pre-built as static files. When you publish in Directus, a webhook pings Next.js to regenerate only the changed pages — no full redeploy, no full rebuild.\n \n ProsStatic speed (CDN-level fast)Content live within seconds of publishDirectus going down doesn't break the live siteNo redeploy, no rebuild\n ConsRequires a Directus Flow/webhook to trigger revalidationSlightly more setup than pure SSR","choice":"b","id":null,"timestamp":1779976572121}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/architecture.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/data-model.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/pages.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/waiting.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/colors.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/colors-v2.html"}
|
||||
{"source":"user-event","type":"click","text":"A\n \n \n \n \n \n Akihabara Neon\n High energy, electric. Think Akihabara at night — neon signs, vibrant storefronts. More Crunchyroll energy, big and bold.\n \n \n \n \n #FF2D78\n Primary\n \n \n \n #FF6B35\n Hot orange\n \n \n \n #00E5FF\n Cyan signal\n \n \n \n #FFD700\n Gold\n \n \n \n #B44DFF\n Violet\n \n \n \n #0D0D14\n Background\n \n \n \n \n \n ANIME\n TRENDING\n \n Frieren Season 2 Production Confirmed\n Studio Madhouse announces production has begun.\n \n 28 May 2026\n Read more →","choice":"a","id":null,"timestamp":1779977484954}
|
||||
{"source":"user-event","type":"click","text":"A\n \n \n \n \n \n Akihabara Neon\n High energy, electric. Think Akihabara at night — neon signs, vibrant storefronts. More Crunchyroll energy, big and bold.\n \n \n \n \n #FF2D78\n Primary\n \n \n \n #FF6B35\n Hot orange\n \n \n \n #00E5FF\n Cyan signal\n \n \n \n #FFD700\n Gold\n \n \n \n #B44DFF\n Violet\n \n \n \n #0D0D14\n Background\n \n \n \n \n \n ANIME\n TRENDING\n \n Frieren Season 2 Production Confirmed\n Studio Madhouse announces production has begun.\n \n 28 May 2026\n Read more →","choice":"a","id":null,"timestamp":1779977485707}
|
||||
{"source":"user-event","type":"click","text":"A\n \n \n \n \n \n Akihabara Neon\n High energy, electric. Think Akihabara at night — neon signs, vibrant storefronts. More Crunchyroll energy, big and bold.\n \n \n \n \n #FF2D78\n Primary\n \n \n \n #FF6B35\n Hot orange\n \n \n \n #00E5FF\n Cyan signal\n \n \n \n #FFD700\n Gold\n \n \n \n #B44DFF\n Violet\n \n \n \n #0D0D14\n Background\n \n \n \n \n \n ANIME\n TRENDING\n \n Frieren Season 2 Production Confirmed\n Studio Madhouse announces production has begun.\n \n 28 May 2026\n Read more →","choice":"a","id":null,"timestamp":1779977487677}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/colors-v3.html"}
|
||||
{"source":"user-event","type":"click","text":"B\n \n \n Electric Orange\n Orange pops hard on dark backgrounds — energetic, warm, culturally neutral. Works for VTubers and anime equally. Think Bilibili × Crunchyroll.\n \n \n \n #FF5500\n Brand\n \n \n \n #FF7733\n Hover\n \n \n \n #00C4FF\n Cyan\n \n \n \n #E8005A\n Pink\n \n \n \n #00D166\n Green\n \n \n \n #0D0D14\n Background\n \n \n \n \n ANIME\n TRENDING\n \n Frieren Season 2 Production Confirmed by Madhouse\n Studio Madhouse announces production has officially begun on the second cour.\n \n \n frieren\n madhouse\n \n Read →","choice":"b","id":null,"timestamp":1779977537053}
|
||||
{"source":"user-event","type":"click","text":"B\n \n \n Electric Orange\n Orange pops hard on dark backgrounds — energetic, warm, culturally neutral. Works for VTubers and anime equally. Think Bilibili × Crunchyroll.\n \n \n \n #FF5500\n Brand\n \n \n \n #FF7733\n Hover\n \n \n \n #00C4FF\n Cyan\n \n \n \n #E8005A\n Pink\n \n \n \n #00D166\n Green\n \n \n \n #0D0D14\n Background\n \n \n \n \n ANIME\n TRENDING\n \n Frieren Season 2 Production Confirmed by Madhouse\n Studio Madhouse announces production has officially begun on the second cour.\n \n \n frieren\n madhouse\n \n Read →","choice":"b","id":null,"timestamp":1779977591936}
|
||||
{"source":"user-event","type":"click","text":"C\n \n \n Sky Cyan Recommended\n Cool and modern — closest to AniList's iconic blue but with a Japanese cyber edge. Flat sky cyan on near-black backgrounds reads clean, editorial, and distinctly not Western SaaS. Pairs with hot pink and amber for categories.\n \n \n \n #00B4D8\n Brand\n \n \n \n #00D4FF\n Hover\n \n \n \n #E8005A\n Hot pink\n \n \n \n #FFB300\n Amber\n \n \n \n #7C3AED\n Violet\n \n \n \n #0D0D14\n Background\n \n \n \n \n ANIME\n TRENDING\n \n Frieren Season 2 Production Confirmed by Madhouse\n Studio Madhouse announces production has officially begun on the second cour.\n \n \n frieren\n madhouse\n \n Read →","choice":"c","id":null,"timestamp":1779977592288}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/colors-v4.html"}
|
||||
{"source":"user-event","type":"click","text":"B\n \n \n Coral — warm red-orange, no pink at all\n \n \n \n #00B4D8\n Primary\n \n \n \n #FF6B6B\n Coral\n \n \n \n #FFB300\n Amber\n \n \n \n #7C3AED\n Violet\n \n \n \n #00D166\n Green\n \n \n \n \n ANIME\n TRENDING\n VTUBERS\n \n Frieren Season 2 Production Confirmed by Madhouse\n Studio Madhouse announces production has officially begun on the second cour.\n \n \n frieren\n madhouse\n \n Read →","choice":"b","id":null,"timestamp":1779977685048}
|
||||
{"source":"user-event","type":"click","text":"C\n \n \n Cyan + Violet Recommended — no pink at all\n \n \n \n #00B4D8\n Primary\n \n \n \n #7C3AED\n Violet\n \n \n \n #FFB300\n Amber\n \n \n \n #FF6B6B\n Coral\n \n \n \n #00D166\n Green\n \n \n \n \n ANIME\n TRENDING\n VTUBERS\n \n Frieren Season 2 Production Confirmed by Madhouse\n Studio Madhouse announces production has officially begun on the second cour.\n \n \n frieren\n madhouse\n \n Read →","choice":"c","id":null,"timestamp":1779977700888}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/categories.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/palette-usage.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/coral-fix.html"}
|
||||
{"source":"user-event","type":"click","text":"B\n \n \n \n \n #D64545\n Contrast with white: ~5.1:1 ✓\n Rich coral — deeper, still recognisably coral not pure red\n \n \n TRENDING","choice":"b","id":null,"timestamp":1779978117570}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/palette-final.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/preview-homepage.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/preview-article.html"}
|
||||
{"type":"screen-added","file":"/Users/achmad/Documents/Belajar/Web/kotobane/.superpowers/brainstorm/91896-1779976307/content/directus-workflow.html"}
|
||||
{"type":"server-stopped","reason":"idle timeout"}
|
||||
@@ -0,0 +1 @@
|
||||
91905
|
||||
Reference in New Issue
Block a user