<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title> Ad Agency Name Generator</title>
  <link rel="icon" type="img/png" href="https://maxwcohen.github.io/AgencyNameGenerator/favicon.png"/>

  <meta property="og:type" content="website"/>
  <meta property="og:title" content="Ad Agency Name Generator"/>
  <!-- <meta property="og:description" content=""/> -->
  <meta property="og:url" content="https://agencynamegenerator.com/Thumbnail.gif"/>
  <meta property="og:image" content="https://agencynamegenerator.com/Thumbnail.gif"/>

  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
  <link rel="stylesheet" href="https://use.typekit.net/uov0xuz.css">

<!--   <script defer src="jquery.js"></script> -->
<!--   <script defer src="https://maxwcohen.github.io/agencynamegenerator/html2canvas.js"></script>
  <script defer src="https://maxwcohen.github.io/agencynamegenerator/canvas-to-image.js"></script> -->
<!--   <script defer src="main.js"></script> -->

</head>

<body>
  <a class="header" href="https://agencynamegenerator.com/">
    Ad Agency Name Generator
  </a>

  <div id="siteBackground" class="background0">
    <div class="nameContainer">
      <div id="name" class="style0">
        Click to Begin
        <div style="font-size:calc(10px + 1vw);">
          (Or just press space)
        </div>
      </div>
      <input id="customType" type="text" onfocus="this.value=''" class="hidden">
    </div>
  </div>

  <button id="button">
    GENERATE
  </button>

  <div class="optionsContainer">
    <div class="optionContainer">
      <img id="download" class="option" src="https://maxwcohen.github.io/AgencyNameGenerator/download.png" title="Some styles may not work properly"/>
      <div class="optionLabel">
        Save
        <div style="font-size:9pt; font-family: 'franklin-gothic-urw'; padding-left: 0.4em;">
          [BETA]
        </div>
      </div>
    </div>

    <div class="optionContainer">
      <img id="undo" class="option" src="https://maxwcohen.github.io/AgencyNameGenerator/undo.png"/>
      <div id="undoLabel" class="optionLabel">
        (U)ndo
      </div>
    </div>

    <div class="optionContainer">
      <img id="styleLock" class="option" src="https://maxwcohen.github.io/AgencyNameGenerator/lock.png"/>
      <div class="optionLabel">
        (S)tyle
      </div>
    </div>

    <div class="optionContainer">
      <img id="nameLock" class="option" src="https://maxwcohen.github.io/AgencyNameGenerator/lock.png"/>
      <div class="optionLabel">
        (N)ame
      </div>
    </div>
  </div>

  <a href="http://www.maxwcohen.com/" class="me" target="_blank">
    by Max Cohen
  </a>
</body>
body{
  margin: 0px;
}
.header{
  font-family: 'Abril Fatface', cursive;
  font-size: calc(8pt + 2vw);
  text-align: center;
  background-color: rgba(22,22,22,.2);
  color: #FFFFFF;
  padding: 5px 0px;
  position: fixed;
  width: 100%;
  height: calc(vw/5);
  text-decoration: none;
}

canvas{
  display: none;
}

.me{
  font-family: "franklin-gothic-urw";
  font-weight: 500;
  font-size: 8pt;
  position: fixed;
  bottom: 1%;
  left: 1%;
  color: white;
  text-shadow: 0px 0.5px black;
  text-decoration: none;
}

#button{
  position: fixed;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'industry-inc-3d';
  font-weight: bold;
  font-size: 16pt;
  width: 150px;
  height:50px;
  border-radius: 10px;
  border: 3px solid black;
  background-color: rgba(255,255,255,.5);
  opacity: 0.8;
  box-shadow: 3px 3px;
  padding-top: 5px;
}
#button:focus{
  outline: none;
}

input{
  background-color: rgba(0,0,0,0);

}
#customType{
  font-size: calc(50px + 3vw);
  border: none;
  text-align: center;
  line-height: inherit;

}
#customType:focus{
  outline: none;
}

.hidden{
  display: none;
}

.optionsContainer{
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom:4%;
  right: 1%;
}

@keyframes flash {
    0%{
      filter: brightness(100%);
    }
    50%{
      filter: brightness(150%);
    }
    100%{
      filter: brightness(100%);
    }
}
.flash{
  animation-name: flash;
  animation-duration: 250ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
}

.option{
  width:20px;
  /* transform: translateX(100%); */
  margin-left: 40%;
}

.optionLabel{
  margin-top: 5px;
  text-align: center;
  font-family: "industry-inc-3d";
  color: grey;
}

.optionContainer{
  margin: 5px 15px;
}

img{
  opacity: 0.3;
}

.fullOpacity{
  opacity: 1;
}

