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