Bo-Segner ID Card Generator

bo-segner-id-card-generator.markdown

Bo-Segner ID Card Generator

A Pen by rahil khan on CodePen.

License.

index.html

<div id="id-card">
  <div class="id-card material-ui-shadow">

    <!-- \\ mugshot -->
    <div class="id-card__mugshot">
      <img src="http://www.travelcontinuously.com/wp-content/uploads/2018/04/empty-avatar.png" id="id-card-mugshot">
    </div>
    <!-- // mugshot -->

    <!-- \\ foundation logo -->
    <div class="id-card__logo logo">
      <span class="logo__big">BO-SEGNER</span>
      <span class="logo__small">foundation</span>
    </div>
    <!-- // foundation logo -->

    <!-- \\ subject id -->
    <div class="id-card__subject-id">

    </div>
    <!-- // subject id -->

    <!-- \\ experiment banner -->
    <div class="id-card__banner">
      <span class="id-card__banner-text">EXPERIMENT S9.3a</span>
    </div>
    <!-- // experiment banner -->

    <!-- \\ details -->
    <div class="id-card__details">
      <div class="id-card__detail">
        <span class="id-card__detail-label">Name</span>
        <span class="id-card__detail-value" id="id-card-name">Glip-Glop Woodenstein</span>
      </div>
      <div class="id-card__detail">
        <span class="id-card__detail-label">Date of Birth</span>
        <span class="id-card__detail-value" id="id-card-date-of-birth">09/20/1980</span>
      </div>
      <div class="id-card__detail">
        <span class="id-card__detail-label">Issue Date</span>
        <span class="id-card__detail-value">08/01/2018</span>
      </div>
      <div class="id-card__detail">
        <span class="id-card__detail-label">Release Date</span>
        <span class="id-card__detail-value">08/01/2020</span>
      </div>
    </div>
    <!-- // details -->

    <!-- \\ short details -->
    <div class="id-card__details id-card__details--short">
      <div class="id-card__detail">
        <span class="id-card__detail-label">Gender</span>
        <span class="id-card__detail-value" id="id-card-gender">M</span>
      </div>
      <div class="id-card__detail">
        <span class="id-card__detail-label">Height</span>
        <span class="id-card__detail-value" id="id-card-height">6'03"</span>
      </div>
      <div class="id-card__detail">
        <span class="id-card__detail-label">Weight</span>
        <span class="id-card__detail-value" id="id-card-weight">145</span>
      </div>
    </div>
    <!-- // short details -->

  </div>
</div>

<div id="id-form">
  <div class="id-form">
    <div class="id-form__row id-form__row--inline">
      <div class="id-form__label">Name</div>
      <div class="id-form__input">
        <input type="text" id="name" placeholder="Name">
      </div>
    </div>
    <div class="id-form__row id-form__row--inline">
      <div class="id-form__label">Date of Birth</div>
      <div class="id-form__input">
        <input type="text" id="date-of-birth" placeholder="Date of Birth">
      </div>
    </div>
    <div></div>
    <div class="id-form__row id-form__row--inline">
      <div class="id-form__label">Gender</div>
      <div class="id-form__input">
        <select id="gender">
          <option value="M">Male</option>
          <option value="F">Female</option>
        </select>
      </div>
    </div>
    <div class="id-form__row id-form__row--inline">
      <div class="id-form__label">Height</div>
      <div class="id-form__input">
        <input type="text" id="height" placeholder="Height">
      </div>
    </div>
    <div></div>
    <div class="id-form__row id-form__row--inline">
      <div class="id-form__label">Mugshot</div>
      <div class="id-form__input">
        <input type="file" id="mugshot" accept="image/*">
      </div>
    </div>
    <div class="id-form__row id-form__row--inline">
      <div class="id-form__label">Weight</div>
      <div class="id-form__input">
        <input type="text" id="weight" placeholder="Weight">
      </div>
    </div>
  </div>
</div>

<button id="download-button">Download</button>

script.babel

