add new sounds && refactor && new bg images && form redesigns

src/Jotunheimr/UserBundle/Resources/public/css/layout.css

@@ -1,203 +1,136 @@
+::-webkit-input-placeholder {
+    color: #888982;
+}
+
+::-moz-placeholder {
+    color: #888982;
+}
+
+:-ms-input-placeholder {
+    color: #888982;
+}
+
+:-moz-placeholder {
+    color: #888982;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    outline: 0;
+}
+
+*,
+*:after,
+*::before {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
 main {
+    background: url('/bundles/mineseeker/images/homepage/header.jpg') no-repeat center center;
+    background-size: cover;
     position: fixed;
     width: 100%;
     height: 100%;
 }
 
-main > div {
-    background: rgba(52, 73, 94, 0.9);
-}
-
-main .form {
-    /*border-top: 2px solid #3498db;*/
-}
-
-main .checkbox {
-    color: #FFFFFF;
-}
-
-.fb-login {
-    display: block;
-    background: #1a6190;
-    font: bold 22px 'Gloria Hallelujah', cursive;
-    text-align: center;
-    color: #2c3e50;
-    padding: 15px 20px;
-    margin: 20px;
-
-    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-}
-
-.fb-login:hover {
-    background: #FFFFFF;
-    text-decoration: none;
-    color: #3498db;
-
-    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-}
-
-/** input */
-
-.input {
-    position: relative;
-    z-index: 1;
-    display: inline-block;
-    max-width: 350px;
-    width: calc(100% - 2em);
-    vertical-align: top;
-}
-
-.input__field {
-    position: relative;
-    display: block;
-    float: right;
-    padding: 0.8em;
-    width: 60%;
-    border: none;
-    border-radius: 0;
-    background: #f0f0f0;
-    color: #aaa;
-    font-weight: 400;
-    font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    -webkit-appearance: none; /* for box shadows to show on iOS */
-}
-
-.input__field:focus {
-    outline: none;
-}
-
-.input__label {
-    display: inline-block;
-    float: right;
-    padding: 0 1em;
-    width: 40%;
-    color: #696969;
-    font-weight: bold;
-    font-size: 70.25%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.input__label-content {
-    position: relative;
-    display: block;
-    padding: 1.6em 0;
+main .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
-}
-
-.graphic {
-    position: absolute;
-    top: 0;
-    left: 0;
-    fill: none;
-}
-
-.icon {
-    color: #ddd;
-    font-size: 150%;
-}
-
-/* Kozakura */
-.input--kozakura {
-    overflow: hidden;
-}
-
-.input__field--kozakura {
-    background: transparent;
-    width: 100%;
-    font-size: 1.55em;
-    color: #2F3238;
-    border-bottom: 1px solid #3498db;
-    padding: 0.25em 0.5em;
-    margin-top: 1.25em;
-    margin-bottom: 0.5em;
-
-    opacity: 0;
-}
-
-.input__label--kozakura {
-    width: 100%;
-    text-align: left;
-    position: absolute;
-    top: 1em;
-    pointer-events: none;
-    overflow: hidden;
-    padding: 0 0.25em;
-    -webkit-transform: translate3d(1em, 2.75em, 0);
-    transform: translate3d(1em, 2.75em, 0);
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: transform 0.3s;
-}
-
-.input__label-content--kozakura {
-    color: #FFFFFF;
-    padding: 0.4em 0 0.25em;
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: transform 0.3s;
-}
-
-.input__label-content--kozakura::after {
-    content: attr(data-content);
-    position: absolute;
-    font-weight: 800;
-    top: 100%;
-    left: 0;
     height: 100%;
+}
+
+main .wrapper .form-container {
+    background: #ffffff;
+    display: table;
+    padding: 15px;
+}
+
+main .wrapper .form-container h1 {
+    font: normal 32px Arial, Helvetica, sans-serif;
+    text-align: center;
+    padding: 0;
+    margin: 0 0 15px 0;
+}
+
+main .wrapper .form-container h1.sub-title {
+    margin-top: 15px;
+}
+
+main .wrapper .form-container h2 {
+    font: normal 18px Arial, Helvetica, sans-serif;
+    text-align: center;
+    margin: 20px 0;
+}
+
+main .wrapper .form-container .form-input {
+    background: #cbcbc8;
+    min-width: 300px;
+    border: 0;
+    padding: 15px;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+main .wrapper .form-container .form-input:focus {
+    background: #e2e2de;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+main .wrapper .form-container .form-input.form-username {
+    margin-bottom: 5px;
+}
+
+main .wrapper .form-container .form-check {
+    display: table;
+    position: relative;
+    margin: 20px auto 0 auto;
+}
+
+main .wrapper .form-container .input-submit {
+    margin-top: 20px;
+}
+
+main .wrapper .form-container button,
+main .wrapper .form-container .fb-login {
+    display: block;
+    background: #7dadcf;
     width: 100%;
-    color: #fff;
-    padding: 0.25em 0;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 0.85em;
+    border: 0;
+    text-align: center;
+    padding: 20px;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
 }
 
-.graphic--kozakura {
-    fill: #2c3e50;
-    pointer-events: none;
-    top: 1em;
-    bottom: 0;
-    height: 4.5em;
-    z-index: -1;
-    -webkit-transition: -webkit-transform 0.7s, fill 0.7s;
-    transition: transform 0.7s, fill 0.7s;
-    -webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
-    transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
+main .wrapper .form-container .fb-login {
+    background: #3b5998;
 }
 
-.input__field--kozakura:focus,
-.input--filled .input__field--kozakura {
-    -webkit-transition: opacity 0s 0.35s;
-    transition: opacity 0s 0.35s;
-    opacity: 1;
+main .wrapper .form-container button:focus,
+main .wrapper .form-container button:hover,
+main .wrapper .form-container .fb-login:focus,
+main .wrapper .form-container .fb-login:hover {
+    background: #6fa0c3;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
 }
 
-.input__field--kozakura:focus + .input__label--kozakura,
-.input--filled .input__label--kozakura {
-    -webkit-transition-delay: 0.15s;
-    transition-delay: 0.15s;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
+main .wrapper .form-container button i,
+main .wrapper .form-container .fb-login i {
+    font-size: 32px;
+    font-weight: bolder;
+    color: #ffffff;
 }
 
-.input__field--kozakura:focus + .input__label--kozakura .input__label-content--kozakura,
-.input--filled .input__label-content--kozakura {
-    -webkit-transition-delay: 0.15s;
-    transition-delay: 0.15s;
-    -webkit-transform: translate3d(0, -100%, 0);
-    transform: translate3d(0, -100%, 0);
-}
 
-.input__field--kozakura:focus ~ .graphic--kozakura,
-.input--filled .graphic--kozakura {
-    fill: #fff;
-    -webkit-transform: translate3d(-66.6%, 0, 0);
-    transform: translate3d(-66.6%, 0, 0);
-}
+

src/Jotunheimr/UserBundle/Resources/public/css/login.css

@@ -1,91 +0,0 @@
-main {
-    background: url('/bundles/mineseeker/images/homepage/header.jpg');
-    background-size: cover;
-    background-position: center center;
-}
-
-main .login {
-    position: fixed;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-}
-
-main .login .login-container {
-    background: #2980b9;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    width: 100%;
-    padding: 1em;
-
-    -webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
-}
-
-main .login .login-container .login-form {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-    width: 50%;
-}
-
-main .login .login-container .login-item {
-    width: 50%;
-}
-
-main .login .login-container .login-item h2 {
-    text-align: center;
-}
-
-main .login .login-container .login-item:first-child {
-    border-right: 1px solid #3498db;
-}
-
-main .login h1 {
-    display: block;
-    font: normal 72px 'Gloria Hallelujah', cursive;
-    text-align: center;
-    color: #2c3e50;
-    margin-top: 0;
-}
-
-main .login .form .input {
-    display: block;
-    margin: 0 auto;
-}
-
-main .login .form .checkbox {
-    color: #2c3e50;
-}
-
-main .checkbox label, main .radio label {
-    font: bolder 18px "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-main .login .form .submit {
-    background: #1a6190;
-    display: block;
-    font: bolder 22px "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #2c3e50;
-    border: 0;
-    padding: 10px 70px;
-    margin: 20px auto 40px auto;
-
-    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-}
-
-main .login .form .submit:hover {
-    background: #3498db;
-
-    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-}

src/Jotunheimr/UserBundle/Resources/public/css/register.css

@@ -1,47 +0,0 @@
-main {
-    background: url('/bundles/mineseeker/images/homepage/header.jpg');
-    background-size: cover;
-    background-position: center center;
-}
-
-main .register {
-    position: fixed;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-}
-
-main .register h1 {
-    display: block;
-    font: normal 40px 'Gloria Hallelujah', cursive;
-    text-align: center;
-    color: #FFFFFF;
-}
-
-main .register .form .input {
-    display: block;
-    margin: 0 auto;
-}
-
-main .register .form .submit {
-    background: none;
-    display: block;
-    font: bold 22px 'Gloria Hallelujah', cursive;
-    color: #FFFFFF;
-    border: 2px solid #3498db;
-    padding: 10px 20px;
-    margin: 20px auto 0 auto;
-
-    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-}
-
-main .register .form .submit:hover {
-    background: #3498db;
-
-    -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-    transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
-}

src/Jotunheimr/UserBundle/Resources/public/css/svgcheckbox.css

@@ -0,0 +1,210 @@
+.ac-custom {
+    max-width: 900px;
+}
+
+.ac-custom h2 {
+    font-size: 3em;
+    font-weight: 300;
+    padding: 0 0 0.5em;
+    margin: 0 0 30px;
+}
+
+.ac-custom ul,
+.ac-custom ol {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    max-width: 800px;
+}
+
+.ac-custom li {
+    margin: 0 auto;
+    padding: 2em 0;
+    position: relative;
+}
+
+.ac-custom label {
+    display: inline-block;
+    position: relative;
+    vertical-align: top;
+    font-size: 1.5em;
+    color: #898a83;
+    padding: 0 0 0 80px;
+
+    cursor: pointer;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+.ac-custom input[type="checkbox"],
+.ac-custom input[type="radio"],
+.ac-custom label::before {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: 50%;
+    left: 0;
+    margin-top: -23px;
+
+    cursor: pointer;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+.ac-custom input[type="checkbox"],
+.ac-custom input[type="radio"] {
+    opacity: 0;
+    -webkit-appearance: none;
+    display: inline-block;
+    vertical-align: middle;
+    z-index: 100;
+}
+
+.ac-custom label::before {
+    content: '';
+    border: 4px solid #cbcbc8;
+
+    -webkit-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+
+.ac-radio label::before {
+    border-radius: 50%;
+}
+
+.ac-custom input[type="checkbox"]:checked + label,
+.ac-custom input[type="radio"]:checked + label {
+    /** no style */
+}
+
+.ac-custom input[type="checkbox"]:checked + label::before,
+.ac-custom input[type="radio"]:checked + label::before {
+    opacity: 0.8;
+}
+
+/* General SVG and path styles */
+
+.ac-custom svg {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    top: 50%;
+    margin-top: -20px;
+    left: 5px;
+    pointer-events: none;
+}
+
+.ac-custom svg path {
+    stroke: #cbcbc8;
+    stroke-width: 13px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+}
+
+/* Specific input, SVG and path styles */
+
+/* Circle */
+.ac-circle input[type="checkbox"],
+.ac-circle input[type="radio"],
+.ac-circle label::before {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    left: 10px;
+    position: absolute;
+}
+
+.ac-circle label::before {
+    background-color: #fff;
+    border: none;
+}
+
+.ac-circle svg {
+    width: 70px;
+    height: 70px;
+    margin-top: -35px;
+    left: -10px;
+}
+
+.ac-circle svg path {
+    stroke-width: 5px;
+}
+
+/* Box Fill */
+.ac-boxfill svg path {
+    stroke-width: 8px;
+}
+
+/* Swirl */
+.ac-swirl svg path {
+    stroke-width: 8px;
+}
+
+/* List */
+.ac-list ol {
+    list-style: decimal;
+    list-style-position: inside;
+}
+
+.ac-list ol li {
+    font-size: 2em;
+    padding: 1em 1em 0 2em;
+    text-indent: -40px;
+}
+
+.ac-list ol li label {
+    font-size: 1em;
+    text-indent: 0;
+    padding-left: 30px;
+}
+
+.ac-list label::before {
+    display: none;
+}
+
+.ac-list svg {
+    width: 100%;
+    height: 80px;
+    left: 0;
+    top: 1.2em;
+    margin-top: 0;
+}
+
+.ac-list svg path {
+    stroke-width: 4px;
+}
+
+/* Media Queries */
+@media screen and (max-width: 50em) {
+    section {
+        font-size: 80%;
+    }
+}
+
+/** on focus */
+
+.ac-custom input[type="checkbox"]:focus + svg path,
+.ac-custom input[type="radio"]:focus + svg path {
+    stroke: #4e4e4a;
+}
+
+.ac-custom input[type="checkbox"]:focus + label,
+.ac-custom input[type="radio"]:focus + label {
+    color: #4e4e4a;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+.ac-custom input[type="checkbox"]:focus + label::before,
+.ac-custom input[type="radio"]:focus + label::before {
+    border-color: #4e4e4a;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}

src/Jotunheimr/UserBundle/Resources/public/js/register.js

@@ -12,7 +12,6 @@
 /*global define: false */
 
 (function (window) {
-
     'use strict';
 
     // class helper functions from bonzo https://github.com/ded/bonzo

src/Jotunheimr/UserBundle/Resources/public/js/svgcheckbox.js

@@ -0,0 +1,137 @@
+if( document.createElement('svg').getAttributeNS ) {
+
+    var checkbxsCross = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-cross input[type="checkbox"]' ) ),
+        radiobxsFill = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-fill input[type="radio"]' ) ),
+        checkbxsCheckmark = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-checkmark input[type="checkbox"]' ) ),
+        radiobxsCircle = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-circle input[type="radio"]' ) ),
+        checkbxsBoxfill = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-boxfill input[type="checkbox"]' ) ),
+        radiobxsSwirl = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-swirl input[type="radio"]' ) ),
+        checkbxsDiagonal = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-diagonal input[type="checkbox"]' ) ),
+        checkbxsList = Array.prototype.slice.call( document.querySelectorAll( 'form.ac-list input[type="checkbox"]' ) ),
+        pathDefs = {
+            cross : ['M 10 10 L 90 90','M 90 10 L 10 90'],
+            fill : ['M15.833,24.334c2.179-0.443,4.766-3.995,6.545-5.359 c1.76-1.35,4.144-3.732,6.256-4.339c-3.983,3.844-6.504,9.556-10.047,13.827c-2.325,2.802-5.387,6.153-6.068,9.866 c2.081-0.474,4.484-2.502,6.425-3.488c5.708-2.897,11.316-6.804,16.608-10.418c4.812-3.287,11.13-7.53,13.935-12.905 c-0.759,3.059-3.364,6.421-4.943,9.203c-2.728,4.806-6.064,8.417-9.781,12.446c-6.895,7.477-15.107,14.109-20.779,22.608 c3.515-0.784,7.103-2.996,10.263-4.628c6.455-3.335,12.235-8.381,17.684-13.15c5.495-4.81,10.848-9.68,15.866-14.988 c1.905-2.016,4.178-4.42,5.556-6.838c0.051,1.256-0.604,2.542-1.03,3.672c-1.424,3.767-3.011,7.432-4.723,11.076 c-2.772,5.904-6.312,11.342-9.921,16.763c-3.167,4.757-7.082,8.94-10.854,13.205c-2.456,2.777-4.876,5.977-7.627,8.448 c9.341-7.52,18.965-14.629,27.924-22.656c4.995-4.474,9.557-9.075,13.586-14.446c1.443-1.924,2.427-4.939,3.74-6.56 c-0.446,3.322-2.183,6.878-3.312,10.032c-2.261,6.309-5.352,12.53-8.418,18.482c-3.46,6.719-8.134,12.698-11.954,19.203 c-0.725,1.234-1.833,2.451-2.265,3.77c2.347-0.48,4.812-3.199,7.028-4.286c4.144-2.033,7.787-4.938,11.184-8.072 c3.142-2.9,5.344-6.758,7.925-10.141c1.483-1.944,3.306-4.056,4.341-6.283c0.041,1.102-0.507,2.345-0.876,3.388 c-1.456,4.114-3.369,8.184-5.059,12.212c-1.503,3.583-3.421,7.001-5.277,10.411c-0.967,1.775-2.471,3.528-3.287,5.298 c2.49-1.163,5.229-3.906,7.212-5.828c2.094-2.028,5.027-4.716,6.33-7.335c-0.256,1.47-2.07,3.577-3.02,4.809'],
+            checkmark : ['M16.667,62.167c3.109,5.55,7.217,10.591,10.926,15.75 c2.614,3.636,5.149,7.519,8.161,10.853c-0.046-0.051,1.959,2.414,2.692,2.343c0.895-0.088,6.958-8.511,6.014-7.3 c5.997-7.695,11.68-15.463,16.931-23.696c6.393-10.025,12.235-20.373,18.104-30.707C82.004,24.988,84.802,20.601,87,16'],
+            circle : ['M34.745,7.183C25.078,12.703,13.516,26.359,8.797,37.13 c-13.652,31.134,9.219,54.785,34.77,55.99c15.826,0.742,31.804-2.607,42.207-17.52c6.641-9.52,12.918-27.789,7.396-39.713 C85.873,20.155,69.828-5.347,41.802,13.379'],
+            boxfill : ['M6.987,4.774c15.308,2.213,30.731,1.398,46.101,1.398 c9.74,0,19.484,0.084,29.225,0.001c2.152-0.018,4.358-0.626,6.229,1.201c-5.443,1.284-10.857,2.58-16.398,2.524 c-9.586-0.096-18.983,2.331-28.597,2.326c-7.43-0.003-14.988-0.423-22.364,1.041c-4.099,0.811-7.216,3.958-10.759,6.81 c8.981-0.104,17.952,1.972,26.97,1.94c8.365-0.029,16.557-1.168,24.872-1.847c2.436-0.2,24.209-4.854,24.632,2.223 c-14.265,5.396-29.483,0.959-43.871,0.525c-12.163-0.368-24.866,2.739-36.677,6.863c14.93,4.236,30.265,2.061,45.365,2.425 c7.82,0.187,15.486,1.928,23.337,1.903c2.602-0.008,6.644-0.984,9,0.468c-2.584,1.794-8.164,0.984-10.809,1.165 c-13.329,0.899-26.632,2.315-39.939,3.953c-6.761,0.834-13.413,0.95-20.204,0.938c-1.429-0.001-2.938-0.155-4.142,0.436 c5.065,4.68,15.128,2.853,20.742,2.904c11.342,0.104,22.689-0.081,34.035-0.081c9.067,0,20.104-2.412,29.014,0.643 c-4.061,4.239-12.383,3.389-17.056,4.292c-11.054,2.132-21.575,5.041-32.725,5.289c-5.591,0.124-11.278,1.001-16.824,2.088 c-4.515,0.885-9.461,0.823-13.881,2.301c2.302,3.186,7.315,2.59,10.13,2.694c15.753,0.588,31.413-0.231,47.097-2.172 c7.904-0.979,15.06,1.748,22.549,4.877c-12.278,4.992-25.996,4.737-38.58,5.989c-8.467,0.839-16.773,1.041-25.267,0.984 c-4.727-0.031-10.214-0.851-14.782,1.551c12.157,4.923,26.295,2.283,38.739,2.182c7.176-0.06,14.323,1.151,21.326,3.07 c-2.391,2.98-7.512,3.388-10.368,4.143c-8.208,2.165-16.487,3.686-24.71,5.709c-6.854,1.685-13.604,3.616-20.507,4.714 c-1.707,0.273-3.337,0.483-4.923,1.366c2.023,0.749,3.73,0.558,5.95,0.597c9.749,0.165,19.555,0.31,29.304-0.027 c15.334-0.528,30.422-4.721,45.782-4.653'],
+            swirl : ['M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837 c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079 c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826 c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371 c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262 c0.643,4.698,0.646,10.775-3.811,13.746'],
+            diagonal : ['M16.053,91.059c0.435,0,0.739-0.256,0.914-0.768 c3.101-2.85,5.914-6.734,8.655-9.865C41.371,62.438,56.817,44.11,70.826,24.721c3.729-5.16,6.914-10.603,10.475-15.835 c0.389-0.572,0.785-1.131,1.377-1.521'],
+            list : ['M1.986,8.91c41.704,4.081,83.952,5.822,125.737,2.867 c17.086-1.208,34.157-0.601,51.257-0.778c21.354-0.223,42.706-1.024,64.056-1.33c18.188-0.261,36.436,0.571,54.609,0.571','M3.954,25.923c9.888,0.045,19.725-0.905,29.602-1.432 c16.87-0.897,33.825-0.171,50.658-2.273c14.924-1.866,29.906-1.407,44.874-1.936c19.9-0.705,39.692-0.887,59.586,0.45 c35.896,2.407,71.665-1.062,107.539-1.188']
+        },
+        animDefs = {
+            cross : { speed : .2, easing : 'ease-in-out' },
+            fill : { speed : .8, easing : 'ease-in-out' },
+            checkmark : { speed : .2, easing : 'ease-in-out' },
+            circle : { speed : .2, easing : 'ease-in-out' },
+            boxfill : { speed : .8, easing : 'ease-in' },
+            swirl : { speed : .8, easing : 'ease-in' },
+            diagonal : { speed : .2, easing : 'ease-in-out' },
+            list : { speed : .3, easing : 'ease-in-out' }
+        };
+
+    function createSVGEl( def ) {
+        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        if( def ) {
+            svg.setAttributeNS( null, 'viewBox', def.viewBox );
+            svg.setAttributeNS( null, 'preserveAspectRatio', def.preserveAspectRatio );
+        }
+        else {
+            svg.setAttributeNS( null, 'viewBox', '0 0 100 100' );
+        }
+        svg.setAttribute( 'xmlns', 'http://www.w3.org/2000/svg' );
+        return svg;
+    }
+
+    function controlCheckbox( el, type, svgDef ) {
+        var svg = createSVGEl( svgDef );
+        el.parentNode.appendChild( svg );
+
+        el.addEventListener( 'change', function() {
+            if( el.checked ) {
+                draw( el, type );
+            }
+            else {
+                reset( el );
+            }
+        } );
+    }
+
+    function controlRadiobox( el, type ) {
+        var svg = createSVGEl();
+        el.parentNode.appendChild( svg );
+        el.addEventListener( 'change', function() {
+            resetRadio( el );
+            draw( el, type );
+        } );
+    }
+
+    checkbxsCross.forEach( function( el, i ) { controlCheckbox( el, 'cross' ); } );
+    radiobxsFill.forEach( function( el, i ) { controlRadiobox( el, 'fill' ); } );
+    checkbxsCheckmark.forEach( function( el, i ) { controlCheckbox( el, 'checkmark' ); } );
+    radiobxsCircle.forEach( function( el, i ) { controlRadiobox( el, 'circle' ); } );
+    checkbxsBoxfill.forEach( function( el, i ) { controlCheckbox( el, 'boxfill' ); } );
+    radiobxsSwirl.forEach( function( el, i ) { controlRadiobox( el, 'swirl' ); } );
+    checkbxsDiagonal.forEach( function( el, i ) { controlCheckbox( el, 'diagonal' ); } );
+    checkbxsList.forEach( function( el ) { controlCheckbox( el, 'list', { viewBox : '0 0 300 100', preserveAspectRatio : 'none' } ); } );
+
+    function draw( el, type ) {
+        var paths = [], pathDef,
+            animDef,
+            svg = el.parentNode.querySelector( 'svg' );
+
+        switch( type ) {
+            case 'cross': pathDef = pathDefs.cross; animDef = animDefs.cross; break;
+            case 'fill': pathDef = pathDefs.fill; animDef = animDefs.fill; break;
+            case 'checkmark': pathDef = pathDefs.checkmark; animDef = animDefs.checkmark; break;
+            case 'circle': pathDef = pathDefs.circle; animDef = animDefs.circle; break;
+            case 'boxfill': pathDef = pathDefs.boxfill; animDef = animDefs.boxfill; break;
+            case 'swirl': pathDef = pathDefs.swirl; animDef = animDefs.swirl; break;
+            case 'diagonal': pathDef = pathDefs.diagonal; animDef = animDefs.diagonal; break;
+            case 'list': pathDef = pathDefs.list; animDef = animDefs.list; break;
+        };
+
+        paths.push( document.createElementNS('http://www.w3.org/2000/svg', 'path' ) );
+
+        if( type === 'cross' || type === 'list' ) {
+            paths.push( document.createElementNS('http://www.w3.org/2000/svg', 'path' ) );
+        }
+
+        for( var i = 0, len = paths.length; i < len; ++i ) {
+            var path = paths[i];
+            svg.appendChild( path );
+
+            path.setAttributeNS( null, 'd', pathDef[i] );
+
+            var length = path.getTotalLength();
+            // Clear any previous transition
+            //path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'none';
+            // Set up the starting positions
+            path.style.strokeDasharray = length + ' ' + length;
+            if( i === 0 ) {
+                path.style.strokeDashoffset = Math.floor( length ) - 1;
+            }
+            else path.style.strokeDashoffset = length;
+            // Trigger a layout so styles are calculated & the browser
+            // picks up the starting position before animating
+            path.getBoundingClientRect();
+            // Define our transition
+            path.style.transition = path.style.WebkitTransition = path.style.MozTransition  = 'stroke-dashoffset ' + animDef.speed + 's ' + animDef.easing + ' ' + i * animDef.speed + 's';
+            // Go!
+            path.style.strokeDashoffset = '0';
+        }
+    }
+
+    function reset( el ) {
+        Array.prototype.slice.call( el.parentNode.querySelectorAll( 'svg > path' ) ).forEach( function( el ) { el.parentNode.removeChild( el ); } );
+    }
+
+    function resetRadio( el ) {
+        Array.prototype.slice.call( document.querySelectorAll( 'input[type="radio"][name="' + el.getAttribute( 'name' ) + '"]' ) ).forEach( function( el ) {
+            var path = el.parentNode.querySelector( 'svg > path' );
+            if( path ) {
+                path.parentNode.removeChild( path );
+            }
+        } );
+    }
+
+}

src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig

@@ -3,71 +3,43 @@
 {% trans_default_domain 'FOSUserBundle' %}
 
 {% block fos_user_content %}
-    <div class="register">
-        {% include('@JotunheimrUser/Social/facebook.html.twig') %}
+    <div class="wrapper">
+        <div class="form-container">
+            <h1> Sign up </h1>
+            <div class="db">
+                <form action="{{ path('fos_user_registration_register') }}"
+                      method="post">
+                    <div>
+                        {{ form_widget(form.email, {'attr': {'placeholder': 'Email', 'class': 'form-input form-username'}}) }}
+                        {{ form_errors(form.email) }}
+                    </div>
 
-        <h1>
-            Sign up
-        </h1>
-        <div class="form">
-            {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
-            {#<input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>#}
+                    <div>
+                        {{ form_widget(form.username, {'attr': {'placeholder': 'Username ', 'class': 'form-input form-username'}}) }}
+                        {{ form_errors(form.username) }}
+                    </div>
 
-            <div class="input input--kozakura">
-                {{ form_widget(form.email, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
-                <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
-                    <span class="input__label-content input__label-content--kozakura" data-content="Email">Email</span>
-                </label>
-                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                     preserveAspectRatio="none">
-                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                </svg>
-                {{ form_errors(form.email) }}
+                    <div>
+                        {{ form_widget(form.plainPassword.first, {'attr': {'placeholder': 'Password', 'class': 'form-input form-username'}}) }}
+                        {{ form_errors(form.plainPassword.first) }}
+                    </div>
+
+                    <div>
+                        {{ form_widget(form.plainPassword.second, {'attr': {'placeholder': 'Repeat password', 'class': 'form-input'}}) }}
+                        {{ form_errors(form.plainPassword.second) }}
+                    </div>
+
+                    <div class="input-submit">
+                        <button type="submit" id="_submit" name="_submit">
+                            <i class="fa fa-check"></i>
+                        </button>
+                    </div>
+                </form>
             </div>
-
-            <div class="input input--kozakura">
-                {{ form_widget(form.username, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
-                <label class="input__label input__label--kozakura" for="fos_user_registration_form_username">
-                <span class="input__label-content input__label-content--kozakura"
-                      data-content="Username">Username</span>
-                </label>
-                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                     preserveAspectRatio="none">
-                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                </svg>
-                {{ form_errors(form.username) }}
+            <h2><u><b>or</b></u> enter w/ your Facebook's e-mail</h2>
+            <div class="fb">
+                {% include('@JotunheimrUser/Social/facebook.html.twig') %}
             </div>
-
-            <div class="input input--kozakura">
-                {{ form_widget(form.plainPassword.first, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
-                <label class="input__label input__label--kozakura" for="fos_user_registration_form_plainPassword_first">
-                <span class="input__label-content input__label-content--kozakura"
-                      data-content="Password">Password</span>
-                </label>
-                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                     preserveAspectRatio="none">
-                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                </svg>
-                {{ form_errors(form.plainPassword.first) }}
-            </div>
-
-            <div class="input input--kozakura">
-                {{ form_widget(form.plainPassword.second, {'attr': {'class': 'input__field input__field--kozakura'}}) }}
-                <label class="input__label input__label--kozakura"
-                       for="fos_user_registration_form_plainPassword_second">
-                    <span class="input__label-content input__label-content--kozakura" data-content="Repeat password">Repeat password</span>
-                </label>
-                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                     preserveAspectRatio="none">
-                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                </svg>
-                {{ form_errors(form.plainPassword.second) }}
-            </div>
-
-            <div class="input-submit">
-                <input class="submit" type="submit" value="{{ 'registration.submit'|trans }}"/>
-            </div>
-            {{ form_end(form) }}
         </div>
     </div>
 {% endblock fos_user_content %}
@@ -86,7 +58,7 @@
 
     {% stylesheets filter='cssrewrite'
     '@JotunheimrUserBundle/Resources/public/css/font-awesome/css/font-awesome.min.css'
-    '@JotunheimrUserBundle/Resources/public/css/register.css' %}
+    '@JotunheimrUserBundle/Resources/public/css/layout.css' %}
     <link rel="stylesheet" media="screen" href="{{ asset_url }}"/>
     {% endstylesheets %}
 {% endblock %}

src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig

@@ -7,66 +7,41 @@
         {{ error.messageKey|trans(error.messageData, 'security') }}
     {% endif %}
 
-    <div class="login">
-        <div class="login-container">
-            <h1>
-                Sign in
-            </h1>
+    <div class="wrapper">
+        <div class="form-container">
+            <h1>Sign in</h1>
+            <div class="db">
+                <form action="{{ path("fos_user_security_check") }}" method="post"
+                      class="ac-custom ac-checkbox ac-boxfill">
+                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
 
-            <div class="login-form">
-                <div class="login-item">
-                    <div class="form">
-                        <form action="{{ path("fos_user_security_check") }}" method="post">
-                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
-
-                            <div class="input input--kozakura">
-                                <input type="text" id="username" name="_username" value="{{ last_username }}"
-                                       class="input__field input__field--kozakura"/>
-                                <label class="input__label input__label--kozakura"
-                                       for="fos_user_registration_form_email">
-                        <span class="input__label-content input__label-content--kozakura"
-                              data-content="Username or Email">Username or Email</span>
-                                </label>
-                                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                                     preserveAspectRatio="none">
-                                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                                </svg>
-                            </div>
-
-                            <div class="input input--kozakura">
-                                <input type="password" id="password" name="_password"
-                                       class="input__field input__field--kozakura"/>
-                                <label class="input__label input__label--kozakura"
-                                       for="fos_user_registration_form_email">
-                                    <span class="input__label-content input__label-content--kozakura"
-                                          data-content="Password">Password</span>
-                                </label>
-                                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                                     preserveAspectRatio="none">
-                                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                                </svg>
-                            </div>
-
-                            <div class="checkbox text-center">
-                                <label for="remember_me">
-                                    <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
-                                    {{ 'security.login.remember_me'|trans }}
-                                </label>
-                            </div>
-
-                            <div class="input-submit">
-                                <input class="submit" type="submit" id="_submit" name="_submit"
-                                       value="{{ 'security.login.submit'|trans }}"/>
-                            </div>
-                        </form>
+                    <div>
+                        <input type="text" id="username" name="_username" value="{{ last_username }}"
+                               class="form-input form-username"
+                               placeholder="Username or Email"/>
                     </div>
 
-                </div>
-                <div class="login-item">
-                    <a class="fb-login" href="{{ path('fos_user_registration_register') }}">Register a new account</a>
-                    <h2>or</h2>
-                    {% include('@JotunheimrUser/Social/facebook.html.twig') %}
-                </div>
+                    <div>
+                        <input type="password" id="password" name="_password"
+                               class="form-input"
+                               placeholder="Password"/>
+                    </div>
+
+                    <div class="form-check">
+                        <input type="checkbox" id="remember-me" name="_remember_me" value="on"/>
+                        <label for="remember-me">{{ 'security.login.remember_me'|trans }}</label>
+                    </div>
+
+                    <div class="input-submit">
+                        <button type="submit" id="_submit" name="_submit">
+                            <i class="fa fa-check"></i>
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <h2><u><b>or</b></u> enter w/ your Facebook's e-mail</h2>
+            <div class="fb">
+                {% include('@JotunheimrUser/Social/facebook.html.twig') %}
             </div>
         </div>
     </div>
@@ -76,7 +51,8 @@
     {{ parent() }}
 
     {% javascripts
-    '@JotunheimrUserBundle/Resources/public/js/register.js' %}
+    '@JotunheimrUserBundle/Resources/public/js/register.js'
+    '@JotunheimrUserBundle/Resources/public/js/svgcheckbox.js' %}
     <script type="text/javascript" src="{{ asset_url }}"></script>
     {% endjavascripts %}
 {% endblock %}
@@ -86,7 +62,7 @@
 
     {% stylesheets filter='cssrewrite'
     '@JotunheimrUserBundle/Resources/public/css/font-awesome/css/font-awesome.min.css'
-    '@JotunheimrUserBundle/Resources/public/css/login.css' %}
+    '@JotunheimrUserBundle/Resources/public/css/svgcheckbox.css' %}
     <link rel="stylesheet" media="screen" href="{{ asset_url }}"/>
     {% endstylesheets %}
 {% endblock %}

src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig

@@ -33,4 +33,4 @@
     }
 </script>
 
-<a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i> Enter w/ Facebook</a>
+<a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i></a>

src/Mine/SeekerBundle/Resources/public/css/style.homepage.css

@@ -26,7 +26,7 @@ header {
     justify-content: center;
     flex-direction: column;
     width: 100%;
-    height: 560px;
+    height: 100%;
     color: #ffffff;
     overflow: hidden;
 }
@@ -37,6 +37,8 @@ header h1 {
     text-align: center;
     line-height: 20px;
     color: #ffa800;
+
+    z-index: 2;
 }
 
 header h3 {
@@ -44,6 +46,8 @@ header h3 {
     font: normal 32px 'Open Sans Condensed', sans-serif;
     text-align: center;
     color: #ffcd02;
+
+    z-index: 2;
 }
 
 header > a {
@@ -56,6 +60,8 @@ header > a {
     padding: 10px 70px;
     margin-top: 20px;
 
+    z-index: 2;
+
     -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
     -webkit-border-radius: 3px;
@@ -79,13 +85,23 @@ header > a:hover {
 
 header > img {
     position: absolute;
-    width: 350px;
-    bottom: -250px;
+    width: 50%;
+    max-width: 1000px;
+    bottom: -25%;
+
+    z-index: 1;
 }
 
-main {
-    font: normal 32px 'Open Sans Condensed', sans-serif;
-    text-align: center;
-    color: #ffffff;
-    padding-top: 50px;
+@media screen and (max-width: 1500px) {
+    header > img {
+        width: 60%;
+        bottom: -40%;
+    }
+}
+
+@media screen and (max-width: 1500px) {
+    header > img {
+        width: 70%;
+        bottom: -20%;
+    }
 }

src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js

@@ -40,9 +40,7 @@ class MineSeeker extends React.Component {
         websocket.on("socket/connect", (session) => {
             console.info("Successfully connected to the Server!");
 
-            if (!this.state.gameInherited) {
-                var gridClient = new Grid().state.grid;
-            }
+            var gridClient = this.state.gameInherited || new Grid().state.grid;
 
             /**
              * Connect - RPC
@@ -65,7 +63,7 @@ class MineSeeker extends React.Component {
                             session: this.state.session,
                             channel: this.state.channel,
                             overlay: true,
-                            overlayTitle: "We are waiting for your opponent bazmeg...",
+                            overlayTitle: "We are waiting for your opponent...",
                             overlaySubTitle: this.state.gameAssoc
                                 ? <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
                                 : ''

src/Mine/SeekerBundle/Resources/views/Game/index.html.twig

@@ -4,15 +4,7 @@
     <h1>MineSeeker</h1>
     <h3>version 1.0a</h3>
     <a href="{{ path('MineSeekerBundle_gamePlay') }}">Play now</a>
-    <img src="{{ asset('bundles/mineseeker/images/homepage/mineseeker.png') }}" alt="" border="0">
-{% endblock %}
-
-{% block body %}
-    The site is under construction
-{% endblock %}
-
-{% block footer %}
-
+    <img src="{{ asset('bundles/mineseeker/images/homepage/mineseeker-2.png') }}" alt="" border="0">
 {% endblock %}
 
 {% block stylesheets %}