Frugends Card Builder

🖼

PNG-Dateien hierher ziehen
oder klicken zum Auswaehlen

Kartenname

ID (automatisch)

Hintergrund

Ebenen (von hinten nach vorne)

Mini-Vorschau

Fertig!

Lade deine Karte herunter.

🎨 HTML-Datei

Selbststaendige Datei mit Parallax-Animation.
Einfach im Browser oeffnen oder online stellen.

📄 Konfiguration

JSON-Datei fuer die Build-Pipeline.
Fuer Entwickler und Batch-Verarbeitung.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Frugends TCG – {{CARD_TITLE}}</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --card-w-mobile: 340px;
    --card-h-mobile: 470px;
    --card-w-desktop: 440px;
    --card-h-desktop: 608px;
    --card-radius-mobile: 18px;
    --card-radius-desktop: 22px;
    --bg-color: #0a0618;
  }
  body {
    background: var(--bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .card {
    position: relative;
    width: var(--card-w-mobile);
    height: var(--card-h-mobile);
    overflow: hidden;
    border-radius: var(--card-radius-mobile);
    transform-style: preserve-3d;
    will-change: transform;
  }
  @media (min-width: 768px) {
    .card {
      width: var(--card-w-desktop);
      height: var(--card-h-desktop);
      border-radius: var(--card-radius-desktop);
    }
  }
  .layer {
    position: absolute;
    top: 50%; left: 50%;
    will-change: transform;
    pointer-events: none;
  }
  .card-shine {
    position: absolute; inset: 0; z-index: 20;
    pointer-events: none; border-radius: inherit;
    background: radial-gradient(
      ellipse at var(--shine-x, 50%) var(--shine-y, 50%),
      rgba(255,255,255,0.1) 0%, transparent 60%
    );
    mix-blend-mode: overlay;
  }
  .gyro-prompt {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 16px 20px;
    background: rgba(20,12,40,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .gyro-prompt.visible { transform: translateY(0); }
  .gyro-prompt p {
    color: rgba(255,255,255,0.8);
    font-size: 13px;
    flex: 1;
    margin-right: 12px;
  }
  .gyro-prompt button {
    padding: 8px 20px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .gyro-prompt button:active { background: rgba(255,255,255,0.3); }
  .debug {
    position: fixed; top: 8px; left: 8px;
    color: rgba(255,255,255,0.5); font-size: 11px;
    font-family: monospace; z-index: 200;
    display: none;
  }
</style>
</head>
<body>
<div class="card" id="card">
  <div class="card-shine" id="shine"></div>
</div>
<div class="gyro-prompt" id="gyroPrompt">
  <p>Kippe dein Handy um den 3D-Effekt zu sehen</p>
  <button id="gyroBtn">Aktivieren</button>
</div>
<div class="debug" id="debug"></div>
<scr""ipt>
var CARD = {{CARD_CONFIG_JSON}};
var MOTION = {
  tiltMax: 8, lerp: 0.08, gyroLerp: 0.06,
  perspective: 800, shine: { positionFactor: 30 },
};
var DEBUG = location.search.includes('debug');
if (DEBUG) document.getElementById('debug').style.display = 'block';
var root = document.documentElement.style;
var dims = CARD.card || {};
root.setProperty('--card-w-mobile',       (dims.widthMobile || 340) + 'px');
root.setProperty('--card-h-mobile',       (dims.heightMobile || 470) + 'px');
root.setProperty('--card-w-desktop',      (dims.widthDesktop || 440) + 'px');
root.setProperty('--card-h-desktop',      (dims.heightDesktop || 608) + 'px');
root.setProperty('--card-radius-mobile',  (dims.borderRadiusMobile || 18) + 'px');
root.setProperty('--card-radius-desktop', (dims.borderRadiusDesktop || 22) + 'px');
root.setProperty('--bg-color',            CARD.background || '#0a0618');
var cardEl  = document.getElementById('card');
var shineEl = document.getElementById('shine');
var dbg     = document.getElementById('debug');
var layerEls = [];
CARD.layers.forEach(function(layer) {
  var img = document.createElement('img');
  img.className = 'layer';
  img.id = 'layer-' + layer.id;
  img.alt = '';
  img.src = layer._dataUri || layer.file;
  var h = layer.html || {};
  img.style.width    = h.width    || '100%';
  img.style.height   = h.height   || '100%';
  img.style.zIndex   = layer.zIndex;
  if (h.objectFit) img.style.objectFit    = h.objectFit;
  if (h.blendMode) img.style.mixBlendMode = h.blendMode;
  var oy = (layer.type === 'parallax' && h.offsetY) ? h.offsetY : 0;
  img.style.transform = 'translate(-50%, calc(-50% + ' + oy + 'px))';
  cardEl.insertBefore(img, shineEl);
  layerEls.push({ el: img, config: layer });
});
var tX = 0, tY = 0, cX = 0, cY = 0;
var activeLerp = MOTION.lerp;
var mode = 'idle';
function pointerToCard(cx, cy) {
  var r = cardEl.getBoundingClientRect();
  return [
    Math.max(-1, Math.min(1, ((cx - r.left) / r.width  - 0.5) * 2)),
    Math.max(-1, Math.min(1, ((cy - r.top)  / r.height - 0.5) * 2)),
  ];
}
var lastTouchAt = 0;
document.addEventListener('mousemove', function(e) {
  if (Date.now() - lastTouchAt < 1000) return;
  mode = 'mouse'; activeLerp = MOTION.lerp;
  var p = pointerToCard(e.clientX, e.clientY);
  tX = p[0]; tY = p[1];
});
document.addEventListener('mouseleave', function() {
  if (mode === 'mouse') { tX = 0; tY = 0; }
});
document.addEventListener('touchstart', function(e) {
  lastTouchAt = Date.now();
  if (mode === 'gyro') return;
  mode = 'touch'; activeLerp = MOTION.lerp;
  var p = pointerToCard(e.touches[0].clientX, e.touches[0].clientY);
  tX = p[0]; tY = p[1];
}, { passive: true });
document.addEventListener('touchmove', function(e) {
  lastTouchAt = Date.now();
  if (mode === 'gyro') return;
  mode = 'touch';
  var p = pointerToCard(e.touches[0].clientX, e.touches[0].clientY);
  tX = p[0]; tY = p[1];
}, { passive: true });
document.addEventListener('touchend', function() {
  lastTouchAt = Date.now();
  if (mode === 'touch') { tX = 0; tY = 0; mode = 'idle'; }
});
var gyroPermission = false, gyroHasData = false;
function onDeviceOrientation(e) {
  var beta = e.beta, gamma = e.gamma;
  if (beta === null && gamma === null) return;
  gyroHasData = true; mode = 'gyro'; activeLerp = MOTION.gyroLerp;
  tX = Math.max(-1, Math.min(1, (gamma || 0) / 30));
  tY = Math.max(-1, Math.min(1, ((beta || 0) - 45) / 30));
}
function requestiOSGyro() {
  if (typeof DeviceOrientationEvent.requestPermission !== 'function') return;
  DeviceOrientationEvent.requestPermission()
    .then(function(state) {
      if (state === 'granted') {
        gyroPermission = true;
        window.addEventListener('deviceorientation', onDeviceOrientation, true);
        document.getElementById('gyroPrompt').classList.remove('visible');
      }
    }).catch(function() {});
}
function initGyro() {
  if (typeof DeviceOrientationEvent === 'undefined') return;
  if (typeof DeviceOrientationEvent.requestPermission === 'function') {
    var prompt = document.getElementById('gyroPrompt');
    var btn = document.getElementById('gyroBtn');
    setTimeout(function() { prompt.classList.add('visible'); }, 800);
    btn.addEventListener('click', requestiOSGyro);
  } else {
    window.addEventListener('deviceorientation', onDeviceOrientation, true);
    setTimeout(function() {
      if (!gyroHasData && DEBUG) { dbg.textContent = 'Gyro: no data (need HTTPS?)'; }
    }, 2000);
  }
}
initGyro();
function animate() {
  cX += (tX - cX) * activeLerp;
  cY += (tY - cY) * activeLerp;
  var x = Math.abs(cX) < 0.001 ? 0 : cX;
  var y = Math.abs(cY) < 0.001 ? 0 : cY;
  for (var i = 0; i < layerEls.length; i++) {
    var entry = layerEls[i];
    var h = entry.config.html || {};
    if (entry.config.type === 'parallax') {
      var amp = h.amp || 0;
      var oy  = h.offsetY || 0;
      entry.el.style.transform = 'translate(calc(-50% + ' + (x * amp) + 'px), calc(-50% + ' + (y * amp + oy) + 'px))';
    } else {
      entry.el.style.transform = 'translate(-50%, -50%)';
    }
  }
  cardEl.style.transform = 'perspective(' + MOTION.perspective + 'px) rotateX(' + (-y * MOTION.tiltMax) + 'deg) rotateY(' + (x * MOTION.tiltMax) + 'deg)';
  shineEl.style.setProperty('--shine-x', (50 + x * MOTION.shine.positionFactor) + '%');
  shineEl.style.setProperty('--shine-y', (50 + y * MOTION.shine.positionFactor) + '%');
  if (DEBUG) dbg.textContent = 'mode:' + mode + ' x:' + x.toFixed(2) + ' y:' + y.toFixed(2) + ' gyro:' + gyroHasData;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</scr""ipt>
</body>
</html>

Ebenen (von hinten nach vorne)

Mini-Vorschau

Fertig!

🎨 HTML-Datei

📄 Konfiguration

📦 Alle Karten als ZIP