Help
RSS
API
Feed
Maltego
Contact
Domain > webuilddata.ai
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2025-03-22
18.164.174.87
(
ClassC
)
2025-04-24
18.155.202.83
(
ClassC
)
2026-01-26
18.164.174.102
(
ClassC
)
Port 80
HTTP/1.1 301 Moved PermanentlyServer: CloudFrontDate: Mon, 26 Jan 2026 02:58:16 GMTContent-Type: text/htmlContent-Length: 167Connection: keep-aliveLocation: https://webuilddata.ai/X-Cache: Redirect from cloudfrontVia: 1.1 1d4a0c5c1e2a08b50c7d9e658a3f4fec.cloudfront.net (CloudFront)X-Amz-Cf-Pop: LAX53-P4X-Amz-Cf-Id: kRbG1B7pi-ILk4GMTixaGUq1J1iGkekkrDiNqxcb8m0e7SMjnjuTwQ html>head>title>301 Moved Permanently/title>/head>body>center>h1>301 Moved Permanently/h1>/center>hr>center>CloudFront/center>/body>/html>
Port 443
HTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 49199Connection: keep-aliveLast-Modified: Mon, 17 Mar 2025 17:55:02 GMTx-amz-server-side-encryption: AES256x-amz-version-id: SohOFNf5J4yrI3G63ro.pUyOAFKv0wQWAccept-Ranges: bytesServer: AmazonS3Date: Mon, 26 Jan 2026 02:58:17 GMTETag: 7d619490391fd5e981b0dcf650d28241X-Cache: RefreshHit from cloudfrontVia: 1.1 d59d2ab357c0c409dc4be130a9aab01e.cloudfront.net (CloudFront)X-Amz-Cf-Pop: LAX53-P4X-Amz-Cf-Id: gRMNGOXYeveoPxczccQrxD7RcmOXMaNbIKFJnF6zpCIKHQs2VsJBWg !DOCTYPE html>html langen>head> link relshortcut icon typeimage/icon href/logo.ico > link relpreconnect hrefhttps://fonts.googleapis.com> link relpreconnect hrefhttps://fonts.gstatic.com crossorigin> link hrefhttps://fonts.googleapis.com/css2?familyMontserrat:wght@400;700&displayswap relstylesheet> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, heightdevice-height, initial-scale1.0> style> body, html { min-height: 100vh; /* ensure the body fills the whole viewport */ margin: 0; /* remove default margins */ padding: 0; /* remove default padding */ } a:link { color: #340071;; background-color: transparent; text-decoration: underline; } a:visited { color: #340071; background-color: transparent; text-decoration: underline; } a:hover { color: #fa5c86; background-color: transparent; text-decoration: underline; } a:visited { color: #340071; background-color: transparent; text-decoration: underline; } .animated-line { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 25s ease-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .animated-line-faster { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 13s ease-out forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .svg-container { text-align: center; align: center; } .header, .header, .textbox, .logo-text, .for-container, .rotating-text { font-family: Montserrat, sans-serif; color: #340071; } .header, .textbox, .for-container, .rotating-text { line-height: 84px; height: 84px; white-space: nowrap; vertical-align: middle; text-align: center; } .header{ margin-left: 5px; margin-right: 5px; font-size: 60px; align-items: center; } .textbox { font-size: 30px; line-height: 36px; white-space: nowrap; word-wrap: break-word; } .sticky-bottom { position: static; bottom: 0; width: 100%; justify-content: center; vertical-align: bottom; padding-bottom: 50px; margin-top: 100px; } .rotating-text { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; height: 84px; line-height: 84px; transform-style: preserve-3d; /* Add 3D context for better z-index management */ } .rotating-text span { position: absolute; opacity: 0; transform: translateY(100%) translateZ(0); /* Add Z transform for better stacking */ transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); display: flex; justify-content: left; align-items: center; text-align: left; font-size: 72px; font-weight: bold; white-space: nowrap; word-wrap: break-word; height: 84px; line-height: 84px; padding-right: 3px; z-index: 1; /* Add z-index for proper stacking */ backface-visibility: hidden; /* Prevent rendering artifacts */ will-change: transform, opacity; /* Optimize for animations */ } .rotating-text span.active { opacity: 1; transform: translateY(0) translateZ(1px); /* Slight Z offset for active item */ z-index: 2; /* Higher z-index for active items */ } .flexbox-logo { display: flex; flex-direction: row; justify-content: center; align-items: center; } .flexbox-logo-name { display: flex; flex-direction: column; justify-content: left; text-align: right;/* align-items: left;*/ } .flexbox-entire-page { display: flex; flex-direction: column; justify-content: center; align-items: center; vertical-align: top; } .logo-text { font-size: 48px; font-weight: bold; } .flexbox-headline { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0; gap: 0.15em; max-width: 100%; width: 100%; text-align: center; } .spacer { height: 50px; /* Add a spacer element to fill the space between the last line and the bottom */ } #wrapper { position: relative; /* to establish containing block for sticky positioning */ min-height: 100vh; } .for-container { margin-left: 0; margin-right: 0; text-align: center; margin-top: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; } #rotating-text-1, #rotating-text-2 { text-align: center; } /* Mobile Responsive Styles */ @media screen and (max-width: 768px) { .header, .for-container { font-size: 42px; line-height: 1.2; height: auto; margin-left: 0; margin-right: 0; text-align: center !important; width: 100%; } .textbox { font-size: 22px; line-height: 28px; padding: 0 15px; } .logo-text { font-size: 36px; } .rotating-text { height: auto; min-height: 56px; line-height: 1.2; display: flex !important; align-items: center; justify-content: center !important; overflow: hidden; max-width: 95vw !important; width: 100% !important; text-align: center !important; margin: 0 auto; } .rotating-text span { font-size: 38px; /* Slightly smaller for better fit */ height: auto; min-height: 46px; line-height: 1.2; transform: translateY(150%); max-width: 95vw; overflow: hidden; white-space: normal; text-align: center !important; justify-content: center !important; width: 100% !important; padding: 0 5px; } .rotating-text span.active { transform: translateY(0); } .flexbox-headline { padding: 0; gap: 0; align-items: center !important; flex-direction: column !important; max-width: 100%; width: 100%; margin: 0 auto; text-align: center !important; } /* Proper centering for mobile line containers */ #first-line-container, #second-line-container { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: 100% !important; text-align: center !important; margin: 0 auto !important; } /* Make everything appear as a single cohesive unit */ #second-line-container { margin-top: 0px !important; } /* Make the for very compact to avoid line break appearance */ .for-container { height: auto !important; min-height: auto !important; padding: 0 !important; margin: 0 !important; } /* Tightening the spacing between items for visual continuity */ .for-container .header { font-size: 38px; line-height: 1; height: auto; padding: 0; margin: 0; } .svg-container svg { width: 160px; height: 160px; } .flexbox-logo { flex-direction: row; align-items: center; gap: 15px; padding: 0 10px; } .flexbox-logo-name { text-align: right; } .sticky-bottom { padding-bottom: 30px; margin-top: 50px; } .spacer { height: 30px; } } @media screen and (max-width: 480px) { .header, .for-container { font-size: 34px; line-height: 1.2; height: auto; } .for-container .header { font-size: 34px; } .rotating-text span { font-size: 34px; min-height: 40px; } .textbox { font-size: 20px; line-height: 24px; } .logo-text { font-size: 30px; } .rotating-text { min-height: 44px; } .svg-container svg { width: 130px; height: 130px; } .flexbox-logo { gap: 10px; } } /* Mid-size screens (iPad, small desktops) */ @media screen and (min-width: 769px) and (max-width: 1024px) { .header, .for-container { font-size: 46px; text-align: center !important; width: 100% !important; } /* Logo size adjustments for iPad */ .logo-text { font-size: 42px; } .svg-container svg { width: 180px; height: 180px; } .flexbox-logo { padding: 0 15px; } /* End logo adjustments */ .rotating-text span { font-size: 52px; white-space: normal !important; /* Allow text to wrap on iPad */ text-align: center !important; justify-content: center !important; width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; } /* Ensure wider rotating text containers for iPad */ #rotating-text-1, #rotating-text-2 { overflow: hidden; max-width: 95%; height: auto !important; min-height: 84px; text-align: center !important; justify-content: center !important; width: 100% !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; } /* Force two-line layout for iPad screens */ .flexbox-headline { flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; } /* Center the line containers */ #first-line-container, #second-line-container { justify-content: center !important; text-align: center !important; align-items: center !important; width: 100% !important; display: flex !important; flex-direction: column !important; /* Change from row to column for better centering */ margin: 0 auto !important; } /* Ensure for starts on a new line */ .for-container { margin-top: 10px; clear: both; width: 100% !important; text-align: center !important; display: block !important; } /* Create more space for longer text strings */ #rotating-text-2 { min-width: 300px; overflow: visible; margin: 0 auto !important; display: flex !important; justify-content: center !important; } /* Improve iPad layout for the specific line issues seen in screenshot */ #second-line-container { margin-top: 0px !important; } /* Improve visibility of text */ .rotating-text span.active { z-index: 10 !important; } } .rotating-text span.mobile-span { text-align: center !important; justify-content: center !important; width: 100% !important; white-space: normal !important; } /style>/head>body> div idwrapper> div classflexbox-logo> a href/ styletext-decoration: none> div classflexbox-logo-name> div classlogo-text>We/div> div classlogo-text>Build/div> div classlogo-text>Data/div> /div> /a> div classsvg-container> svg xmlnshttp://www.w3.org/2000/svg width230 height230 viewBox0 0 120 120 align-itemscenter> !-- Connection lines --> !-- w --> line x140 y160 x220 y220 strokergb(250,92,134) stroke-width3 classanimated-line-faster/> line x140 y160 x260 y220 strokergb(250,92,134) stroke-width3 classanimated-line-faster/> line x180 y160 x260 y220 strokergb(250,92,134) stroke-width3 classanimated-line-faster/> line x180 y160 x2100 y220 strokergb(250,92,134) stroke-width3 classanimated-line-faster/> !-- b --> line x120 y140 x220 y220 strokergb(250,92,134) stroke-width3 classanimated-line/> line x120 y160 x240 y260 strokergb(250,92,134) stroke-width3 classanimated-line/> line x120 y160 x220 y240 strokergb(250,92,134) stroke-width3 classanimated-line/> line x120 y160 x220 y280 strokergb(250,92,134) stroke-width3 classanimated-line/> line x140 y160 x260 y280 strokergb(250,92,134) stroke-width3 classanimated-line/> line x140 y1100 x260 y280 strokergb(250,92,134) stroke-width3 classanimated-line/> line x120 y1100 x240 y2100 strokergb(250,92,134) stroke-width3 classanimated-line/> line x120 y1100 x220 y280 strokergb(250,92,134) stroke-width3 classanimated-line/> !-- d --> line x1100 y140 x2100 y220 strokergb(250,92,134) stroke-width3 classanimated-line/> line x1100 y160 x280 y260 strokergb(250,92,134) stroke-width3 classanimated-line/> line x1100 y160 x2100 y240 strokergb(250,92,134) stroke-width3 classanimated-line/> line x1100 y160 x2100 y280 strokergb(250,92,134) stroke-width3 classanimated-line/> line x180 y160 x260 y280 strokergb(250,92,134) stroke-width3 classanimated-line/> line x1100 y1100 x280 y2100 strokergb(250,92,134) stroke-width3 classanimated-line/> line x180 y1100 x260 y280 strokergb(250,92,134) stroke-width3 classanimated-line/> line x1100 y1100 x2100 y280 strokergb(250,92,134) stroke-width3 classanimated-line/> !-- Grid dots --> circle cx20 cy20 r5 fillrgb(250,92,134)/> circle cx40 cy20 r5 fillrgb(250,92,134)/> circle cx60 cy20 r5 fillrgb(250,92,134)/> circle cx80 cy20 r5 fillrgb(250,92,134)/> circle cx100 cy20 r5 fillrgb(250,92,134)/> circle cx20 cy40 r5 fillrgb(250,92,134)/> circle cx40 cy40 r5 fillrgb(250,92,134)/> circle cx60 cy40 r5 fillrgb(250,92,134)/> circle cx80 cy40 r5 fillrgb(250,92,134)/> circle cx100 cy40 r5 fillrgb(250,92,134)/> circle cx20 cy60 r5 fillrgb(250,92,134)/> circle cx40 cy60 r5 fillrgb(250,92,134)/> circle cx60 cy60 r5 fillrgb(250,92,134)/> circle cx80 cy60 r5 fillrgb(250,92,134)/> circle cx100 cy60 r5 fillrgb(250,92,134)/> circle cx20 cy80 r5 fillrgb(250,92,134)/> circle cx40 cy80 r5 fillrgb(250,92,134)/> circle cx60 cy80 r5 fillrgb(250,92,134)/> circle cx80 cy80 r5 fillrgb(250,92,134)/> circle cx100 cy80 r5 fillrgb(250,92,134)/> circle cx20 cy100 r5 fillrgb(250,92,134)/> circle cx40 cy100 r5 fillrgb(250,92,134)/> circle cx60 cy100 r5 fillrgb(250,92,134)/> circle cx80 cy100 r5 fillrgb(250,92,134)/> circle cx100 cy100 r5 fillrgb(250,92,134)/> /svg> /div> div classspacer>/div> /div> div idtheTopPart classflexbox-entire-page> div classspacer>/div> div classflexbox-headline> div classheader>We build data /div> div classrotating-text idrotating-text-1> span classactive> solutions /span> span> platforms /span> span> services /span> span> warehouses /span> span> stacks /span> span> analytics /span> span> products /span> span> pipelines /span> span> models /span> span> governance /span> span> teams /span> span> use cases /span> span> operations /span> span> monetization /span> span> integrations /span> /div> div classfor-container> div classheader>for/div> /div> div classrotating-text idrotating-text-2> span classactive> startups /span> span> series A companies /span> span> AI development /span> span> ML products /span> span> AI-powered apps /span> span> high-load systems /span> span> growing your revenue /span> span> retail and ecommerce /span> span> adtech companies /span> span> web3 and crypto /span> span> transportation & cargo /span> span> heavy manufacturing /span> span> chemicals & biotech /span> span> edtech /span> span> deep tech companies /span> span> banks & fintech /span> span> gaming industry /span> span> maximizing LTV /span> span> business intelligence /span> span> competitor monitoring /span> /div> /div> /div> div classtextbox styletext-align: center; margin-top: 60px; margin-bottom: 60px;> a href/services classlearn-more-button stylebackground-color: #340071; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; display: inline-block; font-weight: bold; box-shadow: 0 3px 6px rgba(0,0,0,0.1); transition: all 0.3s ease; border: 2px solid #340071;> Learn more /a> style> .learn-more-button:hover { background-color: #fa5c86 !important; color: white !important; box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important; transform: translateY(-2px) !important; border-color: #fa5c86 !important; } @media screen and (max-width: 768px) { .textbox { margin-top: 40px !important; margin-bottom: 40px !important; } } @media screen and (max-width: 480px) { .textbox { margin-top: 30px !important; margin-bottom: 30px !important; } } /style> /div> div idtheBottomPart classsticky-bottom> style> .sticky-bottom { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; margin-top: 0; padding-bottom: 40px; } @media screen and (max-width: 768px) { .sticky-bottom { gap: 30px; margin-top: 0; padding-bottom: 30px; } } @media screen and (max-width: 480px) { .sticky-bottom { gap: 25px; margin-top: 0; padding-bottom: 25px; } } /style> div classtextbox aligncenter> We build your technology. br> You focus on the business. br> a hrefmailto:hello@webuilddata.ai stylecolor:#FA5C86; font-size: 14px;>hello@webuilddata.ai/a> /div> div classspacer>/div> /div> /div> script typetext/javascript> const rotatingText1 document.getElementById(rotating-text-1); const options1 rotatingText1.querySelectorAll(span); let currentIndex1 0; const rotatingText2 document.getElementById(rotating-text-2); const options2 rotatingText2.querySelectorAll(span); let currentIndex2 0; // Add initial width rotatingText1.style.width `${options1currentIndex1.offsetWidth + 5}px`; rotatingText2.style.width `${options2currentIndex2.offsetWidth + 5}px`; // Flags to track animation state let isAnimating false; let isResizing false; // Standardized device detection function function getDeviceType() { const width window.innerWidth; if (width 768) return mobile; if (width 1024) return tablet; return desktop; } // Function to check if we need to force a line break function checkHeadlineLayout() { const deviceType getDeviceType(); const headline document.querySelector(.flexbox-headline); const header document.querySelector(.header); const firstRotating document.getElementById(rotating-text-1); const forContainer document.querySelector(.for-container); const secondRotating document.getElementById(rotating-text-2); // Create containers if needed let firstLineContainer document.getElementById(first-line-container); let secondLineContainer document.getElementById(second-line-container); if (!firstLineContainer) { firstLineContainer document.createElement(div); firstLineContainer.id first-line-container; firstLineContainer.style.display flex; firstLineContainer.style.justifyContent center; firstLineContainer.style.alignItems center; firstLineContainer.style.width 100%; // Move elements to first line container if (header.parentNode headline) { headline.removeChild(header); firstLineContainer.appendChild(header); } if (firstRotating.parentNode headline) { headline.removeChild(firstRotating); firstLineContainer.appendChild(firstRotating); } headline.insertBefore(firstLineContainer, headline.firstChild); } if (!secondLineContainer) { secondLineContainer document.createElement(div); secondLineContainer.id second-line-container; secondLineContainer.style.display flex; secondLineContainer.style.justifyContent center; secondLineContainer.style.alignItems center; secondLineContainer.style.width 100%; // Move elements to second line container if (forContainer.parentNode headline) { headline.removeChild(forContainer); secondLineContainer.appendChild(forContainer); } if (secondRotating.parentNode headline) { headline.removeChild(secondRotating); secondLineContainer.appendChild(secondRotating); } headline.appendChild(secondLineContainer); } // Important: Remove ALL br elements from the headline const brs headline.querySelectorAll(br); brs.forEach(br > { if (br.parentNode) { br.parentNode.removeChild(br); } }); // Apply layout based on device type if (deviceType mobile) { // Mobile-specific layout headline.style.flexDirection column; headline.style.alignItems center; headline.style.justifyContent center; headline.style.gap 0; headline.style.lineHeight 1.2; firstLineContainer.style.flexDirection column; secondLineContainer.style.flexDirection column; // Center text in containers header.style.textAlign center; header.style.width 100%; firstRotating.style.textAlign center; firstRotating.style.width 95%; forContainer.style.textAlign center; forContainer.style.width 100%; forContainer.style.marginTop 15px; // Increase this margin for more spacing before for secondRotating.style.textAlign center; secondRotating.style.width 95%; // Override the !important CSS rule in the stylesheet with a stronger selector // by adding a style tag with a more specific rule let styleTag document.getElementById(dynamic-spacing-styles); if (!styleTag) { styleTag document.createElement(style); styleTag.id dynamic-spacing-styles; document.head.appendChild(styleTag); } styleTag.innerHTML ` @media screen and (max-width: 768px) { #second-line-container { margin-top: 0px !important; } .for-container { margin-top: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; } } `; // Set margin anyway as a fallback secondLineContainer.style.marginTop 0px; } else if (deviceType tablet) { // Tablet-specific layout headline.style.flexDirection column; headline.style.alignItems center; headline.style.justifyContent center; headline.style.gap 0; headline.style.lineHeight 1.1; // Reduce line height firstLineContainer.style.flexDirection column; secondLineContainer.style.flexDirection column; // Center text in containers header.style.textAlign center; header.style.width 100%; header.style.marginRight 0; header.style.lineHeight 1.1; // Reduce line height header.style.marginBottom 0; // Remove negative margin firstRotating.style.textAlign center; firstRotating.style.width 80%; firstRotating.style.marginTop 0px; firstRotating.style.height 60px; // Reduce height forContainer.style.textAlign center; forContainer.style.width 100%; forContainer.style.marginRight 0; forContainer.style.marginTop 20px; // Add spacing before for forContainer.style.marginBottom 0; forContainer.style.height auto; // Auto height // Adjust the line height of the for text const forHeader forContainer.querySelector(.header); if (forHeader) { forHeader.style.lineHeight 1.1; forHeader.style.height auto; } secondRotating.style.textAlign center; secondRotating.style.width 80%; secondRotating.style.marginLeft 0; secondRotating.style.height 60px; // Reduce height // Override the !important CSS rules in the stylesheet with a stronger selector // by adding a style tag with more specific rules for both mobile and tablet let styleTag document.getElementById(dynamic-spacing-styles); if (!styleTag) { styleTag document.createElement(style); styleTag.id dynamic-spacing-styles; document.head.appendChild(styleTag); } styleTag.innerHTML ` /* Mobile styles */ @media screen and (max-width: 768px) { #second-line-container { margin-top: 0px !important; } .for-container { margin-top: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; } } /* Tablet/iPad styles */ @media screen and (min-width: 769px) and (max-width: 1024px) { #second-line-container { margin-top: 0px !important; } .for-container { margin-top: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; clear: both !important; } #rotating-text-1, #rotating-text-2 { margin: 0px auto !important; height: 60px !important; min-height: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .rotating-text span { line-height: 60px !important; height: 60px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Fix for We build data vertical alignment */ .header { height: 60px !important; line-height: 60px !important; vertical-align: middle !important; display: flex !important; align-items: center !important; justify-content: center !important; } #first-line-container { margin-bottom: 0px !important; } } `; // Set margins as fallback secondLineContainer.style.marginTop 0; } else { // Desktop layout // Calculate widths for determining if one-line layout is possible const headerWidth header.offsetWidth; const firstRotatingWidth firstRotating.offsetWidth; const forWidth forContainer.offsetWidth; const secondRotatingWidth secondRotating.offsetWidth; const firstLineWidth headerWidth + firstRotatingWidth + 10; const secondLineWidth forWidth + secondRotatingWidth + 10; const totalWidth firstLineWidth + secondLineWidth + 10; const useOneLine totalWidth (window.innerWidth * 0.85); if (useOneLine) { // One-line desktop layout headline.style.flexDirection row; headline.style.alignItems center; headline.style.justifyContent center; headline.style.gap 0.15em; firstLineContainer.style.flexDirection row; secondLineContainer.style.flexDirection row; header.style.display inline-block; header.style.marginRight 10px; firstRotating.style.display inline-block; firstRotating.style.textAlign left; forContainer.style.width auto; forContainer.style.marginTop 0; forContainer.style.marginLeft 0.15em; forContainer.style.marginRight 0.15em; forContainer.style.display inline-block; forContainer.style.textAlign center; secondRotating.style.display inline-block; secondRotating.style.marginLeft 0; secondRotating.style.marginTop 0; secondRotating.style.textAlign left; } else { // Two-line desktop layout headline.style.flexDirection column; headline.style.alignItems center; headline.style.justifyContent center; headline.style.gap 0; firstLineContainer.style.flexDirection row; secondLineContainer.style.flexDirection row; header.style.display inline-block; header.style.marginRight 10px; firstRotating.style.display inline-block; firstRotating.style.textAlign left; forContainer.style.width auto; forContainer.style.marginTop 0; forContainer.style.marginLeft 0; forContainer.style.display inline-block; forContainer.style.textAlign left; secondRotating.style.display inline-block; secondRotating.style.marginLeft 0.35em; secondRotating.style.marginTop 0; secondRotating.style.textAlign left; } } } // Function to adjust container height based on wrapped content function adjustHeight(container, element) { const deviceType getDeviceType(); if (deviceType mobile) { const contentHeight element.offsetHeight; container.style.height `${contentHeight}px`; } else if (deviceType tablet) { // For tablet, use a shorter height to reduce spacing container.style.height 60px; // Also set line-height to match for better text alignment element.style.lineHeight 60px; } else { // On desktop, use fixed height container.style.height 84px; element.style.lineHeight 84px; } } // Function for handling text layout (wrapping or single line) function handleTextLayout(element, maxWidth) { // Store original text if not already stored const originalText element.getAttribute(data-original-text) || element.textContent; if (!element.getAttribute(data-original-text)) { element.setAttribute(data-original-text, originalText); } // Reset to original element.textContent originalText; const deviceType getDeviceType(); if (deviceType mobile || deviceType tablet) { // Mobile & Tablet - enable wrapping and center element.style.whiteSpace normal; element.style.width 100%; element.style.maxWidth `${maxWidth}px`; element.style.textAlign center; element.style.justifyContent center; } else { // Desktop - keep as single line element.style.whiteSpace nowrap; element.style.width auto; element.style.textAlign left; element.style.justifyContent left; } } function rotateText1() { // Dont rotate if resizing to prevent jumps if (isResizing) return currentIndex1; // Set animating flag isAnimating true; // Store the current span for proper transitions const currentSpan options1currentIndex1; // Generate a random index for the next option let nextIndex currentIndex1; while (nextIndex currentIndex1) { nextIndex Math.floor(Math.random() * options1.length); } // Get the next span const nextSpan options1nextIndex; // Calculate max available width based on device type const deviceType getDeviceType(); let maxWidth; if (deviceType mobile) { maxWidth window.innerWidth * 0.95; } else if (deviceType tablet) { maxWidth window.innerWidth * 0.8; } else { maxWidth nextSpan.offsetWidth + 10; } // Reset all spans first options1.forEach(span > { if (span ! currentSpan && span ! nextSpan) { span.style.opacity 0; span.style.transform translateY(100%) translateZ(0); span.style.zIndex 1; span.classList.remove(active); } }); // Handle text layout handleTextLayout(nextSpan, maxWidth); // Pre-calculate the new width before showing let newWidth; if (deviceType mobile) { newWidth 95%; nextSpan.classList.add(mobile-span); } else if (deviceType tablet) { newWidth 80%; nextSpan.classList.add(mobile-span); } else { newWidth `${nextSpan.offsetWidth + 10}px`; nextSpan.classList.remove(mobile-span); } // Update width of container - do this BEFORE showing the next option rotatingText1.style.width newWidth; // First: hide current span with animation currentSpan.style.opacity 0; currentSpan.style.transform translateY(-100%) translateZ(0); currentSpan.style.zIndex 1; currentSpan.classList.remove(active); // Wait for first animation to complete before showing next setTimeout(() > { // Show the next span nextSpan.style.zIndex 2; nextSpan.style.opacity 1; nextSpan.style.transform translateY(0) translateZ(1px); nextSpan.classList.add(active); currentIndex1 nextIndex; // Ensure this timeout is long enough for the transition to complete setTimeout(() > { adjustHeight(rotatingText1, nextSpan); checkHeadlineLayout(); isAnimating false; }, 600); }, 500); return currentIndex1; } function rotateText2() { // Dont rotate if resizing to prevent jumps if (isResizing) return currentIndex2; // Set animating flag isAnimating true; // Store the current span for proper transitions const currentSpan options2currentIndex2; // Generate a random index for the next option let nextIndex currentIndex2; while (nextIndex currentIndex2) { nextIndex Math.floor(Math.random() * options2.length); } // Get the next span const nextSpan options2nextIndex; // Calculate max available width based on device type const deviceType getDeviceType(); let maxWidth; if (deviceType mobile) { maxWidth window.innerWidth * 0.95; } else if (deviceType tablet) { maxWidth window.innerWidth * 0.8; } else { maxWidth nextSpan.offsetWidth + 10; } // Reset all spans first options2.forEach(span > { if (span ! currentSpan && span ! nextSpan) { span.style.opacity 0; span.style.transform translateY(100%) translateZ(0); span.style.zIndex 1; span.classList.remove(active); } }); // Handle text layout handleTextLayout(nextSpan, maxWidth); // Pre-calculate the new width before showing let newWidth; if (deviceType mobile) { newWidth 95%; nextSpan.classList.add(mobile-span); } else if (deviceType tablet) { newWidth 80%; nextSpan.classList.add(mobile-span); } else { newWidth `${nextSpan.offsetWidth + 10}px`; nextSpan.classList.remove(mobile-span); } // Update width of container - do this BEFORE showing the next option rotatingText2.style.width newWidth; // First: hide current span with animation currentSpan.style.opacity 0; currentSpan.style.transform translateY(-100%) translateZ(0); currentSpan.style.zIndex 1; currentSpan.classList.remove(active); // Wait for first animation to complete before showing next setTimeout(() > { // Show the next span nextSpan.style.zIndex 2; nextSpan.style.opacity 1; nextSpan.style.transform translateY(0) translateZ(1px); nextSpan.classList.add(active); currentIndex2 nextIndex; // Ensure this timeout is long enough for the transition to complete setTimeout(() > { adjustHeight(rotatingText2, nextSpan); checkHeadlineLayout(); isAnimating false; }, 600); }, 500); return currentIndex2; } // Debounced window resize handler let resizeTimer; let previousDeviceType null; function resetAllStyles() { // Get all elements that need reset const headline document.querySelector(.flexbox-headline); const header document.querySelector(.header); const firstLineContainer document.getElementById(first-line-container); const secondLineContainer document.getElementById(second-line-container); const firstRotating document.getElementById(rotating-text-1); const forContainer document.querySelector(.for-container); const forHeader forContainer.querySelector(.header); const secondRotating document.getElementById(rotating-text-2); // Remove the dynamic style tag completely and recreate it const oldStyleTag document.getElementById(dynamic-spacing-styles); if (oldStyleTag) { oldStyleTag.parentNode.removeChild(oldStyleTag); } // Clear all inline styles that could cause conflicts headline, header, firstLineContainer, secondLineContainer, firstRotating, forContainer, forHeader, secondRotating.forEach(el > { if (el) { // Save a few critical properties we need to preserve const width el firstRotating || el secondRotating ? el.style.width : null; const opacity el.style.opacity; const transform el.style.transform; const zIndex el.style.zIndex; // Reset the style attribute completely el.setAttribute(style, ); // Restore only the essential properties that must be preserved if (width) el.style.width width; if (opacity) el.style.opacity opacity; if (transform) el.style.transform transform; if (zIndex) el.style.zIndex zIndex; } }); // Reset all spans const allSpans document.querySelectorAll(.rotating-text span); allSpans.forEach(span > { // Remove device-specific classes span.classList.remove(mobile-span); // Reset all styles and restore only animation states if (!span.classList.contains(active)) { span.setAttribute(style, ); span.style.opacity 0; span.style.transform translateY(100%) translateZ(0); span.style.zIndex 1; } else { span.setAttribute(style, ); span.style.opacity 1; span.style.transform translateY(0) translateZ(1px); span.style.zIndex 2; } // Remove any device-specific attributes if (span.hasAttribute(data-width)) { span.removeAttribute(data-width); } }); // The device type will help determine which classes to apply const deviceType getDeviceType(); // Add appropriate classes based on device type if (deviceType mobile || deviceType tablet) { const activeSpan1 options1currentIndex1; const activeSpan2 options2currentIndex2; activeSpan1.classList.add(mobile-span); activeSpan2.classList.add(mobile-span); } } function handleResize() { // Set resizing flag to prevent rotations during resize isResizing true; // Get current device type const currentDeviceType getDeviceType(); clearTimeout(resizeTimer); resizeTimer setTimeout(() > { // If device type changed, perform a complete reset if (previousDeviceType ! currentDeviceType) { resetAllStyles(); } // Store current device type for next comparison previousDeviceType currentDeviceType; // Apply new layout with clean slate updateWidths(); checkHeadlineLayout(); // Force a reflow to apply all changes document.body.offsetHeight; // Clear resizing flag after layout is done setTimeout(() > { isResizing false; }, 200); }, 250); } // Handle resizing window and update text container widths function updateWidths() { const deviceType getDeviceType(); // Get current active spans const activeSpan1 options1currentIndex1; const activeSpan2 options2currentIndex2; // Reset all spans to natural dimensions for measurement options1.forEach(span > span.style.width auto); options2.forEach(span > span.style.width auto); // Calculate dimensions based on device type let maxWidth1, maxWidth2; let width1, width2; if (deviceType mobile) { maxWidth1 window.innerWidth * 0.95; maxWidth2 window.innerWidth * 0.95; width1 95%; width2 95%; activeSpan1.classList.add(mobile-span); activeSpan2.classList.add(mobile-span); } else if (deviceType tablet) { maxWidth1 window.innerWidth * 0.8; maxWidth2 window.innerWidth * 0.8; width1 80%; width2 80%; activeSpan1.classList.add(mobile-span); activeSpan2.classList.add(mobile-span); } else { // Desktop: exact size activeSpan1.classList.remove(mobile-span); activeSpan2.classList.remove(mobile-span); // Handle text layout first for accurate width calculation handleTextLayout(activeSpan1, Number.MAX_SAFE_INTEGER); handleTextLayout(activeSpan2, Number.MAX_SAFE_INTEGER); maxWidth1 activeSpan1.offsetWidth + 10; maxWidth2 activeSpan2.offsetWidth + 10; width1 `${maxWidth1}px`; width2 `${maxWidth2}px`; } // Handle text layout with calculated max widths handleTextLayout(activeSpan1, maxWidth1); handleTextLayout(activeSpan2, maxWidth2); // Update container widths rotatingText1.style.width width1; rotatingText2.style.width width2; // Adjust heights as needed adjustHeight(rotatingText1, activeSpan1); adjustHeight(rotatingText2, activeSpan2); } // Rotation intervals let rotation1Interval; let rotation2Interval; function startRotations() { rotation1Interval setInterval(rotateText1, 5000); // Offset the second rotation by 2.5 seconds setTimeout(() > { rotation2Interval setInterval(rotateText2, 5000); }, 2500); } // Improve initial loading function initializeWidths() { // Reset any potential truncation for initial measurement options1.forEach(span > { if (span.getAttribute(data-original-text)) { span.textContent span.getAttribute(data-original-text); } }); options2.forEach(span > { if (span.getAttribute(data-original-text)) { span.textContent span.getAttribute(data-original-text); } }); // Ensure the active class is applied options1currentIndex1.classList.add(active); options2currentIndex2.classList.add(active); // Update based on screen size updateWidths(); // Check layout checkHeadlineLayout(); // Start rotations once initial setup is complete startRotations(); } // Set up a MutationObserver to monitor for changes and reapply layout const observer new MutationObserver(() > { if (!isResizing && !isAnimating) { checkHeadlineLayout(); } }); // Start observing the headline for attribute changes const headline document.querySelector(.flexbox-headline); observer.observe(headline, { attributes: true, childList: true, subtree: true, attributeFilter: style, class }); // Run on load and resize addEventListener(resize, handleResize); // Use a delay to ensure proper rendering document.addEventListener(DOMContentLoaded, function() { setTimeout(initializeWidths, 100); }); /script> /body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]