Debug

Social Stream

Fertig

<a onClick="handleskiingAreaOverviewClick(event, 'skiingAreaSlider', )">
            <div class="skiingAreaOverviewContainer">
                <div class="skiingAreaNameWrapper">
                    <img src="/images/flags/{{countryCode}}.png">
                    <p style="font-weight: 600;"></p>
                </div>
                
                <div class="skiingAreaOpenStatusWrapper">
                    <img src="/images/icon/{{openStatusIcon}}">
                    <h4 style="color: {{openStatusTextColor}};"></h4>
                </div>
                
                <div class="skiingAreaInformationWrapper">
                
                    <div class="skiingAreaSnowAlertWrapper">
                        <div class="mt-{{operatingSystem}}">
                            <input id="snowAlertToggle" type="checkbox" onChange="snowAlert2list({{skiingAreaId}},this)" {{snowPushActive}}>
                            <label for="snowAlertToggle"></label>
                        </div>
                        
                        <p></p>
                    </div>
                    
                    <div class="skiingAreaOverviewAdditionalInfoWrapper">
                        
                        <div class="skiingAreaOverviewAdditionalInfo" style="display: {{displayFreshSnowfall}};">
                            <img src="/images/icon/snow.png">
                            <p>cm</p>
                        </div>
                        
                        <div class="skiingAreaOverviewAdditionalInfo">
                            <img src="/images/icon/lifts.png">
                            <p><span style="color: var(--color-gray-light);">/</span></p>
                        </div>
                        
                        <div class="skiingAreaOverviewAdditionalInfo">
                            <img src="/images/weather/{{weatherSymbol}}.png">
                            <p>/°C</span></p>
                        </div>
                    </div>
                    
                    
                </div>
            </div>
        </a>

<a onClick="" style="display: block; width:100%; text-decoration:none; position: relative; margin-top: 0.5rem; height: 12rem; padding: 1rem; padding-right:0" id="listAd{{adNumber}}_container">
            <p style="color: var(--color-white); font-weight: 600; font-size: 0.7rem;"> </p>
            <p style="color: var(--color-white);  font-size: 0.6rem; margin-top:6.8rem; background-color:#8eb2e1; padding:5px; padding-left:10px; color:black; opacity:0.9; border-bottom-left-radius: 10px 10px; border-top-left-radius: 10px 10px;" >
                <span class="adHeadline1" style="font-weight:bold;">-</span> | <span class="adHeadline2">-</span> |
                <span class="adTextSmall">-</span>
            </p>
            <p style="color: var(--color-white); font-weight: 600; font-size: 0.7rem; padding:3px; opacity:0.8; background: var(--color-blue-main);  text-align:right; width:200px; float:right; border-bottom-left-radius: 10px 10px;" class="adCall2action">Jetzt Buchen!</p>
            <img class="adPicture21x9" src="" style="aspect-ratio:21/9; position: absolute; width: 100%;  top: 0; left: 0; object-fit: cover; object-position: left top; z-index: -1;">
        </a>
        <div style="display:none;"><div id='listAd{{adNumber}}'></div></div>