const downloadCharacterSheet = () => {
  
  const node = document.getElementById('id-card');
  
  html2canvas(node).then(canvas => {
    // document.body.appendChild(canvas)
    // var img    = canvas.toDataURL("image/png");
    // document.write('<img src="'+img+'"/>');
    var link = document.createElement('a');
    link.download = 'filename.png';
    link.href = canvas.toDataURL()
    link.click();
  });
  
};

const bindInputToElement = (inputEl, elementEl) => {
  inputEl.addEventListener('change', () => {
    elementEl.textContent = inputEl.value;
  });
}

document
  .getElementById('download-button')
  .addEventListener('click', downloadCharacterSheet);

document
  .querySelector('.id-card__subject-id')
  .textContent = md5('something').slice(0, 8);

// Bind name
const nameEl = document.getElementById('name');
bindInputToElement(
  nameEl,
  document.getElementById('id-card-name')
);
nameEl
  .addEventListener('change', () => {
    document
      .querySelector('.id-card__subject-id')
      .textContent = md5(nameEl.value).slice(0, 8);
  });

// Bind date of birth
bindInputToElement(
  document.getElementById('date-of-birth'),
  document.getElementById('id-card-date-of-birth')
);

// Bind gender
bindInputToElement(
  document.getElementById('gender'),
  document.getElementById('id-card-gender')
);

// Bind height
bindInputToElement(
  document.getElementById('height'),
  document.getElementById('id-card-height')
);

// Bind weight
bindInputToElement(
  document.getElementById('weight'),
  document.getElementById('id-card-weight')
);

// Bind mugshot
document
    .getElementById('mugshot')
    .addEventListener('change', function() {
      if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
           var img = document.getElementById('id-card-mugshot');
           img.src = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
      }
    });

scripts

<script src="https://rawgit.com/blueimp/JavaScript-MD5/master/js/md5.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

body {
  background: #e2e1e0;
  margin: 0 auto;
  padding: 12vmin 10vmin;
  max-width: 50em;
  line-height: 1.5em;
  font-family: 'PT Sans';
  word-wrap: break-word;
}

#id-card {
  display: inline-block;
  float: left;
  margin-right: 2em;
}

.id-card {
  width: 336px;
  height: 192px;
  background: #ffffff;
  padding: 10px;
  position: relative;
  
  &__mugshot {
    position: absolute;
    right: 10px;
    
    width: 100px;
    height: 100px;
    border-left: 4px solid red;
    background: #ffffff;
    
    img {
      width: 100px;
      height: 100px;
    }
  }
  
  &__logo {
    width: 200px;
  }
  
  &__subject-id {
    position: absolute;
    top: 54px;
    left: 130px;
    
    font-family: monospace;
    font-size: 14pt;
    transform: rotate(-4deg);
  }
  
  &__banner {
    height: 10pt;
    background: red;
    margin-top: 10px;
    margin-left: -10px;
    padding-left: 12px;
  }
  
  &__banner-text {
    color: #ffffff;
    font-size: 8pt;
    letter-spacing: 2px;
    line-height: 0;
    position: relative;
    top: -6px;
  }
  
  &__details {
    padding-top: 20px;
    font-size: 6pt;
    line-height: 1.5;
    text-transform: uppercase;
    width: 60%;
    display: inline-block;
    
    &--short {
      float: right;
      margin-left: 30px;
      width: 100px;
    }
  }
  
  &__detail {
    height: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    & + & {
      border-top: 1px solid #eeee;
    }
  }
  
  &__detail-label {
    color: #333;
    font-weight: bold;
    
    &:after {
      content: ' • ';
      font-weight: normal;
    }
  }
}

.logo {
  &__big {
    font-size: 24pt;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 4px;
  }
  
  &__small {
    font-size: 10pt;
    letter-spacing: 4px;
    position: relative;
    top: -10px;
    left: 2px;
  }
}


.id-form {
  
  &__row {
    padding-bottom: 8px;
    
    &--inline {
      width: 10em;
      padding-right: 1em;
      padding-bottom: 1em;
      display: inline-block;
    }
  }
  
  &__label {
    font-size: 8pt;
    line-height: 8pt;
  }
  
  &__input {
  }
}

.material-ui-shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.material-ui-shadow:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}