ecardilly Design Components

Event Show 

<section class="form_section container">
    <div class="row">
        <div class="d_grid-12 rte">
            <h1 class="h1 --nowrap">Dein Event</h1>
            <p>Hier gestaltest du deine persönliche Eventseite.</p>
        </div>
    </div>
</section>

<section class="form_section_navigation">
    <div class="container">
        <div class="form_actions">
            <button type="button" class="btn btn--secondary">
                <i class="ph-bold ph-floppy-disk"></i>
                Speichern
            </button>

            <a href="/components/preview/eventpage--preview" class="btn btn--primary">
                <i class="ph-bold ph-eye"></i>
                Vorschau
            </a>
        </div>
    </div>
</section>

<section class="form_section container">
    <div class="row --center">
        <div class="d_grid-8 m_grid-4 flow--one">
            <div class="event_form_header">
                <h4 class="h4">Grundeinstellungen</h4>
            </div>

            <div class="form_set">
                <label for="title">Event-Titel</label>
                <input type="text" name="title" id="title" placeholder="z.B. Ich werde 37" />
            </div>

            <div class="form_set">
                <label for="description">Beschreibung <em>(optional)</em></label>
                <textarea name="description" id="description" placeholder="z.B. Wir feiern meinen 37. Geburtstag auf..." rows="4"></textarea>
            </div>

            <div class="form_set">
                <label for="switch-details" class="label--switch">
                    <input type="checkbox" name="switch-details" id="switch-details" data-switch-label="Status: Öffentlich" data-label="Status: Entwurf" />
                    <div class="fakebox"></div>
                    <span>Status: Entwurf</span>
                </label>
            </div>
        </div>

        <div class="event_ecard_wrap d_grid-4 m_grid-3">

            <div class="media_placeholder" data-showmodal="cover_select">
                <div class="cover_placeholder">
                    <i class="ph ph-image"></i>
                    <strong class="font--large">Titelbild</strong>
                    <p class="font--medium">Wähle ein Titelbild aus deinen vorhandenen eCards</p>
                </div>
            </div>

            <div class="event_ecard_select" data-showmodal="cover_select">
                <button type="button" class="btn btn--small">Auswählen</button>
            </div>
        </div>
    </div>
</section>

<section class="form_section container">
    <div class="row">
        <div class="d_grid-12 m_grid-4 flow--one">
            <div class="event_form_header">
                <h4 class="h4">Datum und Uhrzeit</h4>
                <label for="switch-date" class="label--switch">
                    <input type="checkbox" name="switch-date" id="switch-date" checked="true" />
                    <div class="fakebox"></div>
                </label>
            </div>

            <div class="form_row">
                <div class="form_set">
                    <label for="date_start">Datum</label>
                    <input type="date" class="--unset" name="date_start" id="date_start" required="true" data-event-start="" />
                </div>
                <div class="form_set">
                    <label for="date_time_start">Uhrzeit <em>(optional)</em></label>
                    <input type="time" class="--unset" name="date_time_start" id="date_time_start" />
                </div>
            </div>

            <button type="button" class="btn btn--small btn--secondary" data-show-event-enddate="">
                <i class="ph-bold ph-plus-circle"></i>
                <span>Ende des Events hinzufügen</span>
            </button>

            <div class="form_row --hidden">
                <div class="form_set">
                    <label for="date_start">Datum (Ende) <em>(optional)</em></label>
                    <input type="date" class="--unset" name="date_start" id="date_start" required="true" data-event-end="" />
                </div>
                <div class="form_set">
                    <label for="date_time_start">Uhrzeit (Ende) <em>(optional)</em></label>
                    <input type="time" class="--unset" name="date_time_start" id="date_time_start" />
                </div>
            </div>
        </div>
    </div>
</section>

