-
Notifications
You must be signed in to change notification settings - Fork 0
/
one.html
97 lines (82 loc) · 4.67 KB
/
one.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(40vw, 200px);" class="verticont">
<h1>
<p style="color: white;">
Section 1
</p>
[Intrigues of Infringement]
</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>
The ethics of training AI on copyrighted and non-copyrighted works presents a moral maze that has captured the attention of both researchers and the general public. In the pursuit of advancing artificial intelligence, algorithms are often trained on vast datasets, which may include works protected by copyright. The question arises: is it ethical for AI to consume and learn from intellectual property without consent, potentially creating new works that resemble or even reproduce elements of the original content? As AI grows more adept at mimicking styles, techniques, and structures, it challenges traditional notions of authorship, ownership, and fair use.
</p>
<br/>
<p>
Yet, the matter is far from black and white. On the other side of the debate, there are those who argue that AI’s ability to learn from both copyrighted and non-copyrighted works can foster innovation, creativity, and knowledge in ways previously unimaginable. By drawing from a wide range of sources, AI can synthesize ideas, solve problems, and provide insights that benefit society at large. However, as this technology becomes more integrated into industries like art, literature, and music, questions about the balance between fair use, copyright protections, and the potential for exploitation intensify. In the end, the morality of AI’s interaction with these works remains an open, evolving question that will require careful deliberation.
</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="./gameone.html" style="width:100%;height:500px"></iframe>
</p>
</div>
<hr>
<div class="verticont">
<a href="two.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>