|
|
<!DOCTYPE html>
|
|
|
<html lang="de">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<meta name="robots" content="noindex">
|
|
|
<title>drop.two</title>
|
|
|
<meta name="description" content="9:16 rein. 9:16 und 4:5 raus.">
|
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600&family=Instrument+Serif:ital@1&display=swap" rel="stylesheet">
|
|
|
<!-- drop.two landing page, /var/www/updates/droptwo (droptwo.zielke.studio).
|
|
|
Source: patchcord repo, server/droptwo/. Version from appcast.xml. -->
|
|
|
<style>
|
|
|
:root {
|
|
|
--dark: #0B0B0C;
|
|
|
--surface: #141416;
|
|
|
--light: #F5F5F4;
|
|
|
--mid: #B8B5B0;
|
|
|
--gray: #8A8886;
|
|
|
--rule: #26262a;
|
|
|
--gold: #C8A96A;
|
|
|
--gold-hi: #E4C98F;
|
|
|
}
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
html { background: var(--dark); }
|
|
|
body {
|
|
|
color: var(--light);
|
|
|
font-family: "Kanit", "Poppins", -apple-system, sans-serif;
|
|
|
font-weight: 300;
|
|
|
line-height: 1.65;
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
padding: 0 16px 64px;
|
|
|
background:
|
|
|
radial-gradient(38vw 30vw at 85% 12%, rgba(200, 169, 106, .16), transparent 70%),
|
|
|
radial-gradient(30vw 30vw at 0% 60%, rgba(200, 169, 106, .07), transparent 70%),
|
|
|
var(--dark);
|
|
|
background-repeat: no-repeat;
|
|
|
}
|
|
|
main { max-width: 1000px; margin: 0 auto; }
|
|
|
|
|
|
nav { display: flex; justify-content: space-between; align-items: center; padding: 26px 0; }
|
|
|
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 1.05rem; color: var(--light); text-decoration: none; }
|
|
|
.brand svg { width: 30px; height: 30px; }
|
|
|
nav a.back { font-size: .85rem; color: var(--gray); text-decoration: none; }
|
|
|
nav a.back:hover { color: var(--light); }
|
|
|
|
|
|
/* Hero */
|
|
|
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 64px 0 88px; }
|
|
|
.eyebrow { font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
|
|
|
h1 { font-size: clamp(2.5rem, 5.5vw, 3.8rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; }
|
|
|
.em {
|
|
|
font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
|
|
|
background: linear-gradient(90deg, var(--gold), var(--gold-hi), var(--gold));
|
|
|
background-size: 200% 100%;
|
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
|
padding: 0 .16em; margin: 0 -.16em;
|
|
|
-webkit-box-decoration-break: clone; box-decoration-break: clone;
|
|
|
animation: shimmer 6s ease-in-out infinite;
|
|
|
}
|
|
|
@keyframes shimmer { 50% { background-position: 100% 0; } }
|
|
|
.lede { color: var(--mid); font-size: 1.08rem; max-width: 30em; margin-bottom: 34px; }
|
|
|
.download {
|
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
|
background: var(--gold); color: var(--dark); text-decoration: none; font-weight: 500;
|
|
|
padding: 13px 28px; border-radius: 999px;
|
|
|
box-shadow: 0 10px 34px rgba(200, 169, 106, .28);
|
|
|
transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
|
|
|
}
|
|
|
.download:hover { background: var(--gold-hi); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(200, 169, 106, .38); }
|
|
|
.version { font-size: .8rem; color: var(--gray); margin-top: 14px; min-height: 1.2em; }
|
|
|
|
|
|
/* Demo: 9:16 master, the 4:5 frame lands on it, the 4:5 cut slides out. */
|
|
|
.demo { display: flex; align-items: center; justify-content: center; gap: 26px; position: relative; }
|
|
|
.frame { position: relative; border-radius: 18px; overflow: hidden; background: #1a1a1d; }
|
|
|
.master { width: 176px; aspect-ratio: 9 / 16; border: 3px solid var(--light); }
|
|
|
.cut { width: 176px; aspect-ratio: 4 / 5; border: 3px solid var(--gold); box-shadow: 0 0 40px rgba(200, 169, 106, .35); animation: slide 5s ease-in-out infinite; }
|
|
|
.scene { position: absolute; inset: 0; }
|
|
|
.master .scene { background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); }
|
|
|
/* The 4:5 cut shows the middle of the same scene (full width, centered). */
|
|
|
.cut .scene { inset: -21.1% 0; background: linear-gradient(180deg, #2b2f45 0%, #7a5a48 45%, #d19b5b 62%, #2a221c 100%); }
|
|
|
.sun { position: absolute; left: 50%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #ffd9a0; box-shadow: 0 0 40px #ffcf87; transform: translateX(-50%); animation: sun 5s ease-in-out infinite; }
|
|
|
.master .sun { top: 36%; }
|
|
|
.cut .sun { top: 36%; }
|
|
|
.person { position: absolute; bottom: 22%; left: 50%; width: 30%; height: 34%; transform: translateX(-50%); background: #151418; border-radius: 40% 40% 12% 12% / 30% 30% 10% 10%; }
|
|
|
.person::before { content: ""; position: absolute; top: -34%; left: 50%; width: 62%; aspect-ratio: 1; transform: translateX(-50%); background: #151418; border-radius: 50%; }
|
|
|
.crop {
|
|
|
position: absolute; left: 0; right: 0; top: 50%; aspect-ratio: 4 / 5; transform: translateY(-50%);
|
|
|
border: 3px solid var(--gold); border-radius: 12px;
|
|
|
box-shadow: 0 0 0 999px rgba(11, 11, 12, .55);
|
|
|
animation: crop 5s ease-in-out infinite;
|
|
|
}
|
|
|
.label { position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; font-size: .78rem; letter-spacing: .12em; color: var(--gray); }
|
|
|
.wrap-master, .wrap-cut { position: relative; }
|
|
|
.arrow { color: var(--gold); font-size: 1.6rem; animation: nudge 5s ease-in-out infinite; }
|
|
|
|
|
|
@keyframes crop {
|
|
|
0%, 12% { opacity: 0; transform: translateY(-50%) scale(1.25); }
|
|
|
26%, 88% { opacity: 1; transform: translateY(-50%) scale(1); }
|
|
|
100% { opacity: 0; transform: translateY(-50%) scale(1); }
|
|
|
}
|
|
|
@keyframes slide {
|
|
|
0%, 30% { opacity: 0; transform: translateX(-40px) scale(.9); }
|
|
|
44%, 88% { opacity: 1; transform: translateX(0) scale(1); }
|
|
|
100% { opacity: 0; transform: translateX(0) scale(1); }
|
|
|
}
|
|
|
@keyframes nudge { 0%, 30% { opacity: .2; transform: translateX(-6px); } 44%, 88% { opacity: 1; transform: none; } 100% { opacity: .2; } }
|
|
|
@keyframes sun { 50% { transform: translateX(-50%) translateY(-6%); } }
|
|
|
|
|
|
/* Filename */
|
|
|
.file {
|
|
|
margin: 0 auto; max-width: 760px; padding: 28px; border-radius: 20px;
|
|
|
background: var(--surface); border: 1px solid var(--rule);
|
|
|
font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(.8rem, 2.2vw, 1.05rem);
|
|
|
}
|
|
|
.file .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
|
|
|
.file .in { color: var(--light); }
|
|
|
.seg { padding: 2px 6px; border-radius: 6px; }
|
|
|
.seg.project { background: rgba(200, 169, 106, .18); color: var(--gold-hi); }
|
|
|
.seg.format { background: rgba(245, 245, 244, .1); }
|
|
|
.seg.new { background: var(--gold); color: var(--dark); }
|
|
|
.file .to { color: var(--gold); }
|
|
|
.file .out { display: grid; gap: 6px; color: var(--mid); }
|
|
|
.legend { margin-top: 16px; font-family: "Kanit", sans-serif; font-size: .85rem; color: var(--gray); }
|
|
|
|
|
|
/* Steps & facts */
|
|
|
section.how { padding: 88px 0 24px; }
|
|
|
h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 26px; }
|
|
|
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 56px; }
|
|
|
.step { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); transition: border-color .15s ease, transform .15s ease; }
|
|
|
.step:hover { border-color: rgba(200, 169, 106, .5); transform: translateY(-2px); }
|
|
|
.step .num { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 2.4rem; line-height: 1; color: var(--gold); display: block; margin-bottom: 12px; }
|
|
|
.step h3 { font-weight: 500; font-size: 1.05rem; margin-bottom: 4px; }
|
|
|
.step p { color: var(--mid); font-size: .92rem; }
|
|
|
.facts { display: flex; flex-wrap: wrap; gap: 10px; }
|
|
|
.fact { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); color: var(--mid); font-size: .88rem; }
|
|
|
.fact b { color: var(--light); font-weight: 400; }
|
|
|
|
|
|
/* Info */
|
|
|
.info { max-width: 560px; margin: 0 auto; padding: 72px 0 0; }
|
|
|
.info h2 { margin-bottom: 24px; }
|
|
|
dl { display: grid; gap: 24px; }
|
|
|
dt { font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin-bottom: 4px; }
|
|
|
dd { color: var(--mid); }
|
|
|
dd strong { color: var(--light); font-weight: 400; }
|
|
|
footer { margin-top: 56px; font-size: .78rem; color: var(--gray); }
|
|
|
|
|
|
@media (max-width: 800px) {
|
|
|
.hero { grid-template-columns: 1fr; gap: 64px; padding-top: 32px; }
|
|
|
.master, .cut { width: 132px; }
|
|
|
.steps { grid-template-columns: 1fr; }
|
|
|
}
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
*, *::before, *::after { animation: none !important; }
|
|
|
.crop, .cut { opacity: 1; }
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<main>
|
|
|
<nav>
|
|
|
<a class="brand" href="./">
|
|
|
<svg viewBox="0 0 1024 1024" aria-hidden="true">
|
|
|
<rect x="310" y="152" width="404" height="718" rx="44" fill="none" stroke="#F5F5F4" stroke-width="44"/>
|
|
|
<rect x="328" y="281" width="368" height="460" rx="26" fill="#C8A96A"/>
|
|
|
</svg>
|
|
|
drop.two
|
|
|
</a>
|
|
|
<a class="back" href="https://apps.zielke.studio/">← Alle Apps</a>
|
|
|
</nav>
|
|
|
|
|
|
<section class="hero">
|
|
|
<div>
|
|
|
<p class="eyebrow">Beta · für macOS</p>
|
|
|
<h1>9:16 rein. <span class="em">9:16 und 4:5 raus.</span></h1>
|
|
|
<p class="lede">Fertige Hochkant-Master reinziehen – drop.two schneidet die 4:5-Fassung sauber aus der Mitte und legt beide ordentlich im Projektordner ab. Keine Timeline, kein Export-Dialog.</p>
|
|
|
<a class="download" href="drop.two-latest.dmg">Für macOS laden <span aria-hidden="true">↓</span></a>
|
|
|
<p class="version" id="version"></p>
|
|
|
</div>
|
|
|
|
|
|
<div class="demo" aria-label="Animation: aus einem 9:16-Video entsteht ein 4:5-Ausschnitt">
|
|
|
<div class="wrap-master">
|
|
|
<div class="frame master">
|
|
|
<div class="scene"><div class="sun"></div><div class="person"></div></div>
|
|
|
<div class="crop"></div>
|
|
|
</div>
|
|
|
<span class="label">9×16</span>
|
|
|
</div>
|
|
|
<span class="arrow" aria-hidden="true">→</span>
|
|
|
<div class="wrap-cut">
|
|
|
<div class="frame cut">
|
|
|
<div class="scene"><div class="sun"></div><div class="person"></div></div>
|
|
|
</div>
|
|
|
<span class="label">4×5</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<div class="file" aria-label="Beispiel: aus SOMOS-9x16-v3-DE.mp4 werden zwei Dateien im Ordner SOMOS">
|
|
|
<div class="row">
|
|
|
<span class="in"><span class="seg project">SOMOS</span>-<span class="seg format">9x16</span>-v3-DE.mp4</span>
|
|
|
<span class="to">→</span>
|
|
|
<span class="out">
|
|
|
<span><span class="seg project">SOMOS</span>/SOMOS-9x16-v3-DE.mp4</span>
|
|
|
<span><span class="seg project">SOMOS</span>/SOMOS-<span class="seg new">4x5</span>-v3-DE.mp4</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
<p class="legend">Das Projekt steht im Dateinamen: <code>[Projekt]-[Format]-[Version]-[Sprache]</code>. drop.two liest von rechts, damit auch Projekte mit Bindestrich heil bleiben.</p>
|
|
|
</div>
|
|
|
|
|
|
<section class="how">
|
|
|
<h2>So einfach geht's</h2>
|
|
|
<div class="steps">
|
|
|
<div class="step"><span class="num">1</span><h3>Reinziehen</h3><p>Eine oder gleich viele 9:16-Dateien per Drag & Drop – oder im Dialog auswählen.</p></div>
|
|
|
<div class="step"><span class="num">2</span><h3>Erkannt</h3><p>drop.two liest Projekt, Version und Sprache aus dem Namen und prüft das Seitenverhältnis.</p></div>
|
|
|
<div class="step"><span class="num">3</span><h3>Abgelegt</h3><p>Original und 4:5-Fassung landen zusammen im Projektordner. Fertig zum Weitergeben.</p></div>
|
|
|
</div>
|
|
|
<div class="facts">
|
|
|
<span class="fact"><b>ProRes</b> bleibt ProRes</span>
|
|
|
<span class="fact"><b>Ton</b> ohne Neukodierung</span>
|
|
|
<span class="fact"><b>Volle Breite</b>, mittig beschnitten</span>
|
|
|
<span class="fact"><b>1080×1920</b> → 1080×1350</span>
|
|
|
<span class="fact"><b>Fehler</b> werden gezeigt, nicht verschluckt</span>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
<section class="info">
|
|
|
<h2>Loslegen</h2>
|
|
|
<dl>
|
|
|
<div>
|
|
|
<dt>Installation</dt>
|
|
|
<dd>DMG öffnen, <strong>drop.two</strong> in den Programme-Ordner ziehen. Beim ersten Start kann macOS kurz prüfen – das dauert einen Moment und passiert nur einmal.</dd>
|
|
|
</div>
|
|
|
<div>
|
|
|
<dt>Updates</dt>
|
|
|
<dd>Kommen automatisch. Die App meldet sich, wenn eine neue Version bereitsteht. Diese Seite brauchst du danach nicht mehr.</dd>
|
|
|
</div>
|
|
|
<div>
|
|
|
<dt>Voraussetzung</dt>
|
|
|
<dd>macOS 13 oder neuer.</dd>
|
|
|
</div>
|
|
|
<div>
|
|
|
<dt>Fehler gefunden?</dt>
|
|
|
<dd>Kurze Nachricht an Samuel oder an <a href="mailto:app-feedback@zielke.studio" style="color: var(--light)">app-feedback@zielke.studio</a> – am besten mit dem Dateinamen, bei dem es geklemmt hat.</dd>
|
|
|
</div>
|
|
|
</dl>
|
|
|
<footer>Interne Beta · bitte nicht weitergeben</footer>
|
|
|
</section>
|
|
|
</main>
|
|
|
|
|
|
<script>
|
|
|
// Version from the appcast: one source of truth.
|
|
|
fetch("appcast.xml")
|
|
|
.then(function (r) { return r.ok ? r.text() : Promise.reject(); })
|
|
|
.then(function (t) {
|
|
|
var doc = new DOMParser().parseFromString(t, "application/xml");
|
|
|
var items = doc.getElementsByTagName("item");
|
|
|
if (!items.length) return;
|
|
|
var el = items[0].getElementsByTagName("sparkle:shortVersionString")[0]
|
|
|
|| items[0].getElementsByTagName("title")[0];
|
|
|
if (el) document.getElementById("version").textContent = "Version " + el.textContent.trim() + " · macOS 13+";
|
|
|
})
|
|
|
.catch(function () { /* stay quiet, the link works anyway */ });
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
