Last active
August 29, 2015 13:57
-
-
Save margusmartsepp/9687193 to your computer and use it in GitHub Desktop.
mini html front end
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> | |
| <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> | |
| <html class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> | |
| <html class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> | |
| <html class="no-js"> | |
| <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title></title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width"> | |
| <link rel="stylesheet" href="css/normalize.css"> | |
| <style> | |
| .body2 { | |
| font-size: 100%; | |
| line-height: 1.125em; | |
| padding-top: 6px; | |
| } | |
| #pageHeader { | |
| background-color: rgb(178, 4, 41); | |
| box-sizing: border-box; | |
| color: rgb(34, 34, 34); | |
| cursor: default; | |
| display: block; | |
| height: 40px; | |
| padding: 0; | |
| width: 100%; | |
| } | |
| #logo-lexicon { | |
| float: right; | |
| cursor: pointer; | |
| display: inline-block; | |
| vertical-align: middle; | |
| width: 60px; | |
| } | |
| #logo-lexicon-parent { | |
| float: right; | |
| width: 60px; | |
| background-color: rgb(0, 0, 0); | |
| padding: 5px; | |
| border-left: solid thin #ffffff; | |
| } | |
| #headline-lexicon { | |
| box-sizing: border-box; | |
| color: rgb(255, 255, 255); | |
| cursor: auto; | |
| direction: ltr; | |
| display: block; | |
| font-family: 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif; | |
| font-size: 11px; | |
| font-style: normal; | |
| font-weight: bold; | |
| height: 10px; | |
| padding-top: 10px; | |
| padding-left: 6px; | |
| *padding-top: 1px; | |
| *padding-left: 2px; | |
| text-rendering: optimizelegibility; | |
| line-height: 100%; | |
| } | |
| #headline-lexicon:link { | |
| text-decoration: none; | |
| } | |
| #headline-lexicon:visited { | |
| text-decoration: none; | |
| } | |
| #headline-lexicon:hover { | |
| text-decoration: none; | |
| } | |
| #headline-lexicon:active { | |
| text-decoration: none; | |
| } | |
| .input-group-lexicon { | |
| position: relative; | |
| display: table; | |
| border-collapse: separate; | |
| } | |
| .find-lexicon { | |
| margin-top: 6px; | |
| float: left; | |
| height: 16px; | |
| width: 138px; | |
| margin-bottom: 6px; | |
| margin-right: 2px; | |
| font-size: 14px; | |
| } | |
| .btn-lexicon { | |
| cursor: pointer; | |
| margin-top: 6px; | |
| float: left; | |
| height: 22px; | |
| width: 22px; | |
| } | |
| .searchButtonDiv { | |
| width: 100%; | |
| } | |
| .description { | |
| cursor: pointer; | |
| color: darkgray; | |
| padding-top: 0.4em; | |
| padding-right: 0.2em; | |
| padding-bottom: 0.2em; | |
| /* | |
| border-top: 1px solid #EBEBEB; | |
| border-left: 1px solid #EBEBEB; | |
| border-right: 1px solid #EBEBEB; | |
| border-bottom: 1px solid #B20429; | |
| *border-top: 0.05em solid #EBEBEB; | |
| *border-left: 0.05em solid #EBEBEB; | |
| *border-right: 0.05em solid #EBEBEB; | |
| */ | |
| } | |
| .selected { | |
| color: black; | |
| background-color: #FFF; | |
| border-top: 1px solid #660000; | |
| border-left: 1px solid #660000; | |
| border-right: 1px solid #660000; | |
| border-bottom: 1px solid #ffffff; | |
| *border-top: 0.05em solid #e4e4e4; | |
| *border-left: 0.05em solid #e4e4e4; | |
| *border-right: 0.05em solid #e4e4e4; | |
| } | |
| #toggle-lexicon { | |
| padding-top: 0.2em; | |
| padding-bottom: 0.2em; | |
| margin-left: 6px; | |
| margin-right: 6px; | |
| border-bottom: 1px solid #660000; | |
| } | |
| #toggle-lexicon span { | |
| padding-top: 14px; | |
| padding-left: 6px; | |
| padding-right: 6px; | |
| } | |
| .toggle-lexicon-img { | |
| height: 18px; | |
| margin-top: 6px; | |
| margin-left: 4px; | |
| padding-left: 2px; | |
| padding-left: 2px; | |
| } | |
| #infoDivBackground { | |
| padding-left: 6px; | |
| padding-right: 6px; | |
| border-left: 1px solid #efefef; | |
| border-right: 1px solid #efefef; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="body2"> | |
| <div class="input-group-lexicon-parent"> | |
| <div id="toggle-lexicon"> | |
| <span id="toggle-lexicon-persons" class="description selected"><img src="http://maamajandusleksikon.aripaev.ee/img/personBigUnselected.png" class="toggle-lexicon-img"> isikud</span> | |
| <span id="toggle-lexicon-businesses" class="description"><img src="http://maamajandusleksikon.aripaev.ee/img/businessBigUnselected.png" class="toggle-lexicon-img"> ettevõtted</span> | |
| </div> | |
| <div id="infoDivPersons" class="input-group-lexicon"> | |
| <input id="find-search-lexicon-persons" type="text" class="find-lexicon" placeholder="Otsi"> | |
| <div id="search-btn-lexicon-persons" class="btn-lexicon"> | |
| <img class="searchButtonDiv" src="http://maamajandusleksikon.aripaev.ee/img/searchButton.gif"> | |
| </div> | |
| </div> | |
| <div id="infoDivBusinesses" class="input-group-lexicon"> | |
| <input id="find-search-lexicon-businesses" type="text" class="find-lexicon" placeholder="Otsi"> | |
| <div id="search-btn-lexicon-businesses" class="btn-lexicon"> | |
| <img class="searchButtonDiv" src="http://maamajandusleksikon.aripaev.ee/img/searchButton.gif"> | |
| </div> | |
| </div> | |
| <div id="pageHeader"> | |
| <a id="logoContainer" href="http://infopank.aripaev.ee" target="_blank"> | |
| <div id="logo-lexicon-parent"> | |
| <img id="logo-lexicon" src="http://imagizer.imageshack.us/v2/100x75q90/838/0k3n.jpg" alt="Äripäev"> | |
| </div> | |
| </a> | |
| <a id="headline-lexicon" href="http://maamajandusleksikon.aripaev.ee/index.html" target="_blank"> | |
| Maamajanduse võtmeisikud | |
| </a> | |
| </div> | |
| </div> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> | |
| <script> | |
| window.jQuery || document.write('<script src="js/vendor/jquery.js"><\/script>') | |
| </script> | |
| <script> | |
| $('#toggle-lexicon > span').click(function () { | |
| $(this).addClass('selected').siblings().removeClass('selected'); | |
| var ix = $(this).index(); | |
| $('#infoDivPersons').toggle(ix === 0); | |
| $('#infoDivBusinesses').toggle(ix === 1); | |
| }); | |
| function OpenUrl(e, content, suffix) { | |
| var url = "http://maamajandusleksikon.aripaev.ee/"; | |
| if (content.length > 0) | |
| url += "search.html?find=" + content + suffix; | |
| else | |
| url += "index.html"; | |
| window.open(url, '_blank'); | |
| } | |
| $('#search-btn-lexicon-persons').click(function (e) { | |
| OpenUrl(e, $('#find-search-lexicon-persons').val(), "&category=Persons"); | |
| }); | |
| $('#find-search-lexicon-persons').keydown(function (e) { | |
| var url = ""; | |
| if (e.keyCode == 13) { | |
| OpenUrl(e, $('#find-search-lexicon-persons').val(), "&category=Persons"); | |
| } | |
| }); | |
| $('#search-btn-lexicon-businesses').click(function (e) { | |
| OpenUrl(e, $('#find-search-lexicon-businesses').val(), "&category=Businesses"); | |
| }); | |
| $('#find-search-lexicon-businesses').keydown(function (e) { | |
| var url = ""; | |
| if (e.keyCode == 13) { | |
| OpenUrl(e, $('#find-search-lexicon-businesses').val(), "&category=Businesses"); | |
| } | |
| }); | |
| $('#toggle-lexicon-persons').click(); | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment