-
Notifications
You must be signed in to change notification settings - Fork 0
/
entries.html
155 lines (131 loc) · 5.11 KB
/
entries.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Nano River | Current Entries</title>
<style>
td:nth-child(3) {
cursor: pointer;
}
/* Media query for desktop screens */
@media (min-width: 768px) {
td:nth-child(1) {
width: 5%; /* Adjust the width as per your preference */
}
td:nth-child(2) {
width: 5%; /* Adjust the width as per your preference */
}
td:nth-child(3) {
text-align: left; /* Adjust the width as per your preference */
}
}
/* Media query for smaller screens (like mobile) */
@media (max-width: 767px) {
td:nth-child(3) {
font-size: 16px; /* Adjust the font size as per your preference */
width: auto; /* Allow columns to size dynamically */
text-align: left;
vertical-align: top;
font-weight: bold; /* Force bold text */
}
td:nth-child(1) {
width: auto; /* Allow columns to size dynamically */
}
/* Ensure the table has fixed width and height */
table {
width: 100%; /* Preserve the table width */
height: 200px; /* Example: Set a fixed height for demonstration */
table-layout: fixed; /* Ensures table respects defined widths */
border-collapse: collapse; /* Ensure cells are flush against each other */
}
/* Styling for table cells (optional) */
td {
padding: 10px;
text-align: center;
}
/* Ensure ADDRESS column wraps on smaller screens */
td:nth-child(3) {
white-space: normal; /* Allow text to wrap */
word-wrap: break-word; /* Break words to fit within the cell */
}
td:nth-child(1) {
width: 12.5%; /* Allow text to wrap */
}
</style>
</head>
<body>
<header>
<div id="logo-container">
<img id="logo" src="/logo.png" alt="Nano Raffle Logo">
</div>
</header>
<nav>
<a href="/" class="navlink">HOME</a>
<a href="/winners.html" class="navlink">WINNERS</a>
<a href="/about.html" class="navlink">ABOUT</a>
<select onchange="window.location.href=this.value">
<option value="#" selected disabled>Menu</option>
<option value="/">Home</option>
<option value="winners.html">Winners</option>
<option value="about.html">About</option>
</select>
</nav>
<main id="secondary">
<h1 id="pageTitle">CURRENT ENTRIES</h1>
<hr class="divider">
<table>
<tbody id="entriesTableBody">
<!-- Example rows -->
<tr>
<td>Entry 1</td>
<td><img src="https://via.placeholder.com/100" alt="Entry Image"></td>
<td>Address 1</td>
</tr>
<tr>
<td>Entry 2</td>
<td><img src="https://via.placeholder.com/100" alt="Entry Image"></td>
<td>Address 2</td>
</tr>
<!-- Add more rows dynamically via JavaScript -->
</tbody>
</table>
</main>
<script>
// Function to fetch entries data and populate the table
function fetchEntriesData() {
fetch('/entries.json')
.then(response => response.json())
.then(data => {
const entriesTableBody = document.getElementById('entriesTableBody');
// Clear previous table rows
entriesTableBody.innerHTML = '';
// Populate the table with data
data.forEach(entry => {
const row = document.createElement('tr');
row.innerHTML = `
<td><b>${entry.entry}</b></td>
<td><img src="data:image/png;base64,${entry.avatar}" alt="Entry Image" style="max-width: 100px; max-height: 100px;"></td>
<td onclick="copyToClipboard('${entry.address}')">${entry.address}</td>
`;
entriesTableBody.appendChild(row);
});
});
}
// Initial call to fetch and display entries data
fetchEntriesData();
// Update entries data every 5 minutes (adjust as needed)
setInterval(fetchEntriesData, 300000); // 300000 milliseconds = 5 minutes
// Function to copy entry's address to clipboard and show alert
function copyToClipboard(address) {
navigator.clipboard.writeText(address);
alert(`Address copied to clipboard: ${address}`);
}
</script>
<hr class="divider">
<footer style="color: white;">Made with <span style="color: red;">❤️</span> by <a href="https://github.com/blockracer" style="color: white;">@blockracer</a></footer>
</body>
</html>