-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstone-age.html
More file actions
200 lines (200 loc) · 7.55 KB
/
Copy pathstone-age.html
File metadata and controls
200 lines (200 loc) · 7.55 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stone Age | Evolution of Technology</title>
<link rel="stylesheet" href="style.css" />
<style>
body.stone-age {
background:
radial-gradient(
ellipse at 60% 20%,
#fffbe6 40%,
#f7e7c2 100%
),
url("https://www.transparenttextures.com/patterns/rocky-wall.png");
background-blend-mode: lighten;
}
.stone-header-art {
width: 100%;
max-width: 700px;
margin: 1.5rem auto 2.2rem auto;
display: flex;
justify-content: center;
align-items: flex-end;
}
.stone-header-art svg {
height: 80px;
}
.interactives > div {
background: #fffbe6;
border: 2px solid #bfa142;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.body.className = "stone-age";
});
</script>
<script defer src="script.js"></script>
</head>
<body>
<header>
<nav>
<a href="index.html" class="logo">Evolution of Technology</a>
<ul>
<li>
<a href="stone-age.html" class="active">Stone Age</a>
</li>
<li><a href="ancient.html">Ancient Civilizations</a></li>
<li><a href="industrial.html">Industrial Revolution</a></li>
<li><a href="digital.html">Digital Era</a></li>
<li><a href="future.html">Future & Beyond</a></li>
</ul>
</nav>
</header>
<main>
<div class="stone-header-art">
<!-- Cave Entrance -->
<svg viewBox="0 0 140 80">
<ellipse cx="70" cy="70" rx="60" ry="10" fill="#bca17a" />
<ellipse cx="70" cy="45" rx="45" ry="35" fill="#e1c699" />
<ellipse
cx="70"
cy="45"
rx="20"
ry="15"
fill="#fffbe6"
opacity="0.09"
/>
</svg>
</div>
<h1>Stone Age</h1>
<p>
The Stone Age marks the earliest known period of human culture,
characterized by the use of stone tools, mastery of fire, and
the birth of art and language.
</p>
<h2>Key Inventions</h2>
<ul>
<li>Stone tools (hand axes, blades, scrapers)</li>
<li>Mastery of fire</li>
<li>Clothing from animal skins</li>
<li>Needle and thread</li>
<li>Early language and cave art</li>
<li>The wheel (~3500 BCE, late Neolithic)</li>
</ul>
<h2>Interactive Demos</h2>
<section class="interactives">
<div>
<h3>Spin the Wheel</h3>
<p>
Drag the wheel to spin it. The invention of the wheel
revolutionized transport and pottery.
</p>
<svg
id="stone-wheel"
width="120"
height="120"
viewBox="0 0 120 120"
style="cursor: grab; display: block; margin: auto"
>
<circle
cx="60"
cy="60"
r="48"
fill="#bca17a"
stroke="#7e5e2e"
stroke-width="10"
/>
<circle
cx="60"
cy="60"
r="18"
fill="#fff"
opacity="0.5"
/>
<!-- Spokes -->
<g id="spokes">
<line
x1="60"
y1="12"
x2="60"
y2="108"
stroke="#7e5e2e"
stroke-width="5"
/>
<line
x1="12"
y1="60"
x2="108"
y2="60"
stroke="#7e5e2e"
stroke-width="5"
/>
<line
x1="28"
y1="28"
x2="92"
y2="92"
stroke="#7e5e2e"
stroke-width="5"
/>
<line
x1="28"
y1="92"
x2="92"
y2="28"
stroke="#7e5e2e"
stroke-width="5"
/>
</g>
</svg>
</div>
<div>
<h3>Draw with Charcoal (Cave Art)</h3>
<p>
Click and drag to draw your own cave art, just like our
ancestors!
</p>
<canvas
id="cave-canvas"
width="300"
height="160"
style="
border: 1px solid #ddd;
border-radius: 8px;
background: #f5e6c9;
display: block;
margin: auto;
"
></canvas>
</div>
</section>
<h2>Life and Achievements</h2>
<p>
Early humans were hunter-gatherers, living in small nomadic
groups. They invented basic tools from flint, bone, and wood,
and learned to control fire for warmth and cooking. The
invention of the needle allowed for tailored clothing.
</p>
<h2>Art & Culture</h2>
<p>
Cave paintings (e.g., Lascaux, Altamira) depict animals, hunting
scenes, and early rituals, revealing the beginnings of spiritual
and symbolic thinking.
</p>
<blockquote>
<b>Fun Fact:</b> The oldest known stone tools are about 3.3
million years old, found in Kenya.
</blockquote>
<nav class="era-nav">
<a href="ancient.html">→ Next: Ancient Civilizations</a>
</nav>
</main>
<footer>
<p>© 2025 Evolution of Technology</p>
</footer>
</body>
</html>