Merge pull request #24 from bogdankol/restylisation

Restylе of all pages

5 files changed, 121 insertions, 5 deletions

diff --git a/site/js/burger-manu-click-handler.js b/site/js/burger-manu-click-handler.js
new file mode 100644
index 0000000..6030c0b
--- /dev/null
+++ b/site/js/burger-manu-click-handler.js
@@ -0,0 +1,39 @@
+document.addEventListener('click', (e) => {
+	const burgerMenuIcon = document.getElementById('burgerMenu')
+	const closeBurgerMenuIcon = document.getElementById('closeIcon')
+	const bottomPartBurgerMenu = document.getElementById('bottomPartOfBurgerMenu')
+	const navigation = document.getElementById('navigation')
+
+	function openBurgerMenu() {
+		burgerMenuIcon.classList.remove('visible')
+		burgerMenuIcon.classList.add('not__visible')
+
+		closeBurgerMenuIcon.classList.remove('not__visible')
+		closeBurgerMenuIcon.classList.add('visible')
+
+		bottomPartBurgerMenu.classList.remove('not__visible')
+		bottomPartBurgerMenu.classList.add('visible')
+
+    navigation.classList.add('background__white')
+	}
+
+  function closeBurgerMenu() {
+		burgerMenuIcon.classList.remove('not__visible')
+		burgerMenuIcon.classList.add('visible')
+
+		closeBurgerMenuIcon.classList.remove('visible')
+		closeBurgerMenuIcon.classList.add('not__visible')
+
+		bottomPartBurgerMenu.classList.remove('visible')
+		bottomPartBurgerMenu.classList.add('not__visible')
+
+	}
+
+	if (e.target?.id === 'burgerMenu') {
+		openBurgerMenu()
+	}
+  if (e.target?.id === 'closeIcon' || 
+			e.target?.id === 'bottomPartOfBurgerMenu') {
+		closeBurgerMenu()
+	}
+})
diff --git a/site/js/form-insertions.js b/site/js/form-insertions.js
new file mode 100644
index 0000000..634a941
--- /dev/null
+++ b/site/js/form-insertions.js
@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', function (event) {
+	hbspt.forms.create({
+    region: 'na1',
+    portalId: '4129050',
+    formId: 'c333bcc3-f03f-4b20-84f6-f6067567cfa8',
+    target: '#form-div'
+  })
+})
diff --git a/site/js/google-analytics-message.js b/site/js/google-analytics-message.js
index d5ecb91..5c3e1fa 100644
--- a/site/js/google-analytics-message.js
+++ b/site/js/google-analytics-message.js
@@ -28,8 +28,8 @@ if (isGoogleAnalyticsAllowedValueExist) {
   // display a message with a question
   toggleGoogleAnalyticsMessage('show')
 
-  const googleAnalyticsMessageAccept = document.getElementById('google-analytics-message-accept')
-  const googleAnalyticsMessageDecline = document.getElementById('google-analytics-message-decline')
+  const googleAnalyticsMessageAccept = document.querySelector('#google-analytics-accept')
+  const googleAnalyticsMessageDecline = document.querySelectorAll('#google-analytics-decline')
 
   // register a click on the "Accept" button
   googleAnalyticsMessageAccept.addEventListener('click', function () {
@@ -38,9 +38,11 @@ if (isGoogleAnalyticsAllowedValueExist) {
   })
 
   // register a click on the "Decline" button
-  googleAnalyticsMessageDecline.addEventListener('click', function () {
-    document.cookie = 'isGoogleAnalyticsAllowed=no'
-    toggleGoogleAnalyticsMessage('hide')
+  googleAnalyticsMessageDecline.forEach(el => {
+    el.addEventListener('click', function () {
+      document.cookie = 'isGoogleAnalyticsAllowed=no'
+      toggleGoogleAnalyticsMessage('hide')
+    })
   })
 
 }
\ No newline at end of file
diff --git a/site/js/rive-animations.js b/site/js/rive-animations.js
new file mode 100644
index 0000000..3d281d3
--- /dev/null
+++ b/site/js/rive-animations.js
@@ -0,0 +1,40 @@
+document.addEventListener('DOMContentLoaded', function (event) {
+	const canvas = document.getElementById('canvas')
+  if(event?.target?.body?.clientWidth > 575) {
+    const r = new rive.Rive({
+      src: '/img/banner-bubbles.riv',
+      canvas: document.getElementById('canvas'),
+      autoplay: true,
+      stateMachines: 'State Machine 1',
+      onLoad: () => {
+        r.resizeDrawingSurfaceToCanvas()
+      },
+    })
+
+    canvas.classList.add('canvas-present')
+  }
+
+	addEventListener('resize', (e) => {
+		if (!e?.currentTarget?.innerWidth) return
+
+		if (Number(e?.currentTarget?.innerWidth) > 575) {
+      if(canvas.classList.contains('canvas-present')) {
+        return
+      }
+      
+			canvas.classList.remove('not_visible')
+			canvas.classList.add('canvas-present')
+      const r = new rive.Rive({
+				src: '/img/banner-bubbles.riv',
+				canvas: document.getElementById('canvas'),
+				autoplay: true,
+				stateMachines: 'State Machine 1',
+				onLoad: () => {
+					r.resizeDrawingSurfaceToCanvas()
+				},
+			})
+		} else {
+			canvas.classList.add('not_visible')
+		}
+	})
+})
diff --git a/site/js/scroll-detector-for-header.js b/site/js/scroll-detector-for-header.js
new file mode 100644
index 0000000..db7958f
--- /dev/null
+++ b/site/js/scroll-detector-for-header.js
@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', function () {
+  resolveHeadersClasses()
+
+  document.addEventListener('scroll', () => {
+    resolveHeadersClasses()
+  })
+})
+
+function resolveHeadersClasses() {
+  const header = document.getElementById('navigation')
+  const background = 'background__white'
+  const shadow = 'bottom-shadow'
+
+  if(!header) return
+
+  if(window?.scrollY && window.scrollY > 0) {
+    if(header.classList.contains(background)) return
+
+    header.classList.add(background)
+    header.classList.add(shadow)
+  } else {
+    if(!header.classList.contains(background)) return
+
+    header.classList.remove(background)
+    header.classList.remove(shadow)
+  }
+}
\ No newline at end of file