<section class="form_section container">
    <div class="row">
        <div class="d_grid-12 m_grid-4 flow--one">
            <div class="event_form_header">
                <h4 class="h4">Adresse des Events</h4>
                <label for="switch-location" class="label--switch">
                    <input type="checkbox" name="switch-location" id="switch-location" />
                    <div class="fakebox"></div>
                </label>
            </div>

            <div class="form_set">
                <label for="location_title">Name</label>
                <input type="text" name="location_title" id="location_title" placeholder="z.B. Restaurant Musterstübchen">
            </div>

            <div class="form_set">
                <label for="location_address">Adresse</label>
                <input type="text" name="location_address" id="location_address" placeholder="Neuschwansteinstraße 20, 87645 Schwangau">
            </div>

            <label for="check" class="label--checkbox">
                <input type="checkbox" name="check" id="check" checked="true" />
                <span>Karte anzeigen</span>
            </label>

            <div class="form_set">
                <label for="location_desc">Hinweise zur Location <em>(optional)</em></label>
                <textarea name="location_desc" id="location_desc" rows="2" placeholder="z.B. Kurz vor dem Burgtor lieg inks ein geheimer Pfad. Klopft 3x me an der alten Eiche und ein Zwers erscheint, der euch den Weg zun Parkplatz freigibt."></textarea>
            </div>
        </div>
    </div>
</section>

<section class="form_section container">
    <div class="row">
        <div class="d_grid-12 m_grid-4 flow--one">
            <div class="event_form_header">
                <h4 class="h4">Musikwünsche</h4>
                <label for="switch-playlist" class="label--switch">
                    <input type="checkbox" name="switch-playlist" id="switch-playlist" />
                    <div class="fakebox"></div>
                </label>
            </div>

            <div class="form_set">
                <label for="playlist">Erstelle eine Playlist auf <strong>Spotify</strong> oder <strong>Apple Music</strong> und teile den Link zur Playlist</label>
                <input type="text" name="playlist" id="playlist" placeholder="https://open.spotify.com/playlist/5cItqUKT7Ieq0haLUSnxp9?si=3216cead03b246cd">
            </div>

        </div>
    </div>
</section>

<section class="form_section container">
    <div class="row">
        <div class="d_grid-12 m_grid-4 flow--one">
            <div class="event_form_header">
                <h4 class="h4">Wunschliste</h4>
                <label for="switch-wishlist" class="label--switch">
                    <input type="checkbox" name="switch-wishlist" id="switch-wishlist" />
                    <div class="fakebox"></div>
                </label>
            </div>

            <div class="wishlist_inputlist" data-wishlist-inputlist="">
                <p class="font--medium">Teile hier deine Wünsche und passende Links - so wissen deine Gäste genau, was du dir wünschst.</p>

                <div class="form_row">
                    <div class="form_set">
                        <label for="wish_title_1">Name</label>
                        <input type="text" name="wish_title_1" id="wish_title_1" placeholder="Socken">
                    </div>
                    <div class="form_set">
                        <label for="wish_url_1">Link</label>
                        <input type="text" name="wish_url_1" id="wish_url_1" placeholder="https://www.socken123.de/super-socken">
                    </div>
                </div>

                <div class="form_row">
                    <div class="form_set">
                        <input type="text" name="wish_title_2" id="wish_title_2" placeholder="Socken">
                    </div>
                    <div class="form_set">
                        <input type="text" name="wish_url_2" id="wish_url_2" placeholder="https://www.socken123.de/super-socken">
                    </div>
                    <button type="button" class="icon_btn" data-remove-wish=""><i class="ph ph-minus-circle"></i></button>
                </div>
            </div>

            <button type="button" class="btn btn--small btn--secondary" data-add-wish="">
                <i class="ph-bold ph-plus-circle"></i>
                <span>Wunsch hinzufügen</span>
            </button>
        </div>
    </div>
</section>

