Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>German Property Purchase — Workflow</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'DM Sans', sans-serif; | |
| background: #f4f1ec; | |
| min-height: 100vh; | |
| padding: 40px 24px; | |
| color: #1a1a1a; | |
| } | |
| h1 { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.7rem; | |
| font-weight: 600; | |
| text-align: center; | |
| color: #1a1a1a; | |
| margin-bottom: 6px; | |
| letter-spacing: -0.3px; | |
| } | |
| .subtitle { | |
| text-align: center; | |
| font-size: 0.82rem; | |
| color: #888; | |
| font-weight: 300; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| margin-bottom: 36px; | |
| } | |
| .diagram { | |
| max-width: 960px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 40px rgba(0,0,0,0.08); | |
| } | |
| /* Column headers */ | |
| .header-row { | |
| display: grid; | |
| grid-template-columns: 150px 1fr 1fr 1fr 1fr; | |
| border-bottom: 2px solid #e8e3db; | |
| } | |
| .header-row .phase-label { | |
| background: #1a1a1a; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 14px 10px; | |
| font-size: 0.7rem; | |
| font-weight: 500; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| } | |
| .phase-header { | |
| padding: 12px 16px; | |
| text-align: center; | |
| font-size: 0.72rem; | |
| font-weight: 500; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| border-left: 1px solid #e8e3db; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .phase-header .dot { | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| } | |
| /* Phase colors */ | |
| .p1 { background: #fdf6ee; color: #b5580c; } | |
| .p1 .dot { background: #e07a2f; } | |
| .p2 { background: #eef4fd; color: #1a5fb0; } | |
| .p2 .dot { background: #3d7dd4; } | |
| .p3 { background: #f5f0fa; color: #6b2fa0; } | |
| .p3 .dot { background: #9b59b6; } | |
| .p4 { background: #edfbf1; color: #1a7a3e; } | |
| .p4 .dot { background: #27ae60; } | |
| /* Swim lanes */ | |
| .lane { | |
| display: grid; | |
| grid-template-columns: 150px 1fr 1fr 1fr 1fr; | |
| border-bottom: 1px solid #e8e3db; | |
| min-height: 110px; | |
| } | |
| .lane:last-child { border-bottom: none; } | |
| .lane-label { | |
| background: #f9f7f4; | |
| border-right: 2px solid #e8e3db; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 16px 12px; | |
| gap: 8px; | |
| } | |
| .lane-label .actor-icon { | |
| font-size: 1.5rem; | |
| } | |
| .lane-label .actor-name { | |
| font-size: 0.72rem; | |
| font-weight: 500; | |
| text-align: center; | |
| color: #333; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| line-height: 1.3; | |
| } | |
| .cell { | |
| border-left: 1px solid #e8e3db; | |
| padding: 14px 12px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| position: relative; | |
| } | |
| .cell.p1-bg { background: #fdf6ee; } | |
| .cell.p2-bg { background: #eef4fd; } | |
| .cell.p3-bg { background: #f5f0fa; } | |
| .cell.p4-bg { background: #edfbf1; } | |
| .cell.empty { background: white; } | |
| .step { | |
| background: white; | |
| border-radius: 8px; | |
| padding: 10px 12px; | |
| text-align: center; | |
| font-size: 0.78rem; | |
| line-height: 1.4; | |
| font-weight: 400; | |
| color: #222; | |
| box-shadow: 0 1px 6px rgba(0,0,0,0.08); | |
| width: 100%; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .step strong { | |
| display: block; | |
| font-weight: 500; | |
| font-size: 0.8rem; | |
| margin-bottom: 3px; | |
| } | |
| .step.highlight { | |
| border-left: 3px solid #e07a2f; | |
| } | |
| .step.highlight-blue { | |
| border-left: 3px solid #3d7dd4; | |
| } | |
| .step.highlight-purple { | |
| border-left: 3px solid #9b59b6; | |
| } | |
| .step.highlight-green { | |
| border-left: 3px solid #27ae60; | |
| } | |
| /* Arrows between lanes */ | |
| .arrow-down { | |
| font-size: 1.1rem; | |
| color: #bbb; | |
| line-height: 1; | |
| } | |
| .cross-lane-arrow { | |
| position: absolute; | |
| font-size: 0.7rem; | |
| color: #999; | |
| font-weight: 500; | |
| letter-spacing: 0.04em; | |
| } | |
| /* Mail flow connector */ | |
| .mail-connector { | |
| background: #fff8f0; | |
| border: 1.5px dashed #e07a2f; | |
| border-radius: 8px; | |
| padding: 8px 12px; | |
| text-align: center; | |
| font-size: 0.72rem; | |
| color: #b5580c; | |
| font-weight: 500; | |
| width: 100%; | |
| } | |
| .phase-span { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.72rem; | |
| color: #999; | |
| font-style: italic; | |
| } | |
| /* Legend */ | |
| .legend { | |
| display: flex; | |
| justify-content: center; | |
| gap: 24px; | |
| margin-top: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.74rem; | |
| color: #666; | |
| } | |
| .legend-dot { | |
| width: 10px; height: 10px; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>German Property Purchase</h1> | |
| <p class="subtitle">End-to-End Transaction Workflow</p> | |
| <div class="diagram"> | |
| <!-- HEADER ROW --> | |
| <div class="header-row"> | |
| <div class="phase-label">Actor / Phase</div> | |
| <div class="phase-header p1"><span class="dot"></span>Negotiation</div> | |
| <div class="phase-header p2"><span class="dot"></span>DE Notarization</div> | |
| <div class="phase-header p3"><span class="dot"></span>US Notarization</div> | |
| <div class="phase-header p4"><span class="dot"></span>Closing</div> | |
| </div> | |
| <!-- BROKER LANE --> | |
| <div class="lane"> | |
| <div class="lane-label"> | |
| <span class="actor-icon">🤝</span> | |
| <span class="actor-name">Broker</span> | |
| </div> | |
| <div class="cell p1-bg"> | |
| <div class="step highlight"> | |
| <strong>Mediate Negotiation</strong> | |
| Facilitates agreement between buyer & seller | |
| </div> | |
| <div class="arrow-down">↓</div> | |
| <div class="step highlight"> | |
| <strong>Draft Contract</strong> | |
| Purchase contract prepared | |
| </div> | |
| </div> | |
| <div class="cell empty"></div> | |
| <div class="cell empty"></div> | |
| <div class="cell empty"></div> | |
| </div> | |
| <!-- BUYER LANE --> | |
| <div class="lane"> | |
| <div class="lane-label"> | |
| <span class="actor-icon">🧑💼</span> | |
| <span class="actor-name">Buyer</span> | |
| </div> | |
| <div class="cell p1-bg"> | |
| <div class="step highlight"> | |
| <strong>Review Contract</strong> | |
| Buyer reviews & agrees to terms | |
| </div> | |
| </div> | |
| <div class="cell p2-bg"> | |
| <div class="step highlight-blue"> | |
| <strong>Sign Contract</strong> | |
| Buyer signs in Germany | |
| </div> | |
| </div> | |
| <div class="cell empty"></div> | |
| <div class="cell empty"></div> | |
| </div> | |
| <!-- GERMAN NOTARY LANE --> | |
| <div class="lane"> | |
| <div class="lane-label"> | |
| <span class="actor-icon">🏛️</span> | |
| <span class="actor-name">German Notary</span> | |
| </div> | |
| <div class="cell empty"></div> | |
| <div class="cell p2-bg"> | |
| <div class="step highlight-blue"> | |
| <strong>Notarize in Germany</strong> | |
| Buyer's signature officially notarized | |
| </div> | |
| <div class="arrow-down">↓</div> | |
| <div class="mail-connector"> | |
| ✉️ Mail contract to sellers in the U.S. | |
| </div> | |
| </div> | |
| <div class="cell empty"></div> | |
| <div class="cell p4-bg"> | |
| <div class="step highlight-green"> | |
| <strong>Receive Signed Contract</strong> | |
| Returned from sellers | |
| </div> | |
| <div class="arrow-down">↓</div> | |
| <div class="step highlight-green"> | |
| <strong>Finalize Transaction</strong> | |
| Deal officially complete | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SELLERS LANE --> | |
| <div class="lane"> | |
| <div class="lane-label"> | |
| <span class="actor-icon">🏠</span> | |
| <span class="actor-name">Sellers<br>(Sue & Martin)</span> | |
| </div> | |
| <div class="cell empty"></div> | |
| <div class="cell empty"></div> | |
| <div class="cell p3-bg"> | |
| <div class="step highlight-purple"> | |
| <strong>Receive Contract</strong> | |
| By mail from German Notary | |
| </div> | |
| <div class="arrow-down">↓</div> | |
| <div class="step highlight-purple"> | |
| <strong>Visit German Consulate</strong> | |
| U.S.-based notarization | |
| </div> | |
| <div class="arrow-down">↓</div> | |
| <div class="mail-connector" style="border-color:#9b59b6; background:#fdf8ff; color:#6b2fa0;"> | |
| ✉️ Mail notarized contract back to Germany | |
| </div> | |
| </div> | |
| <div class="cell empty"></div> | |
| </div> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"><span class="legend-dot" style="background:#e07a2f"></span>Negotiation Phase</div> | |
| <div class="legend-item"><span class="legend-dot" style="background:#3d7dd4"></span>German Notarization</div> | |
| <div class="legend-item"><span class="legend-dot" style="background:#9b59b6"></span>US Notarization</div> | |
| <div class="legend-item"><span class="legend-dot" style="background:#27ae60"></span>Closing</div> | |
| <div class="legend-item"><span style="display:inline-block; width:20px; border-bottom: 2px dashed #e07a2f;"></span> Physical mail</div> | |
| </div> | |
| </body> | |
| </html> |