pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
commit bbb91900210324333e7e38272cf4cb3c3004162a parent 19ba625cb835a5e37ff4f11ff6dd8034c500304e Author: Jul <jul@9o.is> Date: Sun, 30 Mar 2014 02:09:46 -0400 Cleaned up html formatting & css crap. Styles.css reduced from 578K to 124k Diffstat:
| M | src/main/webapp/about.html | | | 45 | +++++++++++++++++++++++++-------------------- |
| M | src/main/webapp/faqs.html | | | 155 | ++++++++++++++++++++++++++++++++++++++++++------------------------------------- |
| M | src/main/webapp/less/custom.less | | | 12 | +----------- |
| M | src/main/webapp/less/overrides.less | | | 188 | ++++++++++--------------------------------------------------------------------- |
| A | src/main/webapp/less/pages/about.less | | | 17 | +++++++++++++++++ |
| A | src/main/webapp/less/pages/index.less | | | 23 | +++++++++++++++++++++++ |
| A | src/main/webapp/less/pages/locations.less | | | 79 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | src/main/webapp/less/smartadmin/basic.less | | | 154 | ------------------------------------------------------------------------------- |
| A | src/main/webapp/less/smartadmin/main-custom.less | | | 511 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | src/main/webapp/less/styles.less | | | 118 | +++++++++++++++++++++++++++++++++++++++++++------------------------------------ |
| M | src/main/webapp/locations.html | | | 33 | ++++++++++++++++++++------------- |
| M | src/main/webapp/templates-hidden/default.html | | | 26 | +++++++++++++++----------- |
12 files changed, 861 insertions(+), 500 deletions(-)
diff --git a/src/main/webapp/about.html b/src/main/webapp/about.html @@ -1,7 +1,8 @@ <div data-lift="surround?with=default;at=content"> - - <div class="multi-column"> - <p class="lg-text"> + + <div class="row margin-top-10"> + <div class="col-xs-12 multi-column"> + <p> PYD is an innovative, C-Type corporation on the forefront of the cryptocurrency: Bitcoin. Our company, along with our business associates, provide the convenient distribution of Bitcoin in an environment and manner that is safe and compliant @@ -10,19 +11,20 @@ unique Bitcoin services. PYD aspires to not only provide a state of the art service in which helps circulate and establish reputable value in Bitcoin, but to help the everyday man or woman achieve more economically than he or she ever thought possible. - </p> + </p> + </div> </div> <br> - <div class="row ourstory"> + <div class="row"> <div class="col-xs-12 pagination-centered"> - <img class="img-thumbnail" src="/img/marist.jpg" /> + <img class="img-thumbnail img-responsive" src="/img/marist.jpg" /> <p><small>Marist College, Poughkeepsie NY</small></p> </div> </div> - <div class="row ourstory"> + <div class="row margin-top-10"> <div class="col-xs-12 multi-column"> - <p class="lg-text"> + <p> PYD was founded by Emilio Pagan-Yourno of Schenectady, NY and Julio Cabrera of Miami, FL where they both met in Marist College of Poughkeepsie, NY. In the later months of the year 2013, the increasingly popular cryptocurrency, Bitcoin, @@ -37,13 +39,14 @@ </div> <div class="page-header"><h1>The Team</h1></div> - - <div id="ourteam"> - <div class="row"> - <div class="ourteam-box col-xs-8 col-sm-4 col-xs-offset-2 col-sm-offset-2"> - <img class="img-thumbnail" src="/img/emilio.jpg" /> - <h2 class="name">Emilio Pagan-Yourno</h2> - <h5 class="title">Co-Founder, Bitcoin Enthusiast</h5> + + <div class="row ourteam"> + <div class="col-xs-12 col-sm-5 col-xs-offset-0 col-sm-offset-1 margin-top-10"> + <img class="img-thumbnail img-ourteam" src="/img/emilio.jpg" /> + <div class=""> + <h2>Emilio Pagan-Yourno</h2> + <h5>Co-Founder, Bitcoin Enthusiast</h5> + </div> <p> Emilio Pagan-Yourno is a bitcoin enthusiast with an unparalleled drive to learn more about potential applications with regards to @@ -57,10 +60,12 @@ enjoys traveling and playing tennis. </p> </div> - <div class="ourteam-box col-xs-8 col-sm-4 col-xs-offset-2 col-sm-offset-0"> - <img class="img-thumbnail" src="/img/julio.jpg" /> - <h2 class="name">Julio Enrique Cabrera</h2> - <h5 class="title">Co-Founder, Software Dev, Security Expert</h5> + <div class="col-xs-12 col-sm-5 col-xs-offset-0 col-sm-offset-1 margin-top-10"> + <img class="img-thumbnail img-ourteam" src="/img/julio.jpg" /> + <div class=""> + <h2>Julio Enrique Cabrera</h2> + <h5>Co-Founder, Software Developer</h5> + </div> <p> Julio is a visionary, always looking for ways to make the world an easier, safer and better place to live in which is why he works hard @@ -73,6 +78,6 @@ to hack while eating chili cheese nachos and watching The Colbert Report. </p> </div> - </div> </div> + </div> \ No newline at end of file diff --git a/src/main/webapp/faqs.html b/src/main/webapp/faqs.html @@ -1,80 +1,89 @@ <div data-lift="surround?with=default;at=content"> -<div id="faqs" class="row"> - <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> - <ul> - <li><h3>What is PYD?</h3></li> - <ul> - <li> - PYD is an ATM service operator for the bitcoin currency. - We enable customers to retrieve bitcoin instantly, just as - they retrieve cash from a bank ATM. - </li> - </ul> - - <li><h3>In which states is PYD available?</h3></li> - <ul> - <li> - PYD ATMs are currently available in the state of New Jersey. - If you’re located in another state but would like to be the - next customer to benefit from our service, - <a href="#">fill out this form so we can know you’re interested</a>. - </li> - </ul> - - <li><h3>How long does the ATM take to transfer the bitcoin to my wallet?</h3></li> - <ul> - <li> - The ATM takes a few seconds -- no more than a minute -- it is the fastest - and easiest way to retrieve bitcoin, hence our slogan. - </li> - </ul> - </ul> - </div> - <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> - <ul> - <li><h3>How much money can I take out from the ATM?</h3></li> - <ul> - <li> - At the moment, the maximum amount of money that can be taken out per - transaction is 500 USD. If you would like to transfer more money, you will - have to <a href="#">sign up and verify your identity</a>. - </li> - </ul> - - <li><h3>How do I use the ATM?</h3></li> - <ul> - <li> - <a href="#">Follow our tutorial</a> so we can help you find an ATM, set up a wallet, - instantly retrieve your bitcoin and find local merchants. - </li> - </ul> - - <li><h3>What is Bitcoin?</h3></li> - <ul> - <li> - <a href="#">Discover Bitcoin’s purpose and usability</a> in our easy to follow tutorial. - </li> - </ul> - </ul> - </div> - - <div id="contact-info" class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> - <address> - <strong>PYD INC</strong><br> - 341 Raven Circle<br> - Kent County, Wyoming, DE 19934<br> - <abbr title="Phone">P:</abbr> +1 (518) 441-0233 - </address> + <div id="faqs" class="row"> + <div class="col-xs-12 col-sm-8"> + <div class="row"> + <div class="col-md-12 col-lg-6"> + <ul class="list-unstyled"> + <li> + <h3>What is PYD?</h3> + <p> + PYD is an ATM service operator for the bitcoin currency. + We enable customers to retrieve bitcoin instantly, just as they + retrieve cash from a bank ATM. + </p> + </li> + + <li> + <h3>In which states is PYD available?</h3> + <p> + PYD ATMs are currently available in the state of New + Jersey. If you’re located in another state but would like to be + the next customer to benefit from our service, <a href="#">fill + out this form so we can know you’re interested</a>. + </p> + </li> + + <li> + <h3>How long does the ATM take to transfer the + bitcoin to my wallet?</h3> + <p> + The ATM takes a few seconds -- no more than a minute -- + it is the fastest and easiest way to retrieve bitcoin, hence our + slogan. + </p> + </li> + </ul> + </div> + <div class="col-md-12 col-lg-6"> + <ul class="list-unstyled"> + <li> + <h3>How much money can I take out from the ATM?</h3> + <p> + At the moment, the maximum amount of money that can be + taken out per transaction is 500 USD. If you would like to + transfer more money, you will have to <a href="#">sign up + and verify your identity</a>. + </p> + </li> + + <li> + <h3>How do I use the ATM?</h3> + <p> + <a href="#">Follow our tutorial</a> so we can help you + find an ATM, set up a wallet, instantly retrieve your bitcoin + and find local merchants. + </p> + </li> + + <li> + <h3>What is Bitcoin?</h3> + <p> + <a href="#">Discover Bitcoin’s purpose and usability</a> + in our easy to follow tutorial. + </p> + </li> + </ul> + + </div> + </div> + </div> + <div class="col-xs-12 col-sm-4"> + <h5>If you have any questions, please contact us. We will reply as soon as possible!</h5> + <address> + <strong>Emilio Pagan-Yourno</strong><br> <a + href="mailto:info@pydcoin.com">info@pydcoin.com</a> + </address> + <address> + <strong>PYD INC</strong><br> 341 Raven Circle<br> Kent + County, Wyoming, DE 19934<br> <abbr title="Phone">P:</abbr> +1 + (518) 441-0233 + </address> + </div> - <address> - <strong>Emilio Pagan-Yourno</strong><br> - <a href="mailto:info@pydcoin.com">info@pydcoin.com</a> - </address> </div> -</div> - - + + </div> \ No newline at end of file diff --git a/src/main/webapp/less/custom.less b/src/main/webapp/less/custom.less @@ -1,7 +1,7 @@ // Add anything custm here -- mixins, variable overrides // by adding things here instead of overriding existing .LESS files, it makes merging changes on product updates easier -@import url(http://fonts.googleapis.com/css?family=Cinzel:900); +//@import url(http://fonts.googleapis.com/css?family=Cinzel:900); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700); .background-size(@size) { @@ -37,11 +37,6 @@ } } -.lg-text { - font-size:15px; - margin: 40px; -} - .semibig-text { font-size: @font-size-h1 * 1.5; } @@ -51,11 +46,6 @@ font-weight: 900; } -.big-text-cinzel { - font-family: @font-family-big-base; - .big-text(); -} - .no-gutter { overflow: hidden; diff --git a/src/main/webapp/less/overrides.less b/src/main/webapp/less/overrides.less @@ -1,4 +1,4 @@ -//need to override just oe orwo small stylistic things and don't want to edit the main .less files? Add those overrides here +// Custom overrides go here body { overflow: auto; @@ -10,6 +10,10 @@ body { border-left: 1px solid @brand-primary; border-right: 1px solid @brand-primary; background: @white; + padding:10px 14px; + @media (max-width: @screen-sm) { + padding:10px 4px; + } } } @@ -22,6 +26,10 @@ body { padding-right: 5px; } +/******************************************** + * NAVBAR + ********************************************/ + @navbar-toprow: 0.40; @navbar-bottomrow: 0.50; @@ -110,168 +118,17 @@ body { } } -// Collapse to full width when xs-device is found -// ex. class="col-xs-6 xxs-collapse col-sm-6" -.xxs-collapse { - @media (max-width: @screen-xs) { - width: 100%; - } -} - -.sales-box, .ourteam-box { - h2 { - color: @brand-primary; - font-weight: 400; - } -} - -#ourteam { - - .ourteam-box { - img { - width: 70%; - margin-left: 15%; - } - - .name, .title { - text-align: center; - } - - p { - margin-top: 20px; - } - } - - .row.ourstory { - p { - font-size: 15px; - } - img { - width: 100%; - } - } -} - -#content-index { - & > div[class^="col-"] { - padding-left: 30px; - padding-right: 30px; - } - - .padding-20 { - padding-top: 20px; - padding-bottom: 20px; - } - - #atm-benefits { - td { height: 70px; } - } - - #atm-bitcoin-video { - iframe { - width: 100%; - height: 300px; - } - } -} - -#atm-locations { - #map-canvas { - @media (max-width: @screen-lg) { - height: 400px; - } - - @media (max-width: @screen-md-max) { - height: 500px; - } - - @media (max-width: @screen-sm-max) { - height: 600px; - } - - @media (max-width: @screen-xs-max) { - height: 700px; - } - height: 400px; - } - - .layer-outer { - padding: 10px; - } - - .layer { - #gradient > .horizontal-three-colors(rgba(0,0,0,0.6), rgba(0,0,0,0.3), 50%, rgba(0,0,0,0.6)); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: @gmap-overlay-zindex; - } -} - -#atms-coming-soon { - position: absolute; - z-index: @gmap-text-overlay-zindex; - margin: 0; - - @title-font-size: 50px; - @message-font-size: 20px; - - h1 { - @media (max-width: @screen-xs) { - font-size: @title-font-size * 0.75; - padding: 5px; - } - - @media (min-width: @screen-xs) { - font-size: @title-font-size; - padding: 20px; - } - - } - - p.message { - @media (max-width: @screen-xs){ - font-size: @message-font-size * 0.85; - padding: 5px; - } - - @media (min-width: @screen-xs) { - font-size: @message-font-size; - padding: 20px; - } - } - - .right-content { - padding: 25px; - } -} - -#faqs { - ol li { - margin: 10px 0; - } - ul { - .list-unstyled(); - margin-left: 20px; - } - - #contact-info { - @media (max-width: @screen-xs) { - .text-center(); - padding-left: 0; - } - - @media (max-width: @screen-sm) { - margin-top: 20px; - margin-left: 20px; +.navbar-default .navbar-nav > .active { + > a { + &, &:hover, &:focus { + background-color: @brand-primary-light; } } } - - +/****************************** + * ALERTS + ******************************/ .alert { z-index: @alert-zindex; @@ -283,10 +140,13 @@ body { color: @white; } -.navbar-default .navbar-nav > .active { - > a { - &, &:hover, &:focus { - background-color: @brand-primary-light; - } + +/************************************************* + * Collapse to full width when xs-device is found + * ex. class="col-xs-6 xxs-collapse col-sm-6" + *************************************************/ +.xxs-collapse { + @media (max-width: @screen-xs) { + width: 100%; } } \ No newline at end of file diff --git a/src/main/webapp/less/pages/about.less b/src/main/webapp/less/pages/about.less @@ -0,0 +1,16 @@ +.ourteam { + h2 { + color: @brand-primary; + font-weight: 400; + } + + img.img-ourteam { + width: 70%; + @media (min-width: @screen-xs) and (max-width: @screen-xs-max) { + width: 50%; + } + @media (max-width: @screen-xs) { + width: 100%; + } + } +} +\ No newline at end of file diff --git a/src/main/webapp/less/pages/index.less b/src/main/webapp/less/pages/index.less @@ -0,0 +1,22 @@ +#content-index { + & > div[class^="col-"] { + padding-left: 30px; + padding-right: 30px; + } + + .padding-20 { + padding-top: 20px; + padding-bottom: 20px; + } + + #atm-benefits { + td { height: 70px; } + } + + #atm-bitcoin-video { + iframe { + width: 100%; + height: 300px; + } + } +} +\ No newline at end of file diff --git a/src/main/webapp/less/pages/locations.less b/src/main/webapp/less/pages/locations.less @@ -0,0 +1,78 @@ +#atm-locations { + // WARNING: Width is fixed because of layer-outer, but map-canvas can be 100% width + // layer-outer is temporary :) + #map-canvas, .layer-overlay, layer-info { + pointer-events: none; + + @media (max-width: @screen-lg) { + width: 1136px; + height: 400px; + } + + @media (max-width: @screen-md-max) { + width: 936px; + height: 500px; + } + + @media (max-width: @screen-sm-max) { + width: 716px; + height: 600px; + } + + @media (max-width: @screen-xs-max) { + width: 98%; + height: 700px; + } + + width: 1136px; + height: 400px; + } + + .layer-overlay { + position: absolute; + + .layer { + #gradient > .horizontal-three-colors(rgba(0,0,0,0.6), rgba(0,0,0,0.3), 50%, rgba(0,0,0,0.6)); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: @gmap-overlay-zindex; + } + } + + .layer-info { + position: absolute; + z-index: @gmap-text-overlay-zindex + 10; + + #coming-soon-msg { + @title-font-size: 50px; + @message-font-size: 20px; + + h1 { + @media (max-width: @screen-xs) { + font-size: @title-font-size * 0.75; + padding: 5px; + } + + @media (min-width: @screen-xs) { + font-size: @title-font-size; + padding: 20px; + } + } + + p.message { + @media (max-width: @screen-xs){ + font-size: @message-font-size * 0.85; + padding: 5px; + } + + @media (min-width: @screen-xs) { + font-size: @message-font-size; + padding: 20px; + } + } + } + } +} +\ No newline at end of file diff --git a/src/main/webapp/less/smartadmin/basic.less b/src/main/webapp/less/smartadmin/basic.less @@ -1,154 +0,0 @@ -/* The MIT License */ -.dropzone, -.dropzone *, -.dropzone-previews, -.dropzone-previews * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} -.dropzone { - position: relative; - border: 1px solid rgba(0,0,0,0.08); - background: rgba(0,0,0,0.02); - padding: 1em; -} -.dropzone.dz-clickable { - cursor: pointer; -} -.dropzone.dz-clickable .dz-message, -.dropzone.dz-clickable .dz-message span { - cursor: pointer; -} -.dropzone.dz-clickable * { - cursor: default; -} -.dropzone .dz-message { - opacity: 1; - -ms-filter: none; - filter: none; -} -.dropzone.dz-drag-hover { - border-color: rgba(0,0,0,0.15); - background: rgba(0,0,0,0.04); -} -.dropzone.dz-started .dz-message { - display: none; -} -.dropzone .dz-preview, -.dropzone-previews .dz-preview { - background: rgba(255,255,255,0.8); - position: relative; - display: inline-block; - margin: 17px; - vertical-align: top; - border: 1px solid #acacac; - padding: 6px 6px 6px 6px; -} -.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail], -.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] { - display: none; -} -.dropzone .dz-preview .dz-details, -.dropzone-previews .dz-preview .dz-details { - width: 100px; - height: 100px; - position: relative; - background: #ebebeb; - padding: 5px; - margin-bottom: 22px; -} -.dropzone .dz-preview .dz-details .dz-filename, -.dropzone-previews .dz-preview .dz-details .dz-filename { - overflow: hidden; - height: 100%; -} -.dropzone .dz-preview .dz-details img, -.dropzone-previews .dz-preview .dz-details img { - position: absolute; - top: 0; - left: 0; - width: 100px; - height: 100px; -} -.dropzone .dz-preview .dz-details .dz-size, -.dropzone-previews .dz-preview .dz-details .dz-size { - position: absolute; - bottom: -28px; - left: 3px; - height: 28px; - line-height: 28px; -} -.dropzone .dz-preview.dz-error .dz-error-mark, -.dropzone-previews .dz-preview.dz-error .dz-error-mark { - display: block; -} -.dropzone .dz-preview.dz-success .dz-success-mark, -.dropzone-previews .dz-preview.dz-success .dz-success-mark { - display: block; -} -.dropzone .dz-preview:hover .dz-details img, -.dropzone-previews .dz-preview:hover .dz-details img { - display: none; -} -.dropzone .dz-preview .dz-success-mark, -.dropzone-previews .dz-preview .dz-success-mark, -.dropzone .dz-preview .dz-error-mark, -.dropzone-previews .dz-preview .dz-error-mark { - display: none; - position: absolute; - width: 40px; - height: 40px; - font-size: 30px; - text-align: center; - right: -10px; - top: -10px; -} -.dropzone .dz-preview .dz-success-mark, -.dropzone-previews .dz-preview .dz-success-mark { - color: #8cc657; -} -.dropzone .dz-preview .dz-error-mark, -.dropzone-previews .dz-preview .dz-error-mark { - color: #ee162d; -} -.dropzone .dz-preview .dz-progress, -.dropzone-previews .dz-preview .dz-progress { - position: absolute; - top: 100px; - left: 6px; - right: 6px; - height: 6px; - background: #d7d7d7; - display: none; -} -.dropzone .dz-preview .dz-progress .dz-upload, -.dropzone-previews .dz-preview .dz-progress .dz-upload { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 0%; - background-color: #8cc657; -} -.dropzone .dz-preview.dz-processing .dz-progress, -.dropzone-previews .dz-preview.dz-processing .dz-progress { - display: block; -} -.dropzone .dz-preview .dz-error-message, -.dropzone-previews .dz-preview .dz-error-message { - display: none; - position: absolute; - top: -5px; - left: -20px; - background: rgba(245,245,245,0.8); - padding: 8px 10px; - color: #800; - min-width: 140px; - max-width: 500px; - z-index: 500; -} -.dropzone .dz-preview:hover.dz-error .dz-error-message, -.dropzone-previews .dz-preview:hover.dz-error .dz-error-message { - display: block; -} diff --git a/src/main/webapp/less/smartadmin/main-custom.less b/src/main/webapp/less/smartadmin/main-custom.less @@ -0,0 +1,510 @@ +/* + * Main.less is overloaded with unneeded css rules. As more parts are added to the website, + * add the necessary SmartAdmin css rules to this Less file. +*/ + +html { + margin: 0; + padding: 0; + height: 100%; + overflow-x: hidden !important; +} + +body { + margin: 0; + padding: 0; + height: 100%; + overflow:hidden; + direction:ltr; +} + +a:hover, a:active, a:focus, button, button:active, button:focus, object, embed, input::-moz-focus-inner { + outline: 0; +} + +h1,h2,h3,h4 { + margin:0; + font-family: @font-family-sans-serif; + font-weight: @headings-font-weight - 200; +} + +.page-title { + margin: 12px 0 28px; + span { + font-size: @font-size-base+3; + color: @gray-dark; + display: inline-block; + vertical-align: 1px; + } +} + +label { + font-weight:normal; +} + +*:focus { + outline: 0 !important; +} + +textarea:focus, +select:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; + +} + +.input-sm, +.input-lg, +.input-xs, +.form-control { + border-radius:0px !important; + -webkit-border-radius: 0px !important; + -moz-border-radius: 0px !important; +} + +.input-xs { + height: 24px; + padding: 2px 10px; + font-size: 11px; + line-height: 1.5; +} + +.btn-xs { + padding: 1px 5px; +} + +.btn-sm { + padding: 6px 10px 5px; +} + +.btn-lg { + padding: 10px 16px; +} + +.no-space { + margin:0; +} + +.no-space > [class*="col-"] { + margin: 0 !important; + padding-right: 0; + padding-left: 0; +} + +body.container { + position: relative; + padding: 0; + border-left:1px solid @gray-mid-light; + border-right:1px solid @gray-mid-light; + box-shadow: 0 2px 70px rgba(red(@black), green(@black), blue(@black), 0.45); +} + +.no-content-padding { + margin: -10px -14px 0 -14px; /*used with content >:first-child */ +} + +.no-padding { + padding:0px !important; + & > pre { + margin:30px; + } + + & > table { + border:none !important; + margin-bottom:0px !important; + border-bottom-width:0px !important; + + tr td:last-child, tr th:last-child { + border-right:none !important; + } + + tr td:first-child, tr th:first-child { + border-left:none !important; + } + } + + .dataTables_wrapper table { + border:none !important; + margin-bottom:0px !important; + border-bottom-width:0px !important; + + tr td:last-child, tr th:last-child { + border-right:none !important; + } + tr td:first-child, tr th:first-child { + border-left:none !important; + } + } +} + +.no-padding-bottom { + padding-bottom:0px !important; +} +.padding-5 { + padding:5px !important; +} +.padding-7 { + padding:7px !important; +} +.padding-10 { + padding:10px !important; +} +.padding-top-10 { + padding-top:10px !important; +} + +.no-padding .dataTables_wrapper table tbody tr:last-child td { + border-bottom:0; +} + +/* + * Headers + */ + +h1 { + letter-spacing:-1px; + font-size:@font-size-h1; + margin:10px 0; +}h1 small { + font-size:@font-size-h4; + font-weight:300; + letter-spacing:-1px; +}.lead { + font-size:@font-size-h4 + 1px; +} + +h2 { + letter-spacing:-1px; + font-size: @font-size-h2; + margin:20px 0; + line-height:normal; +} + +h3 { + display: block; + font-size: @font-size-h3; + font-weight: 400; + margin: 20px 0; + line-height:normal; +} + +h4 { + line-height:normal; +} + +h5 { + font-size: @font-size-h5; + font-weight: 300; + margin: 10px 0; + line-height:normal; +} + +h6 { + font-size: @font-size-h6; + margin: 10px 0; + font-weight:bold; + line-height:normal; +} + +.row-seperator-header { + margin:15px 14px 20px; + border-bottom:none; + display:block; + color: darken( @gray-light, 20.9%); + font-size:20px; + font-weight:400; +} + +/* + * Forced text alignments + */ + +.text-align-center, .text-center { + text-align:center !important +} +.text-align-left, .text-left { + text-align:left !important +} +.text-align-right, .text-right { + text-align:right !important +} + +/* + * Font Weights + */ + +.semi-bold { + font-weight:400 !important; +} + +.ultra-light { + font-weight:300 !important; +} + +/* + * Font Sizes + */ + + +.font-xs { + font-size:85% !important; +} + +.font-sm { + font-size:95% !important; +} + +.font-md { + font-size:110% !important; +} + +.font-lg { + font-size:120% !important; +} + +.font-xl { + font-size:140% !important; +} + +.font-400 { + font-size:400% !important; +} + +/* + * Center Canvas + */ +.center-canvas, .center-child-canvas > canvas { + display:block !important; + margin:0 auto !important; +} + +/* + * Margins + */ + +.no-margin { + margin:0px !important; +} + +.margin-top-5 { + margin-top:5px !important; +} + +.margin-top-10 { + margin-top:10px !important; +} + +.margin-bottom-5 { + margin-bottom:5px !important; +} + +.margin-bottom-10 { + margin-bottom:10px !important; +} + +.margin-right-5 { + margin-right:5px !important; +} + +.margin-left-10 { + margin-left: 10px !important; +} + +/* + * No border + */ + +.no-border, .well[class*=" bg-"].no-border { + border-width:0px !important; +} + +.no-border-transparent { + border-color:transparent !important; +} + +.no-border-radius { + border-radius:0px; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; +} + +/* + * Inlines + */ +.display-inline { + display:inline-block !important; +} + +.display-normal { + display:inline !important; +} + + +/* + * Images + */ + +.hover-transparent { + opacity:.5; +}.hover-transparent:hover { + opacity:1; +} + +/* + * JUST A BORDER + */ +.bordered { + border:1px solid rgba(red(@black), green(@black), blue(@black),.2); +}.bordered:hover { + border:1px solid rgba(red(@black), green(@black), blue(@black),.4); +} + +/* + * CURSORS + */ +.cursor-pointer { + cursor:pointer; +} + + + +/* + * Alerts + */ +.alert { + margin-bottom: 20px; + margin-top: 0px; + padding: 5px 15px 5px 34px; + color:#675100; + border-width:0px; + border-left-width:5px; + padding:10px; + border-radius:0px; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + .close { + top: 0px; + right: -5px; + line-height: 20px; + } +} + +.alert-heading { + font-weight:600; +} + +.alert-danger { + border-color: @state-danger-border; + color: @state-danger-text; + background: @state-danger-bg; + text-shadow:none; +} + +.alert-warning { + border-color: @state-warning-border; + color: @state-warning-text; + background: @state-warning-bg; +} + +.alert-success { + border-color: @state-success-border; + color: @state-success-text; + background: @state-success-bg; +} + +.alert-info { + border-color: @state-info-border; + color: @state-info-text; + background: @state-info-bg; +} + +/* + * WELLS + */ + +.well { + background: darken(@white, 1.5%); + border: 1px solid darken(@gray-lighter, 7%); + box-shadow: 0 1px 1px darken(@gray-lighter, 1%); + -webkit-box-shadow: 0 1px 1px darken(@gray-lighter, 1%); + -moz-box-shadow: 0 1px 1px darken(@gray-lighter, 1%); + position:relative; +} + +/* + * CUSTOM BUTTON + */ + +.pagination > li > a, .pagination > li > span { + box-shadow: inset 0 -2px 0 rgba(red(@black), green(@black), blue(@black), 0.05); + -moz-box-shadow: inset 0 -2px 0 rgba(red(@black), green(@black), blue(@black), 0.05); + -webkit-box-shadow: inset 0 -2px 0 rgba(red(@black), green(@black), blue(@black), 0.05); +} + +.disabled { + color:@white; +} +.btn-default.disabled { + color:@gray-light; +} + +.btn { + border-radius:2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + box-shadow: inset 0 -2px 0 rgba(red(@black), green(@black), blue(@black), 0.05); + -moz-box-shadow: inset 0 -2px 0 rgba(red(@black), green(@black), blue(@black), 0.05); + -webkit-box-shadow: inset 0 -2px 0 rgba(red(@black), green(@black), blue(@black), 0.05); +} +.btn:active { + position:relative; + top:1px; + left:1px; +} + +/* SMART FORM */ + +.table.has-tickbox.smart-form thead tr th:first-child .radio, +.table.has-tickbox.smart-form thead tr th:first-child .checkbox, +.table.has-tickbox.smart-form tbody tr td:first-child .radio, +.table.has-tickbox.smart-form tbody tr td:first-child .checkbox { + padding:0px !important; +} + +.smart-form.table td .radio i, +.smart-form.table td .checkbox i, +.smart-form.table th .radio i, +.smart-form.table th .checkbox i { + top: 0px !important; +} + +/* + * Client page forms + */ + .client-form header { + padding: 15px 13px; + margin:0; + border-bottom-style:solid; + border-bottom-color:rgba(red(@black), green(@black), blue(@black), .1); + background: rgba(248, 248, 248, .9); + } +\ No newline at end of file diff --git a/src/main/webapp/less/styles.less b/src/main/webapp/less/styles.less @@ -18,40 +18,40 @@ // Core CSS @import "@{BootstrapPath}/scaffolding.less"; @import "@{BootstrapPath}/type.less"; -@import "@{BootstrapPath}/code.less"; + //@import "@{BootstrapPath}/code.less"; @import "@{BootstrapPath}/grid.less"; -@import "@{BootstrapPath}/tables.less"; + //@import "@{BootstrapPath}/tables.less"; @import "@{BootstrapPath}/forms.less"; @import "@{BootstrapPath}/buttons.less"; // Components @import "@{BootstrapPath}/component-animations.less"; -@import "@{BootstrapPath}/glyphicons.less"; -@import "@{BootstrapPath}/dropdowns.less"; -@import "@{BootstrapPath}/button-groups.less"; -@import "@{BootstrapPath}/input-groups.less"; + //@import "@{BootstrapPath}/glyphicons.less"; + //@import "@{BootstrapPath}/dropdowns.less"; + //@import "@{BootstrapPath}/button-groups.less"; + //@import "@{BootstrapPath}/input-groups.less"; @import "@{BootstrapPath}/navs.less"; @import "@{BootstrapPath}/navbar.less"; -@import "@{BootstrapPath}/breadcrumbs.less"; -@import "@{BootstrapPath}/pagination.less"; -@import "@{BootstrapPath}/pager.less"; + //@import "@{BootstrapPath}/breadcrumbs.less"; + //@import "@{BootstrapPath}/pagination.less"; + //@import "@{BootstrapPath}/pager.less"; @import "@{BootstrapPath}/labels.less"; -@import "@{BootstrapPath}/badges.less"; -@import "@{BootstrapPath}/jumbotron.less"; + //@import "@{BootstrapPath}/badges.less"; + //@import "@{BootstrapPath}/jumbotron.less"; @import "@{BootstrapPath}/thumbnails.less"; @import "@{BootstrapPath}/alerts.less"; -@import "@{BootstrapPath}/progress-bars.less"; -@import "@{BootstrapPath}/media.less"; -@import "@{BootstrapPath}/list-group.less"; -@import "@{BootstrapPath}/panels.less"; + //@import "@{BootstrapPath}/progress-bars.less"; + //@import "@{BootstrapPath}/media.less"; + //@import "@{BootstrapPath}/list-group.less"; + //@import "@{BootstrapPath}/panels.less"; @import "@{BootstrapPath}/wells.less"; @import "@{BootstrapPath}/close.less"; // Components w/ JavaScript -@import "@{BootstrapPath}/modals.less"; -@import "@{BootstrapPath}/tooltip.less"; -@import "@{BootstrapPath}/popovers.less"; -@import "@{BootstrapPath}/carousel.less"; + //@import "@{BootstrapPath}/modals.less"; + //@import "@{BootstrapPath}/tooltip.less"; + //@import "@{BootstrapPath}/popovers.less"; + //@import "@{BootstrapPath}/carousel.less"; // Utility classes @import "@{BootstrapPath}/utilities.less"; @@ -88,53 +88,63 @@ */ @SmartAdminPath: "./smartadmin"; -@import "@{SmartAdminPath}/jarvis-widgets.less"; + //@import "@{SmartAdminPath}/jarvis-widgets.less"; @import "@{SmartAdminPath}/smart-forms.less"; -@import "@{SmartAdminPath}/x-editable.less"; -@import "@{SmartAdminPath}/fullcalendar.less"; -@import "@{SmartAdminPath}/colorpicker.less"; -@import "@{SmartAdminPath}/bootstrap-timepicker.less"; -@import "@{SmartAdminPath}/animated.less"; -@import "@{SmartAdminPath}/summernote.less"; -@import "@{SmartAdminPath}/bootstrap-markdown.less"; -@import "@{SmartAdminPath}/basic.less"; -@import "@{SmartAdminPath}/dropzone.less"; -@import "@{SmartAdminPath}/pricing-table.less"; -@import "@{SmartAdminPath}/superbox.less"; -@import "@{SmartAdminPath}/bootstrap-tagsinput.less"; -@import "@{SmartAdminPath}/DT_bootstrap.less"; -@import "@{SmartAdminPath}/TableTools.less"; -@import "@{SmartAdminPath}/fd-slider.less"; -@import "@{SmartAdminPath}/bootstrap-slider.less"; -@import "@{SmartAdminPath}/jquery-ui-1.10.3.custom.less"; -@import "@{SmartAdminPath}/smart-chat.less"; -@import "@{SmartAdminPath}/notifications.less"; + //@import "@{SmartAdminPath}/x-editable.less"; + //@import "@{SmartAdminPath}/fullcalendar.less"; + //@import "@{SmartAdminPath}/colorpicker.less"; + //@import "@{SmartAdminPath}/bootstrap-timepicker.less"; + //@import "@{SmartAdminPath}/animated.less"; + //@import "@{SmartAdminPath}/summernote.less"; + //@import "@{SmartAdminPath}/bootstrap-markdown.less"; + //@import "@{SmartAdminPath}/dropzone.less"; + //@import "@{SmartAdminPath}/pricing-table.less"; + //@import "@{SmartAdminPath}/superbox.less"; + //@import "@{SmartAdminPath}/bootstrap-tagsinput.less"; + //@import "@{SmartAdminPath}/DT_bootstrap.less"; + //@import "@{SmartAdminPath}/TableTools.less"; + //@import "@{SmartAdminPath}/fd-slider.less"; + //@import "@{SmartAdminPath}/bootstrap-slider.less"; + //@import "@{SmartAdminPath}/jquery-ui-1.10.3.custom.less"; + //@import "@{SmartAdminPath}/smart-chat.less"; + //@import "@{SmartAdminPath}/notifications.less"; @import "@{SmartAdminPath}/colorpallet.less"; // Individual pages, sections, and components. You can remove any of these sections you don't use // Components -@import "@{SmartAdminPath}/component-ion.less"; -@import "@{SmartAdminPath}/component-jqueryui.less"; -@import "@{SmartAdminPath}/component-radiocheck.less"; + //@import "@{SmartAdminPath}/component-ion.less"; + //@import "@{SmartAdminPath}/component-jqueryui.less"; + //@import "@{SmartAdminPath}/component-radiocheck.less"; // Pages -@import "@{SmartAdminPath}/page-error.less"; -@import "@{SmartAdminPath}/page-login.less"; + //@import "@{SmartAdminPath}/page-error.less"; + //@import "@{SmartAdminPath}/page-login.less"; // Sections -@import "@{SmartAdminPath}/section-nestables.less"; -@import "@{SmartAdminPath}/section-calendar.less"; -@import "@{SmartAdminPath}/section-inbox.less"; -@import "@{SmartAdminPath}/section-profile.less"; -@import "@{SmartAdminPath}/section-search.less"; -@import "@{SmartAdminPath}/section-select2.less"; -@import "@{SmartAdminPath}/section-todo.less"; + //@import "@{SmartAdminPath}/section-nestables.less"; + //@import "@{SmartAdminPath}/section-calendar.less"; + //@import "@{SmartAdminPath}/section-inbox.less"; + //@import "@{SmartAdminPath}/section-profile.less"; + //@import "@{SmartAdminPath}/section-search.less"; + //@import "@{SmartAdminPath}/section-select2.less"; + //@import "@{SmartAdminPath}/section-todo.less"; // Main THEME -@import "@{SmartAdminPath}/main.less"; -@import "@{SmartAdminPath}/main-responsive.less"; -@import "@{SmartAdminPath}/main-animated.less"; + //@import "@{SmartAdminPath}/main.less"; + //@import "@{SmartAdminPath}/main-responsive.less"; + //@import "@{SmartAdminPath}/main-animated.less"; +@import "@{SmartAdminPath}/main-custom.less"; + +/********************************************************* + * My Website Pages + ******************************************************* + */ +@PagesPath: "./pages"; + +@import "@{PagesPath}/about.less"; +@import "@{PagesPath}/index.less"; +@import "@{PagesPath}/locations.less"; /********************************************************* * Overrides diff --git a/src/main/webapp/locations.html b/src/main/webapp/locations.html @@ -1,21 +1,28 @@ <div data-lift="surround?with=base-wrap;at=content"> - <div id="atm-locations"> - <div class="outer-layer"><div class="layer"></div></div> - - <div id="atms-coming-soon" class="row"> - <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> - <h1 class="text-white">ATMs Coming Soon</h1> - <p class="message text-white"> - Fill the form to get notified when an ATM comes to your home town. - </p> - </div> - - <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 col-lg-offset-1 right-content"> - <span data-lift="embed?what=/templates-hidden/parts/notify-atm-form"></span> + <div id="atm-locations"> + <div class="layer-info"> + <div class="row margin-top-10"> + <div class="col-sm-10 col-md-6 col-lg-6"> + <div id="coming-soon-msg"> + <h1 class="text-white">ATMs Coming Soon</h1> + <p class="message text-white"> + Fill the form to get notified when an ATM comes to your home town. + </p> + </div> + </div> + <div class="col-xs-11 col-sm-10 col-md-4 col-lg-5"> + <div class="margin-left-10"> + <span data-lift="embed?what=/templates-hidden/parts/notify-atm-form"></span> + </div> + </div> </div> </div> + <div class="layer-overlay"> + <div class="layer"></div> + </div> + <div id="map-canvas"></div> </div> diff --git a/src/main/webapp/templates-hidden/default.html b/src/main/webapp/templates-hidden/default.html @@ -2,16 +2,20 @@ <lift:head> <title data-lift="Menu.title">PYD: %*%</title> </lift:head> - <div class="main-content"> - <div class="page-header"> - <h1> - <span data-lift="Menu.title"></span> - <div style="display:none; float:right;" id="ajax-spinner"> - <i class="fa fa-spinner fa-spin"></i> - </div> - </h1> - </div> - <div id="content"></div> - </div> + <div class="row"> + <div class="col-xs-10 col-xs-offset-1"> + <div class="main-content"> + <div class="page-header"> + <h1> + <span data-lift="Menu.title"></span> + <div style="display:none; float:right;" id="ajax-spinner"> + <i class="fa fa-spinner fa-spin"></i> + </div> + </h1> + </div> + <div id="content"></div> + </div> + </div> + </div> <span data-lift="embed?what=/templates-hidden/parts/footer"></span> </div>