-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
120 lines (107 loc) · 4.22 KB
/
index.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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lifespan Grid Visualization</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
#grid {
display: flex;
gap: 1px;
border: 1px solid #ccc;
}
.column {
display: flex;
flex-direction: column;
width: 10px;
}
.square {
width: 8px;
height: 8px;
border: 1px solid #ccc;
}
/* CSS for completed squares with moiré pattern */
.square.completed {
background-color: #000; /* Dark background */
background-image:
linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent),
linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
background-size: 4px 4px;
opacity: 0.8; /* Make sure the effect is visible */
}
#birthdate {
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Lifespan Grid Visualization</h1>
<p>Each column represents a year, filled from top to bottom. Gradient represents expected health over 80 years.</p>
<input type="date" id="birthdate">
<div id="grid"></div>
<script>
const grid = document.getElementById('grid');
const birthdateInput = document.getElementById('birthdate');
const totalYears = 80;
const weeksPerYear = 52;
// Create grid
for (let year = 0; year < totalYears; year++) {
const column = document.createElement('div');
column.classList.add('column');
for (let week = 0; week < weeksPerYear; week++) {
const square = document.createElement('div');
square.classList.add('square');
column.appendChild(square);
}
grid.appendChild(column);
}
function updateGrid() {
const birthdate = new Date(birthdateInput.value);
const today = new Date();
if ('URLSearchParams' in window) {
const url = new URL(window.location)
url.searchParams.set("birthdate", birthdate.toISOString().substring(0,10))
history.pushState(null, '', url);
}
const ageInWeeks = Math.floor((today - birthdate) / (7 * 24 * 60 * 60 * 1000));
const columns = grid.getElementsByClassName('column');
for (let year = 0; year < totalYears; year++) {
const column = columns[year];
const squares = column.getElementsByClassName('square');
// Calculate gradient color based on year
const hue = 200 + (40 * year / totalYears);
const opacity = 100 - (100 * (year / totalYears) * (year / totalYears));
const gradientColor = `hsl(${hue}, ${opacity}%, 50%)`;
for (let week = 0; week < weeksPerYear; week++) {
const weekIndex = year * weeksPerYear + week;
if (weekIndex < ageInWeeks) {
squares[week].style.backgroundColor = "#0a0a0a";
squares[week].classList.add('completed');
} else {
squares[week].style.backgroundColor = gradientColor; // Future weeks
}
}
}
}
function getQueryParams() {
const params = new URLSearchParams(window.location.search);
return {
birthdate: params.get('birthdate')
};
}
const queryParams = getQueryParams();
if (queryParams.birthdate) {
birthdateInput.value = queryParams.birthdate;
updateGrid();
}
birthdateInput.addEventListener('change', updateGrid);
</script>
</body>
</html>