Buildnroll admin

<div class="jamesbody">
  <form>
   <h3>Write or copy-paste a link here:</h3>

    <div class="form__field">
      <input id="jamesinputlink" type="text" class="form__input" size="60" pattern="https?://.+" required>
      <span class="icon"></span>
    </div>

  <p>A Youtube link or any other internet link that starts with http...</p>
  <hr>
  <h4>A title to replace the default one:</h4>

    <div class="form__field">
      <input id="jamesinputtitle" type="text" class="form__input" size="60">
    </div>

  <p>The title will display at the top of the page.</p>
  <hr>
  <h4>A description to replace the default one:</h4>

    <div class="form__field">
      <input id="jamesinputdescription" type="text" class="form__input" size="60">
    </div>

  <p>The description will display above the email capture form.</p>
  <hr>

  </form>
  <div id="jamesfinallinkdiv">
    <h3>Here is the link to your Magic Lead Capture Page:</h3>
    <p id="jamesfinallink"></p>
    <p id="jamesfinallinkcounter"></p>
    <p>&nbsp;<br>Right-click on the link to copy it, or:</p>
  </div>
  <div>
  <ul class="wrapper">
  <li class="icon copy">
    <span id="copytooltip" class="tooltip">Copy to clipboard</span>
    <span onclick="copytooltip();">📋</span>
  </li>
  <li class="icon facebook">
    <span id="shareonfacebooktooltip" class="tooltip">Share on Facebook</span>
    <span onclick="shareonfacebook();">f</span>
  </li>
</ul>
</div>

<div>
  <hr>
  <h3>If you can't see your Magic Lead Capture Page after a test:</h3>
  <p id="jamesresetlink"></p>
  <p>&nbsp;<br>Click on this link to reset your browser.</p>
