function start() { fetch('https://api.hems-app.com/api:xnyf9bWQ/auth', { method: 'GET', credentials: 'include', mode: 'cors' }) .then(response => response.json()) .then(data => { if (!data.isAuthenticated) { window.location.href = '/anmelden'; } }) .catch(error => { console.error('Error:', error); window.location.href = '/anmelden'; }); fetch('https://api.hems-app.com/api:Dru6pplC/00/start', { method: 'GET', credentials: 'include', mode: 'cors', }) .then(response => response.json()) .then(response => { if (response.messages && response.messages.length > 0) { displayMessages(response.messages, 100, 2000, 500); } if(response.profilepicture) { let imageprofilepicture = document.createElement('img'); imageprofilepicture.src = response.profilepicture; imageprofilepicture.classList.add('image-profilepicture-landlord'); document.getElementById("profilepicture").appendChild(imageprofilepicture); } if (response.verified_check === "not_verified") { document.getElementById("emailtopbar").style.display = "flex"; } }) .catch(error => { console.error("Fetch error:", error); }); } (function() { setTimeout(() => { start(); profile(); }, 250) })(); const TextAnimator = (function() { function createStyle() { if (!document.getElementById('text-animator-style')) { const style = document.createElement('style'); style.id = 'text-animator-style'; style.textContent = ` @keyframes quickFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .text-animator-wrapper { display: inline; white-space: normal; } .text-animator-word { display: inline-block; opacity: 0; } .text-animator-space { display: inline; width: auto; } `; document.head.appendChild(style); } } createStyle(); return { animate: function(elementId, text, options = {}) { const defaults = { wordDelay: 100, animationDuration: 0.2 }; const settings = { ...defaults, ...options }; const element = document.getElementById(elementId); if (!element) return; // Split text into words const words = text.split(' '); // Clear the element element.innerHTML = ''; // Create a wrapper to hold the words const wrapper = document.createElement('span'); wrapper.className = 'text-animator-wrapper'; words.forEach((word, index) => { // Create and append word span const wordSpan = document.createElement('span'); wordSpan.textContent = word; wordSpan.className = 'text-animator-word'; wordSpan.style.animation = `quickFadeIn ${settings.animationDuration}s ease-out ${index * settings.wordDelay / 1000}s forwards`; wrapper.appendChild(wordSpan); // Add space after word (except for the last word) if (index < words.length - 1) { const spaceSpan = document.createElement('span'); spaceSpan.className = 'text-animator-space'; spaceSpan.innerHTML = ' '; wrapper.appendChild(spaceSpan); } }); element.appendChild(wrapper); } }; })(); // Animating welcome Messages function animateWordsInMessage(message, wordInterval, element, callback) { let words = message.split(" "); let wordIndex = 0; let displayNextWord = () => { if (wordIndex < words.length) { let wordSpan = document.createElement("span"); wordSpan.className = "animated-word"; wordSpan.textContent = words[wordIndex] + " "; element.appendChild(wordSpan); wordIndex++; setTimeout(displayNextWord, wordInterval); } else { // After the last word, call the callback function if (callback) callback(); } }; displayNextWord(); } // Updated displayMessages function function displayMessages(messages, wordDelay, messageInterval, initialDelay) { let messageIndex = 0; const element = document.getElementById("welcomemessage"); let isInitialMessage = true; const displayNextMessage = () => { if (messageIndex < messages.length) { if (isInitialMessage) { setTimeout(() => { isInitialMessage = false; displayMessageContent(); }, initialDelay); } else { displayMessageContent(); } } }; const displayMessageContent = () => { element.textContent = ''; // Clear previous message element.classList.remove('fade-out'); // Ensure fade-out class is removed TextAnimator.animate("welcomemessage", messages[messageIndex], { wordDelay: wordDelay, animationDuration: 0.2 }); // Wait for message display duration, then fade out if it's not the last message if (messageIndex < messages.length - 1) { setTimeout(() => { element.classList.add('fade-out'); setTimeout(displayNextMessage, 300); // Wait for fade-out to complete }, messageInterval); } messageIndex++; }; displayNextMessage(); } class BottomSheet { constructor(element, overlay) { this.element = element; this.overlay = overlay; this.closeButtons = element.querySelectorAll('.bubble-close-bottom-sheet'); this.dragHandle = element.querySelector('.middle-console-header-responsive-popup-hems'); this.startY = 0; this.currentY = 0; this.isDragging = false; this.init(); } init() { this.closeButtons.forEach(button => button.addEventListener('click', () => this.hide())); this.overlay.addEventListener('click', (e) => { if (e.target === this.overlay) this.hide(); }); this.dragHandle.addEventListener('touchstart', this.handleDragStart.bind(this)); this.dragHandle.addEventListener('touchmove', this.handleDrag.bind(this)); this.dragHandle.addEventListener('touchend', this.handleDragEnd.bind(this)); this.dragHandle.addEventListener('mousedown', this.handleDragStart.bind(this)); document.addEventListener('mousemove', this.handleDrag.bind(this)); document.addEventListener('mouseup', this.handleDragEnd.bind(this)); } show(data) { this.overlay.style.display = 'flex'; this.element.style.display = 'flex'; this.element.offsetHeight; // Force reflow this.element.classList.add('show'); disablePageScroll(); if (data) { this.updateContent(data); } } hide() { this.element.classList.remove('show'); this.element.addEventListener('transitionend', () => { this.element.style.display = 'none'; this.overlay.style.display = 'none'; }, { once: true }); enablePageScroll(); } updateContent(data) { // Implement content updates based on data console.log('Updating content with', data); // Example: update a title const titleElement = this.element.querySelector('.bottom-sheet-title'); if (titleElement && data.title) { titleElement.textContent = data.title; } // Add more content updates as needed } handleDragStart(e) { if (this.element.style.display === 'none') return; this.isDragging = true; this.startY = this.getClientY(e); this.element.style.transition = 'none'; } handleDrag(e) { if (!this.isDragging) return; e.preventDefault(); this.currentY = this.getClientY(e); const deltaY = this.currentY - this.startY; if (deltaY > 0) { this.element.style.transform = `translateY(${deltaY}px)`; } } handleDragEnd() { if (!this.isDragging) return; this.isDragging = false; const deltaY = this.currentY - this.startY; if (deltaY > this.element.offsetHeight / 3) { this.hide(); } else { this.show(); } this.element.style.transform = ''; this.element.style.transition = 'transform 0.3s ease-out'; } getClientY(e) { return e.type.includes('mouse') ? e.clientY : e.touches[0].clientY; } } // Global object to store all bottom sheet instances const bottomSheets = {}; function initBottomSheets() { const bottomSheetElements = document.querySelectorAll('[data-bottom-sheet]'); bottomSheetElements.forEach(element => { const overlayId = element.dataset.overlay; const overlay = document.getElementById(overlayId); const sheet = new BottomSheet(element, overlay); bottomSheets[element.id] = sheet; }); } function showBottomSheet(id, data) { const sheet = bottomSheets[id]; if (sheet) { sheet.show(data); } else { console.error(`Bottom sheet with id ${id} not found`); } } function disablePageScroll() { document.body.classList.add('no-scroll'); } function enablePageScroll() { document.body.classList.remove('no-scroll'); } document.addEventListener('DOMContentLoaded', () => { // Add CSS styles for animations const style = document.createElement('style'); style.textContent = ` .window-responsive-popup-hems { transform: translateY(100%); transition: transform 0.3s ease-out; } .window-responsive-popup-hems.show { transform: translateY(0); } body.no-scroll { overflow: hidden; } `; document.head.appendChild(style); // Initialize bottom sheets initBottomSheets(); // Set up event listeners for triggers document.addEventListener('click', (e) => { if (e.target.matches('[data-bottom-sheet-trigger]')) { const sheetId = e.target.dataset.bottomSheetTrigger; const data = JSON.parse(e.target.dataset.bottomSheetData || '{}'); showBottomSheet(sheetId, data); } }); // IDs of the buttons const opensharectas = ['invitesacta', 'ctasharesabanner']; // Add event listeners to both buttons opensharectas.forEach(id => { const button = document.getElementById(id); if (button) { button.addEventListener('click', () => showBottomSheet('shareBottomSheet')); } }); // Handle existing trigger button const changephototrigger = document.getElementById('photocta'); if (changephototrigger) { changephototrigger.addEventListener('click', () => showBottomSheet('changePhotoBottomSheet')); } // Handle existing trigger button const changeinfotrigger = document.getElementById('changeinfocta'); if (changeinfotrigger) { changeinfotrigger.addEventListener('click', () => showBottomSheet('changeInfoBottomSheet')); } }); document.addEventListener('DOMContentLoaded', function() { // Get references to the frames const startShareSaFrame = document.getElementById('start-sharesa-frame'); const typeShareSaFrame = document.getElementById('type-sharesa-frame'); const linkShareSaFrame = document.getElementById('link-sharesa-frame'); const emailShareSaFrame = document.getElementById('email-sharesa-frame'); // Get reference to the start button const startShareSaCta = document.getElementById('start-sharesa-cta'); // Get references to the link share and email share buttons const linkShareSaCta = document.getElementById('link-sharesa-cta'); const emailShareSaCta = document.getElementById('email-sharesa-cta'); // Get reference to the close button const closeShareSaCta = document.getElementById('close-sharesa-cta'); // Get reference to the copy button const copyButton = document.getElementById('copyme'); let inviteLink = ''; // Variable to store the invite link // New elements const inputEmailProvider = document.getElementById('inputemailprovider'); const sendEmailButton = document.getElementById('sendemailcta'); const successShareSaFrame = document.getElementById('success-sharesa-frame'); // Email validation function function isValidEmail(email) { const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return re.test(email); } // Function to update button state function updateButtonState() { sendEmailButton.disabled = !isValidEmail(inputEmailProvider.value); sendEmailButton.style.opacity = sendEmailButton.disabled ? '0.5' : '1'; } // Add input event listener to email input field inputEmailProvider.addEventListener('input', updateButtonState); // Initial button state updateButtonState(); // Function to animate loading state function setLoadingState(isLoading) { if (isLoading) { sendEmailButton.disabled = true; sendEmailButton.innerHTML = ' Email wird versendet'; sendEmailButton.style.backgroundColor = '#cccccc'; sendEmailButton.style.opacity = '0.5'; } else { updateButtonState(); sendEmailButton.innerHTML = 'Senden'; sendEmailButton.style.backgroundColor = ''; } } // Function to send email invite function sendEmailInvite() { console.log('Sending email invite...'); setLoadingState(true); const formData = new FormData(); formData.append('email_provider', inputEmailProvider.value); fetch('https://api.hems-app.com/api:Dru6pplC/sharesa/sendemailinvite', { method: 'POST', body: formData, credentials: 'include', mode: 'cors' }) .then(response => { console.log('Response received:', response); return response.json(); }) .then(data => { console.log('Success:', data); switchFrames(emailShareSaFrame, successShareSaFrame); }) .catch((error) => { console.error('Error:', error); // Handle error appropriately here alert('Es gab einen Fehler beim Senden der E-Mail. Bitte versuchen Sie es später erneut.'); }) .finally(() => { console.log('Request completed'); setLoadingState(false); }); } // Add click event listener to the send email button sendEmailButton.addEventListener('click', function(e) { e.preventDefault(); console.log('Send button clicked'); if (isValidEmail(inputEmailProvider.value)) { sendEmailInvite(); } else { console.log('Invalid email'); alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.'); } }); // Function to switch frames function switchFrames(hideFrame, showFrame) { hideFrame.classList.add('hidden-frame'); showFrame.classList.remove('hidden-frame'); // Scroll to the top of the page window.scrollTo({ top: 0, behavior: 'smooth' }); } // Function to reset all frames and show the start frame function resetFrames() { const frames = document.getElementsByClassName('frame-popup-hems'); Array.from(frames).forEach(frame => frame.classList.add('hidden-frame')); startShareSaFrame.classList.remove('hidden-frame'); } // Function to animate elements inside the link share frame function animateLinkShareFrame() { const loadingCont = document.getElementById('loadingcont'); const readyLink = document.getElementById('readylink'); const linkCopy = document.getElementById('linkcopy'); const titleLinkLoad = document.getElementById('titlelinkload'); // Show the loading icon and update the title loadingCont.style.display = 'block'; titleLinkLoad.textContent = "Der Link wird gerade geladen..."; // Set a minimum display time for the loading animation const minLoadingTime = 3170; const startTime = Date.now(); // Flag to check if the fetch request is complete let fetchComplete = false; // Fetch request to backend to get the link for copying to clipboard fetch('https://api.hems-app.com/api:Dru6pplC/sharesa/getlink', { method: 'POST', credentials: 'include' }) .then(response => response.json()) .then(data => { // Handle the response from the backend inviteLink = data.invite_link; fetchComplete = true; const elapsedTime = Date.now() - startTime; const remainingTime = minLoadingTime - elapsedTime; // Wait until the minimum loading time is met if (remainingTime > 0) { setTimeout(() => { loadingCont.style.display = 'none'; readyLink.style.display = 'block'; titleLinkLoad.textContent = "Okay, kopiere jetzt den Link zu deiner Selbstauskunft:"; linkCopy.value = inviteLink; }, remainingTime); } else { loadingCont.style.display = 'none'; readyLink.style.display = 'block'; titleLinkLoad.textContent = "Okay, kopiere jetzt den Link zu deiner Selbstauskunft:"; linkCopy.value = inviteLink; } }) .catch((error) => { console.error('Error:', error); // Handle error appropriately here }); // Ensure the minimum loading time is met if the fetch completes early setTimeout(() => { if (fetchComplete) { loadingCont.style.display = 'none'; readyLink.style.display = 'block'; titleLinkLoad.textContent = "Okay, kopiere jetzt den Link zu deiner Selbstauskunft:"; linkCopy.value = inviteLink; } }, minLoadingTime); } // Function to copy text to clipboard function copyToClipboard(text) { navigator.clipboard.writeText(text).then(function() { console.log('Link copied to clipboard!'); }, function(err) { console.error('Could not copy text: ', err); }); } // Function to handle copy button click function handleCopyButtonClick() { copyToClipboard(inviteLink); // Change button styling copyButton.classList.add('green'); const icon = document.getElementById('iconcopyme'); icon.src = 'https://uploads-ssl.webflow.com/61918430ea8005fe5b5d3b6c/6537de0b7084885cc629cc2a_tick-icon-white-box.svg'; document.getElementById("labelcopyme").textContent = "Link wurde kopiert!"; // Reset styling after timeout setTimeout(() => { copyButton.classList.remove('green'); icon.src = 'https://cdn.prod.website-files.com/61918430ea8005fe5b5d3b6c/668564590be6255e27c04b95_copy-icon-black-hems.svg'; document.getElementById("labelcopyme").textContent = "Link kopieren"; }, 2000); // Adjust timeout duration as needed } // Placeholder function for animating elements inside the email share frame function animateEmailShareFrame() { // Add your animation code here console.log('Animating email share frame...'); } // Add click event listener to the start button startShareSaCta.addEventListener('click', function() { switchFrames(startShareSaFrame, typeShareSaFrame); }); // Add click event listener to the link share button linkShareSaCta.addEventListener('click', function() { switchFrames(typeShareSaFrame, linkShareSaFrame); animateLinkShareFrame(); }); // Add click event listener to the email share button emailShareSaCta.addEventListener('click', function() { switchFrames(typeShareSaFrame, emailShareSaFrame); animateEmailShareFrame(); }); // Add click event listener to the close button to reset frames closeShareSaCta.addEventListener('click', function() { resetFrames(); }); // Add click event listener to the copy button copyButton.addEventListener('click', handleCopyButtonClick); // Add this to your existing CSS or create a new