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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BETSY - BETting SYstem</title>
<style>
.calendar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
max-width: 1200px;
margin: 20px auto;
padding: 20px;
}
.tip-box {
// background-color: #e0f7fa;
// border: 2px solid #00acc1;
// border-radius: 8px;
background-color: #87ceeb;
padding: 30px;
aspect-ratio: 1/1;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease;
color: #000000;
}
.tip-box.completed {
// background-color: #eceff1;
// border-color: #b0bec5;
background-color: #4682b4;
color: #ffffff;
}
.tip-header {
font-family: Verdana;
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
// color: #00796b;
// color: #000000;
}
.tip-content {
flex-grow: 1;
width: 100%;
}
select {
width: 100%;
padding: 5px;
margin: 5px 0;
}
button {
background-color: #00897b;
font-size: 15px;
font-weight: bold;
color: white;
// border: none;
border-color: #b0bec5;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #00695c;
}
.completed select {
background-color: #cfd8dc;
color: #607d8b;
}
p {
font-size: 12px;
font-weight: normal;
}
</style>
</head>
<body>
<div class="calendar" id="calendar"></div>
<script>
const tips = [
"Champion<BR><BR><P>Winner Drivers Championship<BR><BR></P>", "Constructor<BR><BR><P>Winner Constructors Championship<BR><BR></P>", "Smallest team mate gap<P>Team mates with the smallest gap of scored point during the season</P>", "Biggest team mate gap<P>Team mates with the biggest gap of scored point during the season</P>",
"GP wins<BR><BR><P>Driver with the most GP wins of the season</P>", "Consecutive GP wins<BR><BR><P>Driver with the most consecutive GP wins of the season</P>", "Double GP wins<BR><BR><P>Team with the most P1+P2 GP wins of the season</P>", "Consecutive double GP wins<P>Team with the most consecutive P1+P2 GP wins of the season</P>",
"GP wins from pole<BR><BR><P>Driver with the most GP wins of the season starting from Pole</P>", "GP wins from behinde Pole<P>Driver with the most GP wins of the season starting from behind the Pole</P>", "GP win from worst grid position<P>Driver winning a GP from the worst grid position of the season</P>", "Highest positions gain<P>Driver with the highest amount of gained race postions during the season</P>",
"Most gained Positions<P>Driver with the most gained positions overall during the season</P>", "Team most gained positions<P>Team with the most gained positions overall during the season</P>", "Points finishes<BR><BR><P>Driver with the most finishes in the points of the season</P>", "Team points finishes<BR><BR><P>Team with the most points finishes of the season</P>",
"Leading laps<BR><BR><P>Driver with the most leading laps of the season</P>", "GP leading<BR><BR><P>Driver leading in the most number of GP during the season</P>", "Team leading laps<BR><BR><P>Team with the most leading laps of the season</P>", "Team GP leading<BR><BR><P>Team leading in the most number of GP during the season</P>",
"Podiums<BR><BR><P>Driver with the most podium finishes of the season</P>", "Team podiums<BR><BR><P>Team with the most podium positions of the season</P>", "Worst qualifying ratio<P>Team with the worst Qualifying result ratio between team mates</P>", "Worst race result ratio<P>Team with the worst Race result ratio between team mates</P>",
"Fastest laps<BR><BR><P>Driver with the most Fastest Laps of the season</P>", "Pole positions<BR><BR><P>Driver with the most Pole Positions of the season</P>", "Hattricks<BR><BR><P>Driver with the most Hattricks of the season (Pole+Win+Fastest Lap)</P>", "Grand Slams<BR><BR><P>Driver with the most Grand Slams of the season (Hattrick+leading each lap)</P>",
"Front row<BR><BR><P>Driver with the most front row grid positions of the season</P>", "Front row lockout<BR><BR><P>Team with the most front row lockouts of the season</P>", "Driver of the day<BR><BR><P>Driver with the most Driver of the Day awards of the season</P>", "Pit stop time<BR><BR><P>Team with the fastest pit stop time of the season</P>",
"DNF<BR><BR><P>Driver with the most DNF of the season<BR><BR></P>", "Team DNF<BR><BR><P>Team with the most DNF of the season<BR><BR></P>", "Team double DNF<BR><BR><P>Team with the most double DNF of the season</P>", "DNF ratio<BR><BR><P>Team with the worst DNF ratio between the team colleagues during the season</P>",
"Biggest qualifying gap<P>Team with the biggest gap in positions between team mates in a Qualifying</P>", "Biggest race result gap<P>Team with the biggest gap in positions between team mates in a Race</P>", "Smallest qualifying gap<P>Team with the smallest gap in positions between team mates in a Qualifying</P>", "Smallest race result gap<P>Team with the smallest gap in positions between team mates in a Race</P>"
];
const participants = [
"Verstappen", "Perez", "Hamilton", "Russell",
"Leclerc", "Sainz", "Norris", "Piastri",
"Alonso", "Stroll", "Gasly", "Ocon",
"Albon", "Sargeant", "Bottas", "Zhou",
"Tsunoda", "Ricciardo", "Magnussen", "Hulkenberg",
"Red Bull", "Mercedes", "Ferrari", "McLaren",
"Aston Martin", "Alpine", "Williams", "AlphaTauri",
"Haas"
];
function createCalendar() {
const calendar = document.getElementById('calendar');
tips.forEach((tip, index) => {
const box = document.createElement('div');
box.className = localStorage.getItem(`tip-${index}`) ? 'tip-box completed' : 'tip-box';
box.id = `tip-${index}`;
box.innerHTML = `
<div class="tip-header" align="center">${index + 1}.<br> ${tip}</div>
<div class="tip-content" align="center">
${localStorage.getItem(`tip-${index}`) ?
`<select disabled>
<option>${localStorage.getItem(`tip-${index}`)}</option>
</select>
<br><br><button onclick="enableEdit(${index})">Change</button>` :
`<br><br><br><button onclick="showOptions(${index})">Select</button>`
}
</div>
`;
calendar.appendChild(box);
});
}
function showOptions(index) {
const box = document.getElementById(`tip-${index}`);
const content = box.querySelector('.tip-content');
content.innerHTML = `
<select id="select-${index}">
${participants.map(p => `<option>${p}</option>`).join('')}
</select>
<br><br><button onclick="submitSelection(${index})">Submit</button>
`;
}
function submitSelection(index) {
const selection = document.getElementById(`select-${index}`).value;
const box = document.getElementById(`tip-${index}`);
box.classList.add('completed');
box.querySelector('.tip-content').innerHTML = `
<select disabled>
<option>${selection}</option>
</select>
<br><br><button onclick="enableEdit(${index})">Change</button>
`;
localStorage.setItem(`tip-${index}`, selection);
}
function enableEdit(index) {
const box = document.getElementById(`tip-${index}`);
box.classList.remove('completed');
box.querySelector('.tip-content').innerHTML = `
<br><br><br><button onclick="showOptions(${index})">Select</button>
`;
localStorage.removeItem(`tip-${index}`);
}
// Initialize calendar on load
window.onload = createCalendar;
</script>
<P><BR><BR></P>
<P><BR><BR></P>
<div align='center'><font face='Arial, Helvetica, sans-serif' size='3'>© 2026 - GRID TIP</font></div>
</body>
</html>
|