<dialog data-target="cover_select" closedby="closerequest" class="dialog--wide">
    <button type="button" class="dialog__close" data-closemodal>
        <i class="ph ph-bold ph-x"></i>
    </button>

    <div class="container --inline">
        <div class="row">
            <div class="event_form_header --mobile_fold d_grid-12">
                <h2 class="h2">Wähle aus deinen eCards</h2>

                <a href="https://www.ecardilly.de/" target="_blank" class="btn btn--primary">
                    <i class="ph ph-bold ph-plus-circle"></i>
                    neue eCard erstellen
                </a>
            </div>
        </div>
        <ul class="item_list row">
            <li class="item_card d_grid-3 m_grid-2">
                <div>
                    <div class="media_ecard">
                        <video id="videocard-0" src="https://ucarecdn.com/bcc3a5a4-8b3d-4323-bd18-027b81000426/ecardilly202507222ixr1qh.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                        </video>
                    </div>

                    <div class="btn_wrap --center">
                        <a href="#open" class="btn btn--small" data-closemodal>Wählen</a>
                    </div>
                </div>
            </li>
            <li class="item_card d_grid-3 m_grid-2">
                <div>
                    <div class="media_ecard">
                        <video id="videocard-1" src="https://ucarecdn.com/e5e65a25-cacc-45c4-851a-dd12d4d1059c/ecardilly202507212figjmw.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                        </video>
                    </div>

                    <div class="btn_wrap --center">
                        <a href="#open" class="btn btn--small" data-closemodal>Wählen</a>
                    </div>
                </div>
            </li>
            <li class="item_card d_grid-3 m_grid-2">
                <div>
                    <div class="media_ecard">
                        <video id="videocard-2" src="https://ucarecdn.com/a0b0d28e-bde6-4b9f-80aa-c352f4adbe04/ecardilly202507212ldhrtl.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                        </video>
                    </div>

                    <div class="btn_wrap --center">
                        <a href="#open" class="btn btn--small" data-closemodal>Wählen</a>
                    </div>
                </div>
            </li>
            <li class="item_card d_grid-3 m_grid-2">
                <div>
                    <div class="media_ecard">
                        <video id="videocard-3" src="https://ucarecdn.com/c59ded37-dca1-4b80-9287-d0b2efddd3df/ecardilly2025072021ssfyd.mp4" muted loop playsinline width="90" height="160" data-hover-play>
                        </video>
                    </div>

                    <div class="btn_wrap --center">
                        <a href="#open" class="btn btn--small" data-closemodal>Wählen</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</dialog>
 
<section class="form_section container">
	<div class="row">
		<div class="d_grid-12 rte">
			<h1 class="h1 --nowrap">Dein Event</h1>
			<p>Hier gestaltest du deine persönliche Eventseite.</p>
		</div>
		{{!-- <div class="d_grid-12">{{> @input_switch_toggle id='details' checked=false label="Veröffentlichen"}}</div> --}}
	</div>
</section>

<section class="form_section_navigation">
	<div class="container">
		<div class="form_actions">
			<button type="button" class="btn btn--secondary">
				<i class="ph-bold ph-floppy-disk"></i>
				Speichern
			</button>

			<a href="/components/preview/eventpage--preview" class="btn btn--primary">
				<i class="ph-bold ph-eye"></i>
				Vorschau
			</a>
		</div>
	</div>
</section>

<section class="form_section container">
	<div class="row --center">
		<div class="d_grid-8 m_grid-4 flow--one">
			<div class="event_form_header">
				<h4 class="h4">Grundeinstellungen</h4>
				{{!-- {{> @input_switch_toggle id='details' checked=true}} --}}
			</div>

			<div class="form_set">
				<label for="title">Event-Titel</label>
				<input
					type="text"
					name="title"
					id="title"
					placeholder="z.B. Ich werde 37"
				/>
			</div>

			<div class="form_set">
				<label for="description">Beschreibung <em>(optional)</em></label>
				<textarea name="description" id="description" placeholder="z.B. Wir feiern meinen 37. Geburtstag auf..." rows="4"></textarea>
			</div>

			<div class="form_set">
				{{> @input_switch_toggle id='details' checked=false label="Status: Entwurf" switch_label="Status: Öffentlich"}}
			</div>
		</div>

		<div class="event_ecard_wrap d_grid-4 m_grid-3">
			{{!-- {{render '@media_ecard_thumbnail'}} --}}

			<div class="media_placeholder" data-showmodal="cover_select">
				<div class="cover_placeholder">
					<i class="ph ph-image"></i>
					<strong class="font--large">Titelbild</strong>
					<p class="font--medium">Wähle ein Titelbild aus deinen vorhandenen eCards</p>
				</div>
			</div>

			<div class="event_ecard_select" data-showmodal="cover_select">
				<button type="button" class="btn btn--small">Auswählen</button>
			</div>
		</div>
	</div>
</section>

{{> @event_form_date}}

