Strumenti

Badge "Powered by L'Amanuense"

Copia il codice qui sotto e incollalo nel footer di ferrara-stay-flow.base44.app (o qualsiasi altro sito cliente). Non richiede React né dipendenze esterne.

Anteprima
Codice HTML da copiare
<!-- Powered by L'Amanuense — badge animato -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400&display=swap" rel="stylesheet">
<div id="dms-badge"></div>
<script>
(function() {
  var el = document.getElementById('dms-badge');
  var fg = '#1a1410';
  var accent = '#C07A48';
  var border = 'rgba(40,30,18,0.2)';
  var muted = 'rgba(40,30,18,0.45)';

  el.style.cssText = 'display:inline-flex;align-items:center;gap:0.5em;font-family:sans-serif;font-size:12px;letter-spacing:0.04em;';

  var label = document.createElement('span');
  label.textContent = 'Powered by';
  label.style.color = muted;
  el.appendChild(label);

  var link = document.createElement('a');
  link.href = 'https://digitalmonkstudio.com';
  link.target = '_blank';
  link.rel = 'noopener noreferrer';
  link.style.cssText = 'text-decoration:none;display:inline-flex;align-items:baseline;font-family:"Bodoni Moda",Didot,Georgia,serif;font-size:15px;letter-spacing:0.15em;color:'+fg+';transition:opacity 0.2s;overflow:hidden;';
  link.onmouseenter = function(){ this.style.opacity='0.7'; };
  link.onmouseleave = function(){ this.style.opacity='1'; };

  // Box L'A
  var box = document.createElement('span');
  box.style.cssText = 'display:inline-flex;align-items:baseline;border:1px solid '+border+';padding:0.12em 0.05em 0.06em 0.15em;border-radius:2px;white-space:nowrap;transition:border-color 0.5s;';
  box.innerHTML = 'L<span style="display:inline-block;width:0.24em;margin:0 0.02em;position:relative;top:-0.55em;"><svg viewBox=\'0 0 10 16\' style=\'display:block;width:100%;height:auto;\'><path d=\'M5 0 C6.6 4.5 10 8.5 10 11 A5 5 0 1 1 0 11 C0 8.5 3.4 4.5 5 0 Z\' fill=\''+accent+'\'/></svg></span>A';

  // Suffix animated
  var suffix = document.createElement('span');
  suffix.style.cssText = 'display:inline-flex;align-items:baseline;overflow:hidden;width:0;transition:width 0.8s cubic-bezier(0.4,0,0.2,1);margin-left:0.16em;';

  var manuense = document.createElement('span');
  manuense.textContent = 'MANUENSE';
  manuense.style.cssText = 'white-space:nowrap;opacity:0;transition:opacity 0.6s;';

  var aiLetter = document.createElement('span');
  aiLetter.textContent = 'I';
  aiLetter.style.cssText = 'position:absolute;opacity:0;transition:opacity 0.5s;';

  suffix.appendChild(aiLetter);
  suffix.appendChild(manuense);
  link.appendChild(box);
  link.appendChild(suffix);
  el.appendChild(link);

  // Animate: L'A → L'AI → L'AMANUENSE
  setTimeout(function() { box.style.opacity='1'; }, 100);
  setTimeout(function() {
    var iW = aiLetter.offsetWidth || 10;
    suffix.style.width = iW + 'px';
    aiLetter.style.opacity = '1';
  }, 900);
  setTimeout(function() {
    var wW = manuense.offsetWidth || 90;
    suffix.style.width = (wW) + 'px';
    aiLetter.style.opacity = '0';
    manuense.style.opacity = '1';
  }, 2000);
  setTimeout(function() {
    box.style.border = '1px solid '+border;
  }, 2600);
})();
</script>
Il badge è autonomo, non richiede framework. Funziona su qualsiasi sito HTML, WordPress, Webflow, Wix ecc. L'animazione replica quella del logo principale del sito.