#siteBackground{
  width: 100%;
  height: 100vh;
}

.nameContainer{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  text-align: center;
  font-size: calc(50px + 3vw);
  line-height: 1em;
  width: 100vw;

}

@keyframes blink {
  0%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.style0{
  font-family: 'industry-inc-3d';
  line-height: calc(50px + 3vw);;
  animation-name: blink;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}

.background0{
  background-color: rgb(100,200,255);
}

/* NAME STYLES */

.style1{
  font-family: "lust";
  text-shadow: -3px 0px Red;
}
.style2{
  font-family: "neplus";
  text-transform: uppercase;
  /* font-size: calc(50px + 3vw); */
}
@keyframes driftApart {
  0%{
    letter-spacing: -40px;
  }
  100%{
    letter-spacing: 20px;
  }
}
.style3{
  font-family: "balboa-plus-inline";
  color: white;
  letter-spacing: 20px;
  text-shadow: 0px 0px 10px white;
  /* animation-name: driftApart;
  animation-duration: 2s;
  animation-timing-function: ease-out; */
}
.style4{
  font-family: "madrone-std";
  color: rgb(253,205,40);
  font-size: calc(35px + 3vw);
}
.style5{
  font-family: "sutturah";
  color: #F092DD;
  text-shadow: 3px 3px #392F5A;
}
.style6{
  font-family: "bungee";
  line-height: 80pt;
  color: rgb(253,205,40);
  text-shadow: 0px 10px black;
}
.style7{
  font-family: "Helvetica";
  font-weight: bold;
  text-transform: uppercase;
  color: white;
}
.style8{
  font-family: Futura;
  letter-spacing: 10px;
  color: rgb(100,143,119);
  background-color: rgb(250, 212, 147);
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 2vw;
  padding-right: 2vw;
  box-shadow: 0px 5px rgb(202, 116, 114);
  display: inline-block;
}
.style9{
  font-family: "stenciletta-left";
  background-color: white;
  padding: 0px 50px;
  display: inline-block;
}
.style10{
  font-family: "franklin-gothic-urw";
  font-weight: 900;
  color: #ECA72C;
  text-shadow: 15px 0px #221E22;
}
.style11{
  font-family: Garamond;
  font-weight: bold;
  text-transform: lowercase;
  font-size: calc(30px + 3vw);
  color: #222222;
}
.style11:after{
  /* margin-left: calc(5px - 0.5vw); */
  content:".";
}
.style12{
  font-family: "fatfrank";
  text-transform: uppercase;
  color: #FE6847;
  text-shadow: 20px 30px black;
}
.style13{
  font-family: "lust";
  font-style: italic;
  text-decoration: line-through;
}
.style14{
  font-family: Helvetica;
  font-weight: Bold;
  font-size: 42pt;
  text-transform: uppercase;
  /* text-shadow: 0px 42px, 0px -42px, 0px -84px, 0px -126px,
    20px 84px,20px 126px, 20px 168px, 20px 210px; */
  text-shadow: 0px 1em, 0px -1em, 0px -2em, 0px -3em,
    20px 1.5em, 20px 2.5em, 20px 3.5em, 20px 4.5em;
  white-space: nowrap;
}
.style15{
  font-family: 'industry-inc-3d';
}
.style16{
  font-family: "rollerscript-rough";
  color: #DDA15E;
}
.style17{
  font-family: "uppercut-angle";
  color: rgba(0,0,0,0.9);
  text-shadow: 5px 10px #d01e00;
  transform: skew(-10deg, -15deg);
}
.style18{
  font-family: "balboa-plus-fill";
  letter-spacing: -5px;
  background: -webkit-linear-gradient(0deg, white 0%, white 50%, black 50%, black 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.style19{ /*AKA, the Mac*/
  font-family: "orator-std";
  text-transform: lowercase;
}
.style19:before{
  content:"-";
}
.style19:after{
  content:"-";
}
.style20{
  font-family: "fleisch-wolf";
  color: grey;
}
.style21{
  font-family: "discourse-wide";
  color: rgb(199,44,49);
  display: inline-block;
  /* text-decoration: overline underline; */
  border-bottom: 10px solid currentColor;
  border-top: 10px solid currentColor;
  padding-top: 15px;
}
.style22{
  font-family: "trajan-pro-3";
  color: rgb(178,36,40);
  text-transform: capitalize;
  text-shadow: 0px 2px 10px currentColor, 0px 0px 100px currentColor;
  letter-spacing: 0.1em;
}
.style23{
  font-family: "cooper-black-std";
  color: rgb(247,234,75);
}
.style24{
  font-family: "backspacer-round";
  color: rgb(188,21,24);
  /* color: rgb(52,51,53); */
}
@keyframes  uglyColors {
    15% { color: red; }
    30% { color: yellow; }
    45% { color: green; }
    60% { color: blue; }
    75% { color: red; }
  }
.style25{
  font-family: "Comic Sans MS", "comic sans ms", "verdana", sans-serif;
  text-transform: lowercase;
  color: blue;
  animation-name: uglyColors;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}
.style25::before{
  content:"wow such";
  font-size: calc(30px + 1vw);
  color: magenta;
  display: block;
  transform: translateX(-15vw) rotate(-30deg);
}
/* BACKGROUNDS */

.background1{
 background-color: white;
}
.background2{
  background-color: rgb(253,205,40);
}
.background3{
  background-color: black;
}
.background4{
  background-color: #222222;
}
.background5{
  background-color: #EEC8E0;
}
.background6{
  background-color: #064789;
}
.background7{
  background-color: black;
}
.background8{
  background-color: rgb(240,194,168);
}
.background9{
 background: repeating-linear-gradient(
  65deg,
  rgb(255, 60, 20),
  rgb(255, 60, 20) 50px,
  black 50px,
  black 100px
  );
}
.background10{
  background-color: #EE5622;
}
.background11{
  background-color: rgb(210,200,190);
}
.background12{
  background-color: #FBB13C;
}
.background13{
  background-color: #FBB13C;
}
.background14{
  background-color: rgb(245,140,94);
}
.background15{
  background-color: rgb(100,200,255);
}
.background16{
  background-color: #FEFAE0;
}
.background17{
  background-color: #fdbd0e;
}
.background18{
  background-color: #F34213;
}
.background19{
  background-color: rgb(255,253,56);
}
.background20{
  background-color: rgb(20,22,25);
}
.background21{
  background-color: rgb(234,227,208);
}
.background22{
  background-color: rgb(10,12,15);
}
.background23{
  background-color: rgb(209,52,46);
}
.background24{
  background-color: rgb(253,200,114);
  /* background-color: rgb(203,62,93); */
}
var letter = [
  "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"
];

var adjective = [
  "Yellow",
  "Meaty",
  "Sticky",
  "Super",
  "Hot",
  "Blonde",
  "Crispy",
  "Banana",
  "Mama",
  "The",
  "A",
  "Folding",
  "Young",
  "Molecular",
  "Deep",
  "Daily",
  "Proud",
  "Mighty",
  "Big",
  "Fat",
  "Rough",
  "Vanilla"
];

var noun = [
  "Rabbit",
  "Bear",
  "Kid",
  "Captian",
  "Red",
  "Topic",
  "Wish",
  "Bloom",
  "Stuff",
  "Detention",
  "Bastard",
  "Box",
  "Momma",
  "Ball",
  "Berry",
  "Nine",
  "Battleship",
  "Bicycle",
  "Chance",
  "Divide",
  "Sunday",
  "Passion",
  "Biplane",
  "Loft",
  "Wax",
  "Thanks",
  "Luck",
  "Step<wbr>mother"
];

var bannedStyles = [
  "9", "18"
];

function replaceStyle(num){
  num = num || styleNum;
  $("#name").removeClass();
  $("#siteBackground").removeClass();
  $("#name").addClass("style" + num);
  $("#siteBackground").addClass("background" + num);
  styleNum = document.getElementById("name").className.split("style")[1];
  console.log(styleNum);
}

function replaceName(name){
  name = name || currentName;
  $("#name").html(name);
  currentName = document.getElementById("name").innerHTML;
  console.log(currentName);
}

function updateURL(name, num){
  name = name || currentName;
  num = num || styleNum;
  window.history.replaceState({}, "", "?" + name + "=" + num);
}

function getStyle(){
  styleNum = Math.floor(Math.random()*25+1);
  replaceStyle();
}

function getLetter(){
  var letterIndex = Math.floor(Math.random()*letter.length);
  var letterValue = letter[letterIndex];
  $("#name").append(letterValue);
}

function getAcronym(){
  var numLetter = Math.floor(Math.random()*3+2);
  var coinFlip = Math.random();
  function slash(){
    if(coinFlip > 0.5){
      $("#name").append("/");
    }
  }
  getLetter();
  slash();
  getLetter();
  if (numLetter > 2){
    slash();
    getLetter();
  }
  if (numLetter > 3){
    slash();
    getLetter();
  }
}

function getAdjective(){
  var adjectiveIndex = Math.floor(Math.random()*adjective.length);
  var adjectiveValue = adjective[adjectiveIndex];
  $("#name").append(adjectiveValue);
}

function getNoun(){
  var nounIndex = Math.floor(Math.random()*noun.length);
  var nounValue = noun[nounIndex];
  $("#name").append(nounValue);
}

function getWords(){
  var threeSidedCoin = Math.random();
  if(threeSidedCoin > 0.67){
    getAdjective();
    window.isTwoWords = false;
  }
  if(threeSidedCoin < 0.33){
    getNoun();
    window.isTwoWords = false;
  }
  if(threeSidedCoin >= 0.33 && threeSidedCoin <= 0.67){
    getAdjective();
    $("#name").append(" ");
    getNoun();
    window.isTwoWords = true;
  }
}

function getName(){
  $("#name").html("");
  if(Math.random()>0.5){
    getAcronym();
  }
  else{
    getWords();
  }
  currentName = document.getElementById("name").innerHTML;
  //Make all one string
  replaceName();
}

//Flash options if they haven't been used
function addFlash(){
  $(".optionsContainer").addClass("flash");
}
var countdownToFlash = window.setTimeout(addFlash, 12000);
countdownToFlash;

var styleLock = false;
var nameLock = false;
function toggleStyleLock(){
  if(styleLock === false){
    $("#styleLock").addClass("fullOpacity");
    styleLock = true;
  }
  else{
    $("#styleLock").removeClass("fullOpacity");
    styleLock = false;
  }
  window.clearInterval(countdownToFlash);
}
function toggleNameLock(){
  if(nameLock === false){
    $("#nameLock").addClass("fullOpacity");
    nameLock = true;

  }
  else{
    $("#nameLock").removeClass("fullOpacity");
    nameLock = false;
  }
  window.clearInterval(countdownToFlash);
}
$("#styleLock").click(toggleStyleLock);
$("#nameLock").click(toggleNameLock);

var undoStatus = false;

function generate(){
  // Record previous content for undo & reset undo
  window.lastStyleNum = styleNum;
  window.lastName = currentName;
  $("#undo").css("transform", "");
  $("#undoLabel").html("(U)ndo");
  undoStatus = false;

  if(styleLock === false){
    getStyle();
  }

  if(nameLock === false){
    getName();
  }
  updateURL();
}
$("#button").click(generate);

function undo(){
  if(lastStyleNum){
    if(styleLock === false){
      window.redoStyleNum = styleNum;
      replaceStyle(lastStyleNum);
    }
    if(nameLock === false){
      window.redoName = currentName;
      replaceName(lastName);
    }

    $("#undo").css("transform", "scaleX(-1)");
    $("#undoLabel").html("(R)edo");
    undoStatus = true;

    updateURL();
  }
}

function redo(){
  if(redoStyleNum || redoName){
    if(styleLock === false){
      replaceStyle(redoStyleNum);
    }
    if(nameLock === false){
      replaceName(redoName);
    }

    $("#undo").css("transform", "");
    $("#undoLabel").html("(U)ndo");
    undoStatus = false;

    updateURL();
  }
}

function undoOrRedo(){
  if(undoStatus === false){
    undo();
  }
  else{
    redo();
  }
  window.clearInterval(countdownToFlash);
}
$("#undo").click(undoOrRedo);

//Mobile Changes
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if(isMobile){
  $("#name").html("Tap Anywhere to Begin");
  $(".nameContainer").css("transform", "translate(-50%, -60%) scale(0.8)");
  $(".optionsContainer").css("transform", "scale(0.9)")
}
$("#siteBackground").click(function(){
  if(isMobile){
    generate();
  }
});

function getCanvas(){
  return html2canvas(document.getElementById("siteBackground"))
    .then(function(canvas) {
        document.body.appendChild(canvas);
        document.getElementsByTagName("canvas")[0].setAttribute("id", "canvas");
    });
}
function downloadImage(){
  window.clearInterval(countdownToFlash);
  if(bannedStyles.includes(styleNum) === false){
    $("canvas").remove();
    getCanvas().then(function() {
      var okToDownload = confirm("Download Image?");
      if(okToDownload){
        canvasToImage("canvas", currentName + styleNum);
      }
    });
  }
  else{
    alert("Sorry, this style cannot be downloaded.");
  }
}
$("#download").click(downloadImage);

$(document).keyup(function(e){
  if(e.keyCode == 32){
    generate();
  }
  if(e.keyCode == 85){
    undoOrRedo();
  }
  if(e.keyCode == 83){
    toggleStyleLock();
  }
  if(e.keyCode == 78){
    toggleNameLock();
  }
  if(e.keyCode == 82){
    redo();
  }
})

//Get elements from URL
var urlParts = window.location.search.split("?")[1];
var currentName = decodeURIComponent(urlParts.split("=")[0]);
var styleNum = urlParts.split("=")[1];
// replaceStyle();
// replaceName();
View Compiled

External CSS

  1. https://use.typekit.net/uov0xuz.css
  2. https://fonts.googleapis.com/css?family=Abril+Fatface

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js