{"id":1067,"date":"2023-03-30T06:16:00","date_gmt":"2023-03-30T03:16:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1067"},"modified":"2023-03-30T12:07:48","modified_gmt":"2023-03-30T09:07:48","slug":"card-holder","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/elements\/1067\/","title":{"rendered":"Card holder"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"775\" style=\"aspect-ratio: 642 \/ 775;\" width=\"642\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-29_19-10-15.webm\"><\/video><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\"> &lt;div class=&quot;wrapper block&quot; id=&quot;app&quot;&gt;\n    &lt;div class=&quot;card-form&quot;&gt;\n      &lt;div class=&quot;card-list&quot;&gt;\n        &lt;div class=&quot;card-item&quot; v-bind:class=&quot;{ '-active' : isCardFlipped }&quot;&gt;\n          &lt;div class=&quot;card-item__side -front&quot;&gt;\n            &lt;div class=&quot;card-item__focus&quot; v-bind:class=&quot;{'-active' : focusElementStyle }&quot; v-bind:style=&quot;focusElementStyle&quot; ref=&quot;focusElement&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;card-item__cover&quot;&gt;\n              &lt;img\n              v-bind:src=&quot;'https:\/\/raw.githubusercontent.com\/muhammederdem\/credit-card-form\/master\/src\/assets\/images\/' + currentCardBackground + '.jpeg'&quot; class=&quot;card-item__bg&quot;&gt;\n            &lt;\/div&gt;\n            \n            &lt;div class=&quot;card-item__wrapper&quot;&gt;\n              &lt;div class=&quot;card-item__top&quot;&gt;\n                &lt;img src=&quot;https:\/\/raw.githubusercontent.com\/muhammederdem\/credit-card-form\/master\/src\/assets\/images\/chip.png&quot; class=&quot;card-item__chip&quot;&gt;\n                &lt;div class=&quot;card-item__type&quot;&gt;\n                  &lt;transition name=&quot;slide-fade-up&quot;&gt;\n                    &lt;img v-bind:src=&quot;'https:\/\/raw.githubusercontent.com\/muhammederdem\/credit-card-form\/master\/src\/assets\/images\/' + getCardType + '.png'&quot; v-if=&quot;getCardType&quot; v-bind:key=&quot;getCardType&quot; alt=&quot;&quot; class=&quot;card-item__typeImg&quot;&gt;\n                  &lt;\/transition&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n              &lt;label for=&quot;cardNumber&quot; class=&quot;card-item__number&quot; ref=&quot;cardNumber&quot;&gt;\n                &lt;template v-if=&quot;getCardType === 'amex'&quot;&gt;\n                 &lt;span v-for=&quot;(n, $index) in amexCardMask&quot; :key=&quot;$index&quot;&gt;\n                  &lt;transition name=&quot;slide-fade-up&quot;&gt;\n                    &lt;div\n                      class=&quot;card-item__numberItem&quot;\n                      v-if=&quot;$index &gt; 4 &amp;&amp; $index &lt; 14 &amp;&amp; cardNumber.length &gt; $index &amp;&amp; n.trim() !== ''&quot;\n                    &gt;*&lt;\/div&gt;\n                    &lt;div class=&quot;card-item__numberItem&quot;\n                      :class=&quot;{ '-active' : n.trim() === '' }&quot;\n                      :key=&quot;$index&quot; v-else-if=&quot;cardNumber.length &gt; $index&quot;&gt;\n                      {{cardNumber[$index]}}\n                    &lt;\/div&gt;\n                    &lt;div\n                      class=&quot;card-item__numberItem&quot;\n                      :class=&quot;{ '-active' : n.trim() === '' }&quot;\n                      v-else\n                      :key=&quot;$index + 1&quot;\n                    &gt;{{n}}&lt;\/div&gt;\n                  &lt;\/transition&gt;\n                &lt;\/span&gt;\n                &lt;\/template&gt;\n\n                &lt;template v-else&gt;\n                  &lt;span v-for=&quot;(n, $index) in otherCardMask&quot; :key=&quot;$index&quot;&gt;\n                    &lt;transition name=&quot;slide-fade-up&quot;&gt;\n                      &lt;div\n                        class=&quot;card-item__numberItem&quot;\n                        v-if=&quot;$index &gt; 4 &amp;&amp; $index &lt; 15 &amp;&amp; cardNumber.length &gt; $index &amp;&amp; n.trim() !== ''&quot;\n                      &gt;*&lt;\/div&gt;\n                      &lt;div class=&quot;card-item__numberItem&quot;\n                        :class=&quot;{ '-active' : n.trim() === '' }&quot;\n                        :key=&quot;$index&quot; v-else-if=&quot;cardNumber.length &gt; $index&quot;&gt;\n                        {{cardNumber[$index]}}\n                      &lt;\/div&gt;\n                      &lt;div\n                        class=&quot;card-item__numberItem&quot;\n                        :class=&quot;{ '-active' : n.trim() === '' }&quot;\n                        v-else\n                        :key=&quot;$index + 1&quot;\n                      &gt;{{n}}&lt;\/div&gt;\n                    &lt;\/transition&gt;\n                  &lt;\/span&gt;\n                &lt;\/template&gt;\n              &lt;\/label&gt;\n              &lt;div class=&quot;card-item__content&quot;&gt;\n                &lt;label for=&quot;cardName&quot; class=&quot;card-item__info&quot; ref=&quot;cardName&quot;&gt;\n                  &lt;div class=&quot;card-item__holder&quot;&gt;Card Holder&lt;\/div&gt;\n                  &lt;transition name=&quot;slide-fade-up&quot;&gt;\n                    &lt;div class=&quot;card-item__name&quot; v-if=&quot;cardName.length&quot; key=&quot;1&quot;&gt;\n                      &lt;transition-group name=&quot;slide-fade-right&quot;&gt;\n                        &lt;span class=&quot;card-item__nameItem&quot; v-for=&quot;(n, $index) in cardName.replace(\/\\s\\s+\/g, ' ')&quot; v-if=&quot;$index === $index&quot; v-bind:key=&quot;$index + 1&quot;&gt;{{n}}&lt;\/span&gt;\n                      &lt;\/transition-group&gt;\n                    &lt;\/div&gt;\n                    &lt;div class=&quot;card-item__name&quot; v-else key=&quot;2&quot;&gt;Full Name&lt;\/div&gt;\n                  &lt;\/transition&gt;\n                &lt;\/label&gt;\n                &lt;div class=&quot;card-item__date&quot; ref=&quot;cardDate&quot;&gt;\n                  &lt;label for=&quot;cardMonth&quot; class=&quot;card-item__dateTitle&quot;&gt;Expires&lt;\/label&gt;\n                  &lt;label for=&quot;cardMonth&quot; class=&quot;card-item__dateItem&quot;&gt;\n                    &lt;transition name=&quot;slide-fade-up&quot;&gt;\n                      &lt;span v-if=&quot;cardMonth&quot; v-bind:key=&quot;cardMonth&quot;&gt;{{cardMonth}}&lt;\/span&gt;\n                      &lt;span v-else key=&quot;2&quot;&gt;MM&lt;\/span&gt;\n                    &lt;\/transition&gt;\n                  &lt;\/label&gt;\n                  \/\n                  &lt;label for=&quot;cardYear&quot; class=&quot;card-item__dateItem&quot;&gt;\n                    &lt;transition name=&quot;slide-fade-up&quot;&gt;\n                      &lt;span v-if=&quot;cardYear&quot; v-bind:key=&quot;cardYear&quot;&gt;{{String(cardYear).slice(2,4)}}&lt;\/span&gt;\n                      &lt;span v-else key=&quot;2&quot;&gt;YY&lt;\/span&gt;\n                    &lt;\/transition&gt;\n                  &lt;\/label&gt;\n                &lt;\/div&gt;\n              &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;card-item__side -back&quot;&gt;\n            &lt;div class=&quot;card-item__cover&quot;&gt;\n              &lt;img\n              v-bind:src=&quot;'https:\/\/raw.githubusercontent.com\/muhammederdem\/credit-card-form\/master\/src\/assets\/images\/' + currentCardBackground + '.jpeg'&quot; class=&quot;card-item__bg&quot;&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;card-item__band&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;card-item__cvv&quot;&gt;\n                &lt;div class=&quot;card-item__cvvTitle&quot;&gt;CVV&lt;\/div&gt;\n                &lt;div class=&quot;card-item__cvvBand&quot;&gt;\n                  &lt;span v-for=&quot;(n, $index) in cardCvv&quot; :key=&quot;$index&quot;&gt;\n                    *\n                  &lt;\/span&gt;\n\n              &lt;\/div&gt;\n                &lt;div class=&quot;card-item__type&quot;&gt;\n                    &lt;img v-bind:src=&quot;'https:\/\/raw.githubusercontent.com\/muhammederdem\/credit-card-form\/master\/src\/assets\/images\/' + getCardType + '.png'&quot; v-if=&quot;getCardType&quot; class=&quot;card-item__typeImg&quot;&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class=&quot;card-form__inner&quot;&gt;\n        &lt;div class=&quot;card-input&quot;&gt;\n          &lt;label for=&quot;cardNumber&quot; class=&quot;card-input__label&quot;&gt;Card Number&lt;\/label&gt;\n          &lt;input type=&quot;text&quot; id=&quot;cardNumber&quot; class=&quot;card-input__input&quot; v-mask=&quot;generateCardNumberMask&quot; v-model=&quot;cardNumber&quot; v-on:focus=&quot;focusInput&quot; v-on:blur=&quot;blurInput&quot; data-ref=&quot;cardNumber&quot; autocomplete=&quot;off&quot;&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;card-input&quot;&gt;\n          &lt;label for=&quot;cardName&quot; class=&quot;card-input__label&quot;&gt;Card Holders&lt;\/label&gt;\n          &lt;input type=&quot;text&quot; id=&quot;cardName&quot; class=&quot;card-input__input&quot; v-model=&quot;cardName&quot; v-on:focus=&quot;focusInput&quot; v-on:blur=&quot;blurInput&quot; data-ref=&quot;cardName&quot; autocomplete=&quot;off&quot;&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;card-form__row&quot;&gt;\n          &lt;div class=&quot;card-form__col&quot;&gt;\n            &lt;div class=&quot;card-form__group&quot;&gt;\n              &lt;label for=&quot;cardMonth&quot; class=&quot;card-input__label&quot;&gt;Expiration Date&lt;\/label&gt;\n              &lt;select class=&quot;card-input__input -select&quot; id=&quot;cardMonth&quot; v-model=&quot;cardMonth&quot; v-on:focus=&quot;focusInput&quot; v-on:blur=&quot;blurInput&quot; data-ref=&quot;cardDate&quot;&gt;\n                &lt;option value=&quot;&quot; disabled selected&gt;Month&lt;\/option&gt;\n                &lt;option v-bind:value=&quot;n &lt; 10 ? '0' + n : n&quot; v-for=&quot;n in 12&quot; v-bind:disabled=&quot;n &lt; minCardMonth&quot; v-bind:key=&quot;n&quot;&gt;\n                    {{n &lt; 10 ? '0' + n : n}}\n                &lt;\/option&gt;\n              &lt;\/select&gt;\n              &lt;select class=&quot;card-input__input -select&quot; id=&quot;cardYear&quot; v-model=&quot;cardYear&quot; v-on:focus=&quot;focusInput&quot; v-on:blur=&quot;blurInput&quot; data-ref=&quot;cardDate&quot;&gt;\n                &lt;option value=&quot;&quot; disabled selected&gt;Year&lt;\/option&gt;\n                &lt;option v-bind:value=&quot;$index + minCardYear&quot; v-for=&quot;(n, $index) in 12&quot; v-bind:key=&quot;n&quot;&gt;\n                    {{$index + minCardYear}}\n                &lt;\/option&gt;\n              &lt;\/select&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n          &lt;div class=&quot;card-form__col -cvv&quot;&gt;\n            &lt;div class=&quot;card-input&quot;&gt;\n              &lt;label for=&quot;cardCvv&quot; class=&quot;card-input__label&quot;&gt;CVV&lt;\/label&gt;\n              &lt;input type=&quot;text&quot; class=&quot;card-input__input&quot; id=&quot;cardCvv&quot; v-mask=&quot;'####'&quot; maxlength=&quot;4&quot; v-model=&quot;cardCvv&quot; v-on:focus=&quot;flipCard(true)&quot; v-on:blur=&quot;flipCard(false)&quot; autocomplete=&quot;off&quot;&gt;\n            &lt;\/div&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;button class=&quot;card-form__button&quot;&gt;\n          Submit\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.6.10\/vue.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/unpkg.com\/vue-the-mask@0.11.1\/dist\/vue-the-mask.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">@import url(&quot;https:\/\/fonts.googleapis.com\/css?family=Source+Code+Pro:400,500,600,700|Source+Sans+Pro:400,600,700&amp;display=swap&quot;);\nbody {\n  background: #ddeefc;\n  font-family: &quot;Source Sans Pro&quot;, sans-serif;\n  font-size: 16px;\n}\n\n* {\n  box-sizing: border-box;\n}\n*:focus {\n  outline: none;\n}\n\n.wrapper {\n  min-height: 100vh;\n  display: flex;\n  padding: 50px 15px;\n}\n@media screen and (max-width: 700px), (max-height: 500px) {\n  .wrapper {\n    flex-wrap: wrap;\n    flex-direction: column;\n  }\n}\n\n.card-form {\n  max-width: 570px;\n  margin: auto;\n  width: 100%;\n}\n@media screen and (max-width: 576px) {\n  .card-form {\n    margin: 0 auto;\n  }\n}\n.card-form__inner {\n  background: #fff;\n  box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);\n  border-radius: 10px;\n  padding: 35px;\n  padding-top: 180px;\n}\n@media screen and (max-width: 480px) {\n  .card-form__inner {\n    padding: 25px;\n    padding-top: 165px;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-form__inner {\n    padding: 15px;\n    padding-top: 165px;\n  }\n}\n.card-form__row {\n  display: flex;\n  align-items: flex-start;\n}\n@media screen and (max-width: 480px) {\n  .card-form__row {\n    flex-wrap: wrap;\n  }\n}\n.card-form__col {\n  flex: auto;\n  margin-right: 35px;\n}\n.card-form__col:last-child {\n  margin-right: 0;\n}\n@media screen and (max-width: 480px) {\n  .card-form__col {\n    margin-right: 0;\n    flex: unset;\n    width: 100%;\n    margin-bottom: 20px;\n  }\n  .card-form__col:last-child {\n    margin-bottom: 0;\n  }\n}\n.card-form__col.-cvv {\n  max-width: 150px;\n}\n@media screen and (max-width: 480px) {\n  .card-form__col.-cvv {\n    max-width: initial;\n  }\n}\n.card-form__group {\n  display: flex;\n  align-items: flex-start;\n  flex-wrap: wrap;\n}\n.card-form__group .card-input__input {\n  flex: 1;\n  margin-right: 15px;\n}\n.card-form__group .card-input__input:last-child {\n  margin-right: 0;\n}\n.card-form__button {\n  width: 100%;\n  height: 55px;\n  background: #2364d2;\n  border: none;\n  border-radius: 5px;\n  font-size: 22px;\n  font-weight: 500;\n  font-family: &quot;Source Sans Pro&quot;, sans-serif;\n  box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);\n  color: #fff;\n  margin-top: 20px;\n  cursor: pointer;\n}\n@media screen and (max-width: 480px) {\n  .card-form__button {\n    margin-top: 10px;\n  }\n}\n\n.card-item {\n  max-width: 430px;\n  height: 270px;\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  z-index: 2;\n  width: 100%;\n}\n@media screen and (max-width: 480px) {\n  .card-item {\n    max-width: 310px;\n    height: 220px;\n    width: 90%;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-item {\n    height: 180px;\n  }\n}\n.card-item.-active .card-item__side.-front {\n  transform: perspective(1000px) rotateY(180deg) rotateX(0deg) rotateZ(0deg);\n}\n.card-item.-active .card-item__side.-back {\n  transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg);\n}\n.card-item__focus {\n  position: absolute;\n  z-index: 3;\n  border-radius: 5px;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);\n  opacity: 0;\n  pointer-events: none;\n  overflow: hidden;\n  border: 2px solid rgba(255, 255, 255, 0.65);\n}\n.card-item__focus:after {\n  content: &quot;&quot;;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  background: #08142f;\n  height: 100%;\n  border-radius: 5px;\n  filter: blur(25px);\n  opacity: 0.5;\n}\n.card-item__focus.-active {\n  opacity: 1;\n}\n.card-item__side {\n  border-radius: 15px;\n  overflow: hidden;\n  box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);\n  transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);\n  transform-style: preserve-3d;\n  transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);\n  backface-visibility: hidden;\n  height: 100%;\n}\n.card-item__side.-back {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg);\n  z-index: 2;\n  padding: 0;\n  height: 100%;\n}\n.card-item__side.-back .card-item__cover {\n  transform: rotateY(-180deg);\n}\n.card-item__bg {\n  max-width: 100%;\n  display: block;\n  max-height: 100%;\n  height: 100%;\n  width: 100%;\n  object-fit: cover;\n}\n.card-item__cover {\n  height: 100%;\n  background-color: #1c1d27;\n  position: absolute;\n  height: 100%;\n  background-color: #1c1d27;\n  left: 0;\n  top: 0;\n  width: 100%;\n  border-radius: 15px;\n  overflow: hidden;\n}\n.card-item__cover:after {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(6, 2, 29, 0.45);\n}\n.card-item__top {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  margin-bottom: 40px;\n  padding: 0 10px;\n}\n@media screen and (max-width: 480px) {\n  .card-item__top {\n    margin-bottom: 25px;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-item__top {\n    margin-bottom: 15px;\n  }\n}\n.card-item__chip {\n  width: 60px;\n}\n@media screen and (max-width: 480px) {\n  .card-item__chip {\n    width: 50px;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-item__chip {\n    width: 40px;\n  }\n}\n.card-item__type {\n  height: 45px;\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n  max-width: 100px;\n  margin-left: auto;\n  width: 100%;\n}\n@media screen and (max-width: 480px) {\n  .card-item__type {\n    height: 40px;\n    max-width: 90px;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-item__type {\n    height: 30px;\n  }\n}\n.card-item__typeImg {\n  max-width: 100%;\n  object-fit: contain;\n  max-height: 100%;\n  object-position: top right;\n}\n.card-item__info {\n  color: #fff;\n  width: 100%;\n  max-width: calc(100% - 85px);\n  padding: 10px 15px;\n  font-weight: 500;\n  display: block;\n  cursor: pointer;\n}\n@media screen and (max-width: 480px) {\n  .card-item__info {\n    padding: 10px;\n  }\n}\n.card-item__holder {\n  opacity: 0.7;\n  font-size: 13px;\n  margin-bottom: 6px;\n}\n@media screen and (max-width: 480px) {\n  .card-item__holder {\n    font-size: 12px;\n    margin-bottom: 5px;\n  }\n}\n.card-item__wrapper {\n  font-family: &quot;Source Code Pro&quot;, monospace;\n  padding: 25px 15px;\n  position: relative;\n  z-index: 4;\n  height: 100%;\n  text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8);\n  user-select: none;\n}\n@media screen and (max-width: 480px) {\n  .card-item__wrapper {\n    padding: 20px 10px;\n  }\n}\n.card-item__name {\n  font-size: 18px;\n  line-height: 1;\n  white-space: nowrap;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-transform: uppercase;\n}\n@media screen and (max-width: 480px) {\n  .card-item__name {\n    font-size: 16px;\n  }\n}\n.card-item__nameItem {\n  display: inline-block;\n  min-width: 8px;\n  position: relative;\n}\n.card-item__number {\n  font-weight: 500;\n  line-height: 1;\n  color: #fff;\n  font-size: 27px;\n  margin-bottom: 35px;\n  display: inline-block;\n  padding: 10px 15px;\n  cursor: pointer;\n}\n@media screen and (max-width: 480px) {\n  .card-item__number {\n    font-size: 21px;\n    margin-bottom: 15px;\n    padding: 10px 10px;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-item__number {\n    font-size: 19px;\n    margin-bottom: 10px;\n    padding: 10px 10px;\n  }\n}\n.card-item__numberItem {\n  width: 16px;\n  display: inline-block;\n}\n.card-item__numberItem.-active {\n  width: 30px;\n}\n@media screen and (max-width: 480px) {\n  .card-item__numberItem {\n    width: 13px;\n  }\n  .card-item__numberItem.-active {\n    width: 16px;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-item__numberItem {\n    width: 12px;\n  }\n  .card-item__numberItem.-active {\n    width: 8px;\n  }\n}\n.card-item__content {\n  color: #fff;\n  display: flex;\n  align-items: flex-start;\n}\n.card-item__date {\n  flex-wrap: wrap;\n  font-size: 18px;\n  margin-left: auto;\n  padding: 10px;\n  display: inline-flex;\n  width: 80px;\n  white-space: nowrap;\n  flex-shrink: 0;\n  cursor: pointer;\n}\n@media screen and (max-width: 480px) {\n  .card-item__date {\n    font-size: 16px;\n  }\n}\n.card-item__dateItem {\n  position: relative;\n}\n.card-item__dateItem span {\n  width: 22px;\n  display: inline-block;\n}\n.card-item__dateTitle {\n  opacity: 0.7;\n  font-size: 13px;\n  padding-bottom: 6px;\n  width: 100%;\n}\n@media screen and (max-width: 480px) {\n  .card-item__dateTitle {\n    font-size: 12px;\n    padding-bottom: 5px;\n  }\n}\n.card-item__band {\n  background: rgba(0, 0, 19, 0.8);\n  width: 100%;\n  height: 50px;\n  margin-top: 30px;\n  position: relative;\n  z-index: 2;\n}\n@media screen and (max-width: 480px) {\n  .card-item__band {\n    margin-top: 20px;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-item__band {\n    height: 40px;\n    margin-top: 10px;\n  }\n}\n.card-item__cvv {\n  text-align: right;\n  position: relative;\n  z-index: 2;\n  padding: 15px;\n}\n.card-item__cvv .card-item__type {\n  opacity: 0.7;\n}\n@media screen and (max-width: 360px) {\n  .card-item__cvv {\n    padding: 10px 15px;\n  }\n}\n.card-item__cvvTitle {\n  padding-right: 10px;\n  font-size: 15px;\n  font-weight: 500;\n  color: #fff;\n  margin-bottom: 5px;\n}\n.card-item__cvvBand {\n  height: 45px;\n  background: #fff;\n  margin-bottom: 30px;\n  text-align: right;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding-right: 10px;\n  color: #1a3b5d;\n  font-size: 18px;\n  border-radius: 4px;\n  box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35);\n}\n@media screen and (max-width: 480px) {\n  .card-item__cvvBand {\n    height: 40px;\n    margin-bottom: 20px;\n  }\n}\n@media screen and (max-width: 360px) {\n  .card-item__cvvBand {\n    margin-bottom: 15px;\n  }\n}\n\n.card-list {\n  margin-bottom: -130px;\n}\n@media screen and (max-width: 480px) {\n  .card-list {\n    margin-bottom: -120px;\n  }\n}\n\n.card-input {\n  margin-bottom: 20px;\n}\n.card-input__label {\n  font-size: 14px;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: #1a3b5d;\n  width: 100%;\n  display: block;\n  user-select: none;\n}\n.card-input__input {\n  width: 100%;\n  height: 50px;\n  border-radius: 5px;\n  box-shadow: none;\n  border: 1px solid #ced6e0;\n  transition: all 0.3s ease-in-out;\n  font-size: 18px;\n  padding: 5px 15px;\n  background: none;\n  color: #1a3b5d;\n  font-family: &quot;Source Sans Pro&quot;, sans-serif;\n}\n.card-input__input:hover, .card-input__input:focus {\n  border-color: #3d9cff;\n}\n.card-input__input:focus {\n  box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35);\n}\n.card-input__input.-select {\n  -webkit-appearance: none;\n  background-image: url(&quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM\/tnk4HNEAg\/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy\/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu\/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii\/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC&quot;);\n  background-size: 12px;\n  background-position: 90% center;\n  background-repeat: no-repeat;\n  padding-right: 30px;\n}\n\n.slide-fade-up-enter-active {\n  transition: all 0.25s ease-in-out;\n  transition-delay: 0.1s;\n  position: relative;\n}\n\n.slide-fade-up-leave-active {\n  transition: all 0.25s ease-in-out;\n  position: absolute;\n}\n\n.slide-fade-up-enter {\n  opacity: 0;\n  transform: translateY(15px);\n  pointer-events: none;\n}\n\n.slide-fade-up-leave-to {\n  opacity: 0;\n  transform: translateY(-15px);\n  pointer-events: none;\n}\n\n.slide-fade-right-enter-active {\n  transition: all 0.25s ease-in-out;\n  transition-delay: 0.1s;\n  position: relative;\n}\n\n.slide-fade-right-leave-active {\n  transition: all 0.25s ease-in-out;\n  position: absolute;\n}\n\n.slide-fade-right-enter {\n  opacity: 0;\n  transform: translateX(10px) rotate(45deg);\n  pointer-events: none;\n}\n\n.slide-fade-right-leave-to {\n  opacity: 0;\n  transform: translateX(-10px) rotate(45deg);\n  pointer-events: none;\n}\n\n.github-btn {\n  position: absolute;\n  right: 40px;\n  bottom: 50px;\n  text-decoration: none;\n  padding: 15px 25px;\n  border-radius: 4px;\n  box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65);\n  background: #24292e;\n  color: #fff;\n  font-weight: bold;\n  letter-spacing: 1px;\n  font-size: 16px;\n  text-align: center;\n  transition: all 0.3s ease-in-out;\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">new Vue({\n  el: &quot;#app&quot;,\n  data() {\n    return {\n      currentCardBackground: Math.floor(Math.random()* 25 + 1), \/\/ just for fun :D\n      cardName: &quot;&quot;,\n      cardNumber: &quot;&quot;,\n      cardMonth: &quot;&quot;,\n      cardYear: &quot;&quot;,\n      cardCvv: &quot;&quot;,\n      minCardYear: new Date().getFullYear(),\n      amexCardMask: &quot;#### ###### #####&quot;,\n      otherCardMask: &quot;#### #### #### ####&quot;,\n      cardNumberTemp: &quot;&quot;,\n      isCardFlipped: false,\n      focusElementStyle: null,\n      isInputFocused: false\n    };\n  },\n  mounted() {\n    this.cardNumberTemp = this.otherCardMask;\n    document.getElementById(&quot;cardNumber&quot;).focus();\n  },\n  computed: {\n    getCardType () {\n      let number = this.cardNumber;\n      let re = new RegExp(&quot;^4&quot;);\n      if (number.match(re) != null) return &quot;visa&quot;;\n\n      re = new RegExp(&quot;^(34|37)&quot;);\n      if (number.match(re) != null) return &quot;amex&quot;;\n\n      re = new RegExp(&quot;^5[1-5]&quot;);\n      if (number.match(re) != null) return &quot;mastercard&quot;;\n\n      re = new RegExp(&quot;^6011&quot;);\n      if (number.match(re) != null) return &quot;discover&quot;;\n      \n      re = new RegExp('^9792')\n      if (number.match(re) != null) return 'troy'\n\n      return &quot;visa&quot;; \/\/ default type\n    },\n\t\tgenerateCardNumberMask () {\n\t\t\treturn this.getCardType === &quot;amex&quot; ? this.amexCardMask : this.otherCardMask;\n    },\n    minCardMonth () {\n      if (this.cardYear === this.minCardYear) return new Date().getMonth() + 1;\n      return 1;\n    }\n  },\n  watch: {\n    cardYear () {\n      if (this.cardMonth &lt; this.minCardMonth) {\n        this.cardMonth = &quot;&quot;;\n      }\n    }\n  },\n  methods: {\n    flipCard (status) {\n      this.isCardFlipped = status;\n    },\n    focusInput (e) {\n      this.isInputFocused = true;\n      let targetRef = e.target.dataset.ref;\n      let target = this.$refs[targetRef];\n      this.focusElementStyle = {\n        width: `${target.offsetWidth}px`,\n        height: `${target.offsetHeight}px`,\n        transform: `translateX(${target.offsetLeft}px) translateY(${target.offsetTop}px)`\n      }\n    },\n    blurInput() {\n      let vm = this;\n      setTimeout(() =&gt; {\n        if (!vm.isInputFocused) {\n          vm.focusElementStyle = null;\n        }\n      }, 300);\n      vm.isInputFocused = false;\n    }\n  }\n});\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1069,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-1067","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elements"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1067\/revisions"}],"predecessor-version":[{"id":1084,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1067\/revisions\/1084"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1069"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}