<section class="form_section container">
	<div class="row">
		<div class="d_grid-12 m_grid-4 flow--one">
			<div class="event_form_header">
				<h4 class="h4">Adresse des Events</h4>
				{{> @input_switch_toggle id='location'}}
			</div>

			<div class="form_set">
				<label for="location_title">Name</label>
				<input type="text" name="location_title" id="location_title" placeholder="z.B. Restaurant Musterstübchen">
			</div>

			<div class="form_set">
				<label for="location_address">Adresse</label>
				<input type="text" name="location_address" id="location_address" placeholder="Neuschwansteinstraße 20, 87645 Schwangau">
			</div>

			<label for="check" class="label--checkbox">
				<input type="checkbox" name="check" id="check" checked="true" />
				<span>Karte anzeigen</span>
			</label>

			<div class="form_set">
				<label for="location_desc">Hinweise zur Location <em>(optional)</em></label>
				<textarea name="location_desc" id="location_desc" rows="2" placeholder="z.B. Kurz vor dem Burgtor lieg inks ein geheimer Pfad. Klopft 3x me an der alten Eiche und ein Zwers erscheint, der euch den Weg zun Parkplatz freigibt."></textarea>
			</div>
		</div>
	</div>
</section>

<section class="form_section container">
	<div class="row">
		<div class="d_grid-12 m_grid-4 flow--one">
			<div class="event_form_header">
				<h4 class="h4">Musikwünsche</h4>
				{{> @input_switch_toggle id='playlist'}}
			</div>
			{{!-- <p class="font--medium">Erstelle eine Playlist auf <strong>Spotify</strong> oder <strong>Apple Music</strong> und teile den Link zur Playlist.</p> --}}

			<div class="form_set">
				<label for="playlist">Erstelle eine Playlist auf <strong>Spotify</strong> oder <strong>Apple Music</strong> und teile den Link zur Playlist</label>
				<input type="text" name="playlist" id="playlist" placeholder="https://open.spotify.com/playlist/5cItqUKT7Ieq0haLUSnxp9?si=3216cead03b246cd">
			</div>

		</div>
	</div>
</section>

{{> @event_form_wishlist}}

<dialog data-target="cover_select" closedby="closerequest" class="dialog--wide">
	<button type="button" class="dialog__close" data-closemodal>
		<i class="ph ph-bold ph-x"></i>
	</button>

	<div class="container --inline">
		<div class="row">
			<div class="event_form_header --mobile_fold d_grid-12">
				<h2 class="h2">Wähle aus deinen eCards</h2>

				<a href="https://www.ecardilly.de/" target="_blank" class="btn btn--primary">
					<i class="ph ph-bold ph-plus-circle"></i>
					neue eCard erstellen
				</a>
			</div>
		</div>
		{{> '@item_list__modal'}}
	</div>
</dialog>
 
{
  "items": [
    {
      "id": "64189",
      "title": "WhatsApp Einladung \"18. Geburtstag\"",
      "timeAgo": "vor 3 Wochen",
      "mediaUrl": "https://ucarecdn.com/bcc3a5a4-8b3d-4323-bd18-027b81000426/ecardilly202507222ixr1qh.mp4",
      "mediaType": "video"
    },
    {
      "id": "64190",
      "title": "Einladung Kindergeburtstag \"Girlande\"",
      "timeAgo": "vor 1 Woche",
      "mediaUrl": "https://ucarecdn.com/e5e65a25-cacc-45c4-851a-dd12d4d1059c/ecardilly202507212figjmw.mp4",
      "mediaType": "video"
    },
    {
      "id": "64191",
      "title": "Karte Viel Glück - Good Luck",
      "timeAgo": "vor 2 Tagen",
      "mediaUrl": "https://ucarecdn.com/a0b0d28e-bde6-4b9f-80aa-c352f4adbe04/ecardilly202507212ldhrtl.mp4",
      "mediaType": "video"
    },
    {
      "id": "64192",
      "title": "Karte Viel Glück - Glücksbogen",
      "timeAgo": "vor 5 Tagen",
      "mediaUrl": "https://ucarecdn.com/c59ded37-dca1-4b80-9287-d0b2efddd3df/ecardilly2025072021ssfyd.mp4",
      "mediaType": "video"
    }
  ]
}

No notes defined.