https://price-alert.io/

Submitted URL:
https://price-alert.io/
Report Finished:
LinkText
https://www.instagram.com/price.alert.io Instagram

JavaScript Variables · 12 found

NameType
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
dmxobject
Hjsonobject
toggleVisibilityfunction
showTabContentfunction
toggleAnswerfunction
uidEventnumber
bootstrapobject

Console log messages · 0 found

HTML

<!DOCTYPE html><html is="dmx-app" lang="de" style=""><head>
    <base href="/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Preisalarm für alle online Produkte | price-alert.io</title>
    <!-- Meta Tags -->
    
    <meta property="og:title" content="Preisalarm für alle online Produkte | price-alert.io">
    <meta name="twitter:title" content="Preisalarm für alle online Produkte | price-alert.io">

    <meta property="og:description" content="Preisalarm für alle online Produkte. Verpasse nie wieder eine Preisänderung - unser online Preisüberwacher hält dich stets auf dem Laufenden.">
    <meta name="description" content="Preisalarm für alle online Produkte. Verpasse nie wieder eine Preisänderung - unser online Preisüberwacher hält dich stets auf dem Laufenden.">
    <meta name="twitter:description" content="Preisalarm für alle online Produkte. Verpasse nie wieder eine Preisänderung - unser online Preisüberwacher hält dich stets auf dem Laufenden.">

    <meta property="og:image" content="https://price-alert.io/assets/images/price-alert-logo-small.png">
    <meta name="twitter:image" content="https://price-alert.io/assets/images/price-alert-logo-small.png">

    <meta property="og:url" content="https://price-alert.io">

    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="dmxAppConnect/dmxBootstrap5Navigation/dmxBootstrap5Navigation.js" defer=""></script>
    <script src="dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
    <link rel="stylesheet" href="dmxAppConnect/dmxValidator/dmxValidator.css">
    <script src="dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>
    <script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>
    <script src="dmxAppConnect/dmxBootstrap5Alert/dmxBootstrap5Alert.js" defer=""></script>

    <script src="dmxAppConnect/dmxTyped/dmxTyped.js" defer=""></script>
    <script src="dmxAppConnect/dmxTyped/typed.min.js" defer=""></script>
    <script src="dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>
    <link rel="icon" href="assets/images/price-alert-logo-small.png" type="image/png">





    <link rel="stylesheet" href="dmxAppConnect/dmxPreloader/dmxPreloader.css">
    <script src="dmxAppConnect/dmxPreloader/dmxPreloader.js" defer=""></script>
    <link rel="stylesheet" href="dmxAppConnect/dmxAnimateCSS/animate.min.css">
    <script src="dmxAppConnect/dmxAnimateCSS/dmxAnimateCSS.js" defer=""></script>
    <script src="dmxAppConnect/dmxCharts/Chart.min.js" defer=""></script>
    <script src="dmxAppConnect/dmxCharts/dmxCharts.js" defer=""></script>
    <link rel="stylesheet" href="css/custom-style.css">
</head>

<body id="index">
    <dmx-serverconnect id="check_before_add_price_alert" url="dmxConnect/api/product_crawler_add_price_alert.php" noload="true"></dmx-serverconnect>
    <dmx-serverconnect id="get_product_price_history" url="dmxConnect/api/get_product_price_history.php" noload="true" dmx-param:pro_id="form1.data.product_get[0].pro_id" dmx-param:pro_id2="form12.data.product_get[0].pro_id" dmx-param:pro_id3="form13.data.product_get[0].pro_id"></dmx-serverconnect>
    <dmx-serverconnect id="get_product_similar" url="dmxConnect/api/product_crawler_get_similar.php" noload="true" dmx-param:pro_name="form1.data.product_get[0].pro_name" dmx-param:pro_url="form1.data.product_get[0].pro_url" dmx-param:shop_id="form1.data.product_get[0].shop_id" dmx-param:pro_id="form1.data.product_get[0].pro_id"></dmx-serverconnect>

    <dmx-local-manager id="local1"></dmx-local-manager>
    <dmx-serverconnect id="get_faq_front" url="dmxConnect/api/get_faq_front.php" cache="local1" ttl="60000"></dmx-serverconnect>

    <div is="dmx-browser" id="browser1"></div>


    <!-- Wappler include head-page="index.php" appConnect="local" is="dmx-app" bootstrap5="local" fontawesome_5pro="cdn" components="{dmxBootstrap5Navigation:{},dmxBrowser:{}}" -->

<!-- Wappler include head-page="index.php" appconnect="local" is="dmx-app" bootstrap5="local" fontawesome_5pro="cdn" components="{dmxBootstrap5Navigation:{}}" -->

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .navbar {
        background-color: #ffffff;
        /* Hintergrundfarbe des Navbars */
    }

    .navbar-brand img {
        height: 55px;
        transition: transform 0.3s ease;
    }

    .navbar-brand img:hover {
        transform: scale(1.1);
        /* Vergrößern beim Überfahren */
    }

    .nav-link {
        color: #212529;
        /* Farbe der Links */
        font-size: 16px;
        transition: color 0.3s ease;
    }

    .nav-link:hover {

        transform: scale(1.1);
        /* Farbe beim Überfahren */
    }

    .navbar-toggler-icon {
        background-color: #212529;
        /* Farbe des Toggle-Icons */
    }
</style>
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img src="assets/images/price-alert-logo.png" height="70px" class="d-none d-md-inline" alt="price-alert.io Logo">
                <img src="assets/images/price-alert-logo.png" height="55px" class="d-md-none" alt="price-alert.io Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" is="dmx-button" value="">
                <i class="far fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto ps-2">
                    <li class="nav-item">
                        <a class="nav-link active" href="/" is="dmx-nav-link"><i class="fal fa-bullhorn"></i> Preisalarm</a>
                    </li>
                    <!--<li class="nav-item">
                        <a class="nav-link" href="shop-check" is="dmx-nav-link"><i class="fal fa-bags-shopping"></i> Shop Check
                            <span style="display:inline-block; background-color:#007bff; color:white; border-radius:4px; padding:3px 6px; font-weight:bold; font-family:sans-serif; font-size:12px; text-align:center; text-transform:uppercase; letter-spacing:0.5px;">
                                Beta
                            </span>

                        </a>

                    </li>-->
                    <li class="nav-item">
                        <a class="nav-link" href="dashboard" is="dmx-nav-link"><i class="fal fa-user-circle"></i> My Alerts</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="blog" is="dmx-nav-link"><i class="fal fa-newspaper"></i> Blog</a>
                    </li>

                    <!-- Weitere Nav-Links können hier hinzugefügt werden -->
                </ul>
            </div>
        </div>
    </nav>
    <section id="conditional1" is="dmx-if" dmx-bind:condition="browser1.location.hostname=='test.price-alert.io'"></section>
