diff --git a/Profice WebSite/index.html b/Profice WebSite/index.html index 1089b2d..a671c94 100644 --- a/Profice WebSite/index.html +++ b/Profice WebSite/index.html @@ -57,15 +57,15 @@ - - - + + + - - - - + + + + @@ -570,13 +570,13 @@ - - - - - - - + + + + + + + diff --git a/Profice WebSite/scripts/hex-background.js b/Profice WebSite/scripts/hex-background.js index 9c46a8a..1eafa63 100644 --- a/Profice WebSite/scripts/hex-background.js +++ b/Profice WebSite/scripts/hex-background.js @@ -101,10 +101,51 @@ ctx.stroke(); } + // Draw static hex grid for mobile (no animation) + function initMobileStatic() { + const c = document.getElementById('hexCanvas'); + if (!c) return; + const dpr = Math.min(window.devicePixelRatio || 1, 2); + const w = window.innerWidth; + const h = window.innerHeight; + c.width = w * dpr; + c.height = h * dpr; + c.style.width = w + 'px'; + c.style.height = h + 'px'; + const cx = c.getContext('2d'); + cx.scale(dpr, dpr); + cx.strokeStyle = 'rgba(119,119,100,0.15)'; + cx.lineWidth = 1; + const size = 30; + const hs = size * Math.sqrt(3); + const vs = size * 1.5; + const cols = Math.ceil(w / hs) + 2; + const rows = Math.ceil(h / vs) + 2; + for (let row = -1; row < rows; row++) { + for (let col = -1; col < cols; col++) { + const xOff = (row % 2 === 1) ? hs / 2 : 0; + const x = col * hs + xOff; + const y = row * vs; + cx.beginPath(); + for (let i = 0; i < 6; i++) { + const angle = (Math.PI / 3) * i - Math.PI / 2; + const px = x + size * Math.cos(angle); + const py = y + size * Math.sin(angle); + i === 0 ? cx.moveTo(px, py) : cx.lineTo(px, py); + } + cx.closePath(); + cx.stroke(); + } + } + } + // Initialize function init() { - // Skip animation on mobile/touch devices for performance - if (window.innerWidth <= 768 || ('ontouchstart' in window)) return; + // On mobile/touch: draw static hex pattern only, no animation + if (window.innerWidth <= 768 || ('ontouchstart' in window)) { + initMobileStatic(); + return; + } canvas = document.getElementById('hexCanvas'); if (!canvas) return; diff --git a/Profice WebSite/style/design.css b/Profice WebSite/style/design.css index 92752da..13621ec 100644 --- a/Profice WebSite/style/design.css +++ b/Profice WebSite/style/design.css @@ -741,18 +741,6 @@ body { } @media (max-width: 600px) { - .top-banner { - flex-direction: column; - gap: 15px; - text-align: center; - padding: 15px 20px; - } - - .banner-left { - width: 100%; - justify-content: center; - } - .form-container { padding: 25px; } @@ -1215,15 +1203,20 @@ body { display: none; } + .top-banner-center { + display: none; + } + .hamburger-btn { display: flex; } #cursorToggle { - display: none; + display: none !important; } .top-banner { + flex-direction: row !important; justify-content: space-between; height: 70px; padding: 5px 15px; @@ -1234,8 +1227,15 @@ body { padding: 5px 12px; } + .top-banner-left { + flex: unset; + } + + .top-banner-right { + flex: unset; + } + .banner-left { - flex: 1; gap: 10px; }