├── README.md ├── index.html ├── css └── style.css ├── scss └── style.scss └── js └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # achievibit-new-ui 2 | basic ui demo for achievibit front-end 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login oAuth mobile friendly 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 |
24 | 25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 |
39 |
40 |

kibibit

47 |

achievibit

48 |
49 |
50 |

Log-in

51 |

Please Login with the cloud version control you want to integrate.

52 |
53 | 67 |
Having trouble?
68 |
69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | .kb-info-overlay { 2 | position: absolute; 3 | bottom: 0; 4 | left: 0; 5 | background: white; 6 | padding: 10px; 7 | min-width: 20px; 8 | height: 35px; 9 | z-index: 4; 10 | } 11 | 12 | html { 13 | box-sizing: border-box; 14 | } 15 | 16 | *, *:before, *:after { 17 | box-sizing: inherit; 18 | } 19 | 20 | html, body { 21 | padding: 0px; 22 | margin: 0px; 23 | overflow: hidden; 24 | } 25 | 26 | #particles-js, 27 | #particles-js2 { 28 | top: 0; 29 | left: 0; 30 | position: absolute; 31 | width: 100%; 32 | height: 100%; 33 | background-color: #f25757; 34 | background-image: url(""); 35 | background-repeat: no-repeat; 36 | background-size: cover; 37 | background-position: 50% 50%; 38 | } 39 | #particles-js canvas, 40 | #particles-js2 canvas { 41 | filter: url(#goo); 42 | display: block; 43 | vertical-align: bottom; 44 | } 45 | 46 | #particles-js2 { 47 | background-color: transparent; 48 | } 49 | 50 | .bg-overlay { 51 | position: absolute; 52 | } 53 | 54 | .red { 55 | color: #f25757; 56 | } 57 | 58 | .blue { 59 | color: #00A2C9; 60 | } 61 | 62 | .yellow { 63 | color: #EEB146; 64 | } 65 | 66 | h1.kibibit-logo { 67 | font-family: 'Righteous', cursive; 68 | letter-spacing: 0.1em; 69 | font-size: 1rem; 70 | margin-bottom: 0 !important; 71 | } 72 | h1.achievibit { 73 | margin-top: 0 !important; 74 | } 75 | 76 | .bg-overlay { 77 | width: 100vw; 78 | height: 100vh; 79 | background-color: rgba(0, 0, 0, 0.4); 80 | z-index: 2; 81 | } 82 | 83 | body { 84 | margin: 0; 85 | background-color: #F25757; 86 | width: 100vw; 87 | height: 100vh; 88 | display: flex; 89 | justify-content: center; 90 | align-items: center; 91 | font-family: 'Comfortaa', cursive; 92 | font-size: 14px; 93 | } 94 | body .button:focus:not(:active) { 95 | border-color: #ffdd57; 96 | color: #ffdd57; 97 | box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0); 98 | box-shadow: 0; 99 | } 100 | body .kb-having-trouble { 101 | position: relative; 102 | } 103 | body .kb-having-trouble:after { 104 | position: absolute; 105 | top: 0; 106 | bottom: 0; 107 | left: -0.7em; 108 | right: -0.7em; 109 | content: ""; 110 | border: 1px solid #ffdd57; 111 | border-radius: 3px; 112 | opacity: 0; 113 | transition: opacity 250ms; 114 | } 115 | body .kb-having-trouble:focus { 116 | outline: none; 117 | } 118 | body .kb-having-trouble:focus:after { 119 | opacity: 1; 120 | } 121 | 122 | .kb-card .symbol { 123 | position: absolute; 124 | top: 0; 125 | width: 4rem; 126 | height: 4rem; 127 | transform: translate3d(0, -100%, 0); 128 | } 129 | .kb-card .symbol svg { 130 | width: 4rem; 131 | height: 4rem; 132 | } 133 | .kb-card .symbol svg .axe { 134 | fill: #EEB146; 135 | } 136 | .kb-card .symbol svg .fist { 137 | fill: white; 138 | } 139 | 140 | .kb-card { 141 | top: 0; 142 | left: 0; 143 | right: 0; 144 | bottom: 0; 145 | margin: auto; 146 | position: absolute; 147 | max-width: 360px; 148 | max-height: 460px; 149 | background-color: #212121; 150 | border-radius: 5px; 151 | padding: 40px; 152 | overflow-x: hidden; 153 | box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); 154 | z-index: 3; 155 | transition: all 300ms; 156 | overflow-y: hidden; 157 | overflow: visible; 158 | } 159 | .kb-card.transition { 160 | border-radius: 100%; 161 | max-width: 80px; 162 | max-height: 80px; 163 | overflow: hidden; 164 | background: #EEB146; 165 | } 166 | .kb-card.transition .loader { 167 | opacity: 1; 168 | } 169 | .kb-card .content { 170 | height: 100%; 171 | display: flex; 172 | flex-direction: column; 173 | justify-content: space-between; 174 | transition: all 200ms; 175 | } 176 | .kb-card #troubles { 177 | color: #4285f4; 178 | display: inline-block; 179 | padding: 10px; 180 | padding-left: 0; 181 | border-radius: 5px; 182 | cursor: pointer; 183 | } 184 | .kb-card .splash { 185 | background-image: linear-gradient(to bottom, rgba(233, 233, 233, 0) 0%, rgba(233, 233, 233, 0) 62.22%, #e9e9e9 40.22%, rgba(233, 233, 233, 0) 100%); 186 | position: relative; 187 | left: -42px; 188 | width: 404px; 189 | } 190 | .kb-card .splash svg { 191 | transform: scale(-1, 1); 192 | width: 50%; 193 | max-width: 90vw; 194 | } 195 | .kb-card .splash #yubikey-identifier { 196 | animation-duration: 1s; 197 | animation-name: insert; 198 | animation-iteration-count: infinite; 199 | animation-direction: alternate; 200 | animation-timing-function: ease-in-out; 201 | } 202 | 203 | @keyframes insert { 204 | 0% { 205 | transform: translateX(-10px); 206 | } 207 | 20% { 208 | transform: translateX(-10px); 209 | } 210 | 80% { 211 | transform: translateX(0); 212 | } 213 | 100% { 214 | transform: translateX(0); 215 | } 216 | } 217 | .loader { 218 | opacity: 0; 219 | width: 80px; 220 | height: 80px; 221 | position: absolute; 222 | left: 0; 223 | top: 0; 224 | right: 0; 225 | bottom: 0; 226 | margin: auto; 227 | border: 0 solid transparent; 228 | border-radius: 50%; 229 | transition: all 450ms; 230 | background: #EEB146; 231 | } 232 | .loader:before, .loader:after { 233 | content: ''; 234 | border-radius: 50%; 235 | width: inherit; 236 | height: inherit; 237 | position: absolute; 238 | top: 0; 239 | left: 0; 240 | animation: loader-07 1s linear infinite; 241 | opacity: 0; 242 | background: #f25757; 243 | } 244 | .loader:before { 245 | animation-delay: 1s; 246 | background: #00A2C9; 247 | } 248 | .loader:after { 249 | animation-delay: .5s; 250 | } 251 | 252 | @keyframes loader-07 { 253 | 0% { 254 | transform: scale(0); 255 | opacity: 0; 256 | } 257 | 50% { 258 | opacity: 1; 259 | } 260 | 100% { 261 | transform: scale(1); 262 | opacity: 0; 263 | } 264 | } 265 | .kb-login-buttons .button { 266 | justify-content: flex-start; 267 | transition: all 250ms; 268 | padding-left: 50px; 269 | } 270 | .kb-login-buttons .button:hover { 271 | background: rgba(0, 0, 0, 0.3); 272 | } 273 | .kb-login-buttons .button i { 274 | margin: 0 0.5em; 275 | } 276 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | $red: #f25757; 2 | $blue: #00A2C9; 3 | $yellow: #EEB146; 4 | 5 | .kb-info-overlay { 6 | position: absolute; 7 | bottom: 0; 8 | left: 0; 9 | background: white; 10 | padding: 10px; 11 | min-width: 20px; 12 | height: 35px; 13 | z-index: 4; 14 | } 15 | 16 | html { 17 | box-sizing: border-box; 18 | } 19 | 20 | *, *:before, *:after { 21 | box-sizing: inherit; 22 | } 23 | 24 | html, body { 25 | padding: 0px; 26 | margin: 0px; 27 | overflow: hidden; 28 | } 29 | 30 | #particles-js, 31 | #particles-js2 { 32 | top: 0; 33 | left: 0; 34 | position: absolute; 35 | width: 100%; 36 | height: 100%; 37 | background-color: $red; 38 | background-image: url(""); 39 | background-repeat: no-repeat; 40 | background-size: cover; 41 | background-position: 50% 50%; 42 | 43 | canvas { 44 | filter: url(#goo); 45 | display: block; 46 | vertical-align: bottom; 47 | } 48 | } 49 | 50 | #particles-js2 { 51 | background-color: transparent; 52 | } 53 | 54 | .bg-overlay { 55 | position: absolute; 56 | } 57 | 58 | .red { 59 | color: $red; 60 | } 61 | 62 | .blue { 63 | color: $blue; 64 | } 65 | 66 | .yellow { 67 | color: $yellow; 68 | } 69 | 70 | h1 { 71 | 72 | &.kibibit-logo { 73 | font-family: 'Righteous', cursive; 74 | letter-spacing: 0.1em; 75 | font-size: 1rem; 76 | margin-bottom: 0 !important; 77 | } 78 | 79 | &.achievibit { 80 | margin-top: 0 !important; 81 | } 82 | } 83 | 84 | .bg-overlay { 85 | width: 100vw; 86 | height: 100vh; 87 | background-color: rgba(0, 0, 0, 0.4); 88 | z-index: 2; 89 | } 90 | 91 | body { 92 | margin: 0; 93 | background-color: #F25757; 94 | width: 100vw; 95 | height: 100vh; 96 | display: flex; 97 | justify-content: center; 98 | align-items: center; 99 | font-family: 'Comfortaa', cursive; 100 | font-size: 14px; 101 | 102 | .button:focus:not(:active) { 103 | border-color: #ffdd57; 104 | color: #ffdd57; 105 | box-shadow: 0 0 0 0.125em rgba(#ffdd57, 0); 106 | box-shadow: 0; 107 | } 108 | 109 | .kb-having-trouble { 110 | position: relative; 111 | 112 | &:after { 113 | position: absolute; 114 | top: 0; 115 | bottom: 0; 116 | left: -0.7em; 117 | right: -0.7em; 118 | content: ""; 119 | border: 1px solid #ffdd57; 120 | border-radius: 3px; 121 | opacity: 0; 122 | transition: opacity 250ms; 123 | } 124 | 125 | &:focus { 126 | outline: none; 127 | 128 | &:after { 129 | opacity: 1; 130 | } 131 | } 132 | } 133 | } 134 | 135 | .kb-card .symbol { 136 | position: absolute; 137 | top: 0; 138 | width: 4rem; 139 | height: 4rem; 140 | transform: translate3d(0, -100%, 0); 141 | 142 | svg { 143 | width: 4rem; 144 | height: 4rem; 145 | 146 | .axe { 147 | fill: $yellow; 148 | } 149 | 150 | .fist { 151 | fill: white; 152 | } 153 | } 154 | } 155 | 156 | .kb-card { 157 | top: 0; 158 | left: 0; 159 | right: 0; 160 | bottom: 0; 161 | margin: auto; 162 | position: absolute; 163 | max-width: 360px; 164 | max-height: 460px; 165 | background-color: #212121; 166 | border-radius: 5px; 167 | padding: 40px; 168 | overflow-x: hidden; 169 | box-shadow: 0 3px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); 170 | z-index: 3; 171 | transition: all 300ms; 172 | 173 | // disabling y scroll for now 174 | overflow-y: hidden; 175 | 176 | // override! 177 | overflow: visible; 178 | 179 | &.transition { 180 | border-radius: 100%; 181 | max-width: 80px; 182 | max-height: 80px; 183 | overflow: hidden; 184 | background: $yellow; 185 | 186 | .loader { 187 | opacity: 1; 188 | } 189 | } 190 | 191 | .content { 192 | height: 100%; 193 | display: flex; 194 | flex-direction: column; 195 | justify-content: space-between; 196 | transition: all 200ms; 197 | } 198 | 199 | #troubles { 200 | color: #4285f4; 201 | display: inline-block; 202 | padding: 10px; 203 | padding-left: 0; 204 | border-radius: 5px; 205 | cursor: pointer; 206 | } 207 | 208 | .splash { 209 | background-image: linear-gradient(to bottom,rgba(233,233,233,0) 0%,rgba(233,233,233,0) 62.22%,rgba(233,233,233,1) 40.22%,rgba(233,233,233,0) 100%); 210 | position: relative; 211 | left: -42px; 212 | width: 404px; 213 | 214 | svg { 215 | transform: scale(-1,1); 216 | width: 50%; 217 | max-width: 90vw; 218 | } 219 | 220 | #yubikey-identifier { 221 | animation-duration: 1s; 222 | animation-name: insert; 223 | animation-iteration-count: infinite; 224 | animation-direction: alternate; 225 | animation-timing-function: ease-in-out; 226 | } 227 | } 228 | } 229 | 230 | @keyframes insert { 231 | 0% { transform: translateX(-10px); } 232 | 20% { transform: translateX(-10px); } 233 | 80% { transform: translateX(0); } 234 | 100% { transform: translateX(0); } 235 | } 236 | 237 | .loader { 238 | opacity: 0; 239 | width: 80px; 240 | height: 80px; 241 | position: absolute; 242 | left: 0; 243 | top: 0; 244 | right: 0; 245 | bottom: 0; 246 | margin: auto; 247 | border: 0 solid transparent; 248 | border-radius: 50%; 249 | transition: all 450ms; 250 | // transition-delay: 350ms; 251 | background: $yellow; 252 | // position: relative; 253 | &:before, 254 | &:after { 255 | content: ''; 256 | // border: .2em solid currentcolor; 257 | border-radius: 50%; 258 | width: inherit; 259 | height: inherit; 260 | position: absolute; 261 | top: 0; 262 | left: 0; 263 | animation: loader-07 1s linear infinite; 264 | opacity: 0; 265 | background: $red; 266 | } 267 | &:before { 268 | animation-delay: 1s; 269 | background: $blue; 270 | } 271 | &:after { 272 | animation-delay: .5s; 273 | } 274 | } 275 | 276 | @keyframes loader-07 { 277 | 0% { 278 | transform: scale(0); 279 | opacity: 0; 280 | } 281 | 50% { 282 | opacity: 1; 283 | } 284 | 100% { 285 | transform: scale(1); 286 | opacity: 0; 287 | } 288 | } 289 | 290 | .kb-login-buttons { 291 | .button { 292 | justify-content: flex-start; 293 | transition: all 250ms; 294 | padding-left: 50px; 295 | 296 | &:hover { 297 | background: rgba(0, 0, 0, 0.3); 298 | } 299 | 300 | i { 301 | margin: 0 0.5em; 302 | } 303 | } 304 | } -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | var otp = ''; 2 | var waiting = false; 3 | var display = $('.kb-info-overlay'); 4 | 5 | $('#troubles').click(() => { 6 | // debugger; 7 | $('.content').css({ 8 | opacity: 0 9 | }); 10 | $('.kb-card').addClass('transition'); 11 | 12 | setTimeout(() => { 13 | window.location.href = "/achievibit-demo"; 14 | $('.kb-card').removeClass('transition'); 15 | $('.content').css({ 16 | opacity: 1 17 | }); 18 | }, 2000); 19 | }); 20 | 21 | document.body.addEventListener('keyup', function(e) { 22 | console.log(String.fromCharCode(e.keyCode)); 23 | if(!waiting) { 24 | waiting = true; 25 | document.getElementById('tmp').innerHTML += ' Hang on...'; 26 | } 27 | 28 | if(e.keyCode == 13) { 29 | debugger; 30 | window.location = 'http://api2.yubico.com/wsapi/2.0/verify?id=1&nonce=aef3a7835277a28da831005c2ae3b919e2076a62&otp=' + otp; 31 | } 32 | 33 | otp += String.fromCharCode(e.keyCode); 34 | 35 | if(otp.length > 44) 36 | otp = otp.substr(otp.length - 44); 37 | 38 | display.text(otp); 39 | }); 40 | 41 | particlesJS("particles-js", { 42 | "particles": { 43 | "number": { 44 | "value": 80, 45 | "density": { 46 | "enable": true, 47 | "value_area": 800 48 | } 49 | }, 50 | "color": { 51 | "value": "#EEB146" 52 | }, 53 | "shape": { 54 | "type": "circle", 55 | "stroke": { 56 | "width": 0, 57 | "color": "#000000" 58 | }, 59 | "polygon": { 60 | "nb_sides": 5 61 | }, 62 | "image": { 63 | "src": "img/github.svg", 64 | "width": 100, 65 | "height": 100 66 | } 67 | }, 68 | "opacity": { 69 | "value": 1, 70 | "random": false, 71 | "anim": { 72 | "enable": false, 73 | "speed": 1, 74 | "opacity_min": 0.1, 75 | "sync": false 76 | } 77 | }, 78 | "size": { 79 | "value": 144.3001443001443, 80 | "random": true, 81 | "anim": { 82 | "enable": true, 83 | "speed": 40, 84 | "size_min": 0.1, 85 | "sync": false 86 | } 87 | }, 88 | "line_linked": { 89 | "enable": false, 90 | "distance": 150, 91 | "color": "#ffffff", 92 | "opacity": 0.4, 93 | "width": 1 94 | }, 95 | "move": { 96 | "enable": true, 97 | "speed": 1, 98 | "direction": "none", 99 | "random": true, 100 | "straight": false, 101 | "out_mode": "bounce", 102 | "bounce": false, 103 | "attract": { 104 | "enable": true, 105 | "rotateX": 1282.667949334616, 106 | "rotateY": 1603.3349366682698 107 | } 108 | } 109 | }, 110 | "interactivity": { 111 | "detect_on": "canvas", 112 | "events": { 113 | "onhover": { 114 | "enable": true, 115 | "mode": "repulse" 116 | }, 117 | "onclick": { 118 | "enable": true, 119 | "mode": "push" 120 | }, 121 | "resize": true 122 | }, 123 | "modes": { 124 | "grab": { 125 | "distance": 400, 126 | "line_linked": { 127 | "opacity": 1 128 | } 129 | }, 130 | "bubble": { 131 | "distance": 400, 132 | "size": 40, 133 | "duration": 2, 134 | "opacity": 8, 135 | "speed": 3 136 | }, 137 | "repulse": { 138 | "distance": 200, 139 | "duration": 0.4 140 | }, 141 | "push": { 142 | "particles_nb": 4 143 | }, 144 | "remove": { 145 | "particles_nb": 2 146 | } 147 | } 148 | }, 149 | "retina_detect": true 150 | }); 151 | 152 | particlesJS("particles-js2", { 153 | "particles": { 154 | "number": { 155 | "value": 80, 156 | "density": { 157 | "enable": true, 158 | "value_area": 800 159 | } 160 | }, 161 | "color": { 162 | "value": "#00A2C9" 163 | }, 164 | "shape": { 165 | "type": "circle", 166 | "stroke": { 167 | "width": 0, 168 | "color": "#000000" 169 | }, 170 | "polygon": { 171 | "nb_sides": 5 172 | }, 173 | "image": { 174 | "src": "img/github.svg", 175 | "width": 100, 176 | "height": 100 177 | } 178 | }, 179 | "opacity": { 180 | "value": 1, 181 | "random": false, 182 | "anim": { 183 | "enable": false, 184 | "speed": 1, 185 | "opacity_min": 0.1, 186 | "sync": false 187 | } 188 | }, 189 | "size": { 190 | "value": 100, 191 | "random": true, 192 | "anim": { 193 | "enable": true, 194 | "speed": 40, 195 | "size_min": 10, 196 | "sync": false 197 | } 198 | }, 199 | "line_linked": { 200 | "enable": false, 201 | "distance": 150, 202 | "color": "#ffffff", 203 | "opacity": 0.4, 204 | "width": 1 205 | }, 206 | "move": { 207 | "enable": true, 208 | "speed": 1, 209 | "direction": "none", 210 | "random": true, 211 | "straight": false, 212 | "out_mode": "bounce", 213 | "bounce": false, 214 | "attract": { 215 | "enable": true, 216 | "rotateX": 1282.667949334616, 217 | "rotateY": 1603.3349366682698 218 | } 219 | } 220 | }, 221 | "interactivity": { 222 | "detect_on": "canvas", 223 | "events": { 224 | "onhover": { 225 | "enable": true, 226 | "mode": "repulse" 227 | }, 228 | "onclick": { 229 | "enable": true, 230 | "mode": "push" 231 | }, 232 | "resize": true 233 | }, 234 | "modes": { 235 | "grab": { 236 | "distance": 400, 237 | "line_linked": { 238 | "opacity": 1 239 | } 240 | }, 241 | "bubble": { 242 | "distance": 400, 243 | "size": 40, 244 | "duration": 2, 245 | "opacity": 8, 246 | "speed": 3 247 | }, 248 | "repulse": { 249 | "distance": 200, 250 | "duration": 0.4 251 | }, 252 | "push": { 253 | "particles_nb": 4 254 | }, 255 | "remove": { 256 | "particles_nb": 2 257 | } 258 | } 259 | }, 260 | "retina_detect": true 261 | }); 262 | --------------------------------------------------------------------------------