<div style="padding: 1rem 1rem 0rem 1rem; display: flex; flex-direction: column; gap: 1rem;">
     
            <h2></h2>
            <div style="position: relative; width: 100%; ">
              <video width="100%" preload="metadata" controls>
                  <source src="#t=0.1" type="video/mp4">
              </video>
            </div>
       
            <h2></h2>
            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                
                <div>
                    <swiper-container class="snowDistributionSwiperThumbs" slides-per-view="4">
                        <swiper-slide>
                            <p></p>
                            <img src="{{snowdepth0HoursImageUrl}}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;">
                        </swiper-slide>
                        <swiper-slide>
                            <p>+ 24h</p>
                            <img src="{{snowdepth24HoursImageUrl}}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;">
                        </swiper-slide>
                        <swiper-slide>
                            <p>+ 48h</p>
                            <img src="{{snowdepth48HoursImageUrl}}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;">
                        </swiper-slide>
                        <swiper-slide>
                            <p>+ 72h</p>
                            <img src="{{snowdepth72HoursImageUrl}}" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;">
                        </swiper-slide>
                    </swiper-container>
                    
                    <swiper-container class="snowDistributionSwiper" thumbs-swiper=".snowDistributionSwiperThumbs" onTouchstart="document.querySelector('.overviewSwiper').swiper.disable();" onTouchend="document.querySelector('.overviewSwiper').swiper.enable();" effect="fade">
                        <swiper-slide>
                            <img src="{{snowdepth0HoursImageUrl}}" style="width: 100%;">
                        </swiper-slide>
                        <swiper-slide>
                            <img src="{{snowdepth24HoursImageUrl}}" style="width: 100%;">
                        </swiper-slide>
                        <swiper-slide>
                            <img src="{{snowdepth48HoursImageUrl}}" style="width: 100%;">
                        </swiper-slide>
                        <swiper-slide>
                            <img src="{{snowdepth72HoursImageUrl}}" style="width: 100%;">
                        </swiper-slide>
                    </swiper-container>
                </div>
                
                <div style="width: 100%; background: white;">
                    <div class="snowdepth-legend">
                        <div class="snowdepth">
                            <div class="label"><i class="fa-light fa-snowflakes" aria-hidden="true"></i></div>
                            <div class="depth"><span>0</span><span>10</span><span>20</span><span style="color: #fff;">50</span><span style="color: #fff;">60</span><span style="color: #fff;">100</span><span style="color: #fff;">> 500</span></div>
                        </div>
                    </div>
                </div>
            </div>
            <h2></h2>
            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                <div style="position: relative; width: 100%;">
                    <video width="100%" preload="metadata" controls>
                        <source src="{{precipitateVideoUrl}}#t=0.1" type="video/mp4">
                    </video>
                </div>
                <div style="width: 100%; height: 8rem; background: white; margin-bottom:80px;">
                     
                    <div class="forecast-legend">
                        <div class="snow">
                            <div class="label"><i class="fa-light fa-snowflake" aria-hidden="true"></i></div>
                            <div class="snow-low"><span>0.1</span><span>3</span></div>
                            <div class="snow-deep"><span>10</span><span>30</span></div>
                        </div>
                        <div class="rain">
                            <div class="label"><i class="fa-regular fa-cloud-rain" aria-hidden="true"></i></div>
                            <div class="rain-low"><span>0.1</span><span>3</span></div>
                            <div class="rain-high"><span>10</span><span>30</span></div>
                            <div class="rain-highest"><span>>30</span></div>
                        </div>
                        <div class="snow-ice">
                            <div class="rain-snow-pattern"><span></span></div>
                            <div class="rain-ice-pattern"><span></span></div>
                        </div>
                    </div>
                      
                </div>
            </div>
            
        </div>

