diff --git a/web/app/img/icon-charts.png b/web/app/img/icon-charts.png new file mode 100644 index 0000000000000000000000000000000000000000..1584eb06afe67575dafc8522b1f4220dd5a5a340 Binary files /dev/null and b/web/app/img/icon-charts.png differ diff --git a/web/app/img/icon-doc.png b/web/app/img/icon-doc.png new file mode 100644 index 0000000000000000000000000000000000000000..97b0df2b5dfef01cb3ad024ab4c6ca66f9150906 Binary files /dev/null and b/web/app/img/icon-doc.png differ diff --git a/web/app/img/icon-install.png b/web/app/img/icon-install.png new file mode 100644 index 0000000000000000000000000000000000000000..7d6ac0eaedcf61502bcfe359f9607e20132bfcc3 Binary files /dev/null and b/web/app/img/icon-install.png differ diff --git a/web/app/partials/root.html b/web/app/partials/root.html index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f18117d8222aafeeae438ccf04195f3a8070f375 100644 --- a/web/app/partials/root.html +++ b/web/app/partials/root.html @@ -0,0 +1,14 @@ +<div class="big-buttom-row"> + <a href="#/attendance" class="big-buttom dark"> + <span class="icon icon-charts"></span> + Acompanhamento + </a> + <a href="#/install" class="big-buttom medium"> + <span class="icon icon-install"></span> + Instalação + </a> + <a href="#/doc" class="big-buttom light"> + <span class="icon icon-doc"></span> + Documentação + </a> +</div> \ No newline at end of file diff --git a/web/assets/less/main.less b/web/assets/less/main.less index 3acfc6b3c81831ad4d0403efb4080e3d34ab11c1..51f72d94e9ad6130aee50eb467474612a1f9ddc2 100644 --- a/web/assets/less/main.less +++ b/web/assets/less/main.less @@ -19,6 +19,7 @@ a { .container { width: 950px; margin: auto; + padding: 0; } .header { @@ -78,4 +79,55 @@ a { background: url('../img/header.png') no-repeat; height: 100px; } +} + +.big-buttom-row { + position: relative; + width: 100%; + top: -24px; +} + +.big-buttom { + float: left; + width: 280px; + height: 250px; + margin-left: 27px; + + font-weight: bold; + font-size: 2em; + text-align: center; + color: #fff; + + border-radius: 4px; + + -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.2); + -moz-box-shadow: 1px 1px 4px rgba(0,0,0,.2); + box-shadow: 1px 1px 4px rgba(0,0,0,.2); + + &:hover { + color: #fff; + text-decoration: none; + } + + @big-button-primary-color: #004170; + + &.dark { background-color: @big-button-primary-color; } + &.dark:hover { background-color: lighten(@big-button-primary-color, 30%); } + + &.medium { background-color: lighten(@big-button-primary-color, 15%); } + &.medium:hover { background-color: lighten(@big-button-primary-color, 45%); } + + &.light { background-color: lighten(@big-button-primary-color, 30%); } + &.light:hover { background-color: lighten(@big-button-primary-color, 60%); } +} + +.icon { + display: block; + width: 100px; + height: 100px; + margin: 50px auto 25px auto; + + &.icon-charts { background: url('../img/icon-charts.png') no-repeat; } + &.icon-install { background: url('../img/icon-install.png') no-repeat; } + &.icon-doc { background: url('../img/icon-doc.png') no-repeat; } } \ No newline at end of file