-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfour.html
97 lines (82 loc) · 4.66 KB
/
four.html
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="background-color: black; height: min(50vw, 300px);" class="verticont">
<h1>
<p style="color: white;">
Section 4
</p>
[Would An AI Pull the Lever?]
</h1>
</div>
<div style="display: flex;">
<div style="width: 33vw; float: left; overflow-y: scroll; height: calc(90vh - min(50vw, 300px)); padding: 20px 2vw 2vh 2vh;">
<h2>
Important!
</h2>
<p>
AI, or artificial intelligence, has emerged as the centerpiece of modern technological evolution, ushering in a new era where machines not only perform tasks but also make decisions that could shape the future. With this unprecedented power comes the unavoidable question of how these algorithms should navigate the complex moral dilemmas that arise in real-world situations. From self-driving cars deciding how to respond in accident scenarios to algorithms determining who gets hired or denied a loan, AI systems are being forced to make choices that reflect human values, ethics, and biases. The difficulty lies in programming these machines to understand, let alone act upon, the subtleties of moral reasoning.
</p>
<br/>
<p>
But the moral complexity does not stop there. As AI becomes increasingly autonomous, it raises a host of uncomfortable questions: should an AI prioritize human life over the environment, or vice versa? Can a machine truly understand the ethical implications of its actions, or does it merely calculate optimal outcomes based on pre-programmed values? These dilemmas challenge not only the technology itself but also the very essence of our moral compass. As AI's role grows, so too does the need for society to establish frameworks that ensure these systems act in ways that align with our shared ethical principles, while still respecting the intricacies of human judgment and responsibility.
</p>
</div>
<div style="width: 67vw; padding: 20px 2vw 2vh 2vh;">
<h2>
Interactive!
</h2>
<div style="height: calc((90vh - min(50vw, 300px)) * 0.8 - 75px)">
<p>
<iframe src="./gamefour.html" style="width:100%; height:350px;"></iframe>
</p>
</div>
<hr>
<div class="verticont">
<a href="end.html">
<img src="next.png" style="height: calc((90vh - min(50vw, 300px)) * 0.2 - 40px);">
</a>
<p style="padding-left: 20px;">
NEXT PAGE
</p>
</div>
</div>
</div>
<div class="dynamic-pattern">
</div>
<script>
function updateGradientPattern() {
const div = document.querySelector('.dynamic-pattern');
const divHeight = div.offsetHeight; // Get the height of the div
const divWidth = div.offsetWidth; // Get the width of the div
const numLayers = Math.floor(divHeight / 17.32) + 1; // Calculate the number of layers
const gradientParts = [];
const positions = [];
// Get the height of the viewport in pixels
const viewportHeightPx = window.innerHeight;
// Convert the div's height to viewport units (vh)
const divHeightVh = Math.floor((divHeight / viewportHeightPx) * 100);
// Build gradient layers dynamically based on div height
for (let i = 1; i <= numLayers; i++) {
const size = i; // Circle size grows by 1px per layer
gradientParts.push(`radial-gradient(circle, #00eeff ${size}px, transparent ${size + 1}px)`);
// Alternate rows for triangular pattern horizontally and vertically
const offsetX = i % 2 === 0 ? 10 : 0; // 10px shift for even rows
const offsetY = divHeightVh * 4 + 17.32 * (i - 1); // Vertical spacing between rows
positions.push(`${offsetX}px ${offsetY}px`);
}
// Apply the styles
div.style.backgroundImage = gradientParts.join(',');
div.style.backgroundSize = '20px ' + (17.32 * numLayers) + 'px'; // Repeat horizontally and vertically
div.style.backgroundPosition = positions.join(',');
div.style.backgroundRepeat = 'repeat'; // Ensure it fills the entire width and height
}
// Call the function on load and resize
updateGradientPattern();
window.addEventListener('resize', updateGradientPattern);
</script>
</body>
</html>