I have rewritten and repaired the complete single-page HTML application according to your requirements:
Key Improvements Made:
* Container Widths:
* Enforced target canvas widths (200%, 400%, and panorama scroll containers).
* Wrapped wide diagrams inside horizontal overflow wrappers (overflow-x: auto) with custom styled scrollbars so content overflows gracefully without breaking page structure or layout.
* Text & Line Colors Updated:
* Set diagram text color across node labels, headings, and theme variables to DodgerBlue (dodgerblue / #1E90FF).
* Updated link arrow lines and stroke connectors to Blue (#0066FF).
* Layout & Alignment Repairs:
* Corrected typo errors in Mermaid style class assignments (e.g. invalid hex colors like #fffbebe).
* Ensured diagram subgraphs and flow directions maintain uniform row-line height across all 5 sections.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medieval Siege Warfare Diagrams - 400% Panorama</title>
<!-- Mermaid.js Library -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<style>
:root {
--bg-main: #000000;
--bg-card: #050505;
--border-color: #333333;
--text-dodger: dodgerblue;
--line-blue: #0066FF;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20px;
background: var(--bg-main);
color: var(--text-dodger);
font-family: 'Segoe UI', Arial, sans-serif;
overflow-x: auto;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
height: 16px;
width: 16px;
}
::-webkit-scrollbar-track {
background: #080808;
border: 1px solid #222222;
}
::-webkit-scrollbar-thumb {
background: #0066FF;
border-radius: 4px;
border: 3px solid #080808;
}
::-webkit-scrollbar-thumb:hover {
background: dodgerblue;
}
h1 {
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
color: var(--text-dodger);
}
section {
margin-bottom: 60px;
width: 100%;
overflow-x: auto;
}
/* SECTION 1: Standard Container */
.diagram-v1 {
max-width: 1800px;
margin: auto;
border: 1px solid var(--border-color);
background: var(--bg-card);
padding: 20px;
border-radius: 8px;
}
/* SECTION 2: 200% Extended Width Container */
.wrapper-v2 {
width: 200%;
min-width: 1800px;
}
.wrapper-v2 .mermaid {
padding: 30px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 8px;
}
/* SECTION 3: 400% Super Wide Container */
.siege-wrapper-v3 {
width: 400%;
min-width: 5000px;
background: var(--bg-main);
padding: 40px;
border: 2px solid var(--border-color);
border-radius: 12px;
}
.siege-wrapper-v3 .mermaid {
background: var(--bg-card);
padding: 50px;
border-radius: 8px;
}
/* SECTION 4: 400% Infographic Panorama Container */
.siege-infographic-v4 {
width: 400%;
min-width: 7200px;
background: var(--bg-main);
padding: 40px;
}
.siege-infographic-v4 .mermaid {
background: var(--bg-card);
padding: 40px;
border: 2px solid var(--border-color);
border-radius: 12px;
}
/* SECTION 5: Panorama Container */
#siege-panorama-container {
background: var(--bg-main);
padding: 40px;
overflow-x: auto;
border: 1px solid var(--border-color);
border-radius: 16px;
}
.siege-title {
font-size: 48px;
font-weight: 800;
text-align: center;
color: var(--text-dodger);
margin-bottom: 10px;
}
.siege-subtitle {
font-size: 22px;
text-align: center;
color: var(--text-dodger);
margin-bottom: 30px;
}
.siege-scroll {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.siege-scroll .mermaid {
width: max-content;
padding: 40px;
background: #020202;
border: 3px solid #0066FF;
border-radius: 20px;
}
.siege-scroll .mermaid svg {
width: 15000px !important;
max-width: none !important;
height: auto !important;
}
.siege-footer {
text-align: center;
font-size: 24px;
font-weight: 700;
letter-spacing: 4px;
color: var(--text-dodger);
padding-top: 25px;
}
/* Force text dodgerblue & node colors */
.mermaid .node label,
.mermaid .node text,
.mermaid .cluster label,
.mermaid .edgeLabel {
color: dodgerblue !important;
fill: dodgerblue !important;
}
</style>
</head>
<body>
<!-- SECTION 1 -->
<section>
<h1>Phases of Prolonged Medieval Siege Warfare (Standard View)</h1>
<div class="diagram-v1">
<div class="mermaid">
flowchart LR
A["🏰<br />PHASE 1<br />INVESTMENT & CONTAINMENT"]:::phase1
B["🛠️<br />PHASE 2<br />REDUCTION & PREPARATION"]:::phase2
C["⛏️️<br />PHASE 3<br />BREACH OPERATIONS & SAPPERS"]:::phase3
D["☠️<br />PHASE 4<br />ATTRITION, SICKNESS & NEGOTIATION"]:::phase4
E["⚔️<br />PHASE 5<br />FINAL ASSAULT & RESOLUTION"]:::phase5
F["🐎<br />PHASE 6<br />COUNTER-OFFENSIVE & PURSUIT"]:::phase6
A -->|"Encirclement"| B
B -->|"Bombardment"| C
C -->|"Wall Breach"| D
D -->|"Starvation"| E
E --> G["🤝 SURRENDER"]
E --> H["🔥 STORMING"]
E --> I["🛡️ RELIEF ARMY"]
I --> F
F --> J["⚔️ Sally Out"]
F --> K["🏹 Cavalry Pursuit"]
F --> L["🔥 Destroy Siege Engines"]
F --> M["💰 Capture Camp & Gear"]
classDef phase1 fill:#1a0500,color:dodgerblue,stroke:#0066FF,stroke-width:3px;
classDef phase2 fill:#1a0f00,color:dodgerblue,stroke:#0066FF,stroke-width:3px;
classDef phase3 fill:#1a1500,color:dodgerblue,stroke:#0066FF,stroke-width:3px;
classDef phase4 fill:#001a0d,color:dodgerblue,stroke:#0066FF,stroke-width:3px;
classDef phase5 fill:#10001a,color:dodgerblue,stroke:#0066FF,stroke-width:3px;
classDef phase6 fill:#00121a,color:dodgerblue,stroke:#0066FF,stroke-width:3px;
style G fill:#05200f,stroke:#0066FF,color:dodgerblue,stroke-width:3px
style H fill:#200505,stroke:#0066FF,color:dodgerblue,stroke-width:3px
style I fill:#051520,stroke:#0066FF,color:dodgerblue,stroke-width:3px
style J fill:#051520,stroke:#0066FF,color:dodgerblue
style K fill:#051520,stroke:#0066FF,color:dodgerblue
style L fill:#051520,stroke:#0066FF,color:dodgerblue
style M fill:#051520,stroke:#0066FF,color:dodgerblue
linkStyle default stroke:#0066FF,stroke-width:3px;
</div>
</div>
</section>
<!-- SECTION 2 -->
<section>
<div class="wrapper-v2">
<h1>Phases of Prolonged Medieval Siege Warfare (200% Width)</h1>
<div class="mermaid">
flowchart LR
%% MAIN CAMPAIGN FLOW
A["🏰<br />1. INVESTMENT<br />CONTAINMENT"]:::red
B["🛠️<br />2. REDUCTION<br />PREPARATION"]:::orange
C["⛏️<br />3. BREACH<br />OPERATIONS"]:::gold
D["☠️<br />4. ATTRITION<br />NEGOTIATION"]:::green
E["⚔️<br />5. FINAL ASSAULT<br />RESOLUTION"]:::purple
F["🐎<br />6. PURSUIT<br />COUNTER-OFFENSIVE"]:::blue
A --> B --> C --> D --> E
%% ATTACKER LANE
A1["Encirclement"]:::attack
A2["Fortified Camps"]:::attack
B1["Trebuchets"]:::attack
B2["Psychological Warfare"]:::attack
C1["Sapping"]:::attack
C2["Battering Rams"]:::attack
C3["Siege Towers"]:::attack
D1["Starvation"]:::attack
D2["Disease Management"]:::attack
E1["Storming"]:::attack
E2["Looting"]:::attack
%% DEFENDER LANE
AA1["Gather Supplies"]:::defend
AA2["Call Relief Army"]:::defend
BB1["Counter Battery"]:::defend
BB2["Archery Fire"]:::defend
CC1["Counter Mining"]:::defend
CC2["Machicolations"]:::defend
DD1["Rationing"]:::defend
DD2["Water Control"]:::defend
EE1["Conditional Surrender"]:::defend
EE2["Hold Until Relief"]:::defend
%% RELATIONS
A --- A1
A --- A2
A --- AA1
A --- AA2
B --- B1
B --- B2
B --- BB1
B --- BB2
C --- C1
C --- C2
C --- C3
C --- CC1
C --- CC2
D --- D1
D --- D2
D --- DD1
D --- DD2
E --- E1
E --- E2
E --- EE1
E --- EE2
%% OUTCOME BRANCH
E --> G["🤝 SURRENDER"]:::success
E --> H["🔥 CASTLE FALLS"]:::danger
E --> I["🛡️ RELIEF ARMY ARRIVES"]:::relief
I --> F
F --> J["⚔️ Sally Out"]
F --> K["🏹 Cavalry Pursuit"]
F --> L["🔥 Burn Siege Engines"]
F --> M["💰 Capture Camp & Equipment"]
%% STYLES
classDef red fill:#200505,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
classDef orange fill:#201005,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
classDef gold fill:#201b05,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
classDef green fill:#052010,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
classDef purple fill:#150520,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
classDef blue fill:#051520,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
classDef attack fill:#1c0000,stroke:#0066FF,color:dodgerblue;
classDef defend fill:#001326,stroke:#0066FF,color:dodgerblue;
classDef success fill:#05200f,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
classDef danger fill:#200505,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
classDef relief fill:#051520,stroke:#0066FF,color:dodgerblue,stroke-width:3px;
linkStyle default stroke:#0066FF,stroke-width:2px;
</div>
</div>
</section>
<!-- SECTION 3 -->
<section>
<div class="siege-wrapper-v3">
<div class="mermaid">
flowchart LR
%% SECTOR I
subgraph S1["🏰 ESTABLISHMENT OF THE SIEGE"]
direction TB
A1["ENCIRCLEMENT"]
A2["CONTRAVALLATION"]
A3["CIRCUMVALLATION"]
A4["FORWARD CAMPS"]
A1 --> A2 --> A3 --> A4
D1["GATHER SUPPLIES"]
D2["EARLY SORTIES"]
D3["CALL FOR RELIEF"]
D1 --> D2 --> D3
end
%% SECTOR II
subgraph S2["🛠 REDUCTION & BREACH"]
direction TB
B1["TREBUCHETS"]
B2["FIRE ATTACKS"]
B3["MOAT FILLING"]
B1 --> B2 --> B3
B4["SAPPING"]
B5["BATTERING RAMS"]
B6["SIEGE TOWERS"]
B4 --> B5 --> B6
C1["COUNTER BATTERY"]
C2["ARCHERS"]
C3["COUNTER MINES"]
C1 --> C2 --> C3
end
%% SECTOR III
subgraph S3["☠ ATTRITION & NEGOTIATION"]
direction TB
E1["STARVATION"]
E2["DISEASE"]
E3["SURRENDER TERMS"]
E1 --> E2 --> E3
F1["RATIONING"]
F2["WATER SUPPLY"]
F3["WAIT FOR RELIEF"]
F1 --> F2 --> F3
end
%% SECTOR IV
subgraph S4["⚔ ASSAULT • RELIEF • PURSUIT"]
direction TB
G1["CONDITIONAL SURRENDER"]
G2["FINAL ASSAULT"]
G3["RELIEF ARMY"]
G4["SALLY OUT"]
G5["CAVALRY PURSUIT"]
G6["CAPTURE CAMP"]
G1 --> G2
G2 --> G3
G3 --> G4
G4 --> G5
G5 --> G6
end
%% MAIN SEQUENCE
S1 ==> S2
S2 ==> S3
S3 ==> S4
%% COLORS
style S1 fill:#1c0000,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style S2 fill:#201000,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style S3 fill:#002010,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style S4 fill:#001020,stroke:#0066FF,stroke-width:4px,color:dodgerblue
linkStyle default stroke:#0066FF,stroke-width:3px
</div>
</div>
</section>
<!-- SECTION 4 -->
<section>
<div class="siege-infographic-v4">
<div class="mermaid">
flowchart LR
%% PHASE 1
subgraph P1["🔵 PHASE 1<br>INVESTMENT & CONTAINMENT"]
direction TB
P1IMG["🏰 CASTLE<br>⛺ SIEGE CAMPS"]
P1A["⚔ ATTACKER<br><br>• Encirclement<br>• Contravallation<br>• Circumvallation<br>• Camp Construction"]
P1D["🛡 DEFENDER<br><br>• Gather Supplies<br>• Early Sorties<br>• Signal Fires<br>• Call Relief Army"]
P1IMG --> P1A
P1IMG --> P1D
end
%% PHASE 2
subgraph P2["🟣 PHASE 2<br>REDUCTION & PREPARATION"]
direction TB
P2IMG["🛠 TREBUCHET<br>🔥 BOMBARDMENT"]
P2A["⚔ ATTACKER<br><br>• Artillery Bombardment<br>• Fire Projectiles<br>• Biological Warfare<br>• Moat Filling"]
P2D["🛡 DEFENDER<br><br>• Counter Battery<br>• Ballistas<br>• Archery Suppression<br>• Reinforce Walls"]
P2IMG --> P2A
P2IMG --> P2D
end
%% PHASE 3
subgraph P3["🟠 PHASE 3<br>BREACH OPERATIONS"]
direction TB
P3IMG["⛏ SAPPERS<br>🧱 WALL COLLAPSE"]
P3A["⚔ ATTACKER<br><br>• Mining<br>• Rams<br>• Siege Towers<br>• Wall Breach"]
P3D["🛡 DEFENDER<br><br>• Counter Mines<br>• Drop Hazards<br>• Machicolations<br>• Tunnel Combat"]
P3IMG --> P3A
P3IMG --> P3D
end
%% PHASE 4
subgraph P4["🟡 PHASE 4<br>ATTRITION & NEGOTIATION"]
direction TB
P4IMG["☠ STARVATION<br>📜 NEGOTIATION"]
P4A["⚔ ATTACKER<br><br>• Waiting Game<br>• Disease Control<br>• Starvation Pressure<br>• Parley"]
P4D["🛡 DEFENDER<br><br>• Strict Rationing<br>• Water Management<br>• Preserve Supplies<br>• Await Relief"]
P4IMG --> P4A
P4IMG --> P4D
end
%% PHASE 5
subgraph P5["🔷 PHASE 5<br>FINAL ASSAULT & RESOLUTION"]
direction TB
S1["🤝 OUTCOME A<br>CONDITIONAL<br>SURRENDER"]
S2["🔥 OUTCOME B<br>STORMING<br>& FALL"]
S3["🏳 OUTCOME C<br>LIFTING<br>THE SIEGE"]
end
%% PHASE 6
subgraph P6["🟢 PHASE 6<br>PURSUIT & COUNTER-OFFENSIVE"]
direction TB
P6IMG["🐎 CAVALRY PURSUIT"]
P6D["🛡 PURSUER<br><br>• Sally Out<br>• Cavalry Harassment<br>• Destroy Engines<br>• Capture Camp"]
P6A["⚔ RETREATING FORCE<br><br>• Rear Guard<br>• Burn Camp<br>• Abandon Equipment<br>• Route Casualties"]
P6IMG --> P6D
P6IMG --> P6A
end
%% MAIN PANORAMA FLOW
P1 ==> P2
P2 ==> P3
P3 ==> P4
P4 ==> P5
P5 --> S1
P5 --> S2
P5 --> S3
S3 --> P6
%% RESOLUTION BOARD
subgraph RES["⚔ SIEGE RESOLUTION FLOW"]
direction LR
R0["🏰 SIEGE"]
R1["🤝 SURRENDER"]
R2["🔥 ASSAULT"]
R3["🛡 RELIEF"]
R4["🐎 PURSUIT"]
R0 --> R1
R1 --> R2
R2 --> R3
R3 --> R4
R1 --> R11["Terms of Accord"]
R1 --> R12["Garrison Vacates"]
R2 --> R21["Breach Assault"]
R2 --> R22["Looting & Fall"]
R3 --> R31["Relieving Army"]
R3 --> R32["Attacker Retreat"]
R4 --> R41["Sally Out"]
R4 --> R42["Harass Rear"]
R4 --> R43["Capture Camp"]
end
%% COLORS
style P1 fill:#001030,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P2 fill:#150030,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P3 fill:#301000,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P4 fill:#302500,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P5 fill:#002530,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P6 fill:#003010,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style S1 fill:#001a40,stroke:#0066FF,color:dodgerblue
style S2 fill:#400010,stroke:#0066FF,color:dodgerblue
style S3 fill:#102030,stroke:#0066FF,color:dodgerblue
style RES fill:#050d18,stroke:#0066FF,stroke-width:3px,color:dodgerblue
linkStyle default stroke:#0066FF,stroke-width:3px
</div>
</div>
</section>
<!-- SECTION 5 -->
<section>
<div id="siege-panorama-container">
<div class="siege-title">PHASES OF PROLONGED MEDIEVAL SIEGE WARFARE</div>
<div class="siege-subtitle">ATTACK • DEFENSE • ATTRITION • ASSAULT • RELIEF • PURSUIT</div>
<div class="siege-scroll">
<div class="mermaid">
flowchart LR
ROOT["⚜️ MEDIEVAL SIEGE WARFARE CAMPAIGN ⚜️️"]
%% PHASE 1
subgraph P1["① INVESTMENT & CONTAINMENT"]
direction TB
P1A["🏰 CASTLE<br>⛺ CAMPS<br>🚩 ENCIRCLEMENT"]
P1B["⚔ ATTACKER<br><br>Contravallation<br><br>Circumvallation<br><br>Camp Construction<br><br>Supply Isolation"]
P1C["🛡 DEFENDER<br><br>Gather Supplies<br><br>Sorties<br><br>Signal Fires<br><br>Relief Requests"]
P1A --> P1B
P1A --> P1C
end
%% PHASE 2
subgraph P2["② REDUCTION & PREPARATION"]
direction TB
P2A["🛠 TREBUCHETS<br>🔥 FIREBALLS"]
P2B["⚔ ATTACKER<br><br>Bombardment<br><br>Moat Filling<br><br>Psychological Warfare<br><br>Approach Engineering"]
P2C["🛡 DEFENDER<br><br>Counter Battery<br><br>Crossbows<br><br>Ballistas<br><br>Wall Reinforcement"]
P2A --> P2B
P2A --> P2C
end
%% PHASE 3
subgraph P3["③ BREACH OPERATIONS"]
direction TB
P3A["⛏ SAPPERS<br>🧱 WALL BREACH"]
P3B["⚔ ATTACKER<br><br>Mining<br><br>Rams<br><br>Siege Towers<br><br>Tunnels"]
P3C["🛡 DEFENDER<br><br>Counter Mining<br><br>Drop Hazards<br><br>Machicolations<br><br>Tunnel Combat"]
P3A --> P3B
P3A --> P3C
end
%% PHASE 4
subgraph P4["④ ATTRITION & NEGOTIATION"]
direction TB
P4A["☠ STARVATION<br>📜 PARLEY<br>💧 WATER"]
P4B["⚔ ATTACKER<br><br>Disease Pressure<br><br>Starvation<br><br>Negotiation<br><br>Waiting Game"]
P4C["🛡 DEFENDER<br><br>Rationing<br><br>Water Control<br><br>Morale<br><br>Relief Hope"]
P4A --> P4B
P4A --> P4C
end
%% PHASE 5
subgraph P5["⑤ ASSAULT & RESOLUTION"]
direction TB
S1["🤝 SURRENDER"]
S2["⚔ STORMING"]
S3["🏳 LIFTING THE SIEGE"]
end
%% PHASE 6
subgraph P6["⑥ COUNTER-OFFENSIVE"]
direction TB
P6A["🐎 CAVALRY PURSUIT"]
P6B["🛡 PURSUER<br><br>Sally Out<br><br>Capture Camp<br><br>Destroy Engines<br><br>Take Prisoners"]
P6C["⚔ RETREATING FORCE<br><br>Rear Guard<br><br>Scorched Camp<br><br>Route Casualties<br><br>Abandon Gear"]
P6A --> P6B
P6A --> P6C
end
%% FLOW
ROOT ==> P1
P1 ==> P2
P2 ==> P3
P3 ==> P4
P4 ==> P5
P5 --> S1
P5 --> S2
P5 --> S3
S3 ==> P6
%% RESOLUTION BOARD
subgraph RES["SIEGE RESOLUTION FLOW"]
direction LR
R0["🏰 RESOLUTION"]
R1["🤝 SURRENDER"]
R2["⚔ ASSAULT"]
R3["🛡 RELIEF"]
R4["🐎 PURSUIT"]
R0 --> R1
R1 --> R2
R2 --> R3
R3 --> R4
R1 --> A1["Terms Of Accord"]
R1 --> A2["Garrison Vacates"]
R2 --> B1["Breach Assault"]
R2 --> B2["Looting & Fall"]
R3 --> C1["Relieving Army"]
R3 --> C2["Attacker Retreat"]
R4 --> D1["Sally Out"]
R4 --> D2["Rear Harassment"]
R4 --> D3["Capture Camp"]
end
%% COLORS
style ROOT fill:#0c001a,stroke:#0066FF,stroke-width:8px,color:dodgerblue
style P1 fill:#000a1a,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P2 fill:#0d001a,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P3 fill:#1a0800,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P4 fill:#1a1500,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P5 fill:#001a1a,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style P6 fill:#001a0a,stroke:#0066FF,stroke-width:4px,color:dodgerblue
style RES fill:#050505,stroke:#0066FF,stroke-width:5px,color:dodgerblue
linkStyle default stroke:#0066FF,stroke-width:3px
</div>
</div>
<div class="siege-footer">WALLS DELAY • SUPPLIES DECIDE • TIME CONQUERS ALL</div>
</div>
</section>
<!-- Global Mermaid Initialization -->
<script>
mermaid.initialize({
startOnLoad: true,
securityLevel: 'loose',
theme: 'base',
flowchart: {
useMaxWidth: false,
htmlLabels: true,
curve: 'basis',
nodeSpacing: 140,
rankSpacing: 220
},
themeVariables: {
background: '#000000',
fontFamily: 'Segoe UI, Arial, sans-serif',
primaryTextColor: 'dodgerblue',
lineColor: '#0066FF',
primaryColor: '#050505',
secondaryColor: '#0a0a0a',
tertiaryColor: '#000000',
fontSize: '20px'
}
});
</script>
</body>
</html>
Comments
Post a Comment