Municipality of Drenje

Preview

The interface below is a fully functional FUI (Fictional User Interface) designed in Cyberpunk/Hard Sci-Fi style, presenting information about the Drenje region. It features decode-text animations, dynamic canvas visualizations, HUD layout, neon glows, scanlines, and interactive elements—all built with HTML, Tailwind CSS, and vanilla JavaScript. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Drenje FUI Interface</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> <style> :root { --cyan: #00ffff; --magenta: #ff00ff; --amber: #ffaa00; } body { margin: 0; overflow: hidden; font-family: 'JetBrains Mono', monospace; background-color: #050505; color: var(--cyan); } .bg-custom { background-color: #050505; } /* Grid background */ #app { background-image: linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; } /* Corner brackets */ .corner { position: absolute; width: 20px; height: 20px; border: 2px solid var(--cyan); box-shadow: 0 0 5px var(--cyan); pointer-events: none; z-index: 50; } .top-left { top: 10px; left: 10px; border-right: none; border-bottom: none; } .top-right { top: 10px; right: 10px; border-left: none; border-bottom: none; } .bottom-left { bottom: 10px; left: 10px; border-right: none; border-top: none; } .bottom-right { bottom: 10px; right: 10px; border-left: none; border-top: none; } /* Panels */ .panel { border: 1px solid rgba(0, 255, 255, 0.5); background: rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } .panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.5; } .panel::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0.3; } .panel-header { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(0, 255, 255, 0.3); padding-bottom: 0.25rem; margin-bottom: 0.75rem; color: var(--amber); text-shadow: 0 0 5px var(--amber); margin: 0 0 0.75rem 0; } /* Glitch animation */ @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } } .glitch { animation: glitch 0.2s cubic-bezier(.25, .46, .45, .94) both infinite; color: var(--magenta); } /* Scan line */ .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--cyan); opacity: 0.3; pointer-events: none; animation: scan 4s linear infinite; z-index: 100; } @keyframes scan { 0% { top: 0%; } 100% { top: 100%; } } /* Ticker */ .ticker { overflow: hidden; white-space: nowrap; position: relative; } .ticker-content { display: inline-block; padding-left: 100%; animation: ticker 30s linear infinite; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .ticker-item { display: inline-block; padding: 0 2rem; color: var(--magenta); } /* Decode text */ .decode-text { display: inline; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: rgba(0,255,255,0.1); } ::-webkit-scrollbar-thumb { background: rgba(0,255,255,0.3); } </style> </head> <body> <div id="app" class="relative w-full h-screen bg-custom overflow-hidden font-mono text-xs text-cyan-400"> <!-- Corner brackets --> <div class="corner top-left"></div> <div class="corner top-right"></div> <div class="corner bottom-left"></div> <div class="corner bottom-right"></div> <!-- Scan line --> <div class="scan-line"></div> <!-- Header --> <header class="absolute top-0 left-0 right-0 h-12 border-b border-gray-800 flex items-center justify-between px-4 bg-black bg-opacity-50 z-40"> <div class="flex items-center space-x-4"> <span class="text-cyan-400 font-bold tracking-widest text-sm">DRENJE//HR</span> <span class="px-2 py-0.5 border border-cyan-500 text-xs text-cyan-300">CROATIA</span> </div> <div class="flex items-center space-x-6"> <span class="text-amber-400 animate-pulse text-xs">SYSTEM ONLINE</span> <span id="clock" class="text-cyan-400 text-xs">00:00:00:000</span> </div> </header> <!-- Left Navigation --> <nav class="absolute top-12 left-0 bottom-20 w-16 border-r border-gray-800 bg-black bg-opacity-30 z-30"> <ul class="flex flex-col items-center py-4 space-y-6"> <li> <a href="#" class="text-cyan-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/></svg> </a> </li> <li> <a href="#" class="text-cyan-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg> </a> </li> <li> <a href="#" class="text-cyan-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> </a> </li> <li> <a href="#" class="text-cyan-400 hover:text-white transition-colors"> <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg> </a> </li> </ul> <div class="absolute bottom-4 left-0 right-0 text-center"> <span class="text-[10px] text-gray-500">v2.0.77</span> </div> </nav> <!-- Right Sidebar --> <aside class="absolute top-12 right-0 bottom-20 w-64 border-l border-gray-800 bg-black bg-opacity-30 p-4 z-30 overflow-y-auto"> <div class="mb-4"> <h3 class="panel-header text-amber-400">DATA STREAM</h3> <div id="dataLog" class="text-[10px] text-cyan-300 h-48 overflow-y-auto font-mono space-y-1"> <!-- Populated by JS --> </div> </div> <div> <h3 class="panel-header text-amber-400">CONNECTION STATUS</h3> <ul class="text-xs space-y-2"> <li class="flex justify-between"><span>Osijek-Barbana</span><span class="text-green-500">● ONLINE</span></li> <li class="flex justify-between"><span>Drenje Gateway</span><span class="text-green-500">● ONLINE</span></li> <li class="flex justify-between"><span>Satellite Link</span><span class="text-amber-400">● SYNCING</span></li> </ul> </div> </aside> <!-- Footer --> <footer class="absolute bottom-0 left-16 right-20 h-8 border-t border-gray-800 bg-black bg-opacity-50 z-40 flex items-center"> <div class="ticker w-full"> <div class="ticker-content text-xs text-magenta font-mono"> <span class="ticker-item">>> SYSTEM INITIALIZED</span> <span class="ticker-item">>> AGRICULTURAL DATA STREAM ACTIVE</span> <span class="ticker-item">>> TOPOGRAPHIC SCAN IN PROGRESS</span> <span class="ticker-item">>> HERITAGE DATABASE UPDATED</span> <span class="ticker-item">>> COMMUNITY METRICS: STABLE</span> <span class="ticker-item">>> DRENJE // HR // OSIJEK-BARANJA COUNTY</span> </div> </div> </footer> <!-- Main Content --> <main class="absolute top-12 left-16 right-20 bottom-20 p-4 grid grid-cols-4 grid-rows-2 gap-4"> <!-- Left panel (col-span-2 row-span-2) --> <div class="panel col-span-2 row-span-2 p-4 flex flex-col" data-panel="overview"> <h2 class="panel-header">REGION OVERVIEW</h2> <div class="text-xs leading-relaxed h-full overflow-y-auto"> <p class="mb-2 decode-text" data-final="Drenje is a geographical division of the second level located within the Osijek-Barbana County in the country of Croatia, which has the country code HR.">Drenje is a geographical division of the second level located within the Osijek-Barbana County in the country of Croatia, which has the country code HR.</p> <p class="mb-2 decode-text" data-final="This region plays a significant role in the cultural and economic landscape of the area.">This region plays a significant role in the cultural and economic landscape of the area.</p> <p class="mb-2 decode-text" data-final="Known for its diverse topography, Drenje encompasses a blend of rural and semi-urban areas, offering a unique blend of tranquility and accessibility to larger urban centers.">Known for its diverse topography, Drenje encompasses a blend of rural and semi-urban areas, offering a unique blend of tranquility and accessibility to larger urban centers.</p> <p class="mb-2 decode-text" data-final="The region is characterized by fertile lands that support a thriving agricultural sector, contributing substantially to the local economy.">The region is characterized by fertile lands that support a thriving agricultural sector, contributing substantially to the local economy.</p> <p class="mb-2 decode-text" data-final="Drenje is also home to numerous small-scale industries and businesses, which further diversify its economic base.">Drenje is also home to numerous small-scale industries and businesses, which further diversify its economic base.</p> <p class="mb-2 decode-text" data-final="The area boasts a rich historical heritage, with several landmarks and sites that attract tourists and history enthusiasts alike.">The area boasts a rich historical heritage, with several landmarks and sites that attract tourists and history enthusiasts alike.</p> <p class="mb-2 decode-text" data-final="The community in Drenje is known for its warmth and hospitality, making it an appealing place for both residents and visitors.">The community in Drenje is known for its warmth and hospitality, making it an appealing place for both residents and visitors.</p> <p class="mb-2 decode-text" data-final="Despite its relatively small size, Drenje serves as a vital link between the rural and urban parts of Osijek-Baranja County, facilitating the flow of goods, people, and ideas.">Despite its relatively small size, Drenje serves as a vital link between the rural and urban parts of Osijek-Baranja County, facilitating the flow of goods, people, and ideas.</p> </div> </div> <!-- Top middle --> <div class="panel p-4" data-panel="topo"> <h3 class="panel-header">TOPOGRAPHY SCAN</h3> <canvas id="topoCanvas" class="w-full h-full block"></canvas> </div> <!-- Top right --> <div class="panel p-4" data-panel="economy"> <h3 class="panel-header">ECONOMIC ANALYSIS</h3> <canvas id="economyCanvas" class="w-full h-full block"></canvas> </div> <!-- Bottom middle --> <div class="panel p-4" data-panel="heritage"> <h3 class="panel-header">HERITAGE SITES</h3> <ul class="text-xs space-y-1 max-h-full overflow-y-auto"> <li class="decode-text" data-final="1. St. Peter's Parish Church (18th Century)">1. St. Peter's Parish Church (18th Century)</li> <li class="decode-text" data-final="2. Drenje Castle Ruins">2. Drenje Castle Ruins</li> <li class="decode-text" data-final="3. Baranja Ethnographic Collection">3. Baranja Ethnographic Collection</li> <li class="decode-text" data-final="4. Traditional Wine Cellars">4. Traditional Wine Cellars</li> <li class="decode-text" data-final="5. Memorial Park">5. Memorial Park</li> </ul> </div> <!-- Bottom right --> <div class="panel p-4" data-panel="community"> <h3 class="panel-header">COMMUNITY METRICS</h3> <canvas id="communityCanvas" class="w-full h-full block"></canvas> </div> </main> </div> <script> // Clock function updateClock() { const now = new Date(); const ms = String(now.getMilliseconds()).padStart(3, '0'); const time = now.toLocaleTimeString('en-GB') + ':' + ms; document.getElementById('clock').textContent = time; } setInterval(updateClock, 10); updateClock(); // Decode text function decodeElements() { const elements = document.querySelectorAll('.decode-text'); elements.forEach(el => { const finalText = el.getAttribute('data-final'); if (!finalText) return; decodeElement(el, finalText); }); } function decodeElement(el, finalText) { const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_-+=[]{}|;:,.<>?/"; let i = 0; const interval = setInterval(() => { let revealed = finalText.substring(0, i+1); let remaining = finalText.length - (i+1); let randomStr = ''; for (let j=0; j<remaining; j++) { randomStr += chars[Math.floor(Math.random() * chars.length)]; } el.textContent = revealed + randomStr; i++; if (i >= finalText.length) { clearInterval(interval); el.textContent = finalText; // ensure final } }, 30); } document.addEventListener('DOMContentLoaded', decodeElements); // Data log const dataLogEl = document.getElementById('dataLog'); const logMessages = [ "Initializing region scan...", "Fetching agricultural data...", "Topography matrix loaded.", "Heritage sites catalogued: 5.", "Community sentiment: 92% positive.", "Economic indicators: stable.", "Network connectivity: 98%.", "Satellite synchronization: complete.", "Daily output: 12.4 tons of crops.", "New business registrations: +3.", "Tourist arrivals: 1,240 this week.", "Infrastructure status: optimal.", "Power grid: nominal.", "Water supply: adequate.", "Waste management: cycling.", "Cybersecurity: active.", "Updating CR interface...", "Refreshing data stream...", "All systems go." ]; function populateDataLog() { let i = 0; setInterval(() => { const msg = logMessages[i % logMessages.length]; const now = new Date(); const time = now.toLocaleTimeString('en-GB', { hour12: false }) + '.' + String(now.getMilliseconds()).padStart(3, '0'); const line = document.createElement('div'); line.textContent = `[${time}] ${msg}`; dataLogEl.appendChild(line); dataLogEl.scrollTop = dataLogEl.scrollHeight; i++; }, 800); } document.addEventListener('DOMContentLoaded', populateDataLog); // Glitch effect function randomGlitch() { const panels = document.querySelectorAll('.panel'); const randomPanel = panels[Math.floor(Math.random() * panels.length)]; randomPanel.classList.add('glitch'); setTimeout(() => { randomPanel.classList.remove('glitch'); }, 200); } setInterval(randomGlitch, 5000); // Terrain visualization let topoCtx, topoCanvas, topoTime = 0; function initTopo() { topoCanvas = document.getElementById('topoCanvas'); topoCtx = topoCanvas.getContext('2d'); topoCanvas.width = topoCanvas.parentElement.clientWidth; topoCanvas.height = topoCanvas.parentElement.clientHeight; } function drawTopo() { if (!topoCanvas) return; const w = topoCanvas.width; const h = topoCanvas.height; topoCtx.clearRect(0, 0, w, h); topoTime += 0.02; const gridSize = 15; const spacing = Math.min(w, h) / (gridSize * 1.5); const centerX = w / 2; const centerY = h / 2; const fov = 200; const angle = 0.8; // pitch let points = []; for (let i = 0; i < gridSize; i++) { points[i] = []; for (let j = 0; j < gridSize; j++) { const x = (i - gridSize/2) * spacing; const z = (j - gridSize/2) * spacing; const y = Math.sin(i * 0.3 + topoTime) * Math.cos(j * 0.3 + topoTime) * 20; const y2 = y * Math.cos(angle) - z * Math.sin(angle); const z2 = y * Math.sin(angle) + z * Math.cos(angle); const scale = fov / (fov + z2); points[i][j] = { x: x * scale + centerX, y: y2 * scale + centerY }; } } topoCtx.strokeStyle = '#00ffff'; topoCtx.lineWidth = 1; topoCtx.shadowBlur = 5; topoCtx.shadowColor = '#00ffff'; for (let j = 0; j < gridSize; j++) { topoCtx.beginPath(); for (let i = 0; i < gridSize; i++) { const p = points[i][j]; if (i === 0) topoCtx.moveTo(p.x, p.y); else topoCtx.lineTo(p.x, p.y); } topoCtx.stroke(); } for (let i = 0; i < gridSize; i++) { topoCtx.beginPath(); for (let j = 0; j < gridSize; j++) { const p = points[i][j]; if (j === 0) topoCtx.moveTo(p.x, p.y); else topoCtx.lineTo(p.x, p.y); } topoCtx.stroke(); } // scanning line const scanY = (topoTime * 50) % h; topoCtx.strokeStyle = '#ffaa00'; topoCtx.lineWidth = 2; topoCtx.shadowColor = '#ffaa00'; topoCtx.beginPath(); topoCtx.moveTo(0, scanY); topoCtx.lineTo(w, scanY); topoCtx.stroke(); topoCtx.shadowBlur = 0; } function animateTopo() { requestAnimationFrame(animateTopo); drawTopo(); } window.addEventListener('DOMContentLoaded', () => { initTopo(); animateTopo(); }); window.addEventListener('resize', initTopo); // Economy bar chart let econCtx, econCanvas; const econData = [ { label: 'Agriculture', value: 45 }, { label: 'Industry', value: 25 }, { label: 'Services', value: 20 }, { label: 'Tourism', value: 10 } ]; function initEcon() { econCanvas = document.getElementById('economyCanvas'); econCtx = econCanvas.getContext('2d'); econCanvas.width = econCanvas.parentElement.clientWidth; econCanvas.height = econCanvas.parentElement.clientHeight; } function drawEcon() { if (!econCanvas) return; const w = econCanvas.width; const h = econCanvas.height; econCtx.clearRect(0, 0, w, h); const padding = 30; const chartH = h - 2 * padding; const chartW = w - 2 * padding; const maxValue = 50; // axes econCtx.strokeStyle = 'rgba(0, 255, 255, 0.3)'; econCtx.lineWidth = 1; econCtx.beginPath(); econCtx.moveTo(padding, padding); econCtx.lineTo(padding, h - padding); econCtx.lineTo(w - padding, h - padding); econCtx.stroke(); const barWidth = chartW / econData.length * 0.5; const gap = chartW / econData.length * 0.5; econData.forEach((item, index) => { const x = padding + gap / 2 + index * (barWidth + gap); const barHeight = (item.value / maxValue) * chartH; const y = h - padding - barHeight; const gradient = econCtx.createLinearGradient(0, y, 0, h - padding); gradient.addColorStop(0, 'rgba(0, 255, 255, 0.8)'); gradient.addColorStop(1, 'rgba(0, 255, 255, 0.2)'); econCtx.fillStyle = gradient; econCtx.shadowColor = 'rgba(0, 255, 255, 0.5)'; econCtx.shadowBlur = 10; econCtx.fillRect(x, y, barWidth, barHeight); // label econCtx.fillStyle = '#ffaa00'; econCtx.shadowBlur = 0; econCtx.font = '10px "JetBrains Mono"'; econCtx.textAlign = 'center'; econCtx.fillText(item.label, x + barWidth / 2, h - padding + 12); // value econCtx.fillStyle = '#fff'; econCtx.fillText(item.value + '%', x + barWidth / 2, y - 5); }); } function animateEcon() { requestAnimationFrame(animateEcon); drawEcon(); } window.addEventListener('DOMContentLoaded', () => { initEcon(); animateEcon(); }); window.addEventListener('resize', initEcon); // Community metrics gauge let commCtx, commCanvas, commAngle = 0; const commMetrics = [ { label: 'Happiness', value: 0.8, color: '#ff00ff' }, { label: 'Health', value: 0.75, color: '#00ffff' }, { label: 'Engagement', value: 0.9, color: '#ffaa00' } ]; function initComm() { commCanvas = document.getElementById('communityCanvas'); commCtx = commCanvas.getContext('2d'); commCanvas.width = commCanvas.parentElement.clientWidth; commCanvas.height = commCanvas.parentElement.clientHeight; } function drawComm() { if (!commCanvas) return; const w = commCanvas.width; const h = commCanvas.height; commCtx.clearRect(0, 0, w, h); const cx = w / 2; const cy = h / 2; const radius = Math.min(w, h) / 3; // background circle commCtx.strokeStyle = 'rgba(255,255,255,0.1)'; commCtx.lineWidth = 10; commCtx.beginPath(); commCtx.arc(cx, cy, radius, 0, Math.PI * 2); commCtx.stroke(); commMetrics.forEach((metric, i) => { const offset = i * 20; const r = radius - 30 - i * 20; commCtx.strokeStyle = 'rgba(255,255,255,0.05)'; commCtx.lineWidth = 8; commCtx.beginPath(); commCtx.arc(cx, cy, r, 0, Math.PI * 2); commCtx.stroke(); commCtx.strokeStyle = metric.color; commCtx.lineWidth = 8; commCtx.shadowColor = metric.color; commCtx.shadowBlur = 8; commCtx.beginPath(); const startAngle = -Math.PI / 2; const endAngle = startAngle + Math.PI * 2 * metric.value; commCtx.arc(cx, cy, r, startAngle, endAngle); commCtx.stroke(); commCtx.shadowBlur = 0; // label commCtx.fillStyle = metric.color; commCtx.font = '10px "JetBrains Mono"'; commCtx.textAlign = 'center'; commCtx.textBaseline = 'middle'; const labelY = cy + r + 15; commCtx.fillText(metric.label, cx, labelY); // percentage const pct = Math.round(metric.value * 100) + '%'; commCtx.fillStyle = '#fff'; commCtx.fillText(pct, cx, cy - r + 15); }); // rotating indicator commAngle += 0.02; const indicatorX = cx + Math.cos(commAngle) * radius; const indicatorY = cy + Math.sin(commAngle) * radius; commCtx.fillStyle = '#fff'; commCtx.shadowColor = '#fff'; commCtx.shadowBlur = 5; commCtx.beginPath(); commCtx.arc(indicatorX, indicatorY, 3, 0, Math.PI * 2); commCtx.fill(); commCtx.shadowBlur = 0; } function animateComm() { requestAnimationFrame(animateComm); drawComm(); } window.addEventListener('DOMContentLoaded', () => { initComm(); animateComm(); }); window.addEventListener('resize', initComm); </script> </body> </html> ```

virtual tours

Thanks to our Virtual Reality technology, we transport you to Municipality of Drenje for unique observations.
This feature requires payment.

Upgrade to the premium version!

Air quality

The data below describes the current air quality at Drenje. Based on the European Air Quality Index (AQI), calculated using the data below, The weather conditions are passable.

Dust 0 μg/m³
Carbon Dioxide CO2 472 ppm
Nitrogen Dioxide NO2 6.8 μg/m³
Sulphur Dioxide SO2 0.8 μg/m³
Ammonia NH3 2.8 μg/m³

Meteo

The data below describes the current weather in Municipality of Drenje.

Temperature 5.5 °C
Rain 0 mm
Showers 0 mm
Snowfall 0 cm
Cloud Cover Total 0 %
Sea Level Pressure 1024.7 hPa
Wind Speed 2.5 km/h