vYQQvdq

index.html

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- minicolors plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.5/jquery.minicolors.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.5/jquery.minicolors.min.css">

<div class="row snipcss-Qz3bf">
  <div class="col-md-3 offset-md-2">
    <p class="">
      Background Color
      <br>
    </p>
    <div class="minicolors minicolors-theme-bootstrap minicolors-position-bottom">
      <input type="text" class="form-control colorpick minicolors-input" value="#000" id="color_front" name="color_front" placeholder="Enter hex code" size="7">
      <span class="minicolors-swatch minicolors-sprite minicolors-input-swatch">
        <span class="minicolors-swatch-color style-COAPM" id="style-COAPM">
        </span>
      </span>
      <div class="minicolors-panel minicolors-slider-hue">
        <div class="minicolors-slider minicolors-sprite">
          <div class="minicolors-picker style-UZows" id="style-UZows">
          </div>
        </div>
        <div class="minicolors-opacity-slider minicolors-sprite">
          <div class="minicolors-picker">
          </div>
        </div>
        <div class="minicolors-grid minicolors-sprite style-16PGR" id="style-16PGR">
          <div class="minicolors-grid-inner">
          </div>
          <div class="minicolors-picker style-ZwNpb" id="style-ZwNpb">
            <div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <p>
    </p>
    <p class="">
      Logo (svg only)
      <br>
      <input type="file" id="logo_upload" name="logo_upload" class="">
    </p>
    <br>
    <p>
      <button type="button" id="previewDesign" name="previewDesign" class="btn btn-primary">
        Preview
      </button>
    </p>
  </div>
  <div class="col-md-7">
    <div class="credit-card">
      <div class="front style-I6XLc" id="style-I6XLc">
        <div class="strip-bottom">
        </div>
        <div class="strip-top">
        </div>
        <div class="logo" id="card_logo">
          <span id="style-7MoSN" class="style-7MoSN">
            YOUR LOGO
          </span>
        </div>
        <div class="investor">
        </div>
        <div class="chip">
          <div class="chip-line">
          </div>
          <div class="chip-line">
          </div>
          <div class="chip-line">
          </div>
          <div class="chip-line">
          </div>
          <div class="chip-main">
          </div>
        </div>
        <div class="card-number card-text style-9FfOE" id="style-9FfOE">
          <div class="section">
            1234&nbsp;
          </div>
          <div class="section">
            5678&nbsp;
          </div>
          <div class="section">
            9000&nbsp;
          </div>
          <div class="section">
            0000
          </div>
        </div>
        <div class="end card-text style-FoG6g" id="style-FoG6g">
          <span class="card-text end-text style-6cTNe" id="style-6cTNe">
            <span id="style-rTbpO" class="style-rTbpO">
              Valid thru
            </span>
          </span>
          <span class="end-date">
            <span id="style-qH61j" class="style-qH61j">
              11/25
            </span>
          </span>
        </div>
        <div id="style-yoN82" class="style-yoN82">
        </div>
        <div class="card-holder card-text style-A66w2" id="style-A66w2">
          Cardholder Name
        </div>
        <div class="debit card-text">
          debit
        </div>
        <div class="master">
        </div>
        <div class="master-background">
        </div>
      </div>
    </div>
  </div>
</div>

script.js

