Create Dockerfile
Browse files- Dockerfile +109 -0
Dockerfile
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
FROM nginx:alpine
|
| 2 |
+
|
| 3 |
+
# Create app directory
|
| 4 |
+
WORKDIR /usr/share/nginx/html
|
| 5 |
+
|
| 6 |
+
# Copy HTML file with counter component
|
| 7 |
+
RUN echo '<html>\n\
|
| 8 |
+
<head>\n\
|
| 9 |
+
<meta charset="UTF-8">\n\
|
| 10 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">\n\
|
| 11 |
+
<title>Online Users Counter</title>\n\
|
| 12 |
+
<style>\n\
|
| 13 |
+
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }\n\
|
| 14 |
+
.counter-container {\n\
|
| 15 |
+
width: 100%;\n\
|
| 16 |
+
height: 100%;\n\
|
| 17 |
+
display: flex;\n\
|
| 18 |
+
flex-direction: column;\n\
|
| 19 |
+
justify-content: center;\n\
|
| 20 |
+
align-items: center;\n\
|
| 21 |
+
background: linear-gradient(135deg, #ff0844 0%, #8000ff 50%, #0061ff 100%);\n\
|
| 22 |
+
color: white;\n\
|
| 23 |
+
text-align: center;\n\
|
| 24 |
+
padding: 20px;\n\
|
| 25 |
+
box-sizing: border-box;\n\
|
| 26 |
+
}\n\
|
| 27 |
+
.counter {\n\
|
| 28 |
+
font-size: 2.5rem;\n\
|
| 29 |
+
font-weight: bold;\n\
|
| 30 |
+
margin-bottom: 10px;\n\
|
| 31 |
+
}\n\
|
| 32 |
+
.label {\n\
|
| 33 |
+
font-size: 1.2rem;\n\
|
| 34 |
+
opacity: 0.9;\n\
|
| 35 |
+
}\n\
|
| 36 |
+
</style>\n\
|
| 37 |
+
</head>\n\
|
| 38 |
+
<body>\n\
|
| 39 |
+
<div class="counter-container">\n\
|
| 40 |
+
<div class="counter" id="visitor-count">0</div>\n\
|
| 41 |
+
<div class="label">visitors online</div>\n\
|
| 42 |
+
</div>\n\
|
| 43 |
+
\n\
|
| 44 |
+
<script>\n\
|
| 45 |
+
// Generate a persistent site ID to differentiate from other deployments\n\
|
| 46 |
+
const SITE_ID = "hf-spaces-counter-" + window.location.hostname;\n\
|
| 47 |
+
\n\
|
| 48 |
+
// Function to get a random number between min and max\n\
|
| 49 |
+
function getRandomVisitors(min, max) {\n\
|
| 50 |
+
return Math.floor(Math.random() * (max - min + 1)) + min;\n\
|
| 51 |
+
}\n\
|
| 52 |
+
\n\
|
| 53 |
+
// Function to simulate visitor count using localStorage to maintain some persistence\n\
|
| 54 |
+
function updateVisitorCount() {\n\
|
| 55 |
+
let count;\n\
|
| 56 |
+
\n\
|
| 57 |
+
// Try to get existing count from localStorage\n\
|
| 58 |
+
try {\n\
|
| 59 |
+
const stored = localStorage.getItem(SITE_ID);\n\
|
| 60 |
+
if (stored) {\n\
|
| 61 |
+
const data = JSON.parse(stored);\n\
|
| 62 |
+
// If data is recent (less than 5 minutes old), use it as base\n\
|
| 63 |
+
if (Date.now() - data.timestamp < 300000) {\n\
|
| 64 |
+
count = data.count;\n\
|
| 65 |
+
}\n\
|
| 66 |
+
}\n\
|
| 67 |
+
} catch (e) {\n\
|
| 68 |
+
console.log("Could not access localStorage");\n\
|
| 69 |
+
}\n\
|
| 70 |
+
\n\
|
| 71 |
+
// If no valid stored count, generate a base count\n\
|
| 72 |
+
if (!count) {\n\
|
| 73 |
+
count = getRandomVisitors(15, 45);\n\
|
| 74 |
+
}\n\
|
| 75 |
+
\n\
|
| 76 |
+
// Add some small random fluctuation\n\
|
| 77 |
+
const fluctuation = Math.random() > 0.5 ? 1 : (Math.random() > 0.7 ? 2 : 0);\n\
|
| 78 |
+
const direction = Math.random() > 0.4 ? 1 : -1;\n\
|
| 79 |
+
count += fluctuation * direction;\n\
|
| 80 |
+
\n\
|
| 81 |
+
// Ensure count stays reasonable\n\
|
| 82 |
+
count = Math.max(8, count);\n\
|
| 83 |
+
\n\
|
| 84 |
+
// Update display\n\
|
| 85 |
+
document.getElementById("visitor-count").textContent = count;\n\
|
| 86 |
+
\n\
|
| 87 |
+
// Store in localStorage\n\
|
| 88 |
+
try {\n\
|
| 89 |
+
localStorage.setItem(SITE_ID, JSON.stringify({\n\
|
| 90 |
+
count: count,\n\
|
| 91 |
+
timestamp: Date.now()\n\
|
| 92 |
+
}));\n\
|
| 93 |
+
} catch (e) {}\n\
|
| 94 |
+
\n\
|
| 95 |
+
// Update every 30-60 seconds\n\
|
| 96 |
+
setTimeout(updateVisitorCount, getRandomVisitors(30000, 60000));\n\
|
| 97 |
+
}\n\
|
| 98 |
+
\n\
|
| 99 |
+
// Initialize counter\n\
|
| 100 |
+
window.addEventListener("DOMContentLoaded", updateVisitorCount);\n\
|
| 101 |
+
</script>\n\
|
| 102 |
+
</body>\n\
|
| 103 |
+
</html>' > /usr/share/nginx/html/index.html
|
| 104 |
+
|
| 105 |
+
# Expose port 80
|
| 106 |
+
EXPOSE 80
|
| 107 |
+
|
| 108 |
+
# Set the command to start Nginx
|
| 109 |
+
CMD ["nginx", "-g", "daemon off;"]
|