`mockups/042-japanese-edo-print.html`

218 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1440, initial-scale=0.95">
<title>edo-period-ukiyo-e — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&family=Inter:wght@400;600&display=swap">
<style>
body {
  margin:0;
  background:#fff8e7;
  color:#1a1a1a;
  font-family: 'Inter', sans-serif;
  display:flex;
  flex-direction:column;
  height:900px;
}
header {
  background:#0a4d3c;
  color:#fff8e7;
  padding:16px 32px;
  font-family:'Noto Serif JP', serif;
  font-size:24px;
  display:flex;
  align-items:center;
  gap:24px;
  position:relative;
}
header::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:4px;
  background:#c45a5a;
}
header select {
  padding:8px 12px;
  border:2px solid #ddd5c2;
  border-radius:6px;
  background:#fff8e7;
  color:#1a1a1a;
  font-family:'Inter', sans-serif;
}
header .status {
  padding:6px 12px;
  border-radius:12px;
  font-size:14px;
  background:#ddd5c2;
  color:#1a1a1a;
}
main {
  display:flex;
  flex:1;
  overflow:hidden;
}
.left-pane {
  width:40%;
  border-right:1px solid #ddd5c2;
  display:flex;
  flex-direction:column;
}
.chat-log {
  flex:1;
  overflow-y:auto;
  padding:24px;
  background:#fff8e7;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.message {
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.message.user {
  flex-direction:row-reverse;
}
.message .text {
  background:#1a1a1a;
  color:#fff8e7;
  padding:12px 16px;
  border-radius:8px;
  max-width:70%;
}
.message .timestamp {
  font-size:12px;
  color:#c45a5a;
}
.chat-input {
  padding:16px;
  border-top:1px solid #ddd5c2;
  display:flex;
  gap:12px;
}
.chat-input input {
  flex:1;
  padding:8px 12px;
  border:2px solid #ddd5c2;
  border-radius:6px;
  font-family:'Inter', sans-serif;
}
.chat-input button {
  padding:8px 16px;
  background:#0a4d3c;
  color:#fff8e7;
  border:none;
  border-radius:6px;
  font-family:'Inter', sans-serif;
}
.right-pane {
  width:60%;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  padding:24px;
}
.panel {
  flex:1 1 45%;
  min-width:300px;
  background:#1a1a1a;
  color:#fff8e7;
  padding:24px;
  border:1px solid #ddd5c2;
  border-radius:8px;
}
.panel h3 {
  margin:0 0 16px 0;
  font-family:'Noto Serif JP', serif;
  font-size:18px;
}
.panel .content {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.panel .content div {
  font-size:14px;
  line-height:1.6;
}
.panel .content .ink {
  color:#c45a5a;
}
.panel .content .wave {
  color:#ddd5c2;
}
</style>
</head>
<body>
<header>
  <span>FOUR HORSEMEN / HORMUZ</span>
  <select>
    <option value="project1">Samurai Chronicles</option>
    <option value="project2">Floating Worlds</option>
    <option value="project3">Inkbound Horizons</option>
  </select>
  <span class="status">idle</span>
</header>
<main>
  <div class="left-pane">
    <div class="chat-log">
      <div class="message user">
        <div class="text">/run-topic: "The Wave That Never Breaks"</div>
        <div class="timestamp">03:47</div>
      </div>
      <div class="message">
        <div class="text">Topic initiated. Sumi ink flows like the Kuroshio current. Let the brush dance with the wind.</div>
        <div class="timestamp">03:48</div>
      </div>
      <div class="message user">
        <div class="text">/stampede: "Mountains of Paper"</div>
        <div class="timestamp">03:51</div>
      </div>
      <div class="message">
        <div class="text">Stampede activated. The paper mountains rise, their peaks etched with the whispers of ancient maps.</div>
        <div class="timestamp">03:52</div>
      </div>
    </div>
    <div class="chat-input">
      <input type="text" placeholder="Summon the ink...">
      <button>Send</button>
    </div>
  </div>
  <div class="right-pane">
    <div class="panel">
      <h3>Preview</h3>
      <div class="content">
        <div class="ink">A wave of ink spills across the screen, its crest catching the light of the moon. Beneath it, the silhouette of a crane takes flight.</div>
        <div class="wave">The horizon shimmers with the reflection of a thousand paper lanterns.</div>
      </div>
    </div>
    <div class="panel">
      <h3>Paper</h3>
      <div class="content">
        <div>Calligraphy strokes unfurl like the petals of a cherry blossom. Each curve holds the weight of a thousand silent prayers.</div>
        <div>The paper breathes, its fibers whispering the secrets of the Edo period.</div>
      </div>
    </div>
    <div class="panel">
      <h3>Figma</h3>
      <div class="content">
        <div>Frames of the design pulse with the rhythm of a taiko drum. Layers unfold like the pages of a scroll, each one a world unto itself.</div>
        <div>The brushstroke tool glows with the essence of Hokusai's waves.</div>
      </div>
    </div>
    <div class="panel">
      <h3>Canva</h3>
      <div class="content">
        <div>A collage of ukiyo-e prints and sumi ink washes. The composition balances like a tea ceremony, every element in perfect harmony.</div>
        <div>The background gradient mimics the fading hues of a twilight sky over Kyoto.</div>
      </div>
    </div>
  </div>
</main>
</body>
</html>