-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex2.html
More file actions
272 lines (258 loc) · 17.5 KB
/
index2.html
File metadata and controls
272 lines (258 loc) · 17.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Contested Landscape: 16th Century Moroccan Architecture</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: Warm Neutrals -->
<!-- Application Structure Plan: The SPA is designed as a thematic, single-page narrative. It starts with a broad geographical context (the map), allowing users to visually anchor themselves. The core of the app is a three-column comparative layout, which is the most effective way to help users understand the primary thesis of the report: the stark contrast between the Portuguese, Saadian, and Vernacular styles. This structure prioritizes direct comparison over the linear format of the source report. Deep-dive sections for the Souk and Fortress follow, allowing for focused exploration of key concepts. This user flow—from broad context to direct comparison to specific deep dives—is designed for intuitive understanding and discovery. -->
<!-- Visualization & Content Choices:
- Report Info: Comparative philosophies (Defense, Privacy, etc.). Goal: Compare. Viz: Radar Chart (Chart.js). Justification: Best for multi-axial comparison of different subjects.
- Report Info: Key materials used by each culture. Goal: Compare. Viz: Bar Chart (Chart.js). Justification: Simple, clear comparison of quantities/importance.
- Report Info: Souk layout hierarchy. Goal: Organize. Viz: HTML/CSS Diagram. Justification: Provides full control over layout and styling for a conceptual flow, avoiding prohibited libraries.
- Report Info: Fortress bastions. Goal: Inform/Organize. Viz: HTML/CSS Diagram. Justification: Best for representing a specific spatial layout clearly.
- Report Info: Map of key locations. Goal: Organize/Navigate. Viz: Image with HTML overlays. Justification: Creates a simple, interactive navigation hub without complex libraries.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
background-color: #F4F1DE;
color: #3D405B;
font-family: 'Source Sans 3', sans-serif;
}
h1, h2, h3 {
font-family: 'Lora', serif;
}
.chart-container {
position: relative;
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
height: 300px;
}
@media (min-width: 768px) {
.chart-container {
height: 350px;
}
}
.map-point {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.map-point:hover {
transform: scale(1.1);
box-shadow: 0 0 15px rgba(224, 122, 95, 0.7);
}
.diagram-node {
border: 2px solid #81B29A;
background-color: #F4F1DE;
color: #3D405B;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
text-align: center;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.diagram-arrow {
font-size: 1.5rem;
color: #E07A5F;
line-height: 1;
}
</style>
</head>
<body class="antialiased">
<header class="text-center py-12 px-4 bg-white/30">
<h1 class="text-4xl md:text-5xl font-bold text-[#3D405B]">The Contested Landscape</h1>
<p class="text-lg md:text-xl mt-2 text-[#E07A5F]">An Interactive Exploration of 16th Century Architecture in Doukkala, Morocco</p>
</header>
<main class="container mx-auto px-4 py-8 md:py-12 space-y-16">
<section id="map-section">
<div class="text-center max-w-3xl mx-auto mb-8">
<h2 class="text-3xl font-bold mb-4">A Land of Three Worlds</h2>
<p class="text-lg leading-relaxed">The 16th-century Doukkala plains were a crossroads where distinct cultures converged. European military power, sophisticated Moroccan urbanism, and timeless rural traditions each left their unique mark on the landscape. Click on the map locations below to navigate and explore the architectural story of this contested region.</p>
</div>
<div class="relative w-full max-w-4xl mx-auto rounded-lg shadow-lg bg-[#81B29A]/20 p-4">
<img src="https://placehold.co/1200x600/F4F1DE/3D405B?text=Map+of+the+Doukkala+Region" alt="Stylized map of the Doukkala region" class="w-full h-auto rounded">
<a href="#style-portuguese" class="map-point absolute top-[40%] left-[25%] transform -translate-x-1/2 -translate-y-1/2 bg-[#E07A5F] text-white p-3 rounded-full shadow-md cursor-pointer block text-center">
<span class="font-bold">Fortress</span>
</a>
<a href="#style-saadian" class="map-point absolute top-[30%] left-[50%] transform -translate-x-1/2 -translate-y-1/2 bg-[#81B29A] text-white p-3 rounded-full shadow-md cursor-pointer block text-center">
<span class="font-bold">City</span>
</a>
<a href="#style-vernacular" class="map-point absolute top-[65%] left-[60%] transform -translate-x-1/2 -translate-y-1/2 bg-[#F2CC8F] text-[#3D405B] p-3 rounded-full shadow-md cursor-pointer block text-center">
<span class="font-bold">Plains</span>
</a>
</div>
</section>
<section id="comparison-section">
<div class="text-center max-w-3xl mx-auto mb-12">
<h2 class="text-3xl font-bold mb-4">An Architectural Triad</h2>
<p class="text-lg leading-relaxed">The profound differences in worldview between the Portuguese, the Saadians, and the local tribes are vividly expressed in their architectural philosophies. The chart below visualizes these opposing values, while the sections that follow offer a direct comparison of their key features and building techniques.</p>
</div>
<div class="bg-white/50 rounded-lg shadow-md p-6 md:p-8 mb-12">
<div class="chart-container mx-auto h-80 md:h-96">
<canvas id="philosophyChart"></canvas>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<article id="style-portuguese" class="bg-white/50 rounded-lg shadow-md p-6 border-t-4 border-[#E07A5F]">
<h3 class="text-2xl font-bold mb-3">The Portuguese Fortress</h3>
<p class="text-sm font-semibold text-[#E07A5F] mb-4">PHILOSOPHY: IMPOSITION & DEFENSE</p>
<p class="mb-6">A transplanted piece of Renaissance Europe, designed for military projection and cultural isolation. Its form was dictated by the science of artillery warfare, creating a self-sufficient bastion against a perceived hostile landscape.</p>
<ul class="space-y-3 text-sm">
<li class="flex items-start"><span class="text-[#E07A5F] mr-2">✚</span> <strong>Key Structure:</strong> Star-shaped Fort (*Trace Italienne*)</li>
<li class="flex items-start"><span class="text-[#E07A5F] mr-2">✚</span> <strong>Core Concept:</strong> Outward-facing military power</li>
<li class="flex items-start"><span class="text-[#E07A5F] mr-2">✚</span> <strong>Aesthetic:</strong> Manueline (Late Gothic) interiors</li>
<li class="flex items-start"><span class="text-[#E07A5F] mr-2">✚</span> <strong>Materials:</strong> Massive cut stone, military-grade masonry</li>
</ul>
</article>
<article id="style-saadian" class="bg-white/50 rounded-lg shadow-md p-6 border-t-4 border-[#81B29A]">
<h3 class="text-2xl font-bold mb-3">The Saadian Urban House</h3>
<p class="text-sm font-semibold text-[#81B29A] mb-4">PHILOSOPHY: INTROSPECTION & OPULENCE</p>
<p class="mb-6">An architecture of privacy and intricate beauty, reflecting the cultural confidence of the Saadian "renaissance." Homes were inward-facing sanctuaries, shielding the family's life from the street behind lavishly decorated interiors.</p>
<ul class="space-y-3 text-sm">
<li class="flex items-start"><span class="text-[#81B29A] mr-2">✚</span> <strong>Key Structure:</strong> Courtyard House (*Dar/Riad*)</li>
<li class="flex items-start"><span class="text-[#81B29A] mr-2">✚</span> <strong>Core Concept:</strong> Inward-facing domestic privacy (*Hurma*)</li>
<li class="flex items-start"><span class="text-[#81B29A] mr-2">✚</span> <strong>Aesthetic:</strong> Hispano-Moorish surface decoration</li>
<li class="flex items-start"><span class="text-[#81B29A] mr-2">✚</span> <strong>Materials:</strong> *Zellij* tile, carved stucco, cedarwood</li>
</ul>
</article>
<article id="style-vernacular" class="bg-white/50 rounded-lg shadow-md p-6 border-t-4 border-[#F2CC8F]">
<h3 class="text-2xl font-bold mb-3">The Vernacular Tazota</h3>
<p class="text-sm font-semibold text-[#F2CC8F] mb-4">PHILOSOPHY: SYMBIOSIS & FUNCTION</p>
<p class="mb-6">A unique architecture born from the land itself. The *Tazota* is a masterpiece of function, built without mortar from the very stones cleared from the fields for farming. It represents a perfect cycle of sustainability and adaptation.</p>
<ul class="space-y-3 text-sm">
<li class="flex items-start"><span class="text-[#F2CC8F] mr-2">✚</span> <strong>Key Structure:</strong> Dry-stone Dwelling (*Tazota*)</li>
<li class="flex items-start"><span class="text-[#F2CC8F] mr-2">✚</span> <strong>Core Concept:</strong> Symbiosis with the agricultural landscape</li>
<li class="flex items-start"><span class="text-[#F2CC8F] mr-2">✚</span> <strong>Aesthetic:</strong> Purely functional, unadorned form</li>
<li class="flex items-start"><span class="text-[#F2CC8F] mr-2">✚</span> <strong>Materials:</strong> Local fieldstone, earth</li>
</ul>
</article>
</div>
</section>
<section id="deep-dive-section">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white/50 rounded-lg shadow-md p-6 md:p-8">
<h2 class="text-3xl font-bold mb-4">Deep Dive: Anatomy of a Souk</h2>
<p class="mb-6">The 16th-century Moroccan souk was not a single building but a highly organized urban system. Its layout followed a strict hierarchy, with the most valuable goods located centrally near the mosque, creating a vibrant, structured commercial heart within the city.</p>
<div class="space-y-2 flex flex-col items-center">
<div class="diagram-node w-full max-w-xs">🕌 Central Mosque</div>
<div class="diagram-arrow">▼</div>
<div class="diagram-node w-full max-w-xs">Valuable Trades (Perfumes, Gold)</div>
<div class="diagram-arrow">▼</div>
<div class="diagram-node w-full max-w-xs">Clean Guilds (Textiles, Spices)</div>
<div class="diagram-arrow">▼</div>
<div class="diagram-node w-full max-w-xs">Noisy Trades (Blacksmiths, Dyers)</div>
<div class="diagram-arrow">▼</div>
<div class="diagram-node w-full max-w-xs">City Gates & *Funduqs* (Trade Hubs)</div>
</div>
</div>
<div class="bg-white/50 rounded-lg shadow-md p-6 md:p-8">
<h2 class="text-3xl font-bold mb-4">Deep Dive: The Fortress Plan</h2>
<p class="mb-6">The Fortress of Mazagan was a masterpiece of Renaissance military engineering, the *trace italienne*. Its star-shaped design with angled bastions eliminated blind spots, allowing for devastating overlapping fields of cannon fire against any attackers.</p>
<div class="relative w-full h-64 bg-[#E07A5F]/10 rounded-lg flex items-center justify-center p-4">
<div class="absolute top-0 left-0 diagram-node m-2">St. Sebastian</div>
<div class="absolute top-0 right-0 diagram-node m-2">Angel</div>
<div class="absolute bottom-0 left-0 diagram-node m-2">St. Antoine</div>
<div class="absolute bottom-0 right-0 diagram-node m-2">Holy Ghost</div>
<div class="w-48 h-48 bg-[#E07A5F]/30 flex items-center justify-center text-center font-bold text-[#3D405B]">Central City</div>
</div>
</div>
</div>
</section>
<section id="synthesis-section">
<div class="text-center max-w-3xl mx-auto">
<h2 class="text-3xl font-bold mb-4">A Synthesis Written in Stone</h2>
<p class="text-lg leading-relaxed">The built environment of 16th-century Doukkala is a powerful historical record. The imposing walls of Mazagan speak of global ambition and conflict. The hidden courtyards of Azemmour reflect a golden age of cultural sophistication. The humble stone *Tazotas* of the plains testify to the resilience of local life. Together, they tell a layered story of a landscape shaped by profoundly different worlds, all written in its stones, plaster, and earth.</p>
</div>
</section>
</main>
<footer class="text-center mt-12 py-8 border-t border-[#3D405B]/20">
<p class="text-sm text-[#3D405B]/80">Interactive application based on the report "The Contested Landscape."</p>
<p class="text-xs text-[#3D405B]/60 mt-1">Designed and developed to make history explorable.</p>
</footer>
<script>
const chartColors = {
portuguese: 'rgba(224, 122, 95, 0.7)',
saadian: 'rgba(129, 178, 154, 0.7)',
vernacular: 'rgba(242, 204, 143, 0.7)',
portugueseBorder: 'rgb(224, 122, 95)',
saadianBorder: 'rgb(129, 178, 154)',
vernacularBorder: 'rgb(242, 204, 143)',
grid: 'rgba(61, 64, 91, 0.2)',
ticks: '#3D405B'
};
const philosophyCtx = document.getElementById('philosophyChart').getContext('2d');
new Chart(philosophyCtx, {
type: 'radar',
data: {
labels: ['Defense', 'Public Display', 'Privacy', 'Decoration', 'Functionality', 'Environmental Link'],
datasets: [{
label: 'Portuguese',
data: [9, 8, 2, 4, 6, 1],
backgroundColor: chartColors.portuguese,
borderColor: chartColors.portugueseBorder,
borderWidth: 2,
pointBackgroundColor: chartColors.portugueseBorder
}, {
label: 'Saadian',
data: [4, 5, 9, 9, 7, 5],
backgroundColor: chartColors.saadian,
borderColor: chartColors.saadianBorder,
borderWidth: 2,
pointBackgroundColor: chartColors.saadianBorder
}, {
label: 'Vernacular',
data: [5, 1, 6, 1, 10, 10],
backgroundColor: chartColors.vernacular,
borderColor: chartColors.vernacularBorder,
borderWidth: 2,
pointBackgroundColor: chartColors.vernacularBorder
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: chartColors.ticks,
font: { size: 14 }
}
},
tooltip: {
callbacks: {
title: function(tooltipItems) {
return tooltipItems[0].dataset.label;
},
label: function(context) {
return context.label + ': ' + context.raw;
}
}
}
},
scales: {
r: {
angleLines: { color: chartColors.grid },
grid: { color: chartColors.grid },
pointLabels: {
color: chartColors.ticks,
font: { size: 12 }
},
ticks: {
backdropColor: '#F4F1DE',
color: chartColors.ticks
}
}
}
}
});
</script>
</body>
</html>