https://chatgpt.com/canvas/shared/69378ac1aa1881919e460a3e4b0295e1
UGC Academy — Einstieg
UGC Academy
Werde UGC Creator — Verkaufe Lizenzen, verdiene wiederkehrend
Praxisorientierte Kurse, Templates, Verkaufsskripte und Affiliate-Ready UGC-Pakete. Drei Lizenzstufen, die du weiterverkaufen oder selbst nutzen kannst.
Story + Call-to-action: Nutzer klicken auf Promo-Link und führen eine Aktion aus — Tracking & Payout erfolgen über Affiliate-Partner.
Was du bekommst
Videotemplates (30+)
Caption- & Hook-Skripte
Thumbnail-Mockups
Affiliate-Tracking-Anleitungen (z. B. UTM, Redirects)
Sales-Pages & E-Mail-Vorlagen für Wiederverkauf
Zum Testen: Lade ein Beispielpaket herunter oder melde dich an, um vollen Zugriff zu erhalten.
UGC Academy — Checkout
UGC Academy
Interner Checkout
Dies ist ein Platzhalter für euer internes Zahlungs-Checkout. Normalerweise leitet der "Kaufen"-Button auf eine sichere Zahlungsseite weiter (z. B. euer Payment-Provider oder ein internes Checkout-System).
Ausgewähltes Paket
—
—
Danke — Bestellung erhalten
Du erhältst in Kürze Zugang zur Academy (E-Mail mit Login-Link simuliert).
:root{
--bg:#0f1724; /* dark-blue */
--card:#0b1220;
--accent:#7dd3fc;
--muted:#94a3b8;
--glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#e6eef6; background:linear-gradient(180deg,#071025 0%, #071a2a 100%);}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{border-bottom:1px solid rgba(255,255,255,0.03);}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;margin:0}
nav a{color:var(--muted);margin-left:18px;text-decoration:none}
nav a.active{color:var(--accent)}
.hero{display:flex;gap:30px;align-items:flex-start;padding-top:32px}
.hero-left{flex:1}
.pricing{width:320px;background:var(--glass);padding:18px;border-radius:12px}
.tier{padding:12px;border-radius:10px;margin-bottom:12px;background:rgba(255,255,255,0.02)}
.tier.featured{border:1px solid rgba(125,211,252,0.12);box-shadow:0 6px 24px rgba(7,28,58,0.6)}
.price{font-size:20px;font-weight:700}
.buy-btn{background:transparent;border:2px solid var(--accent);padding:8px 12px;border-radius:8px;color:var(--accent);cursor:pointer;margin-top:10px}
.features{list-style:disc;margin-left:18px}
.how-it-works{margin-top:28px}
.content{padding-top:18px}
.example{background:rgba(255,255,255,0.02);padding:12px;border-radius:8px;margin-bottom:12px}
.cta-box{background:linear-gradient(90deg, rgba(125,211,252,0.06), rgba(16,185,129,0.03));padding:10px;border-radius:8px;margin-top:12px}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:16px;margin-top:28px;text-align:center;color:var(--muted)}
.order{background:rgba(255,255,255,0.02);padding:16px;border-radius:8px}
.hidden{display:none}
.note{display:block;margin-top:8px;color:var(--muted);font-size:12px}
/* Responsive */
@media (max-width:900px){.hero{flex-direction:column}.pricing{width:100%}}
// Simple client-side logic for demo purposes.
// IMPORTANT: Replace `YOUR_CHECKOUT_URL` with your real internal checkout endpoint.
(function(){
const buyButtons = document.querySelectorAll('.buy-btn');
const checkoutUrl = 'checkout.html'; // in production replace with YOUR_CHECKOUT_URL
function handleBuy(e){
const btn = e.currentTarget;
const price = btn.dataset.price;
const plan = btn.dataset.plan;
// If you have a backend, POST the order or generate a checkout session there.
// For demo: pass plan & price in query string to internal checkout page.
const params = new URLSearchParams({plan, price});
// if external checkout, do: window.location = 'https://your-checkout.example/create?'+params;
window.location = checkoutUrl + '?' + params.toString();
}
buyButtons.forEach(b=>b.addEventListener('click', handleBuy));
// Checkout page logic: parse query params and show summary
if(window.location.pathname.endsWith('checkout.html')){
const params = new URLSearchParams(window.location.search);
const plan = params.get('plan') || '—';
const price = params.get('price') ? ('$' + params.get('price') + ' / Monat') : '—';
const orderPlan = document.getElementById('order-plan');
const orderPrice = document.getElementById('order-price');
const confirmBtn = document.getElementById('confirm-payment');
const confirmation = document.getElementById('confirmation');
const summary = document.getElementById('order-summary');
if(orderPlan) orderPlan.textContent = plan;
if(orderPrice) orderPrice.textContent = price;
if(confirmBtn){
confirmBtn.addEventListener('click', function(){
// In real flow: call payment API, verify, then redirect to success page / grant access
summary.classList.add('hidden');
confirmation.classList.remove('hidden');
// Simulate granting access: set a flag in localStorage (for demo only)
localStorage.setItem('ugc_access', JSON.stringify({plan, price, ts:Date.now()}));
});
}
}
})();
# UGC Academy — Static multi-page site
**How to use**
1. Create a folder, e.g. `ugc-academy-site/`.
2. Create subfolder `assets/`.
3. Save the files from this combined source into the appropriate files:
- `index.html`
- `academy.html`
- `checkout.html`
- `assets/styles.css`
- `assets/script.js`
4. Open `index.html` in a browser for local testing.
**Integration**
- Replace `checkout.html` redirect in `assets/script.js` with your real checkout endpoint (e.g. Stripe, Paddle, or your internal checkout). Send the plan & price securely from your server, not via query string in production.
- After successful payment have your backend create user access and send an email with login info. The sample `checkout.html` simulates this flow.
**License & notes**
This is a starter template. Customize copy, images, and backend integration to match your product & legal/licensing requirements.