← back to Hormuzy
mockups/051-samurai-scroll.html
244 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>samurai-honor-scroll — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&family=Cormorant+Garamond:wght@400;600&display=swap">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #fff8e7;
color: #1a1a1a;
font-family: 'Cormorant Garamond', serif;
height: 900px;
width: 1440px;
margin: 0 auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
header {
background: #3a4a2c;
color: #fff8e7;
padding: 16px 32px;
font-family: 'Noto Serif JP', serif;
font-size: 24px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 100;
}
header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: #7a1f1a;
}
.project-picker, .status {
font-family: 'Cormorant Garamond', serif;
font-size: 14px;
}
.project-picker {
background: #ddd5c2;
padding: 4px 8px;
border-radius: 4px;
margin-left: 16px;
}
.status {
background: #fff8e7;
padding: 4px 8px;
border: 1px solid #7a1f1a;
border-radius: 4px;
}
main {
display: flex;
flex: 1;
overflow: hidden;
}
.chat-pane {
width: 40%;
background: #fff8e7;
border-right: 1px solid #ddd5c2;
display: flex;
flex-direction: column;
}
.chat-log {
flex: 1;
padding: 16px;
overflow-y: auto;
background: #fff8e7;
}
.chat-message {
margin: 12px 0;
display: flex;
flex-direction: column;
}
.chat-message.user {
align-self: flex-end;
}
.chat-message.system {
align-self: flex-start;
}
.chat-message::before {
content: attr(data-role);
font-size: 12px;
color: #7a1f1a;
margin-bottom: 4px;
}
.chat-input {
padding: 16px;
border-top: 1px solid #ddd5c2;
display: flex;
}
.chat-input input {
flex: 1;
padding: 8px;
font-size: 14px;
border: 1px solid #ddd5c2;
border-radius: 4px;
}
.chat-input button {
margin-left: 8px;
padding: 8px 16px;
background: #7a1f1a;
color: #fff8e7;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
}
.panels {
width: 60%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
padding: 16px;
}
.panel {
background: #fff8e7;
border: 1px solid #ddd5c2;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.panel-header {
background: #3a4a2c;
color: #fff8e7;
padding: 12px 16px;
font-family: 'Noto Serif JP', serif;
font-size: 18px;
text-align: center;
}
.panel-body {
flex: 1;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 14px;
color: #1a1a1a;
}
.panel-body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent 25%, #ddd5c2 25%, #ddd5c2 75%, transparent 75%);
pointer-events: none;
z-index: 0;
}
.panel-body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 30% 30%, #7a1f1a 10%, transparent 10%);
pointer-events: none;
z-index: 0;
}
</style>
</head>
<body>
<header>
<span>Four Horsemen / HORMUZ</span>
<div>
<div class="project-picker">Select Project ▼</div>
<div class="status">idle</div>
</div>
</header>
<main>
<div class="chat-pane">
<div class="chat-log">
<div class="chat-message user" data-role="User:">
/run-topic: "The scroll of unbroken lineage"
</div>
<div class="chat-message system" data-role="System:">
Topic initiated. Ink flows like the first snow of winter.
</div>
<div class="chat-message user" data-role="User:">
/stampede: "Unleash the ink upon the paper"
</div>
<div class="chat-message system" data-role="System:">
Stampede engaged. The brush trembles with the weight of a thousand years.
</div>
</div>
<div class="chat-input">
<input type="text" placeholder="Speak with the honor of the blade">
<button>Send</button>
</div>
</div>
<div class="panels">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="panel-body">
<svg width="100%" height="100%" viewBox="0 0 200 200">
<path d="M10 10 L190 10 L190 190 L10 190 Z" fill="#fff8e7" stroke="#7a1f1a" stroke-width="4"/>
<text x="100" y="100" font-family="Noto Serif JP" font-size="24" fill="#1a1a1a" text-anchor="middle" dominant-baseline="middle">無垢</text>
</svg>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="panel-body">
<div style="position: relative;">
<div style="width: 100px; height: 100px; background: #ddd5c2; margin: 0 auto;"></div>
<div style="position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #3a4a2c;">「The ink does not lie」</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="panel-body">
<div style="display: flex; align-items: center; justify-content: center;">
<div style="width: 80px; height: 80px; background: #7a1f1a; border-radius: 50%; border: 4px solid #fff8e7; display: flex; align-items: center; justify-content: center;">
<svg width="40" height="40" viewBox="0 0 24 24" fill="#fff8e7">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-5 5z"/>
</svg>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="panel-header">Canva</div>
<div class="panel-body">
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="width: 60px; height: 60px; background: #3a4a2c; border-radius: 8px; margin-bottom: 12px;"></div>
<div style="font-size: 12px; color: #7a1f1a;">「The scroll is eternal」</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>