$(document).ready(function() {
  // Function to update the card color
  function updateCardColor() {
    var color = $('#color_front').val();
    $('.style-I6XLc').css('background-image', 'none');
    $('.style-I6XLc').css('background-color', color);
  }

  // Function to reinitialize the minicolors plugin
  function initializeMinicolors() {
    $('.colorpick').minicolors({
      control: 'hue',
      position: 'bottom',
      format: 'hex',
      theme: 'bootstrap',
      swatchPosition: 'left',
      defaultValue: '#000',
      change: function(value, opacity) {
        updateCardColor();
      },
    });
  }

  // Event handler for color change
  $('#color_front').on('change', function() {
    updateCardColor();
  });

  // Event handler for logo upload
  $('#logo_upload').on('change', function() {
    var file = this.files[0];
    if (file && file.type.startsWith('image/')) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('#card_logo').html('<img src="' + e.target.result + '" alt="Logo">');
      };
      reader.readAsDataURL(file);
    } else {
      // Clear the logo
      $('#card_logo').html('<span id="style-7MoSN" class="style-7MoSN">YOUR LOGO</span>');
    }
  });

  // Flip the card on hover
  $('.credit-card').hover(
    function() {
      $(this).toggleClass('flipped');
    },
    function() {
      $(this).toggleClass('flipped');
    }
  );

  // Preview button click event
  $('#previewDesign').on('click', function() {
    updateCardColor();
    var logo = $('#logo_upload').prop('files')[0];
    if (logo && logo.type.startsWith('image/')) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('#card_logo').html('<img src="' + e.target.result + '" alt="Logo">');
      };
      reader.readAsDataURL(logo);
    } else {
      // Clear the logo
      $('#card_logo').html('<span id="style-7MoSN" class="style-7MoSN">YOUR LOGO</span>');
    }
  });

  // Initialize the minicolors plugin
  initializeMinicolors();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.6/jquery.minicolors.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Inter:100,200,300,400,500,600,700,800,900&display=swap'); 
@font-face { 
  font-family:'cc font';
 
  font-weight:normal;
  font-style:normal;
} 
* { 
    box-sizing:  border-box;
    -webkit-box-sizing:  border-box; 
} 

.container { 
    margin-right: auto; 
    margin-left: auto; 
    padding-right: 15px; 
    padding-left: 15px; 
    width: 100%;
} 

@media (min-width: 576px){ 
  .container { 
    max-width: 540px;
  } 
}     

@media (min-width: 768px){ 
  .container { 
    max-width: 720px;
  } 
}     

@media (min-width: 992px){ 
  .container { 
    max-width: 960px;
  } 
}     

.product .money-revenue { 
    padding-top: 90px; 
    padding-bottom: 90px;
} 

main { 
    display: block;
} 

.mb-5 { 
    margin-bottom: 3rem !important;
} 

body { 
    margin:     0;
    font-family:  'Inter', sans-serif;
    font-size:     1rem; 
    font-weight:     normal; 
    line-height:    1.5;
    color:  #676F7A; 
    background-color:     #fff;
    min-height:   100vh; 
    scroll-behavior:   smooth; 
    text-rendering:   optimizeSpeed; 
} 

html { 
    box-sizing: border-box; 
    font-family: sans-serif; 
    line-height: 1.15; 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -ms-overflow-style: scrollbar; 
    -webkit-tap-highlight-color: transparent;
} 

.row { 
    display: -ms-flexbox; 
    display: flex; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    margin-right: -15px; 
    margin-left: -15px;
} 

*,:before,:after { 
    box-sizing:  border-box;
    -webkit-box-sizing:  border-box; 
} 

.col-md-3 { 
    position: relative; 
    width: 100%; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px;
} 

@media (min-width: 768px){ 
  .col-md-3 { 
    -ms-flex: 0 0 25%; 
    flex: 0 0 25%; 
    max-width: 25%;
  } 

  .offset-md-2 { 
    margin-left: 16.666667%;
  } 
}     

.col-md-7 { 
    position: relative; 
    width: 100%; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px;
} 

@media (min-width: 768px){ 
  .col-md-7 { 
    -ms-flex: 0 0 58.333333%; 
    flex: 0 0 58.333333%; 
    max-width: 58.333333%;
  } 
}     

p { 
    margin-top:  0; 
    margin-bottom:  1rem;
} 

.credit-card { 
    width:  400px; 
    height:  250px;
    perspective: 1000;
} 

.minicolors { 
    position: relative;
} 

input { 
    -ms-touch-action:     manipulation; 
    touch-action:     manipulation;
    margin:    0; 
    font-family:    inherit; 
    font-size:  11px;
    line-height:    inherit;
    overflow:   visible;
    font:  inherit;
} 

button { 
    -ms-touch-action:     manipulation; 
    touch-action:     manipulation;
    margin:    0; 
    font-family:    inherit; 
    font-size:    inherit; 
    line-height:    inherit;
    overflow:   visible;
    text-transform:  none;
    font: inherit;
} 

