Pokemon GO Invitation

by MrPolywhirl

HTML

<script src="https://fonts.googleapis.com/css?family=Lato"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto+Condensed"></script>
<h1>EX Raid Invitation Generator</h1>
<canvas id="invitation"></canvas>
<div class="controls">
  <textarea class="json-info">{
  "trainerId" : "TRAINER",
  "date" : "MM/DD",
  "duration" : {
    "start" : "00:00AM",
    "end" : "23:59PM"
  },
  "gym" : {
    "name" : "Gym Name",
    "location" : "Gym Location"
  }
}</textarea><br/>
<p><select class="lang-sel"></select></p>
  <p><input type="button" class="update-btn" value="Update" /></p>
  <div>
    <p class="p-lato">This is "Lato" font.</p>
    <p class="p-robo">This is "Roboto Condensed" font.</p>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
.p-lato { font-family: 'Lato', sans-serif; }
.p-robo { font-family: 'Roboto Condensed', sans-serif; }
.controls { float: left; }
.controls > p { text-align: center; }
.json-info { width: 20em; height: 20em; margin-right: 1em; }
#invitation { /* letter-spacing: 0.02em; */ }

JavaScript

var languageStrings = {
  "congratulations_exclusive_raid_ticket" : {
    "English": "Congratulations, {0}!",
    "Japanese": "{0}さん、おめでとうございます！",
    "French": "Félicitations, {0} !",
    "Spanish": "¡Enhorabuena, {0}!",
    "German": "Glückwunsch, {0}!",
    "Italian": "Congratulazioni! Hai ricevuto un invito per un raid\\nspeciale!",
    "Korean": "축하합니다! 특별한 레이드에 초대받았습니다!",
    "Chinese": "{0}，恭喜你！",
    "Portuguese": "Parabéns, {0}!"
  },
  "get_directions_action" : {
    "English": "Get directions",
    "Japanese": "マップを開く",
    "French": "Itinéraire",
    "Spanish": "Cómo llegar",
    "German": "Wegbeschreibung >",
    "Italian": "Visualizza indicazioni stradali",
    "Korean": "장소 찾기",
    "Chinese": "規劃路徑",
    "Portuguese": "Como chegar"
  },
  "raids_invite_only_event" : {
    "English": "Note: This event is by invitation only.",
    "Japanese": "* 招待されたトレーナーのみ参加できます。",
    "French": "Note : cet événement est sur invitation uniquement.",
    "Spanish": "*Este es un evento solo por invitación.",
    "German": "Hinweis: Für diesen Event ist eine Einladung erforderlich.",
    "Italian": "Nota: questo evento è solo su invito.",
    "Korean": "*초대 된 트레이너만 참가할 수 있습니다.",
    "Chinese": "*僅限受邀的訓練家參加",
    "Portuguese": "*Este é um evento só por convite."
  },
  "raid_exclusive_description" : {
    "English": "This is a reward for a previous victory at {0}!\\nPlease visit the Gym at the given time to join the EX Raid Battle!",
    "Japanese": "{0}でのレイドバトルに勝利したトレーナーへの特典です！明記された日時にジムを訪れて、バトルに参加してください！",
    "French": "Il s’agit d’une récompense pour ta victoire à {0} !\\nRends-toi à l’Arène à l’heure indiquée, et participe à ce Combat de Raid EX.",
    "Spanish": "¡Esta es una recompensa por una victoria anterior en {0}!\\n¡Visita el Gimnasio a la hora mencionada arriba para unirte a una incursión EX!",
    "German": "Dies ist eine Belohung für einen früheren Sieg bei {0}!\\nBesuche die Arena zur angegebenen Zeit, um am EX-Raid-Kampf teilzunehmen!",
   ...