</div>
</div>
<script>
var jamesfinalurl = window.location.origin+'/go';;
function copytooltip(){
  copyTextToClipboard(jamesfinalurl);
  document.getElementById('copytooltip').innerHTML = '✓ COPIED';
  setTimeout(function(){
    document.getElementById('copytooltip').innerHTML = 'Copy to clipboard';
  },5000);
}
function shareonfacebook(){
  document.getElementById('shareonfacebooktooltip').innerHTML = '✓ FACEBOOK';
  setTimeout(function(){
    document.getElementById('shareonfacebooktooltip').innerHTML = 'Share on Facebook';
  },5000);
  let url = 'https://www.facebook.com/sharer/sharer.php?u=';
  url = url + encodeURIComponent(jamesfinalurl);
  openNewTab(url);
}
function openNewTab(url) {
  let mywidth = 550;
  let myheight = 700;
  let myleft = (screen.availWidth - mywidth) / 2;
  let mytop = (screen.availHeight - myheight) / 4;
  const newTab = window.open('', 'jamesShareFacebook','height='+myheight+',left='+myleft+',top='+mytop+',width='+mywidth+',location=no,menubar=no,status=no,toolbar=no');
  newTab.focus();
  if (!newTab.location.hostname) {
    newTab.location.href = url;
  }
};
function jameslink(url){
  if(url.indexOf('http')==-1) {
    return false;
  } else {
    url = btoa(url).replaceAll('=','').replaceAll('/','_').replaceAll('+','-');
    return '?u='+url;
  }
}

  function jamesyoutube(url){
    let urls = [url];
    let i, r, rx = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
    r = urls[0].match(rx);
    if(r != null) {
      return '?v='+r[1];
    } else {
      return false;
    }
  }
  function jamesmakefinalurl(addurl){
    let addparams = '';
    let mytitle = document.getElementById('jamesinputtitle').value.trim();
    let mydescription = document.getElementById('jamesinputdescription').value.trim();
    if(mytitle){
      mytitle = 'title='+encodeURIComponent(mytitle);
      if(mydescription) { mydescription = '&description='+encodeURIComponent(mydescription); }
    } else {
      if(mydescription) { mydescription = 'description='+encodeURIComponent(mydescription); }
    }
    addparams = mytitle+mydescription;
    if(addurl) {
      if(addparams) { addparams = '&'+addparams; }
    } else {
      if(addparams) { addparams = '?'+addparams; }
    }
    return window.location.origin+''+addurl+addparams;
  }
  function jamescheckinput(){
    jamesfinalurl = jamesmakefinalurl('');
    let jamesurl = document.getElementById('jamesinputlink').value.trim();
    let islink = false;
    islink = jameslink(jamesurl);
    if (islink) { jamesfinalurl = jamesmakefinalurl(islink); }
    let isyoutube = false;
    isyoutube = jamesyoutube(jamesurl);
    if (isyoutube) { jamesfinalurl = jamesmakefinalurl(isyoutube); }

    let mynewlink = '<a href="'+jamesfinalurl+'" target="_blank">'+jamesfinalurl+'</a>';
    if (mynewlink != document.getElementById('jamesfinallink').innerHTML) {
      document.getElementById('jamesfinallink').innerHTML = mynewlink;
      document.getElementById('jamesfinallinkcounter').innerHTML = '<br>It is '+jamesfinalurl.length+' characters long.';
      if(jamesfinalurl.length>255){
        document.getElementById('jamesfinallinkcounter').innerHTML = document.getElementById('jamesfinallinkcounter').innerHTML + ' Sometimes, to be valid, a link must not be longer than 255 characters.';
      }
    }
    mynewlink = '<a href="'+window.location.origin+'?reset=1" target="_blank">'+window.location.origin+'?reset=1</a>';
    if (mynewlink != document.getElementById('jamesresetlink').innerHTML) {
      document.getElementById('jamesresetlink').innerHTML = mynewlink;
    }
    setTimeout(function(){
      jamescheckinput();
    }, 1000);
  }

  function fallbackCopyTextToClipboard(text) {
    let textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.top = "0";
    textArea.style.left = "0";
    textArea.style.position = "fixed";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      let successful = document.execCommand('copy');
      let msg = successful ? 'succès' : 'échec';
      console.log('La copie du texte avec le plan B a été un ' + msg);
    } catch (err) {
      console.error('Impossible de copier avec le plan B : ', err);
    }
    document.body.removeChild(textArea);
  }
  function copyTextToClipboard(text) {
    if (!navigator.clipboard) {
      fallbackCopyTextToClipboard(text);
      return;
    }
    navigator.clipboard.writeText(text).then(function() {
      console.log('Lien copié en mémoire !');
    }, function(err) {
      console.error('La copie du texte a échoué : ', err);
    });
  }
</script>

<style>
.wrapper {
  display: inline-flex;
  list-style: none;
}

.wrapper .icon {
  position: relative;
  background: #ffffff;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -65px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877F2;
  color: #ffffff;
}

.wrapper .copy:hover,
.wrapper .copy:hover .tooltip,
.wrapper .copy:hover .tooltip::before {
  background: #1DA1F2;
  color: #ffffff;
}

#jamesfinallink {
  word-break: break-all;
}

.jamesbody {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
  animation: fadeIn linear 5s;
  -webkit-animation: fadeIn linear 5s;
  -moz-animation: fadeIn linear 5s;
  -o-animation: fadeIn linear 5s;
  -ms-animation: fadeIn linear 5s;
}

.icon {
  font-size: 2rem;
}

.form__field {
  position: relative;
}

.form__field .icon {
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%)
}

.form__input {
  border-radius: 0.25em;
  border-style: solid;
  border-width: 2px;
  font-size: 1rem;
  padding: 0.5em 4em 0.5em 2em;
  font: inherit;
  outline: 0;
  width: 100%;
}

.form__input:valid {
  border-color: forestgreen;
}

.form__input:valid + .icon::after {
  content: '😃';
}

.form__input:invalid {
  border-color: firebrick;
}

.form__input:invalid + .icon::after {
  content: '😳';
}

</style>
<script>
  document.getElementById('jamesinputlink').focus();
  setTimeout(function(){
      jamescheckinput();
    }, 1000);
</script>