Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <!-- Latest compiled and minified CSS -->
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
- <!-- Latest compiled and minified JavaScript -->
- <style>
- .KAPPA {XDDDDDDDDDDDDDDD}
- hr{border: 1px solid black;}
- label{width: 300px;}
- @import url(http://fonts.googleapis.com/css?family=Roboto);
- * {
- font-family: 'Roboto', sans-serif;
- }
- #login-modal .modal-dialog {
- width: 350px;
- }
- #login-modal input[type=text], input[type=password] {
- margin-top: 10px;
- }
- #div-login-msg,
- #div-lost-msg,
- #div-register-msg {
- border: 1px solid #dadfe1;
- height: 30px;
- line-height: 28px;
- transition: all ease-in-out 500ms;
- }
- #div-login-msg.success,
- #div-lost-msg.success,
- #div-register-msg.success {
- border: 1px solid #68c3a3;
- background-color: #c8f7c5;
- }
- #div-login-msg.error,
- #div-lost-msg.error,
- #div-register-msg.error {
- border: 1px solid #eb575b;
- background-color: #ffcad1;
- }
- #icon-login-msg,
- #icon-lost-msg,
- #icon-register-msg {
- width: 30px;
- float: left;
- line-height: 28px;
- text-align: center;
- background-color: #dadfe1;
- margin-right: 5px;
- transition: all ease-in-out 500ms;
- }
- #icon-login-msg.success,
- #icon-lost-msg.success,
- #icon-register-msg.success {
- background-color: #68c3a3 !important;
- }
- #icon-login-msg.error,
- #icon-lost-msg.error,
- #icon-register-msg.error {
- background-color: #eb575b !important;
- }
- #img_logo {
- max-height: 100px;
- max-width: 100px;
- }
- /* #########################################
- # override the bootstrap configs #
- ######################################### */
- .modal-backdrop.in {
- filter: alpha(opacity=50);
- opacity: .8;
- }
- .modal-content {
- background-color: #ececec;
- border: 1px solid #bdc3c7;
- border-radius: 0px;
- outline: 0;
- }
- .modal-header {
- min-height: 16.43px;
- padding: 15px 15px 15px 15px;
- border-bottom: 0px;
- }
- .modal-body {
- position: relative;
- padding: 5px 15px 5px 15px;
- }
- .modal-footer {
- padding: 15px 15px 15px 15px;
- text-align: left;
- border-top: 0px;
- }
- .checkbox {
- margin-bottom: 0px;
- }
- .btn {
- border-radius: 0px;
- }
- .btn:focus,
- .btn:active:focus,
- .btn.active:focus,
- .btn.focus,
- .btn:active.focus,
- .btn.active.focus {
- outline: none;
- }
- .btn-lg, .btn-group-lg>.btn {
- border-radius: 0px;
- }
- .btn-link {
- padding: 5px 10px 0px 0px;
- color: #95a5a6;
- }
- .btn-link:hover, .btn-link:focus {
- color: #2c3e50;
- text-decoration: none;
- }
- .glyphicon {
- top: 0px;
- }
- .form-control {
- border-radius: 0px;
- }
- </style>
- </head>
- <body>
- <header>
- <div class="row">
- <a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Open Login Modal</a>
- <div class="col-xs-12 text-center">
- <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNTk1MDVlZmZkMiB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1OTUwNWVmZmQyIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQ0LjU0Njg3NSIgeT0iNzQuMzU5Mzc1Ij4xNDB4MTQwPC90ZXh0PjwvZz48L2c+PC9zdmc+" alt="..." class="img-rounded">
- <h1>Formlab.sk</h1>
- <h2>Systém tvorby cenových ponuk formlab.sk</h2>
- <a class="btn btn-default" href="#" role="button">BUTTON</a><br>
- <a href="#">spať na homepage</a><br>
- <div style="border: 1px solid black; float: right;">
- <a href="#">SK</a>
- <a href="#">EN</a>
- </div>
- </div>
- </div>
- </header>
- <section>
- <div class="row">
- <div class="col-xs-12">
- <hr>
- <h5>Krok 1/2</h5>
- <h2>Tvorba cenovéj ponuky</h2>
- <hr>
- </div>
- </div>
- <div class="col-xs-12">
- <form class="form-horizontal" method="" action="">
- <br>
- <div class="form-inline">
- <label for="">Nazov materiálu alebo služby</label>
- <input type="text" class="form-control" id="" placeholder="">
- </div>
- <br>
- <div class="form-inline">
- <label for="">Merná jednotka</label>
- <input type="text" class="form-control" id="" placeholder="">
- </div>
- <br>
- <div class="form-inline">
- <label for="">Množstvo</label>
- <input type="text" class="form-control" id="" placeholder="">
- </div>
- <br>
- <div class="form-inline">
- <label for="">Cena za jednotku</label>
- <input type="text" class="form-control" id="" placeholder="">
- </div>
- <br>
- <hr>
- <h2>Tvorba cenovéj ponuky</h2>
- <div class="form-inline">
- <label for="">Nazov materiálu alebo služby: </label>
- </div>
- <div class="form-inline">
- <label for="">Merná jednotka: </label>
- </div>
- <div class="form-inline">
- <label for="">Množstvo: </label>
- </div>
- <div class="form-inline">
- <label for="">Cena za jednotku: </label>
- <hr>
- <div class="form-inline">
- <label>Total: </label>
- </div>
- <hr>
- <br>
- <div class="form-inline">
- <label for="">JPG obrazok</label>
- <input type="text" class="form-control" id="" placeholder="">
- </div>
- <br>
- <br>
- <div class="form-inline">
- <input type="checkbox" name="" value=""> Záruka na produkt je 2 roky od dodania produktu<br>
- <input type="checkbox" name="" value=""> Dodacia doba produktu je 3 mesiace od podpisu zmluvy<br>
- <input type="checkbox" name="" value=""> Cena je vrátane DPH
- </div>
- <br>
- <div class="form-inline">
- <label>Poznámky - FUKCED - KINDA - HIHI</label>
- <textarea name=""></textarea>
- </div>
- <hr>
- <br>
- <input type="checkbox" name="" value=""> Súhlasim s podmienkami?
- <input class="btn btn-default" type="submit" value="Dokončiť objednávku" style="float: right">
- </form>
- </div>
- </section>
- <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
- <div class="modal-dialog">
- <div class="modal-content">
- <div class="modal-header" align="center">
- <img class="img-circle" id="img_logo" src="http://bootsnipp.com/img/logo.jpg">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
- </button>
- </div>
- <!-- Begin # DIV Form -->
- <div id="div-forms">
- <!-- Begin # Login Form -->
- <form id="login-form">
- <div class="modal-body">
- <div id="div-login-msg">
- <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
- <span id="text-login-msg">Type your username and password.</span>
- </div>
- <input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
- <input id="login_password" class="form-control" type="password" placeholder="Password" required>
- <div class="checkbox">
- <label>
- <input type="checkbox"> Remember me
- </label>
- </div>
- </div>
- <div class="modal-footer">
- <div>
- <button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
- </div>
- <div>
- <button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
- <button id="login_register_btn" type="button" class="btn btn-link">Register</button>
- </div>
- </div>
- </form>
- <!-- End # Login Form -->
- <!-- Begin | Lost Password Form -->
- <form id="lost-form" style="display:none;">
- <div class="modal-body">
- <div id="div-lost-msg">
- <div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
- <span id="text-lost-msg">Type your e-mail.</span>
- </div>
- <input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
- </div>
- <div class="modal-footer">
- <div>
- <button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
- </div>
- <div>
- <button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
- <button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
- </div>
- </div>
- </form>
- <!-- End | Lost Password Form -->
- <!-- Begin | Register Form -->
- <form id="register-form" style="display:none;">
- <div class="modal-body">
- <div id="div-register-msg">
- <div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
- <span id="text-register-msg">Register an account.</span>
- </div>
- <input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
- <input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
- <input id="register_password" class="form-control" type="password" placeholder="Password" required>
- </div>
- <div class="modal-footer">
- <div>
- <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
- </div>
- <div>
- <button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
- <button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
- </div>
- </div>
- </form>
- <!-- End | Register Form -->
- </div>
- <!-- End # DIV Form -->
- </div>
- </div>
- </div>
- <script
- src="https://code.jquery.com/jquery-3.1.1.min.js"
- integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
- crossorigin="anonymous"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- <script>
- $(function() {
- var $formLogin = $('#login-form');
- var $formLost = $('#lost-form');
- var $formRegister = $('#register-form');
- var $divForms = $('#div-forms');
- var $modalAnimateTime = 300;
- var $msgAnimateTime = 150;
- var $msgShowTime = 2000;
- $("form").submit(function () {
- switch(this.id) {
- case "login-form":
- var $lg_username=$('#login_username').val();
- var $lg_password=$('#login_password').val();
- if ($lg_username == "ERROR") {
- msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
- } else {
- msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
- }
- return false;
- break;
- case "lost-form":
- var $ls_email=$('#lost_email').val();
- if ($ls_email == "ERROR") {
- msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
- } else {
- msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
- }
- return false;
- break;
- case "register-form":
- var $rg_username=$('#register_username').val();
- var $rg_email=$('#register_email').val();
- var $rg_password=$('#register_password').val();
- if ($rg_username == "ERROR") {
- msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
- } else {
- msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
- }
- return false;
- break;
- default:
- return false;
- }
- return false;
- });
- $('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
- $('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); });
- $('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); });
- $('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); });
- $('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); });
- $('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); });
- function modalAnimate ($oldForm, $newForm) {
- var $oldH = $oldForm.height();
- var $newH = $newForm.height();
- $divForms.css("height",$oldH);
- $oldForm.fadeToggle($modalAnimateTime, function(){
- $divForms.animate({height: $newH}, $modalAnimateTime, function(){
- $newForm.fadeToggle($modalAnimateTime);
- });
- });
- }
- function msgFade ($msgId, $msgText) {
- $msgId.fadeOut($msgAnimateTime, function() {
- $(this).text($msgText).fadeIn($msgAnimateTime);
- });
- }
- function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
- var $msgOld = $divTag.text();
- msgFade($textTag, $msgText);
- $divTag.addClass($divClass);
- $iconTag.removeClass("glyphicon-chevron-right");
- $iconTag.addClass($iconClass + " " + $divClass);
- setTimeout(function() {
- msgFade($textTag, $msgOld);
- $divTag.removeClass($divClass);
- $iconTag.addClass("glyphicon-chevron-right");
- $iconTag.removeClass($iconClass + " " + $divClass);
- }, $msgShowTime);
- }
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement