Merge pull request #2692 from bechi/splash-screen

improve splash screen
This commit is contained in:
Matias Alejo Garcia 2015-05-11 14:42:15 -03:00
commit c5e5a3d824
3 changed files with 42 additions and 10 deletions

BIN
public/img/icon-splash.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

View File

@ -1,18 +1,16 @@
<div class="text-center splash"> <div class="text-center splash">
<div class="row"> <div class="row">
<div class="medium-6 large-4 medium-centered small-centered large-centered columns"> <div class="medium-6 large-4 medium-centered small-centered large-centered columns">
<div class="m50b p20"> <div class="p20">
<h4 class="text-bold size-14" translate>WELCOME TO</h4> <span class="text-bold size-16 text-white" translate>WELCOME TO COPAY</span>
<img src="img/logo.png" alt="tour1" width="100"> <p class="text-gray size-14 m0 text-light" translate>A multisignature bitcoin wallet</p>
</div> </div>
<div class="line-b"></div>
<span class="text-gray size-14 db m10b m10t" translate>
* In case you need to import wallets from previous Copay versions go to <b>Menu</b>
</span>
<div class="line-b m20b"></div>
</div> </div>
</div> </div>
<div class="gif-splash">
<img src="img/icon-splash.png" alt="icon" width="25%">
</div>
<div class="row columns start-button"> <div class="row columns start-button">
<button ng-click="$root.go('createProfile')" class="button black expand radius " translate> START </button> <button ng-click="$root.go('createProfile')" class="button black expand radius size-12 text-spacing" translate> GET STARTED </button>
</div> </div>
</div> </div>

View File

@ -614,6 +614,17 @@ button.outline:focus {
background: transparent; background: transparent;
} }
.button.outline.tiny,
.button.outline.tiny:hover,
.button.outline.tiny:focus,
button.outline.tiny,
button.outline.tiny:hover,
button.outline.tiny:focus {
border-radius: 3px;
background: transparent;
}
.button.outline.dark-gray, .button.outline.dark-gray,
.button.outline.dark-gray:hover, .button.outline.dark-gray:hover,
.button.outline.dark-gray:focus, .button.outline.dark-gray:focus,
@ -879,7 +890,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
background-color: #2C3E50; background-color: #2C3E50;
} }
.text-italic {font-style: italic;} .text-italic {font-style: italic;}
.text-light {font-weight: 100;} .text-light {font-weight: 200;}
.text-bold {font-weight: 700;} .text-bold {font-weight: 700;}
.text-gray {color: #8597A7;} .text-gray {color: #8597A7;}
.text-black {color: #2C3E50;} .text-black {color: #2C3E50;}
@ -889,6 +900,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
.text-warning {color: #ED4A43;} .text-warning {color: #ED4A43;}
.text-alert {color: red;} .text-alert {color: red;}
.text-success {color: #1ABC9C;} .text-success {color: #1ABC9C;}
.text-spacing {letter-spacing:2px;}
.panel { .panel {
background: #FFFFFF; background: #FFFFFF;
@ -1095,11 +1107,33 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
font-weight: normal; font-weight: normal;
} }
.splash {
width: 100%;
height: 100%;
background: #2C3E50;
position: absolute;
background-image: -webkit-linear-gradient(#3D5672 0%, #223243 100%);
background-image: -o-linear-gradient(#3D5672 0%, #223243 100%);
background-image: linear-gradient(#3D5672 0%, #223243 100%);
}
.splash .start-button { .splash .start-button {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
.splash .start-button button.black {
background-color: #4B6178;
}
.splash .start-button button.outline.tiny {
font-size: 0.58rem;
}
.gif-splash {
padding: 2rem 0;
}
.preferences li { .preferences li {
cursor: pointer !important; cursor: pointer !important;
} }