-
Notifications
You must be signed in to change notification settings - Fork 0
/
two.html
96 lines (82 loc) · 4.82 KB
/
two.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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div style="background-color: black; height: min(40vw, 200px);" class="verticont">
<h1>
<p style="color: white;">
Section 2
</p>
[The Enemy of Equity: Bias]
</h1>
</div>
<div style="display: flex;">
<div style="width: 33vw; float: left; overflow-y: scroll; height: calc(90vh - min(40vw, 200px)); padding: 20px 2vw 2vh 2vh;">
<h2>
Important!
</h2>
<p>
AI, or artificial intelligence, has rapidly grown to be a force of transformation in virtually every field, from healthcare to entertainment, causing both awe and concern. Amid its stunning progress, however, there lurks an often-overlooked issue: bias. As AI learns from data, it inevitably absorbs the biases embedded within those datasets, whether they stem from societal inequalities, historical prejudice, or incomplete representations. This results in algorithms that can perpetuate or even amplify these biases, leading to unintended, and sometimes harmful, outcomes. In this sense, the wonder of AI becomes a double-edged sword, one that could unintentionally reinforce discriminatory practices or undermine fairness.
</p>
<br/>
<p>
To avoid these pitfalls, AI developers must take deliberate, careful steps toward reducing bias in their algorithms. This includes curating diverse, representative datasets that accurately reflect the breadth of human experience, rather than relying on datasets that may reinforce narrow, skewed perspectives. Moreover, transparency is key—developers must not only understand the data they feed into AI but also the potential consequences of those inputs. Ongoing testing and evaluation of AI systems for fairness, alongside the involvement of ethicists and community stakeholders, can help identify and mitigate bias before it has real-world impacts. In a world where the influence of AI is only set to expand, the responsibility of building impartial, equitable systems rests squarely on the shoulders of those who shape its future.
</p>
</div>
<div style="width: 67vw; padding: 20px 2vw 2vh 2vh;">
<h2>
Interactive!
</h2>
<div style="height: calc((90vh - min(40vw, 200px)) * 0.8 - 75px)">
<p>
<iframe src="./gametwo.html" style="width: 100%; height: 400px;"></iframe>
</p>
</div>
<hr>
<div class="verticont">
<a href="three.html">
<img src="next.png" style="height: calc((90vh - min(40vw, 200px)) * 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>