Utax Konfigurator
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> <link rel="icon" type="image/png" href="/images/favicon.png"> <link rel="shortcut icon" type="image/png" href="images/favicon.png"> <link type="image/png" href="images/favicon.png"> <link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/custom.css" rel="stylesheet"> <script src="/js/generic/jquery-3.3.1.min.js"></script> <script src="/js/generic/jquery-ui.min.js"></script> <script src="/js/generic/bootstrap.bundle.min.js"></script> <script src="/js/generic/js.cookie.js"></script> <script src="/js/productconfigurator/generic.js"></script> <script src="/js/productconfigurator/productconfigurator.js"></script> <script src="/js/generic/validate.js"></script> <title>Produktkonfigurator</title> </head> <body> <header> <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light rounded shadow-sm px-1 px-sm-3 py-1"> <div class="container"> <div class="navbar-brand"> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbars"> <ul class="navbar-nav ml-auto"> </ul> </div> </div> </nav> </header> <main role="main" class="container px-1 px-sm-2 px-lg-3"> <div id="loading-container" class="justify-content-center d-flex"> <div style="width: 3rem; height: 3rem;" class="spinner-border text-primary" role="status"> <span class="sr-only">Loading...</span> </div> </div> <div style="display:none;" id="deviceselect-container" class="container col-12 col-lg-7 pt-md-2 pt-sm-1 pt-xs-0 px-0"> <h4 class="px-1 pb-3 px-sm-2 mb-2 text-center">Willkommen zum Produktkonfigurator</h4> <div class="shadow-sm p-3 mb-3 card card-table"> <div class="row"> <div class="col-8 form-group mb-3"> <label class="mb-0" for="deviceselect"> Bitte wählen Sie ein Modell aus.</label> <select data-validate="check" class="form-control form-control-sm" id="deviceselect"> <option value="">Bitte wählen</option> </select> <div class="invalid-tooltip">Bitte wählen Sie ein Modell aus.</div> </div> <div class="col-4 mb-3 mt-4 pl-0"> <button id="start_configuration" type="button" class="btn btn-primary btn-sm">Konfigurieren</button> </div> </div> </div> </div> <div style="display:none;" id="main-container" class="container pt-md-2 pt-sm-1 pt-xs-0 px-0"> <h4 id="headline" class="px-1 px-sm-2 mb-2">Willkommen zum Produktkonfigurator</h4> <div class="row mx-2"> <div class="col-lg-3 col-md-5 col-sm-5 col-12 pl-0 pr-sm-3 pr-1 mb-3 order-1 order-lg-0 d-print-none"> <div class="accordion shadow-sm" id="productcategroies"> </div> </div> <div class="col-lg-5 col-md-12 col-12 px-lg-0 pl-0 pr-0 order-0 order-lg-1"> <div class="shadow-sm p-2 mb-3 card"> <h5 id="device_name" class="mb-0 text-center"></h5> <hr class="mb-1 mt-2"> <div id="configurator_wrapper" style="z-index:10" class="card-body px-3"> <div class="mx-5 mt-5 pt-5" id="preload-progress-wrapper"> <h6 class="text-center">Die Produktbilder werden geladen.</h6> <div class="progress mt-3"> <div id="preload-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;">0%</div> </div> </div> <div style="display:none;" id="configurator_slider"> </div> </div> <div style="display:none;" id="picture-alert" class="alert alert-light mb-0 p-0" role="alert"> <p class="small font-weight-light">Für mindestens eine der gewählten Optionen ist keine Abbildung verfügbar.<br>Die Darstellung weicht daher von der getroffenen Konfiguration ab.</p> </div> </div> </div> <div class="col-lg-4 col-md-7 col-sm-7 col-12 pl-lg-3 pl-0 pr-0 order-3"> <div class="shadow-sm mb-3 card"> <div class="card-body p-2"> <h5 class="mb-0">Technische Daten</h5> <hr class="my-2"> <div style="display:none" id="specifications_ppm"> </div> <div style="display:none" id="specifications_dimensions"> <b>Abmessungen</b> <p class="small mb-1">ca. <span id="dimensions_height"></span> x <span id="dimensions_width"></span> x <span id="dimensions_depth"></span> mm<span class="hint">*</span> (H x B x T)</p> </div> <div style="display:none" id="specifications_weight"> <b>Gesamtgewicht</b> <p class="small mb-1"></p> </div> <p id="specifications_dimensions_hint" style="display:none; font-size: 78%;" class="pt-2 m-0 font-weight-light"><span class="hint">*</span>Bitte beachten Sie, dass die benötigte Stellfläche größer ist.</p> </div> </div> <div style="display:none" class="shadow-sm mb-3 card"> <div class="card-body p-2"> <h5 class="mb-0">Preisinformationen</h5> <hr class="my-2"> <ul id="price_info" class="pt-0 mb-0 list-unstyled "> </ul> <p id="price_hint" style="font-size: 78%;" class="pt-2 m-0 font-weight-light"><span class="hint">*</span> Der angezeigte Preis bezieht sich auf eine Vertragslaufzeit von <span id="price_hint_period"></span> Monaten bei einem Vertragsbeginn zum <span id="price_hint_start"></span></p> </div> </div> <div style="display:none" class="shadow-sm mb-3 card"> <div class="card-body p-2"> <h5 class="mb-0">Gewählte Optionen</h5> <hr class="my-2"> <ul id="choosen_item" class="pt-0 mb-0 list-unstyled "> </ul> </div> </div> </div> </div> <div style="display: none" id="unselectable_articles"> <p>Nicht sichtbare/wählbare Optionen</p> </div> </div> <!-- Modal Dialog Errorhandler--> <div class="modal fade" id="configerrormodal" tabindex="-1" role="dialog" aria-labelledby="configerrormodal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> <!-- Modal Dialog Artikeldetails--> <div class="modal fade" id="articledetailsmodal" tabindex="-1" role="dialog" aria-labelledby="articledetailsmodal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button> </div> </div> </div> </div> <!-- Modal Dialog Details zum Basissysem--> <div class="modal fade" id="basic_unit_modal" tabindex="-1" role="dialog" aria-labelledby="basic_unit_modal" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button> </div> </div> </div> </div> <!-- Modal Dialog Speicherns--> <div class="modal fade" id="saveconfigmodal" tabindex="-1" role="dialog" aria-labelledby="saveconfigmodal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Konfiguration speichern</h5> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> <!-- Modal Dialog Warnung dass nicht gespeichert--> <div class="modal fade" id="savewarningmodal" tabindex="-1" role="dialog" aria-labelledby="savewarningmodal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Konfigurator verlassen</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> <!-- Modal Dialog Warnung dass nicht gespeichert (beim zurücksetzen)--> <div class="modal fade" id="resetwarningmodal" tabindex="-1" role="dialog" aria-labelledby="resetwarningmodal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Konfiguration zurücksetzen</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div> </main> <footer class="footer"> </footer> </body> </html>