</header>

<style>
    /* Media Query für kleine Geräte */
    @media only screen and (max-width: 991px) {
        #navbarNav {
            background-color: #17a2b8;
            /* Hintergrundfarbe für kleine Geräte */
        }
    }
</style>
    <main>
        <section id="generaltop" class="mt-4">

            <style>
                body {
                    font-family: Arial, sans-serif;
                }

                .intro-section {
                    padding: 100px 0;
                    text-align: center;
                    color: #212529;
                }

                .highlight {
                    background-color: #26c6da;
                    padding: 5px 10px;
                    border-radius: 5px;
                    font-weight: bold;
                }

                @media (max-width: 767.98px) {
                    .intro-section {
                        padding-top: 50px;
                        padding-bottom: 50px;
                    }
                }
            </style>
            <div class="container intro-section">
                <h1 class="display-3 fw-bolder">Dein <span class="highlight">Preisalarm.</span> <br class="d-md-none">Für Transparenz im Ecommerce.</h1>
                <p class="w-75 mx-auto mt-4">Verpasse nie wieder eine Preisänderung - unser online Preisüberwacher hält dich stets auf dem Laufenden.</p>
            </div>

        </section>
        <section id="inputsection" class="mt-5 mb-4" dmx-show="btnmore1.value==0 &amp;&amp; btnmore12.value==0 &amp;&amp; btnmore13.value==0" style="">
            <div class="container">

                <!--<form id="form1" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/product_crawler.php" dmx-on:start="alertform2success.hide()" dmx-on:done="get_product_price_history.load({pro_id: form1.data.product_get[0].pro_id});get_product_similar.load({pro_name: form1.data.product_get[0].pro_name, pro_url: form1.data.product_get[0].pro_url, shop_id: form1.data.product_get[0].shop_id, pro_id: form1.data.product_get[0].pro_id})">-->

                <div style="" class="input-container mb-2">
                    <input id="producturlinput" name="producturlinput" type="text" class="form-control" style="border-radius: 40px; padding: 10px; border: 5px solid #ccc; font-size: 20px;height: 62px;" required="" placeholder="Produkt Link" dmx-on:updated="form1.producturl1.setValue(producturlinput.value)" is="dmx-input" value="">
                    <button id="btn1input" class="btn btn-primary search-button" type="submit" style="" dmx-on:click="form1.producturl1.setValue(producturlinput.value);form1.submit();btnmore1.setValue(1);" is="dmx-button" value="">
                        <i class="far fa-search"></i>
                    </button>

                </div>

                <!--</form>-->





                <!--<button style="display: inline-block;
    padding: 5px 15px;
    background-color: transparent;
    /* color: #007bff; */
    font-size: 13px;
    border: 2px solid #ccc;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;" id="clipboard-info" class="ps-2 btn" onclick="insertClipboardValue()"><i class="fal fa-paste fa-lg">&nbsp;</i>Einfügen
                </button>-->

                <button id="btn3" class="btn" style="display: none !important; padding: 5px 15px; background-color: transparent; font-size: 13px; border: 2px solid rgb(204, 204, 204); border-radius: 30px; cursor: pointer; transition: background-color 0.3s ease-in-out 0s;" dmx-show="producturlinput.value != ''" dmx-on:click="producturlinput.setValue('');" is="dmx-button" value="" type="button"><i class="fal fa-trash-alt">&nbsp;</i>Leeren</button>






            </div>
            <script>
                window.addEventListener('load', function() {

                    // Funktion um GET-Parameter auszulesen
                function getQueryParameter(name) {
                    let urlParams = new URLSearchParams(window.location.search);
                    return urlParams.get(name);
                }

                // Überprüfen ob der GET-Parameter 'q' nicht leer ist
                if (getQueryParameter('q')) {
                    
                    const inputField = document.getElementById('producturl1');
                    
                    // Den Wert des GET-Parameters 'q' erhalten
                    let qValue = getQueryParameter('q');
                    if(qValue.startsWith("https")){
                            inputField.value = qValue;
                            inputField.setAttribute('value', qValue);
                            inputField.dispatchEvent(new Event('input'));

                            // Get the button element
                            var button = document.getElementById('btnmore1');

                            // Set the value to 1
                            button.setAttribute('value', '1');
                            // Simulate a 'change' event
                            var event = new Event('change');
                            button.dispatchEvent(event);

                            var button = document.getElementById('btn1');
                                if (button) {
                                    console.log('Button klick');
        // Klick auf den Button simulieren
        button.click();
    } else {
        console.log('Button nicht gefunden.');
    }
                                // Klick auf den Button simulieren
                                //button.click();
                    // Formular mit der ID 'meinFormular' absenden
                    //document.getElementById('form1').submit();
                    }
                } 

                 });  

                 

                
                
            </script>

            <script>
                // Funktion, um den Wert aus der Zwischenablage in das Eingabefeld einzufügen
                /*function insertClipboardValue() {
                    navigator.clipboard.readText().then(text => {
                        const inputField = document.getElementById('producturl');
                        if(text.startsWith("https")){
                            inputField.value = text;
                            inputField.setAttribute('value', text);
                            inputField.dispatchEvent(new Event('input'));

                            var button = document.getElementById('btn1');
                                
                                // Klick auf den Button simulieren
                                button.click();
                            // Formular-Element auswählen
                            //var form = document.getElementById('form1');
                            
                            // Formular automatisch absenden
                            //form.submit();
                            //document.getElementById('clipboard-info').style.display = 'block';
                        } else {
                            // Button-Element auswählen
                            var button = document.getElementById('clipboard-info');
                            
                            // Neuen Text setzen
                            button.innerText = "Die Zwischenablage ist leer!";

                        }
                        //inputField.focus(); // Focus on the input field
                            }).catch(err => {
                                console.error('Failed to read clipboard contents: ', err);
                            });
                }*/
                    
                
                

                // Rufen Sie die Funktion zum Einfügen des Clipboard-Werts beim Laden der Seite auf
                //window.onload = insertClipboardValue;
            </script>
            <style>
                .input-container {
                    display: flex;
                    align-items: center;
                    position: relative;
                }

                .search-button {
                    background-color: #ff9800;
                    color: white;
                    border: none;
                    cursor: pointer;
                    font-size: 18px;
                    padding: 10px 20px;
                    border-radius: 25px;
                    transition: background-color 0.3s ease-in-out;
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                .search-button:hover {
                    background-color: #ff9800;
                }
            </style>

        </section>
        <style>
            .result-product a {
                text-decoration: none;
                color: black;
            }

            .result-product img {
                transition: transform 0.3s ease;
            }

            .result-product img:hover {
                transform: scale(1.1);
            }

            .rounded-box1 {
                max-width: 250px;
                width: fit-content;
                padding: 5px 15px;
                border-radius: 10px;
                background-color: #ff6443;
                ;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 10px;
                font-size: 13px;
                z-index: 99;
                position: relative;
            }
        </style>

        <!-- Style Produkt Resultate -->
        <style>

        </style>
        <section id="resultsection" dmx-show="btnmore1.value==1 || btnmore12.value==1 || btnmore13.value==1" style="display: none !important;">
            <div class="container">

                <div class="mb-3 result-product" style="background-color: #f5f5f5;
                        border-radius: 10px;
                        padding: 5px 20px 20px 20px;
                        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
                        ">
                    <!-- Tab-Navigation -->
                    <div class="tabs container-top-link">

                        <div class="tab-button-wrapper" style="text-align: center;">
                            <a class="tab-button-link active" dmx-bind:href="browser1.location.origin+browser1.location.pathname+browser1.location.search+'#inputsection'" href="https://price-alert.io/#inputsection"><span><i class="fal fa-bell-on fa-lg"></i><br><span style="font-size: clamp(10px, 2vw, 20px);margin-top: -5px;display: block;">Preisalarm</span></span>
                            </a>

                            <a class="tab-button-link" dmx-bind:href="browser1.location.origin+browser1.location.pathname+browser1.location.search+'#more-products'" href="https://price-alert.io/#more-products"><span><i class="fal fa-bags-shopping fa-lg"></i><br><span style="font-size: clamp(10px, 2vw, 20px);margin-top: -5px;display: block;">Mehr entdecken</span></span>
                            </a>
                        </div>
                    </div>


                    <!-- Produkt 1 -->
                    <!--<div class="row">
                        <div class="col-3 text-center">
                            <a dmx-bind:href="form1.data.product_get[0].pro_url" target="_blank">
                                <img onerror="this.src='/assets/images/placeholder.png'" class="wappler-type-picture rounded mb-3" dmx-bind:src="form1.data.product_get[0].pro_image" style="max-height:200px;max-width: 100%;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);" dmx-animate-enter="fadeIn">

                            </a>
                        </div>


                        <div class="col-9">

                            <h4 class="product-title">{{form1.data.product_get[0].pro_name}}</h4>
                            <div>
                                <i class="fal fa-tag"></i> {{form1.data.product_get[0].pro_price}} {{form1.data.product_get[0].pro_currency}}
                            </div>

                            <a target="_blank" dmx-bind:href="form1.data.product_get[0].pro_url">
                                <div class="product-link">
                                    {{form1.data.product_get[0].pro_url}}
                                </div>
                            </a>
                        </div>
                    </div>-->

                    <!-- PRODUKT 1 -->

                    <div class="row">
                        <div class="col-12">

                            <button id="btnmore1" class="col-12 d-block rounded pt-3 pb-3 ps-3 pe-3" style="background-color: rgb(229, 229, 229); border: none;" dmx-show="btnmore1.value==0" dmx-bind:value="0" dmx-on:click="btnmore1.setValue(1)" is="dmx-button" value="0" type="button">
                                <i class="fal fa-plus-circle"></i> Produkt hinzufügen
                            </button>

                            <form id="form1" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/product_crawler.php" dmx-on:start="alertform2success.hide()" dmx-on:done="get_product_price_history.load({});get_product_similar.load({})" dmx-show="((btnmore1.value==1 &amp;&amp; form1.status == 0) || (form1.data.product_get[0].pro_price == NULL &amp;&amp; btnmore1.value==1)) &amp;&amp; form1.state.executing == false" novalidate="" style="display: none !important;">

                                <div style="" class="input-container mb-2" role="alert">
                                    <input id="producturl1" name="producturl" type="text" class="form-control" style="border-radius: 40px; padding: 10px; border: 5px solid #ccc; font-size: 20px;height: 62px;" required="" placeholder="Produkt Link" is="dmx-input" value="">
                                    <button id="btn1" class="btn btn-primary search-button" type="submit" style="" is="dmx-button" value="">
                                        <i class="far fa-search"></i>
                                    </button>

                                </div>




                            </form>
                            <div class="alert fade alert-warning" id="alert1" type="warning" is="dmx-bs5-alert" role="alert" dmx-bind:show="form1.status == 200 &amp;&amp; form1.data.product_get[0].pro_id == NULL" style="display: none;">
                                <p>Hoppla! Anscheinend haben wir das Produkt nicht finden können. Keine Sorge, unsere Detektive sind bereits am Werk und suchen nach dem verlorenen Schatz. Mach dir keine Sorgen, bald wird dieses mysteriöse Produkt auftauchen und du wirst in der Lage sein, deinen Preisalarm zu setzen. Bis dahin halt die Augen offen und bleib gespannt! 🕵️‍♂️🔍</p>
                            </div>
                            <span class="loading-span" style="height: 150px; width: 100%; display: none !important;" dmx-show="form1.state.executing"></span>
                        </div>
                        <div class="col-3 text-center" dmx-show="form1.status == 200 &amp;&amp; form1.data.product_get[0].pro_price &amp;&amp; form1.data.product_get[0].pro_name" style="display: none !important;">
                            <a dmx-bind:href="form1.data.product_get[0].pro_url" target="_blank">
                                <img onerror="this.src='/assets/images/placeholder.png'" class="wappler-type-picture rounded mb-3 animate__animated animate__fadeIn" dmx-bind:src="form1.data.product_get[0].pro_image" style="max-height:200px;max-width: 100%;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);" dmx-animate-enter="fadeIn">

                            </a>
                        </div>



                        <div class="col-9" dmx-show="form1.status == 200 &amp;&amp; form1.data.product_get[0].pro_price &amp;&amp; form1.data.product_get[0].pro_name" style="display: none !important;">

                            <button class="delete-button" type="submit" dmx-on:click="form1.reset(true);btnmore1.setValue(0);get_product_price_history.load({});producturlinput.setValue('')" is="dmx-button" value=""><i class="fal fa-times-circle" style="font-size: x-large; color: red;"></i> </button>
                            <h4 class="product-title"></h4>
                            <div>
                                <i class="fal fa-tag"></i>  
                            </div>

                            <a target="_blank" dmx-bind:href="form1.data.product_get[0].pro_url">
                                <div class="product-link mt-1">
                                    
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- PRODUKT 2 -->
                    <div class="row" dmx-show="btnmore12.value==1 || form1.status == 200" style="display: none !important;">
                        <div class="col-12">
                            <hr>
                            <button id="btnmore12" class="col-12 d-block rounded pt-3 pb-3 ps-3 pe-3" style="background-color: rgb(229, 229, 229); border: none;" dmx-show="btnmore12.value==0" dmx-bind:value="0" dmx-on:click="btnmore12.setValue(1)" is="dmx-button" value="0" type="button">
                                <i class="fal fa-plus-circle"></i> Produkt hinzufügen
                            </button>

                            <form id="form12" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/product_crawler.php" dmx-on:start="alertform2success.hide()" dmx-on:done="get_product_price_history.load({pro_id: form1.data.product_get[0].pro_id, pro_id2: form12.data.product_get[0].pro_id})" dmx-show="((btnmore12.value==1 &amp;&amp; form12.status == 0) || (form12.data.product_get[0].pro_price == NULL &amp;&amp; btnmore12.value==1)) &amp;&amp; form12.state.executing == false" novalidate="" style="display: none !important;">


                                <div style="" class="input-container mb-2">
                                    <input id="producturl12" name="producturl" type="text" class="form-control" style="border-radius: 40px; padding: 10px; border: 5px solid #ccc; font-size: 20px;height: 62px;" required="" placeholder="Produkt Link" is="dmx-input" value="">
                                    <button id="btn12" class="btn btn-primary search-button" type="submit" style="" is="dmx-button" value="">
                                        <i class="far fa-search"></i>
                                    </button>

                                </div>



                            </form>
                            <div class="alert fade alert-warning" id="alert12" type="warning" is="dmx-bs5-alert" role="alert" dmx-bind:show="form12.status == 200 &amp;&amp; form12.data.product_get[0].pro_id == NULL" style="display: none;">
                                <p>Hoppla! Anscheinend haben wir das Produkt nicht finden können. Keine Sorge, unsere Detektive sind bereits am Werk und suchen nach dem verlorenen Schatz. Mach dir keine Sorgen, bald wird dieses mysteriöse Produkt auftauchen und du wirst in der Lage sein, deinen Preisalarm zu setzen. Bis dahin halt die Augen offen und bleib gespannt! 🕵️‍♂️🔍</p>
                            </div>
                            <span class="loading-span" style="height: 150px; width: 100%; display: none !important;" dmx-show="form12.state.executing"></span>
                        </div>
                        <div class="col-3 text-center" dmx-show="form12.status == 200 &amp;&amp; form12.data.product_get[0].pro_price &amp;&amp; form12.data.product_get[0].pro_name" style="display: none !important;">
                            <a dmx-bind:href="form12.data.product_get[0].pro_url" target="_blank">
                                <img onerror="this.src='/assets/images/placeholder.png'" class="wappler-type-picture rounded mb-3 animate__animated animate__fadeIn" dmx-bind:src="form12.data.product_get[0].pro_image" style="max-height:200px;max-width: 100%;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);" dmx-animate-enter="fadeIn">

                            </a>
                        </div>


                        <div class="col-9" dmx-show="form12.status == 200 &amp;&amp; form12.data.product_get[0].pro_price &amp;&amp; form12.data.product_get[0].pro_name" style="display: none !important;">
                            <button class="delete-button" type="submit" dmx-on:click="form12.reset(true);btnmore12.setValue(0);get_product_price_history.load({})" is="dmx-button" value=""><i class="fal fa-times-circle" style="font-size: x-large; color: red;"></i> </button>
                            <h4 class="product-title"></h4>
                            <div>
                                <i class="fal fa-tag"></i>  
                            </div>

                            <a target="_blank" dmx-bind:href="form12.data.product_get[0].pro_url">
                                <div class="product-link mt-1">
                                    
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Produkt 3 -->
                    <div class="row" dmx-show="btnmore13.value==1 || (form1.status == 200 &amp;&amp; form12.status == 200)" style="display: none !important;">
                        <div class="col-12">
                            <hr>
                            <button id="btnmore13" class="col-12 d-block rounded pt-3 pb-3 ps-3 pe-3" style="background-color: rgb(229, 229, 229); border: none;" dmx-show="btnmore13.value==0" dmx-bind:value="0" dmx-on:click="btnmore13.setValue(1)" is="dmx-button" value="0" type="button">
                                <i class="fal fa-plus-circle"></i> Produkt hinzufügen
                            </button>

                            <form id="form13" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/product_crawler.php" dmx-on:start="alertform2success.hide()" dmx-on:done="get_product_price_history.load({})" dmx-show="((btnmore13.value==1 &amp;&amp; form13.status == 0) || (form13.data.product_get[0].pro_price == NULL &amp;&amp; btnmore13.value==1)) &amp;&amp; form13.state.executing == false" novalidate="" style="display: none !important;">

                                <div style="" class="input-container mb-2">
                                    <input id="producturl13" name="producturl" type="text" class="form-control" style="border-radius: 40px; padding: 10px; border: 5px solid #ccc; font-size: 20px;height: 62px;" required="" placeholder="Produkt Link" is="dmx-input" value="">
                                    <button id="btn13" class="btn btn-primary search-button" type="submit" style="" is="dmx-button" value="">
                                        <i class="far fa-search"></i>
                                    </button>

                                </div>


                            </form>
                            <div class="alert fade alert-warning" id="alert13" type="warning" is="dmx-bs5-alert" role="alert" dmx-bind:show="form13.status == 200 &amp;&amp; form13.data.product_get[0].pro_id == NULL" style="display: none;">
                                <p>Hoppla! Anscheinend haben wir das Produkt nicht finden können. Keine Sorge, unsere Detektive sind bereits am Werk und suchen nach dem verlorenen Schatz. Mach dir keine Sorgen, bald wird dieses mysteriöse Produkt auftauchen und du wirst in der Lage sein, deinen Preisalarm zu setzen. Bis dahin halt die Augen offen und bleib gespannt! 🕵️‍♂️🔍</p>
                            </div>
                            <span class="loading-span" style="height: 150px; width: 100%; display: none !important;" dmx-show="form13.state.executing"></span>
                        </div>
                        <div class="col-3 text-center" dmx-show="form13.status == 200 &amp;&amp; form13.data.product_get[0].pro_price &amp;&amp; form13.data.product_get[0].pro_name" style="display: none !important;">
                            <a dmx-bind:href="form13.data.product_get[0].pro_url" target="_blank">
                                <img onerror="this.src='/assets/images/placeholder.png'" class="wappler-type-picture rounded mb-3 animate__animated animate__fadeIn" dmx-bind:src="form13.data.product_get[0].pro_image" style="max-height:200px;max-width: 100%;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);" dmx-animate-enter="fadeIn">

                            </a>
                        </div>


                        <div class="col-9" dmx-show="form13.status == 200 &amp;&amp; form13.data.product_get[0].pro_price &amp;&amp; form13.data.product_get[0].pro_name" style="display: none !important;">
                            <button class="delete-button" type="submit" dmx-on:click="form13.reset(true);btnmore13.setValue(0);get_product_price_history.load({})" is="dmx-button" value=""><i class="fal fa-times-circle" style="font-size: x-large; color: red;"></i> </button>
                            <h4 class="product-title"></h4>
                            <div>
                                <i class="fal fa-tag"></i>  
                            </div>

                            <a target="_blank" dmx-bind:href="form13.data.product_get[0].pro_url">
                                <div class="product-link mt-1">
                                    
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Alert & Preisentwicklung -->
                    <div class="col-12">

                        <hr>

                        <!--<p class="product-description">{{form1.data.product_get[0].pro_description}}</p>-->

                        <div class="d-block rounded pt-4 pb-3 ps-3 pe-3 mt-4" style="background-color:#e5e5e5; position: relative; padding-left: 50px;">
                            <p class="lead rounded" style="position: absolute;left: 0px;top: -16px;margin: 0;background-color: #e5e5e5;padding: 0px 10px;"><i class="fal fa-bell-on fa-sm"></i> Preisalarm</p>

                            <div class="alert alert-success" id="alertform2success" is="dmx-bs5-alert" role="alert" type="success" style="display: none;">
                                Dein Alert wurde gespeichert.<br>

                                <span style="font-style: italic;font-size: 11px;display: block;">
                                    <i class="fal fa-info-circle"></i> Sie haben eine Bestätigung per E-Mail erhalten. Überprüfe auch den Spam-Ordner, um sicherzustellen, dass künftige Benachrichtigungen nicht dort landen.</span>
                            </div>

                            <form id="form2" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/product_alert.php" dmx-on:success="alertform2success.show()" novalidate="">
                                <select name="proa_type" class="form-select" style="border-radius: 40px; padding: 10px; border: 1px solid #ccc; font-size: 1rem; height: 3rem;" is="dmx-select">
                                    <option value="1" selected="">Preisreduktion</option>
                                    <option value="2">Alle Preisänderungen</option>
                                </select>

                                <input id="mail" name="mail" type="email" class="form-control mt-2" style="border-radius: 40px; padding: 10px; border: 1px solid #ccc; font-size: 1rem; height: 3rem;" required="" placeholder="E-Mail Adresse" is="dmx-input" value="">



                                <input id="pro_id" name="pro_id" type="text" class="form-control visually-hidden" dmx-bind:value="form1.data.product_get[0].pro_id" readonly="true" is="dmx-input" value="">
                                <input id="pro_id2" name="pro_id2" type="text" class="form-control  visually-hidden" dmx-bind:value="form12.data.product_get[0].pro_id" readonly="true" is="dmx-input" value="">
                                <input id="pro_id3" name="pro_id3" type="text" class="form-control  visually-hidden" dmx-bind:value="form13.data.product_get[0].pro_id" readonly="true" is="dmx-input" value="">
                                <input id="alert_count" name="alert_count" type="text" class="form-control  visually-hidden" dmx-bind:value="btnmore1.value.toNumber()+btnmore12.value.toNumber()+btnmore13.value.toNumber()" readonly="true" is="dmx-input" value="0">

                                <button id="btn2" class="btn btn-primary mt-2" type="submit" style="border-radius: 40px; padding: 10px; border: 1px solid #ccc; font-size: 1rem; height: 3rem;" is="dmx-button" value="">Speichern</button>

                            </form>
                        </div>


                        <div class="mt-3" dmx-show="get_product_price_history.data.get_product_price_history.count() >= 1" style="display: none !important;">
                            <div class="alert fade small alert-dismissible alert-info" id="alert_pricehistory" is="dmx-bs5-alert" role="alert" closable="true" type="info" style="display: none;">
                                <p>Die Preisentwicklung ist ab dem Moment verfügbar, in dem ein Produkt mit einer Benachrichtigung gespeichert wird. Ohne Benachrichtigung erfolgt die Preisabfrage nur sporadisch, sodass die Preisentwicklung möglicherweise keine Daten anzeigt. Ein Preis von 0 bedeutet, dass zu diesem Zeitpunkt noch keine Preise für das ausgewählte Produkt abgefragt wurden.</p>
                            <button type="button" aria-label="Close" class="btn-close" is="dmx-button" value=""></button></div>
                            <p class="lead">Preisentwicklung <i class="fal fa-info-circle" style="cursor: pointer;" dmx-on:click="alert_pricehistory.show()"></i></p>

                            <canvas style="max-height: 50vh; display: block; box-sizing: border-box; height: 0px; width: 0px;" id="chart1" dataset-1:label="Produkt 1" dataset-1:value="get_product_price_history.data.get_product_price_history.values('proh_price').max() == 0 ? 'null' : proh_price" labels="proh_date" smooth="true" responsive="true" dataset-1:tooltip="" dataset-2:label="Produkt 2" dataset-2:value="get_product_price_history.data.get_product_price_history.values('proh_price2').max() == 0 ? 'null' : proh_price2" dataset-3:label="Produkt 3" dataset-3:value="get_product_price_history.data.get_product_price_history.values('proh_price3').max() == 0 ? 'null' : proh_price3" height="0" width="0"></canvas>
                        </div>
                    </div>



                </div>


                <div class="row rounded-container-oben" id="more-products">
                    <div class="moderner-zwischentitel">Mehr entdecken</div>
                </div>
                <!-- Tab-Navigation -->
                <div class="row tabs rounded-container-unten">
                    <div class="tab-button-wrapper">
                        <button class="tab-button active" onclick="showTabContent(event, 'othershop')" dmx-hide="get_product_similar.data.get_similar_products_other_shop.count() == 0" is="dmx-button" value="" type="button">
                            <span style="font-size: clamp(13px, 2vw, 20px);">weitere Angebote</span>
                        </button>
                        <button class="tab-button not-active" onclick="showTabContent(event, 'sameshop')" is="dmx-button" value="" type="button"><span style="font-size: clamp(13px, 2vw, 20px);"> Angebote von .</span>
                        </button>

                    </div>
                </div>

                <script>
                    function toggleVisibility(button) {
                         // Alle .loader divs verstecken
      var loaders = document.querySelectorAll('.loader-button');
      loaders.forEach(loader => {
        loader.style.display = 'none';
      });

      // Das entsprechende .loader div innerhalb des geklickten Buttons sichtbar machen
      var loader = button.querySelector('.loader-button');
      if (loader) {
        loader.style.display = 'block';
      }
  // Hide all elements with the class 'not-visible'
  var elements = document.querySelectorAll('.price-alert-error-not-visible');
  elements.forEach(function(el) {
    el.classList.remove('price-alert-error-visible');
    el.classList.add('price-alert-error-not-visible');
  });
  // Hide all elements with the class 'not-visible'
  var elements = document.querySelectorAll('.price-alert-error-visible');
  elements.forEach(function(el) {
    el.classList.remove('price-alert-error-visible');
    el.classList.add('price-alert-error-not-visible');
  });

  // Make the next sibling element visible
  var nextElement = button.nextElementSibling;
  if (nextElement && nextElement.classList.contains('price-alert-error-not-visible')) {
    nextElement.classList.remove('price-alert-error-not-visible');
    nextElement.classList.add('price-alert-error-visible');
  }

  
  
}
                </script>
                <style>
                    .price-alert-error-not-visible {
                        display: none;
                    }

                    .price-alert-error-visible {
                        display: block;
                    }
                </style>
                <!-- Tab-Inhalte -->

                <style>
                    .display-block {
                        display: block;
                    }
                </style>


                <div id="othershop" class="tab-content" dmx-style:display="get_product_similar.data.get_similar_products_other_shop.count()>0 ? 'block' : none">
                    <!-- Inhalt für andere Shops -->
                    <p>
                    </p><!--Repeat Attribute-->
                    <p></p>
                </div>

                <div id="sameshop" class="tab-content" dmx-style:display="get_product_similar.data.get_similar_products_other_shop.count()==0 ? 'block' : none">
                    <!-- Inhalt für sameshop -->
                    <p>
                    </p><!--Repeat Attribute-->
                    <p></p>
                </div>


                <style>
                    .container-top-link {

                        background-color: #f5f5f5;
                        /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
                        /*margin-bottom: 20px;*/
                        border-bottom-style: solid;
                        border-width: thin;
                        border-color: #ff6443;
                    }

                    .rounded-container-oben {
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        background-color: #f0f0f0;
                        /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
                        /*margin-bottom: 20px;*/
                        border-style: solid;
                        border-bottom: none;
                        border-width: thin;
                        border-color: #ff6443;
                    }

                    .rounded-container-unten {
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        background-color: #f0f0f0;
                        /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
                        /*margin-bottom: 20px;*/
                        border-style: solid;
                        border-top: none;
                        border-width: thin;
                        border-color: #ff6443;
                    }

                    .moderner-zwischentitel {
                        font-size: 2rem;
                        /* Große Schriftgröße */
                        font-weight: bold;
                        /* Fettgedruckte Schrift */
                        color: #333;
                        /* Dunkle Textfarbe */
                        text-transform: uppercase;
                        /* Text in Großbuchstaben umwandeln */
                        letter-spacing: 2px;
                        /* Abstand zwischen Buchstaben */
                        text-align: center;
                        /* Zentrierte Ausrichtung */
                        /*margin: 20px 0;*/
                        /* Abstand oben und unten */
                        padding: 10px;
                        /* Innenabstand */
                        /*background-color: #f0f0f0;*/
                        /* Hintergrundfarbe */
                        /*border-bottom: 3px solid #555;*/
                        /* Unterstrich in dunkler Farbe */
                        /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
                        /* Leichte Schatten */
                    }

                    .tabs {
                        display: flex;
                        justify-content: center;
                        margin-bottom: 20px;

                        /* Gleiche Hintergrundfarbe wie "Mehr Produkte" */
                        position: sticky;
                        top: 0;
                        z-index: 1000;
                        /* Damit die Tabs immer oben sichtbar bleiben */
                    }

                    .tab-button-wrapper {
                        display: flex;
                        width: 100%;
                        overflow: hidden;
                        /* Wichtig für das Funktionieren von text-overflow */
                    }

                    .tab-button {
                        flex: 1;
                        background-color: transparent;
                        border: none;
                        padding: 15px 0;
                        cursor: pointer;
                        font-size: 1.2rem;
                        transition: color 0.3s, background-color 0.3s;
                        position: relative;
                        overflow: hidden;
                        /* Versteckt Text, der über den Container hinausgeht */
                        white-space: nowrap;
                        /* Verhindert Zeilenumbruch */
                        text-overflow: ellipsis;
                        /* Fügt "..." hinzu, wenn der Text zu lang ist */
                    }

                    .tab-button.active,
                    .tab-button:hover {
                        color: #fff;
                    }

                    .tab-button.active::before,
                    .tab-button:hover::before {
                        content: '';
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 0;
                        width: 80%;
                        height: 3px;
                        background-color: #ff6443;
                        border-radius: 15px 15px 0 0;
                        /* Abgerundete Ecken nur oben */
                    }

                    .tab-button.active span,
                    .tab-button:hover span {
                        background-color: #ff6443;
                        color: #000;
                        padding: 5px 10px;
                        border-radius: 15px;
                        /* Abgerundete Ecken */
                    }

                    .tab-button.not-active span {
                        background-color: lightgrey;
                        color: #000;
                        padding: 5px 10px;
                        border-radius: 15px;
                        /* Abgerundete Ecken */
                    }

                    .tab-button span {
                        display: inline-block;
                        transition: background-color 0.3s, color 0.3s;
                    }

                    .tab-content {
                        display: none;
                        /*text-align: center;
                        padding: 20px;
                        background-color: #f9f9f9;
                        border: 1px solid #ddd;
                        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
                    }

                    .tab-button-link {
                        flex: 1;
                        background-color: transparent;
                        border: none;
                        padding: 15px 0;
                        cursor: pointer;
                        transition: color 0.3s, background-color 0.3s;
                        position: relative;
                        overflow: hidden;
                        /* Versteckt Text, der über den Container hinausgeht */
                        white-space: nowrap;
                        /* Verhindert Zeilenumbruch */
                        text-overflow: ellipsis;
                        /* Fügt "..." hinzu, wenn der Text zu lang ist */
                    }

                    .tab-button-link.active,
                    .tab-button-link:hover {
                        color: #fff;
                    }

                    .tab-button-link.active::before,
                    .tab-button-link:hover::before {
                        content: '';
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 0;
                        width: 80%;
                        height: 3px;
                        background-color: #ff6443;
                        border-radius: 15px 15px 0 0;
                        /* Abgerundete Ecken nur oben */
                    }

                    .tab-button-link.active span,
                    .tab-button-link:hover span {
                        background-color: #ff6443;
                        color: #000;

                        border-radius: 15px;
                        /* Abgerundete Ecken */
                    }

                    .tab-button-link span {
                        display: inline-block;
                        transition: background-color 0.3s, color 0.3s;
                        padding: 5px 10px;
                    }
                </style>
                <script>
                    function showTabContent(event, tabId) {
    var i, tabContent, tabButtons;
    tabContent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabContent.length; i++) {
      tabContent[i].style.display = "none";
      tabContent[i].classList.remove("active-content");
    }
    tabButtons = document.getElementsByClassName("tab-button");
    for (i = 0; i < tabButtons.length; i++) {
        tabButtons[i].classList.remove("active");
      tabButtons[i].classList.add("not-active");
      //tabButtons[i].className = tabButtons[i].className.replace(" active", "");
    }
    document.getElementById(tabId).style.display = "block";
    setTimeout(function() {
      document.getElementById(tabId).classList.add("active-content");
    }, 50); // Slight delay to trigger the transition
    //event.currentTarget.className += " active";
    event.currentTarget.classList.remove("not-active");
    event.currentTarget.classList.add("active");
    
    // Scroll to the top of the 'moderner-zwischentitel' element
    document.querySelector('.moderner-zwischentitel').scrollIntoView({ behavior: 'smooth' });
  }
                </script>

                <style>
                    /* Container für die Buttons */
                    .button-container {
                        display: flex;
                        /* Flexbox verwenden, um die Buttons nebeneinander anzuordnen */
                        flex-wrap: wrap;
                        gap: 10px 0px;
                    }

                    .modern-btn {
                        border-radius: 30px;
                        padding: 15px 15px;
                        font-size: 18px;
                        cursor: pointer;
                        transition: background-color 0.3s ease;
                        border-width: thin;
                        font-size: 14px;
                        margin-right: 10px;
                    }

                    .modern-btn:hover {
                        background-color: darkgrey;
                    }

                    .product-description {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        position: relative;
                        max-height: 3.2em;
                        /* Assuming line-height is 1.8em */
                        line-height: 1.6em;
                    }

                    .product-description::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 1.6em;
                        /* Same as the line-height */
                        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f5f5f5 100%);
                    }
                </style>



            </div>



        </section>


        <section id="loader-section" dmx-show="form1.state.executing||get_product_similar.state.executing" style="display: none !important;">
            <div class="container">
                <span class="loading-span" style="height: 150px; width: 100%; display: none !important;" dmx-show="form1.state.executing||get_product_similar.state.executing">

                </span>
                <p dmx-animate-inview.delay:1000.duration:1000="fadeIn" style="visibility: hidden;">Wir suchen für dich nach weitere Angeboten...</p>


            </div>
            <style>
                /* Stildefinitionen für den Loader */
                .loader {
                    border: 4px solid #f3f3f3;
                    border-top: 4px solid #3498db;
                    border-radius: 50%;
                    width: 30px;
                    height: 30px;
                    animation: spin 1s linear infinite;
                    margin: auto;
                    margin-top: 50px;
                }

                @keyframes spin {
                    0% {
                        transform: rotate(0deg);
                    }

                    100% {
                        transform: rotate(360deg);
                    }
                }
            </style>
        </section>
        <section id="noresultsection" dmx-show="form1.status == 200 &amp;&amp; form1.data.product_get[0].pro_id == NULL" style="display: none !important;">
            <div class="container">
                <p>Hoppla! Anscheinend haben wir das Produkt nicht finden können. Keine Sorge, unsere Detektive sind bereits am Werk und suchen nach dem verlorenen Schatz. Mach dir keine Sorgen, bald wird dieses mysteriöse Produkt auftauchen und du wirst in der Lage sein, deinen Preisalarm zu setzen. Bis dahin halt die Augen offen und bleib gespannt! 🕵️‍♂️🔍</p>
            </div>
        </section>
        <section id="general" class="mt-0 pt-4">


            <hr dmx-show="form1.status == 200" class="container" style="display: none !important;">
            <style>
                body {
                    font-family: Arial, sans-serif;
                }

                .container-howto {
                    background-color: #f8f9fa;
                    padding: 40px;
                    border-radius: 15px;
                    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
                }

                .step {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 70px;
                    height: 70px;
                    background-color: #17a2b8;
                    border-radius: 50%;
                    color: #fff;
                    font-size: 24px;
                    font-weight: bold;
                }

                .step-text {
                    font-size: 18px;
                    font-weight: bold;
                    color: #212529;
                }
            </style>
            <div class="container container-howto">
                <h2 class="display-5 mb-4">Preisalarm einrichten</h2>
                <div class="row">
                    <div class="col-md-4">
                        <div class="text-center mb-4">
                            <div class="step">1</div>
                        </div>
                        <h3 class="step-text">Produkt-URL einfügen</h3>
                        <p>Starte die Preisüberwachung, indem du die URL des Produkts in das Eingabefeld einfügst.</p>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center mb-4">
                            <div class="step">2</div>
                        </div>
                        <h3 class="step-text">Benachrichtigung festlegen</h3>
                        <p>Entscheide, ob du nur bei Preissenkungen oder bei allen Preisänderungen benachrichtigt werden möchtest. Gib deine E-Mail-Adresse ein, um Updates zu erhalten.</p>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center mb-4">
                            <div class="step">3</div>
                        </div>
                        <h3 class="step-text">Lass dich benachrichtigen</h3>
                        <p>Lehne dich zurück und lass uns die Arbeit übernehmen. Wir halten dich über Preisänderungen zu deinem gewünschten Produkt auf dem Laufenden.</p>
                    </div>
                </div>
            </div>

            <style>
                body {
                    font-family: Arial, sans-serif;
                }

                .promo-section {
                    background-color: #17a2b8;
                    padding: 50px 10px;
                    color: #fff;
                }

                .promo-content {
                    max-width: 600px;
                    margin: 0 auto;
                    text-align: center;
                }

                .promo-title {
                    font-size: 36px;
                    font-weight: bold;
                    margin-bottom: 20px;
                }

                .promo-description {
                    font-size: 18px;
                    margin-bottom: 30px;
                }

                .promo-btn {
                    border-radius: 30px;
                    padding: 15px 40px;
                    font-size: 18px;
                    font-weight: bold;
                }
            </style>
            <div class="promo-section mt-5">
                <div class="promo-content">
                    <h2 class="promo-title">Jetzt kostenlos Preise überwachen</h2>
                    <p class="promo-description">Verpasse nie wieder ein Schnäppchen! Nutze unseren kostenlosen Preisalarm, um deine Wunschprodukte online zu überwachen. Smart, effizient und vollkommen gratis!</p>
                    <button class="btn btn-lg btn-light promo-btn" dmx-on:click="browser1.goto('#generaltop')" is="dmx-button" value="" type="button">Jetzt ausprobieren</button>
                </div>
            </div>

            <style>
                body {
                    font-family: Arial, sans-serif;
                    margin: 0;
                    padding: 0;
                }

                .faq-item {
                    margin-bottom: 13px;
                }

                .faq-section {
                    padding: 50px 10px;
                    background-color: #f9f9f9;
                }

                .faq-container {
                    max-width: 800px;
                    margin: 0 auto;
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 8px;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                }

                .faq-question {
                    font-size: 22px;
                    font-weight: bold;
                    cursor: pointer;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                }

                .faq-answer {
                    font-size: 18px;
                    margin-bottom: 30px;
                    display: none;
                }

                .plus-minus {
                    float: right;
                    transition: transform 0.3s ease;
                    margin-left: auto;
                }

                .collapsed .plus-minus {
                    transform: rotate(-45deg);
                }
            </style>
            <div class="faq-section">
                <div class="faq-container">
                    <a href="faq" style="text-decoration: none;color: black;">
                        <h2 class="text-center mb-4">FAQ</h2>
                    </a>

                    <div is="dmx-repeat" dmx-bind:repeat="get_faq_front.data.get_faq_front" class="faq-item">
                        <p class="faq-question fw-bold" onclick="toggleAnswer(this)">Was ist ein Preisalarm? <span class="plus-minus">+</span></p>
                        <p class="faq-answer" style="display: none;" dmx-html="faq_answer">Ein Preisalarm ist ein praktisches digitales Tool, das dir dabei hilft, den Preis eines bestimmten Produkts im Auge zu behalten. Mit unserem Service erhältst du regelmässige E-Mail-Benachrichtigungen über jegliche Preissenkungen oder Preisänderungen für die Produkte, die du auswählst. Du kannst genau festlegen, welche Art von Preisänderungen dich interessieren. Dadurch bleibst du stets informiert und verpasst keine Gelegenheit mehr, Geld zu sparen.</p>
                    
                        <p class="faq-question fw-bold" onclick="toggleAnswer(this)">Wie Benachrichtigungen bei price-alert.io funktionieren <span class="plus-minus">+</span></p>
                        <p class="faq-answer" style="display: none;" dmx-html="faq_answer">Bei price-alert.io haben wir es uns zur Aufgabe gemacht, das Verfolgen von Preisänderungen für Online-Produkte so einfach wie möglich zu gestalten. Mit unserem Service kannst du ganz unkompliziert Preisalarme für deine gewünschten Artikel einrichten und wirst umgehend informiert, wenn sich die Preise ändern. Hier sind die drei Szenarien, bei denen du benachrichtigt wirst:
<br>
<ul>
        <li><strong>Preisänderung:</strong> Sobald sich der Preis deines überwachten Artikels ändert, wirst du sofort benachrichtigt. Dies umfasst entweder nur Preisreduktionen oder jede Preisänderung, je nach deinen Einstellungen.</li>
        <li><strong>Keine Preisänderung:</strong> Sollte sich der Preis deines Artikels innerhalb von 30 Tagen nicht ändern, erhältst du ebenfalls eine Benachrichtigung. So bleibst du stets über den aktuellen Status informiert und musst nicht unnötig auf Preisänderungen warten.</li>
        <li><strong>Produkt nicht mehr verfügbar:</strong> Falls der Artikel, den du beobachtest, nicht mehr verfügbar ist, informieren wir dich sofort. Dadurch kannst du nach Alternativen suchen oder entscheiden, ob du auf eine Wiederverfügbarkeit warten möchtest.</li>
    </ul>
    <br>
    <img src="https://price-alert.io/assets/images/alert-infos.png" style="width: 400px;max-width: 100%;"></p>
                    
                        <p class="faq-question fw-bold" onclick="toggleAnswer(this)">Wieso gibt es price-alert.io? <span class="plus-minus">+</span></p>
                        <p class="faq-answer" style="display: none;" dmx-html="faq_answer">Wir sind uns alle bewusst, dass Online-Shopping zu einem festen Bestandteil unseres Alltags geworden ist. Dabei ist es interessant zu beobachten, wie sich die Preise für ein und dasselbe Produkt bei vielen Online Shops schwanken und sich regelmässig ändern können. Aus diesem Grund haben wir price-alert.io ins Leben gerufen.<br><br>
                            Unser Ziel ist es, dir dabei zu helfen, stets den besten Preis für das gewünschte Produkt zu finden. Mit price-alert.io kannst du Preisänderungen im Auge behalten und Benachrichtigungen erhalten, sobald der Preis für ein Produkt fällt oder steigt. Dadurch kannst du sicherstellen, dass du zum optimalen Zeitpunkt zuschlägst und kein Schnäppchen verpasst. Unsere Plattform bietet eine einfache und effektive Möglichkeit, Geld zu sparen und das Beste aus deinem Online-Shopping-Erlebnis herauszuholen.</p>
                    </div>

                    <!-- Weitere FAQ-Elemente können hier hinzugefügt werden -->
                    <a href="faq" style="text-decoration: none;color: black;width: 100%;display: block;text-align: center;">
                        Weitere Antworten&nbsp;&nbsp;<i class="fas fa-angle-right"></i>
                    </a>
                </div>
            </div>


            <script>
                function toggleAnswer(element) {
        var answer = element.nextElementSibling;
        var plusMinus = element.querySelector('.plus-minus');
        element.classList.toggle('collapsed');
        if (answer.style.display === 'none' || answer.style.display === '') {
            answer.style.display = 'block';
        } else {
            answer.style.display = 'none';
        }
    }
            </script>







        </section>
    </main>
    <!-- Wappler include head-page="index.php" appConnect="local" is="dmx-app" bootstrap5="local" fontawesome_5pro="cdn" -->
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .footer {
        background-color: #17a2b8;
        /* Hintergrundfarbe des Footers */
        color: #ffffff;
        /* Textfarbe */
        padding: 30px 0;

    }

    .footer a {
        color: #ffffff;
        text-decoration: none;
        display: block;
        margin-bottom: 10px;
    }

    .footer a:hover {
        color: #f8f9fa;
        /* Farbe beim Überfahren */
    }
</style>
<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-12">

                <p class="lead fw-bold">Über price-alert.io</p>
                <a href="uber-uns">
                    <p>Über uns</p>
                </a>
                <a href="contact">
                    <p>Kontakt</p>
                </a>
                <p><a href="https://www.instagram.com/price.alert.io" target="_blank"><i class="fab fa-instagram"></i> Instagram</a></p>
                <p><i class="fal fa-envelope"></i> [email protected]</p>




            </div>
            <div class="col-md-4 col-12">



                <p class="lead fw-bold">Für unsere Kunden</p>
                <a href="dashboard">
                    <p>My Alerts</p>
                </a>
                <a href="faq">
                    <p>FAQ</p>
                </a>
                <a href="blog">
                    <p>Blog</p>
                </a>



            </div>
            <div class="col-md-4 col-12">


                <p class="lead fw-bold">Business</p>
                <a href="business">
                    <p>Für Händler</p>
                </a>

            </div>
        </div>
    </div>
</footer>
    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>


</body></html>