ecardilly Design Components

Orderpage 

<div class="template--orderpage">
    <div class="container flow--three">
        <div class="row">
            <div class="m_grid-4 --no_desktop text--center">
                <strong class="font--medium">Bestellnummer #64189</strong>
            </div>

            <div class="d_grid-6 m_grid-4 op_ecard_wrap">
                <div class="ecard_display_wrap">
                    <div class="media_ecard --processing">
                        <video id="videocard" src="https://ucarecdn.com/166be0c3-a0e3-45b3-b9da-7c9f34896522/" muted autoplay loop playsinline width="90" height="160">
                        </video>

                        <button type="button" class="toggle_mute_btn" data-toggle-mute>
                            <i class="ph-bold ph-speaker-simple-slash"></i>
                        </button>

                        <div class="media_notice">
                            <i class="ph-bold ph-sparkle"></i>
                            <p>Deine eCard entsteht gerade. Lade die Seite in 1–2 Minuten nochmal!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d_grid-5 m_grid-4">
                <div class="cta_wrap --no_desktop">
                    <button type="button" data-open-bottom-sheet="orderpage" class="btn btn--primary _btn--large">
                        <i class="ph-bold ph-share-fat"></i>
                        <span>Teilen &amp; Versenden</span>
                    </button>
                </div>

                <div class="op_main bottom_sheet_wrap flow--onehalf" data-bottom-sheet="orderpage">
                    <div class="op_title flow--half --no_smart">
                        <strong class="font--medium">Bestellnummer #64189</strong>
                        <h1 class="h3">Einladung Erster Geburtstag - Lustige Zitrone</h1>
                    </div>

                    <div class="op_action_list bottom_sheet">
                        <div class="btn_module">
                            <label>
                                <span>Teilen &amp; Versenden</span>
                                <a href="#help" class="icon_btn">
                                    <i class="ph-bold ph-question"></i>
                                </a>
                            </label>
                            <div class="btn_pair">
                                <button type="button" class="btn">
                                    <i class="ph-bold ph-whatsapp-logo"></i>
                                    Whatsapp
                                </button>

                                <button type="button" class="btn">
                                    <i class="ph-bold ph-link"></i>
                                    Link kopieren
                                </button>
                            </div>
                            <p class="tip --no_smart"><strong>Tipp</strong>: Öffne diese Seite am Handy und teile die Karte mit einem Klick per WhatsApp.</p>
                        </div>

                        <div class="btn_module">
                            <label>Speichern</label>
                            <div class="btn_pair">
                                <button type="button" class="btn">
                                    <i class="ph-bold ph-download-simple"></i>
                                    Download
                                </button>

                                <button type="button" class="btn">
                                    <i class="ph-bold ph-file"></i>
                                    PDF
                                </button>
                            </div>
                        </div>

                        <div class="btn_module">
                            <label>Drucken</label>
                            <div class="btn_pair">
                                <button type="button" class="btn">
                                    <i class="ph-bold ph-printer"></i>
                                    Drucken
                                </button>

                                <button type="button" class="btn">
                                    <i class="ph-bold ph-package"></i>
                                    Online Druck
                                </button>
                            </div>
                        </div>

                        <div class="btn_module">
                            <label><span>Bearbeiten</span></label>
                            <div class="btn_pair">
                                <button type="button" class="btn" data-showmodal="mymodal">
                                    <i class="ph-bold ph-pencil-simple-line"></i>
                                    Bearbeiten
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row --center" id="callout">
            <div class="card card--callout d_grid-9 flow--two text--m_center">
                <a href="#callout" class="sticker">
                    <span>NEU</span>
                </a>

                <h1 class="h1">Jetzt anmelden &amp; kostenlos eCardilly Gold erleben:</h1>

                <ul class="list list--checkmarks">
                    <li><strong>eCard bearbeiten:</strong>
                        Deine Karte jederzeit bearbeiten</li>
                    <li><strong>Event Seite:</strong>
                        Deine Gäste mit weiteren Infos begeistern</li>
                    <li><strong>Location Link:</strong> Den Weg zur Location verlinken</li>
                    <li><strong>Wunschlisten:</strong>
                        Geschenklisten und Musiktipps einfach sammeln</li>
                    <li><strong>Fotowand:</strong>
                        Alle Erinnerungen auf deiner digitalen Fotowand festhalten</li>
                </ul>

                <div class="btn_wrap">
                    <a href="#" class="btn btn--large">Login</a>
                    <a href="#" class="btn btn--large btn--primary">Konto erstellen</a>
                </div>
            </div>
        </div>
    </div>
