From 0d2ac0fb33b9a7fac9191cd4dcd1b98b16b4e996 Mon Sep 17 00:00:00 2001 From: Lang Date: Fri, 18 Nov 2016 18:34:15 +0100 Subject: [PATCH] add new sounds && refactor && new bg images && form redesigns --- .../Resources/public/css/layout.css | 303 +++++++----------- .../UserBundle/Resources/public/css/login.css | 91 ------ .../Resources/public/css/register.css | 47 --- .../Resources/public/css/svgcheckbox.css | 210 ++++++++++++ .../Resources/public/js/register.js | 1 - .../Resources/public/js/svgcheckbox.js | 137 ++++++++ .../views/Registration/register.html.twig | 96 ++---- .../Resources/views/Security/login.html.twig | 94 ++---- .../Resources/views/Social/facebook.html.twig | 2 +- .../Resources/public/css/style.homepage.css | 32 +- .../images/homepage/bg-clouds-outbg.jpg | Bin 0 -> 428431 bytes .../public/images/homepage/header.jpg | Bin 0 -> 1958664 bytes .../public/images/homepage/mineseeker-1.png | Bin 0 -> 1270216 bytes .../public/images/homepage/mineseeker-2.png | Bin 0 -> 1920457 bytes .../public/images/homepage/mineseeker.png | Bin 0 -> 24102 bytes .../Resources/public/js/mine-seeker/app.js | 6 +- .../Resources/views/Game/index.html.twig | 10 +- web/sound/messenger/newalert.wav | Bin 0 -> 14864 bytes web/sound/messenger/newemail.wav | Bin 0 -> 36482 bytes web/sound/messenger/nudge.wav | Bin 0 -> 172252 bytes web/sound/messenger/online.wav | Bin 0 -> 30820 bytes web/sound/messenger/phone.wav | Bin 0 -> 622400 bytes web/sound/messenger/ring.wav | Bin 0 -> 19502 bytes web/sound/messenger/type.wav | Bin 0 -> 14576 bytes web/sound/messenger/vimdone.wav | Bin 0 -> 94692 bytes 25 files changed, 562 insertions(+), 467 deletions(-) delete mode 100644 src/Jotunheimr/UserBundle/Resources/public/css/login.css delete mode 100644 src/Jotunheimr/UserBundle/Resources/public/css/register.css create mode 100644 src/Jotunheimr/UserBundle/Resources/public/css/svgcheckbox.css create mode 100644 src/Jotunheimr/UserBundle/Resources/public/js/svgcheckbox.js create mode 100644 src/Mine/SeekerBundle/Resources/public/images/homepage/bg-clouds-outbg.jpg create mode 100644 src/Mine/SeekerBundle/Resources/public/images/homepage/header.jpg create mode 100755 src/Mine/SeekerBundle/Resources/public/images/homepage/mineseeker-1.png create mode 100755 src/Mine/SeekerBundle/Resources/public/images/homepage/mineseeker-2.png create mode 100644 src/Mine/SeekerBundle/Resources/public/images/homepage/mineseeker.png create mode 100644 web/sound/messenger/newalert.wav create mode 100644 web/sound/messenger/newemail.wav create mode 100644 web/sound/messenger/nudge.wav create mode 100644 web/sound/messenger/online.wav create mode 100644 web/sound/messenger/phone.wav create mode 100644 web/sound/messenger/ring.wav create mode 100644 web/sound/messenger/type.wav create mode 100644 web/sound/messenger/vimdone.wav diff --git a/src/Jotunheimr/UserBundle/Resources/public/css/layout.css b/src/Jotunheimr/UserBundle/Resources/public/css/layout.css index 24ae639..5d35dd6 100644 --- a/src/Jotunheimr/UserBundle/Resources/public/css/layout.css +++ b/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); -} + diff --git a/src/Jotunheimr/UserBundle/Resources/public/css/login.css b/src/Jotunheimr/UserBundle/Resources/public/css/login.css deleted file mode 100644 index 62f53da..0000000 --- a/src/Jotunheimr/UserBundle/Resources/public/css/login.css +++ /dev/null @@ -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); -} diff --git a/src/Jotunheimr/UserBundle/Resources/public/css/register.css b/src/Jotunheimr/UserBundle/Resources/public/css/register.css deleted file mode 100644 index f56e3dc..0000000 --- a/src/Jotunheimr/UserBundle/Resources/public/css/register.css +++ /dev/null @@ -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); -} diff --git a/src/Jotunheimr/UserBundle/Resources/public/css/svgcheckbox.css b/src/Jotunheimr/UserBundle/Resources/public/css/svgcheckbox.css new file mode 100644 index 0000000..0744c55 --- /dev/null +++ b/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; +} diff --git a/src/Jotunheimr/UserBundle/Resources/public/js/register.js b/src/Jotunheimr/UserBundle/Resources/public/js/register.js index 1810bd8..b960e76 100644 --- a/src/Jotunheimr/UserBundle/Resources/public/js/register.js +++ b/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 diff --git a/src/Jotunheimr/UserBundle/Resources/public/js/svgcheckbox.js b/src/Jotunheimr/UserBundle/Resources/public/js/svgcheckbox.js new file mode 100644 index 0000000..cebc40c --- /dev/null +++ b/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 ); + } + } ); + } + +} diff --git a/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig b/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig index 7dc1601..3c78185 100644 --- a/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig +++ b/src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig @@ -3,71 +3,43 @@ {% trans_default_domain 'FOSUserBundle' %} {% block fos_user_content %} -
- {% include('@JotunheimrUser/Social/facebook.html.twig') %} +
+
+

Sign up

+
+
+
+ {{ form_widget(form.email, {'attr': {'placeholder': 'Email', 'class': 'form-input form-username'}}) }} + {{ form_errors(form.email) }} +
-

- Sign up -

-
- {{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }} - {##} +
+ {{ form_widget(form.username, {'attr': {'placeholder': 'Username ', 'class': 'form-input form-username'}}) }} + {{ form_errors(form.username) }} +
-
- {{ form_widget(form.email, {'attr': {'class': 'input__field input__field--kozakura'}}) }} - - - - - {{ form_errors(form.email) }} +
+ {{ form_widget(form.plainPassword.first, {'attr': {'placeholder': 'Password', 'class': 'form-input form-username'}}) }} + {{ form_errors(form.plainPassword.first) }} +
+ +
+ {{ form_widget(form.plainPassword.second, {'attr': {'placeholder': 'Repeat password', 'class': 'form-input'}}) }} + {{ form_errors(form.plainPassword.second) }} +
+ +
+ +
+
- -
- {{ form_widget(form.username, {'attr': {'class': 'input__field input__field--kozakura'}}) }} - - - - - {{ form_errors(form.username) }} +

or enter w/ your Facebook's e-mail

+
+ {% include('@JotunheimrUser/Social/facebook.html.twig') %}
- -
- {{ form_widget(form.plainPassword.first, {'attr': {'class': 'input__field input__field--kozakura'}}) }} - - - - - {{ form_errors(form.plainPassword.first) }} -
- -
- {{ form_widget(form.plainPassword.second, {'attr': {'class': 'input__field input__field--kozakura'}}) }} - - - - - {{ form_errors(form.plainPassword.second) }} -
- -
- -
- {{ form_end(form) }}
{% 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' %} {% endstylesheets %} {% endblock %} diff --git a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig index 8c9d33e..17c4595 100644 --- a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig +++ b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig @@ -7,66 +7,41 @@ {{ error.messageKey|trans(error.messageData, 'security') }} {% endif %} -