.btn { 
    display: inline-block; 
    font-weight: normal; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    border: 1px solid transparent; 
    padding: 0.5rem 0.75rem; 
    font-size: 1rem; 
    line-height: 1.25; 
    border-radius: 0.25rem; 
    transition: all 0.15s ease-in-out;
} 

.btn-primary { 
    color: #fff; 
    background-color: #007bff; 
    border-color: #007bff;
} 

.btn { 
    border: 2px solid #fff; 
    height: 40px; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    padding-left: 30px; 
    padding-right: 30px; 
    color: #fff; 
    -webkit-transition-duration: .2s; 
    transition-duration: .2s; 
    -webkit-transition-property: color, background-color; 
    transition-property: color, background-color; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 600;
} 

.btn-primary { 
    background-color: #095FD9; 
    border-color: #095FD9;
} 

button,[type="button"]  { 
    -webkit-appearance: button;
} 

.btn:hover { 
    text-decoration: none;
} 

.btn-primary:hover { 
    color: #fff; 
    background-color: #0069d9; 
    border-color: #0062cc;
} 

.front { 
    position:  absolute; 
    width:  inherit; 
    height:  inherit; 
    border-radius:  15px; 
    color:  #fff; 
    text-shadow:  0 1px 1px rgba(0,0,0,0.3); 
    box-shadow:  0 1px 10px 1px rgba(0,0,0,0.3); 
    backface-visibility:  hidden; 
    background-image:  linear-gradient(to right, #111, #555); 
    overflow:  hidden;
    transform: translateZ(0);
} 

.form-control { 
    display: block; 
    width: 100%; 
    padding: 0.5rem 0.75rem; 
    font-size: 1rem; 
    line-height: 1.25; 
    color: #495057; 
    background-color: #fff; 
    background-image: none; 
    background-clip: padding-box; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 0.25rem; 
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
} 

.minicolors-theme-bootstrap .minicolors-input  { 
    float: none; 
    padding-left: 44px;
} 

.minicolors-sprite { 
    background-image: url(https://www.hydrogen.tech/jquery.minicolors.png);
} 

.minicolors-swatch { 
    position: absolute; 
    vertical-align: middle; 
    background-position: -80px 0; 
    border: solid 1px #ccc; 
    cursor: text; 
    padding: 0; 
    margin: 0; 
    display: inline-block;
} 

.minicolors-theme-bootstrap .minicolors-swatch  { 
    z-index: 2; 
    top: 3px; 
    left: 3px; 
    width: 28px; 
    height: 28px; 
    border-radius: 3px;
} 

.minicolors-panel { 
    position: absolute; 
    width: 173px; 
    background: white; 
    border: solid 1px #CCC; 
    box-shadow: 0 0 20px rgba(0, 0, 0, .2); 
    z-index: 99999; 
    box-sizing: content-box; 
    display: none;
} 

.minicolors-position-bottom .minicolors-panel  { 
    top: auto;
} 

.logo { 
    position: absolute; 
    top: 30px; 
    right: 25px;
} 

.investor { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    text-transform: uppercase;
} 

.chip { 
    position: relative; 
    top: 75px; 
    left: 40px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 50px; 
    height: 40px; 
    border-radius: 5px; 
    background-image: linear-gradient(to bottom left, #ffecc7, #d0b978); 
    overflow: hidden;
} 

.card-number { 
    position: relative; 
    display: flex; 
    align-items: center; 
    margin: 90px 25px 10px; 
    font-size: 20px; 
    font-family: 'cc font', monospace;
} 

.end { 
    margin-left: 140px; 
    text-transform: uppercase; 
    font-family: 'cc font', monospace;
} 

.card-holder { 
    margin: 10px 25px; 
    text-transform: uppercase; 
    font-family: 'cc font', monospace;
} 

.debit { 
    position: absolute; 
    right: 30px; 
    bottom: 130px; 
    display: flex; 
    font-size: 16px; 
    font-weight: 600;
} 

.master { 
    position: absolute; 
    right: 15px; 
    bottom: 10px; 
    display: flex; 
    z-index: 1000;
} 

.master-background { 
    background: #f1f1f1; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    height: 65px; 
    width: 100px; 
    border-top-left-radius: 25px;
} 

.minicolors-swatch-color { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
} 

.minicolors-theme-bootstrap .minicolors-swatch-color  { 
    border-radius: inherit;
} 

.minicolors-slider { 
    position: absolute; 
    top: 1px; 
    left: 152px; 
    width: 20px; 
    height: 150px; 
    background-color: white; 
    background-position: 0 0; 
    cursor: row-resize;
} 

.minicolors-opacity-slider { 
    display: none;
    position:  absolute; 
    top:  1px; 
    left:  173px; 
    width:  20px; 
    height:  150px; 
    background-color:  white; 
    background-position:  -40px 0; 
    cursor:  row-resize;
} 

.minicolors .minicolors-grid  { 
    position: relative; 
    top: 1px; 
    left: 1px; 
    width: 150px; 
    height: 150px; 
    margin-bottom: 2px; 
    background-position: -120px 0; 
    cursor: crosshair;
} 

.chip .chip-line  { 
    position: absolute; 
    width: 100%; 
    height: 1px; 
    background-color: #333;
} 

.chip .chip-line:nth-child(1)  { 
    top: 13px;
} 

.chip .chip-line:nth-child(2)  { 
    top: 20px;
} 

.chip .chip-line:nth-child(3)  { 
    top: 28px;
} 

.chip .chip-line:nth-child(4)  { 
    left: 25px; 
    width: 1px; 
    height: 50px;
} 

.chip .chip-main  { 
    width: 20px; 
    height: 25px; 
    border: 1px solid #333; 
    border-radius: 3px; 
    background-image: linear-gradient(to bottom left, #efdbab, #e1cb94); 
    z-index: 1;
} 

.end .end-text  { 
    font-size: 7px; 
    color: rgba(255,255,255,0.8);
} 

.master  { 
  margin-bottom: -10px;
  margin-right: -15px;
  background-image: url('https://findlogovector.com/wp-content/uploads/2018/10/visa-infinite-privilege-logo-vector.png');
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 5px;
  width: 120px; /* Adjust the width and height as needed */
  height: 65px;
  }
} 


.minicolors-picker { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 18px; 
    height: 2px; 
    background: white; 
    border: solid 1px black; 
    margin-top: -2px; 
    box-sizing: content-box;
} 

.minicolors .minicolors-grid-inner  { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 150px; 
    height: 150px;
} 

.minicolors-grid .minicolors-picker  { 
    position: absolute; 
    top: 70px; 
    left: 70px; 
    width: 12px; 
    height: 12px; 
    border: solid 1px black; 
    border-radius: 10px; 
    margin-top: -6px; 
    margin-left: -6px; 
    background: none;
} 

.minicolors-grid .minicolors-picker > div  { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 8px; 
    height: 8px; 
    border-radius: 8px; 
    border: solid 2px white; 
    box-sizing: content-box;
} 


/* These were inline style tags. Uses id+class to override almost everything */
#style-COAPM.style-COAPM {  
   background-color: rgb(0, 0, 0);  
}  
#style-UZows.style-UZows {  
   top: 0px;  
}  
#style-16PGR.style-16PGR {  
   background-color: rgb(255, 0, 0);  
}  
#style-ZwNpb.style-ZwNpb {  
   top: 150px;  
    left: 0px;  
}  
#style-I6XLc.style-I6XLc {  
}  
#style-7MoSN.style-7MoSN {  
   font-size:20px;  
   font-weight:600;  
   color:white;  
}  
#style-9FfOE.style-9FfOE {  
}  
#style-FoG6g.style-FoG6g {  
}  
#style-6cTNe.style-6cTNe {  
}  
#style-rTbpO.style-rTbpO {  
   float:left;  
   width:30px;  
}  
#style-qH61j.style-qH61j {  
   float:left;  
   width:100px;  
}  
#style-yoN82.style-yoN82 {  
   clear:both;  
}  
#style-A66w2.style-A66w2 {  
}  

vyqqvdq.markdown

vYQQvdq

A Pen by Vashon Gonzales on CodePen.

License.