</div>

<dialog data-target="mymodal" closedby="closerequest">
    <h1 class="h4 text--center">Deine Bearbeitungszeit von 24h ist abgelaufen
        &mdash; aber kein Problem!</h1>

    <p class="font--medium text--center">Mit der Bearbeitungsfunktion kannst du
        deine Karte unkompliziert anpassen – ganz flexibel, wann immer du
        möchtest - innerhalb 90 Tag nach Kauf deiner eCard.</p>

    <div class="btn_wrap --between">
        <button type="button" class="btn btn--secondary" data-closemodal>
            Abbrechen
        </button>
        <a href="#" class="btn btn--primary">
            <i class="ph-bold ph-lock-simple-open"></i>
            Bearbeitung freischalten
        </a>
    </div>
</dialog>
 
<div class="template--orderpage">
	<div class="container flow--three">
		<div class="row">
			<div class="m_grid-4 --no_desktop text--center">
				<strong class="font--medium">Bestellnummer #64189</strong>
			</div>

			<div class="d_grid-6 m_grid-4 op_ecard_wrap">
				<div class="ecard_display_wrap">
					{{> @media_ecard useVideo=true hasSound=true isConverting=true }}
				</div>
			</div>
			<div class="d_grid-5 m_grid-4">
				{{!-- MOBILE --}}
				<div class="cta_wrap --no_desktop">
					<button type="button" data-open-bottom-sheet="orderpage" class="btn btn--primary _btn--large">
						<i class="ph-bold ph-share-fat"></i>
						<span>Teilen &amp; Versenden</span>
					</button>
				</div>

				{{!-- DESKTOP --}}
				<div class="op_main bottom_sheet_wrap flow--onehalf" data-bottom-sheet="orderpage">
					<div class="op_title flow--half --no_smart">
						<strong class="font--medium">Bestellnummer #64189</strong>
						<h1 class="h3">Einladung Erster Geburtstag - Lustige Zitrone</h1>
					</div>

					<div class="op_action_list bottom_sheet">
						<div class="btn_module">
							<label>
								<span>Teilen &amp; Versenden</span>
								<a href="#help" class="icon_btn">
									<i class="ph-bold ph-question"></i>
								</a>
							</label>
							<div class="btn_pair">
								<button type="button" class="btn">
									<i class="ph-bold ph-whatsapp-logo"></i>
									Whatsapp
								</button>

								<button type="button" class="btn">
									<i class="ph-bold ph-link"></i>
									Link kopieren
								</button>
							</div>
							<p class="tip --no_smart"><strong>Tipp</strong>: Öffne diese Seite am Handy und teile die Karte mit einem Klick per WhatsApp.</p>
						</div>


						<div class="btn_module">
							<label>Speichern</label>
							<div class="btn_pair">
								<button type="button" class="btn">
									<i class="ph-bold ph-download-simple"></i>
									Download
								</button>

								<button type="button" class="btn">
									<i class="ph-bold ph-file"></i>
									PDF
								</button>
							</div>
						</div>

						<div class="btn_module">
							<label>Drucken</label>
							<div class="btn_pair">
								<button type="button" class="btn">
									<i class="ph-bold ph-printer"></i>
									Drucken
								</button>

								<button type="button" class="btn">
									<i class="ph-bold ph-package"></i>
									Online Druck
								</button>
							</div>
						</div>

						<div class="btn_module">
							<label><span>Bearbeiten</span></label>
							<div class="btn_pair">
								<button type="button" class="btn" data-showmodal="mymodal">
									<i class="ph-bold ph-pencil-simple-line"></i>
									Bearbeiten
								</button>
							</div>
							{{!-- <p class="tip"><strong>Hinweis</strong>: Karte ändern? Innerhalb 24h kostenlos. Ändert sich später noch etwas? Kein Problem! Mit wenigen Klicks kannst du die Bearbeitung erneut aktivieren. (Registrierung erforderlich)</p> --}}
						</div>
					</div>
				</div>
			</div>
		</div>

		{{> @optin_callout}}
	</div>
</div>


{{> @modal auto_open=false}}
 
{
  "isOrderPage": true
}

No notes defined.