<div class="skiingAreaSliderWebcamSwiperWrapper">
            <a class="ctarow" href=''' target="_blank" class="skiingAreaSliderWebcamSwiperWrapperBackground"  onClick="securityLog('linkout','skiingAreaSlider', '','webcamSponsoring')">
                <div class="ctaimg"><img src='https://s3.eu-central-1.amazonaws.com/admedia.schneemenschen.de/webcamsponsoring/DB_logo.svg'></div>
                <div class="ctatext"></div>
            </a>
            <swiper-container id="webcamSwiper" style="width: 100%; aspect-ratio: 16/9; --swiper-pagination-color: var(--color-blue-main); --swiper-pagination-bullet-inactive-color: var(--color-white); --swiper-pagination-bullet-inactive-opacity: 0.6" onTouchstart="document.querySelector('#resortSwiper').swiper.disable();" onTouchend="document.querySelector('#resortSwiper').swiper.enable();" pagination="true">
                
            </swiper-container>
            <a href='' target="_blank" class="skiingAreaSliderWebcamSwiperWrapperBackground"  onClick="securityLog('linkout','skiingAreaSlider', '','webcamSponsoring')">
                
                <img src=''>
            </a>
        </div>

<div style="padding: 1rem;">
            <div class="skiingAreaSliderGroupWrapper skiingAreaSliderMainWrapper">
                <div style="display: flex; flex-direction: column; gap: 1rem;">
                    <div style="display: flex; justify-content: space-between;">
                        <div class="skiingAreaNameWrapper">
                            <img src="/images/flags/{{countryCode}}.png">
                            <p style="color: var(--color-gray-light);">, </p>
                        </div>
                        
                        
                    </div>
                    
                    <div style="display: flex; justify-content: space-between;">
                        <div class="skiingAreaOpenStatusWrapper">
                            <img src="/images/icon/{{openStatusIcon}}">
                            <h4 style="color: {{openStatusTextColor}}"></h4>
                        </div>
                        
                        
                    </div>
                </div>
                
                <div style="display: flex; gap: 1.5rem;">
                    <div class="skiingAreaSliderImageTextWrapper">
                        <img src="/images/weather/{{weatherSymbol}}.png">
                        <p class="pLarge">°C</p>
                    </div>
                    <div class="skiingAreaSliderImageTextWrapper">
                        <img src="/images/icon/umbrella.png">
                        <p class="pLarge">%</p>
                    </div>
                </div>
                
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div style="display: flex; gap: 0.5rem;">
                        <div class="mt-{{operatingSystem}}">
                            <input id="snowAlertToggle" type="checkbox" onChange="snowAlert2list({{skiingAreaId}},this)" {{snowPushActive}}>
                            <label for="snowAlertToggle"></label>
                        </div>
                        
                        <p></p>
                    </div>
                    
                    
                    
                    
                </div>
            </div>
            <div class="skiingAreaSliderGroupWrapper">
                <div class="skiingAreaSliderImageTextWrapper">
                    <img src="/images/icon/snow.png">
                    <h2></h2>
                </div>
            </div>
            <div class="skiingAreaSliderGroupWrapper">
                <div style="display: flex; gap: 1.5rem;">
                    <div class="skiingAreaSliderVerticalItemWrapper">
                        <p> ( m)</p>
                        <div class="skiingAreaSliderImageTextWrapper">
                            <img src="/images/icon/mountainTop.png">
                            <p class="pLarge"><span style="color: var(--color-gray-light);">cm</span></p>
                        </div>
                    </div>
                    <div class="skiingAreaSliderVerticalItemWrapper">
                        <p> ( m)</p>
                        <div class="skiingAreaSliderImageTextWrapper">
                            <img src="/images/icon/valley.png">
                            <p class="pLarge"><span style="color: var(--color-gray-light);">cm</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="skiingAreaSliderGroupWrapper">
                <div class="skiingAreaSliderVerticalItemWrapper">
                    <p></p>
                    <div class="skiingAreaSliderImageTextWrapper">
                        <img src="/images/icon/clock.png">
                        <p class="pLarge"><span style="color: var(--color-gray-light);">cm</span></p>
                    </div>
                </div>
            </div>
            <div class="skiingAreaSliderGroupWrapper">
                <div style="display: flex; gap: 1.5rem;">
                    <div class="skiingAreaSliderVerticalItemWrapper">
                        <p></p>
                        <div class="skiingAreaSliderImageTextWrapper">
                            <img src="/images/icon/slopes.png">
                            <p class="pLarge"><span style="color: var(--color-gray-light);">/</span></p>
                        </div>
                    </div>
                    <div class="skiingAreaSliderVerticalItemWrapper">
                        <p></p>
                        <div class="skiingAreaSliderImageTextWrapper">
                            <img src="/images/icon/lifts.png">
                            <p class="pLarge"><span style="color: var(--color-gray-light);">/</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="skiingAreaSliderGroupWrapper">
                <p style="font-size: 0.75rem; color: var(--color-gray-light);"> </p>
            </div>
            <div class="skiingAreaSliderGroupWrapper">
                <div style="display: flex; justify-content: space-around;">
                    <div class="skiingAreaSliderButtonCaptionWrapper">
                        <a class="skiingAreaSliderButton" onClick="showPage('skiingAreaWeather',)">
                            <img src="/images/icon/weather.png">
                        </a>
                        <p style="color: var(--color-blue-light);"></p>
                    </div>
                    <div class="skiingAreaSliderButtonCaptionWrapper">
                        <a class="skiingAreaSliderButton" onClick="showPage('skiingAreaSlope',)">
                            <img src="/images/icon/slopes.png">
                        </a>
                        <p style="color: var(--color-blue-light);"></p>
                    </div>
                    <div class="skiingAreaSliderButtonCaptionWrapper">
                        <a class="skiingAreaSliderButton" onClick="showPage('skiingAreaSkipass',)">
                            <img src="/images/icon/skipasses.png">
                        </a>
                        <p style="color: var(--color-blue-light);"></p>
                    </div>
                </div>
            </div>
            
            <div class="skiingAreaSliderGroupWrapper">
                <div style="display: flex; justify-content: space-around;">
                    <div class="skiingAreaSliderButtonCaptionWrapper" style="{{displaySkiingHoliday}}">
                        <a class="skiingAreaSliderButton" href="{{skiingHolidayUrl}}" target="_blank" onClick="securityLog('linkoutInternal','skiingAreaSlider', '','travel')">
                            <img src="/images/icon/hotels.png">
                        </a>
                        <p style="color: var(--color-blue-light);"></p>
                    </div>
                    <div class="skiingAreaSliderButtonCaptionWrapper" style="{{displaySkiingLessons}}">
                        <a class="skiingAreaSliderButton" href="{{skiingLessonsUrl}}" target="_blank" onClick="securityLog('linkoutInternal','skiingAreaSlider', '','skiingLessons')">
                            <img src="/images/icon/courses.png">
                        </a>
                        <p style="color: var(--color-blue-light);"></p>
                    </div>
                    <div class="skiingAreaSliderButtonCaptionWrapper" style="{{displaySkiingRental}}">
                        <a class="skiingAreaSliderButton" href="{{skiingRentalUrl}}" target="_blank" onClick="securityLog('linkoutInternal','skiingAreaSlider', '','skiingRental')">
                            <img src="/images/icon/rental.png">
                        </a>
                        <p style="color: var(--color-blue-light);"></p>
                    </div>
                </div>
            </div>
        </div>
    
        
        
        <div style="display: flex; flex-direction: column; gap: 1.5rem; padding: 1rem;">
            <h2></h2>
            <div class="skiingAreaSliderContactGrid">
                <p style="color: var(--color-gray-light); {{displayEmail}}"></p>
                <a href="mailto:{{email}}" style="text-decoration: none; color: var(--color-white); {{displayEmail}}"></a>
                <p style="color: var(--color-gray-light); {{displayHomepage}}"></p>
                <a href="{{homepage}}" target="_blank" style="text-decoration: none; color: var(--color-white); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; {{displayHomepage}}" onClick="securityLog('linkout','skiingAreaSlider', '','skiingAreaWebsite')"></a>
                <p style="color: var(--color-gray-light)"></p>
                <a href="geo:{{latitude}},{{longitude}}?q={{skiingAreaName}}" targt="_blank" style="text-decoration: none; color: var(--color-white);">, , </a>
                <p style="color: var(--color-gray-light); {{displayPhoneNumber}}"></p>
                <a href="tel:{{phoneNumber}}" style="text-decoration: none; color: var(--color-white); {{displayPhoneNumber}}"></a>
            </div>
        </div>

<div class="skiingAreaWeatherForecastWrapper">
            
            
            
            
            
            
            <div style="display: flex; gap: 1rem; align-items: center;">
                <div style="width: 2.5rem; height: 2.5rem;">
                    <img src="/images/weather/{{symbol}}.png" style="width:100%;">
                </div>
                <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                    <p style="color: var(--color-gray-light);">{{position}}</p>
                    <div style="display: flex; gap: 1rem; align-items: center;">
                        <p></p>
                        <div style="display: flex; gap: 0.25rem; align-items: center;">
                            <div style="width: 1.5rem; height: 1.5rem;">
                                <img src="/images/icon/umbrella.png" style="width:100%;">
                            </div>
                            <p>%</p>
                        </div>
                        <div style="display: flex; gap: 0.25rem; align-items: center;">
                            <div style="width: 1.5rem; height: 1.5rem;">
                                <img src="/images/weather/clear.png" style="width:100%;">
                            </div>
                            <p></p>
                        </div>
                        <div style="display: flex; gap: 0.25rem; align-items: center;">
                            <div style="width: 1.5rem; height: 1.5rem;">
                                <img src="/images/icon/snowFresh.png" style="width:100%;">
                            </div>
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<div class="skiingAreaSkipassContentWrapper">
            <p> {{skipassName}}</p>
            
            <div class="skiingAreaSkipassPriceWrapper">
                <div class="skiingAreaSkipassPriceColumn">
                    <h3><span style="color: var(--color-blue-light);"></span> </h3>
                    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                        <div style="display: flex; justify-content: space-between;">
                            <p style="color: {{adultMinColor}}"></p>
                            <p style="color: {{adultMinColor}}"></p>
                        </div>
                        
                        <div style="display: flex; justify-content: space-between;">
                            <p style="color: {{childMinColor}}"></p>
                            <p style="color: {{childMinColor}}"></p>
                        </div>
                        
                        <div style="display: flex; justify-content: space-between;">
                            <p style="color: {{seniorMinColor}}"></p>
                            <p style="color: {{seniorMinColor}}"></p>
                        </div>
                    </div>
                </div>
                
                <div class="skiingAreaSkipassPriceColumn" style="display: {{displayColumnMax}}">
                    <h3><span style="color: var(--color-blue-light);"></span> </h3>
                    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                        <div style="display: flex; justify-content: space-between;">
                            <p style="color: {{adultMaxColor}}"></p>
                            <p style="color: {{adultMaxColor}}"></p>
                        </div>
                        
                        <div style="display: flex; justify-content: space-between;">
                            <p style="color: {{childMaxColor}}"></p>
                            <p style="color: {{childMaxColor}}"></p>
                        </div>
                        
                        <div style="display: flex; justify-content: space-between;">
                            <p style="color: {{seniorMaxColor}}"></p>
                            <p style="color: {{seniorMaxColor}}"></p>
                        </div>
                    </div>
                </div>
            </div>
            
            <button class='skiingAreaSkipassDetailButton' onClick="showPage('skiingAreaSkipassDetail','{{skipassId}}')">
                <img src='/images/icon/moreDetails.png' style="transform: rotate(-90deg);">
                <p></p>
            </button>
        </div>

<div style="padding: 1rem; display: flex; flex-direction: column; gap: 1rem;">
            <div class="settingsDetailDebugGroup">
                <p class="settingDetailDebugHeadings">UserId:</p>
                <input type="text" value="" class="settingDetailDebugTextInput">
            </div>
            <div class="settingsDetailDebugGroup">
                <p class="settingDetailDebugHeadings">UserKey:</p>
                <input type="text" value="" class="settingDetailDebugTextInput">
            </div>
            <div class="settingsDetailDebugGroup">
                <p class="settingDetailDebugHeadings">Firebase Push Key:</p>
                <input type="text" value="" class="settingDetailDebugTextInput">
            </div>
            <div class="settingsDetailDebugGroup">
                <p class="settingDetailDebugHeadings">Useragent:</p>
                <input type="text" value="" class="settingDetailDebugTextInput">
            </div>
             
            <div class="settingsDetailDebugGroup">
                <p class="settingDetailDebugHeadings">Language:</p>
                <select onChange="setLocale(this.value);" class="settingDetailDebugTextInput">
                    <option value="{{locale}}">Current Locale {{locale}}</option>
                    <option value="cz_CZ">cz_CZ</option>
                    <option value="de_DE">de_DE</option>
                    <option value="dk_DK">dk_DK</option>
                    <option value="en_EN">en_EN</option>
                    <option value="es_ES">es_ES</option>
                    <option value="fi_FI">fi_FI</option>
                    <option value="fr_FR">fr_FR</option>
                    <option value="it_IT">it_IT</option>
                    <option value="nl_NL">nl_NL</option>
                    <option value="no_NO">no_NO</option>
                    <option value="pl_PL">pl_PL</option>
                    <option value="pt_PT">pt_PT</option>
                    <option value="ro_RO">ro_RO</option>
                    <option value="ru_RU">ru_RU</option>
                    <option value="sk_SK">sk_SK</option>
                    <option value="sl_SL">sl_SL</option>
                    <option value="sv_SE">sv_SE</option>
                    <option value="tr_TR">tr_TR</option>                      
                </select>
            </div> 
            
            
            <div class="settingsDetailDebugGroup">
                <p class="settingDetailDebugHeadings">App Version: </p>
            </div>
            <div class="settingsDetailDebugGroup">
                <p class="settingDetailDebugHeadings"><button class="settingDetailDebugButton" onclick="handleWelcomeOverlay();">Welcome Overlay</button></p>
            </div>
            <div class="settingsDetailDebugGroup">
                <p class="settingDetailDebugHeadings">Last cache build:</p>
                <p id="settingsDetailDebugCacheBuild" style="height: auto; max-height: 12rem; overflow-y: auto;"></p>
                <button class="settingDetailDebugButton" onclick="clearCacheLog();">Clear Cache Log</button>
            </div>
       
        </div>

<div class="settingsOverviewGroupWrapper">
            <div class="settingsOverviewHeadingWrapper">
                <p></p>
            </div>
            <div class="settingsOverviewItemWrapper">
                
            </div>
            <div class="settingsOverviewItemWrapper">
               <button onclick="sendTestPush();" class="settingDetailDebugButton"></button>
               <div id="sendTestPushOutputField" style="padding-left:2rem"></div>
            </div>
        </div>
     
        <div class="settingsOverviewGroupWrapper">
            <div class="settingsOverviewHeadingWrapper">
                <p></p>
            </div>
            <div class="settingsOverviewItemWrapper">
               <div onClick="showPage('settingsDetailDebug')"></div>
            </div>
            <div class="settingsOverviewItemWrapper">
               <a href="mailto:app@schneemenschen.de" target="_blank" style="color: white; text-decoration: none;"></a>
            </div> 
            
        </div>
      
        <div class="settingsOverviewGroupWrapper"> 
            <div class="settingsOverviewHeadingWrapper">
                <p></p>
            </div>
            
            <div class="settingsOverviewItemWrapper">
             
                <div class="mt-ios">
                    <input id="analyticsDataToggle" type="checkbox" onChange="setUseAnalytics(this);" {{useAnalytics}}>
                    <label for="analyticsDataToggle"></label>
                </div>
               </a>
            </div>
            <div class="settingsOverviewItemWrapper">
               <a href="https://www.schneehoehen.de/impressum" target="_blank" style="color: white; text-decoration: none;"></a>
            </div>
            <div class="settingsOverviewItemWrapper">
                <a href="" target="_blank" style="color: white; text-decoration: none;"></a>
            </div>
            <div class="settingsOverviewItemWrapper">
                <a href="" target="_blank" style="color: white; text-decoration: none;"></a>
             </div>  
        </div>

<div class="webcamSwiperFullscreenWrapper" style="display: flex; flex-direction: column;">
            <div style="position: relative; display: flex; flex-direction: column; justify-content: center; flex-grow: 1;">
                
                <a class="webcamSwiperFullscreenAd" href='' target="_blank" style="position: absolute; width: 100%; height: 100%; top: 0;">
                    <picture>
                        <source srcset='' media="(orientation: portrait)" />
                        <img src='' style="width: 100%; height: 100%; object-fit: cover; object-position: left top;">
                    </picture>
                    
                </a>
            </div>
            <div class="webcamSwiperFullscreenBottomInfo" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: var(--color-blue-dark);">
                <div>
                    <p style="font-size: 1rem; font-weight: 600;"></p>
                    <p></p>
                </div>
            </div>
        </div>