Create Event Page

Descripción

Just give us the event details. AI will design an attractive event page that encourages attendance.

Flujo de Trabajo

Input
VAR_1-Type or upload event details
VAR_2-Specify the background color
VAR_3-Specify the primary color
1. Event Page Generator

Modelo: GPT-5

Prompt:

You will be creating a complete, professional event page based on the content description provided by the user. Here is what the user wants on their event page:

<event_description>
VAR_1
</event_description>

Your task is to create a fully functional, modern, and visually appealing event page using HTML, CSS, and JavaScript. Follow these guidelines:

**Content Requirements:**
- Include only the event related components from the contents
- Create compelling headlines and copy to attact the audience
- If specific text isn't provided, create professional placeholder content that fits the theme
- Re-create contents as simple as possible and include only relevant to make the event page.

**Technical Requirements:**
- Write clean, semantic HTML5
- Use modern CSS3 with flexbox or grid for layouts
- Include responsive design that works on desktop, tablet, and mobile
- Add interactive JavaScript elements where appropriate (smooth scrolling, form validation, animations, etc.)
- Ensure fast loading times and good performance
- Use proper meta tags for SEO

**DON'T**

- !DO NOT CREATE ANY MENU ON THE HEADER
- DO NOT CREATE ANY LINKS OR CTA BUTTONS UNLESS THEY ARE SPECIFIED
- DO NOT CREATE ANY CONTENTS WHICH IS NOT MENTIONED IN THE EVENT DESCRIPTION

**Design Requirements:**

One page event page

Very Spacious, straighforward, Simple

기술 스택:

Tailwind CSS (CDN을 통해 로드)

Lucide Icons (CDN을 통해 로드)

전체 테마:

배경: 배경은 VAR_2를 사용하고, 텍스트는 VAR_2 가 어두우면 밝은 회색/흰색 계열, 밝으면 극도로 어두운 회색/ 검정색 계열을 사용합니다.

악센트 컬러: VAR_3 를 주요 색상으로 한 선명한 그라디언트를 헤드라인, CTA 버튼 등에 사용합니다. 기능별 아이콘에도 고유한 악센트 컬러를 적용합니다.

핵심 시각 효과 (필수):

오로라 배경 (.aurora): position: fixed로 설정된, 여러 개의 radial-gradient가 filter: blur(100px) 처리되어 화면 전체 배경에서 천천히 움직이는 애니메이션을 구현해야 합니다.

글래스모피즘 (.glass): 모든 카드(기능, 활용 사례, 후기, FAQ)의 기본 스타일입니다.

반투명 배경 (예: rgba(255, 255, 255, 0.08))

반투명 테두리 (예: rgba(255, 255, 255, 0.10))

backdrop-filter: blur(24px) saturate(160%) 적용.

호버(Hover) 시: 카드가 살짝 위로 올라가며 커지는 효과 (transform: translateY(-6px) scale(1.02))를 적용합니다.

링크 메뉴, 버튼, CTA: 명시적으로 요청시에만 만들고 hovering 시에 이 기능을 완성하기 위해 추가적으로 필요한 작업을 유저가 제공한 Contents의 언어로 제공할 것. 토스식 UX 라이팅

히어로 섹션 효과:

미세하게 움직이는 그리드 오버레이 (gridDrift 애니메이션).

크고 흐릿한 원형 그라디언트가 천천히 움직이는 효과 (floatOrb 애니메이션).

스크롤 애니메이션 (.fade-in):

페이지의 모든 섹션과 콘텐츠 블록(카드 등)은 스크롤 시 아래에서 위로 떠오르며 서서히 나타나는 효과 (opacity: 0 -> 1, transform: translateY(30px) -> 0)를 가져야 합니다.

IntersectionObserver를 사용하여 이를 구현하고, .delay-100, .delay-200 등 지연 클래스를 적용합니다.

아이콘 스타일 (.icon-glow-pulse):

기능(Features) 섹션의 아이콘은 반투명한 원형 배경 안에 위치하며, box-shadow와 scale을 이용한 부드러운 '펄스(pulse)' 애니메이션 효과를 가져야 합니다.

그라디언트 CTA 버튼 (.gradient-button):

선명한 linear-gradient 배경과 그림자 효과를 가지며, 호버 시 살짝 떠오르는(translateY(-3px)) 효과를 적용합니다.

다음과 같은 형식으로 구성. 이 형식에 제한되지는 않음. 유저가 현재 제시한 정보 만으로 완결된 이벤트 페이지를 만들 것.
<형식>
헤더(Header): 이벤트 로고 또는 제목

히어로(Hero): 이벤트의 핵심 메시지

소개(About): 이벤트에 대한 상세 설명

주요 정보(Details): 날짜, 시간, 장소 등 핵심 정보

일정(Schedule): 행사 일정 (시간대별 일정이 제공된 경우 시간대별로 명시)

위치(LOCATION): SIMPLE ADDRESS. 구글 MAP 사용이 가능한 경우 사용

등록(CTA): 마지막 등록 유도 섹션 (명시적으로 링크가 있는 경우에만 만들기)

푸터(Footer): 저작권 및 연락처 정보
</형식>
산출물: 위의 모든 콘텐츠와 스타일, 애니메이션, 스크립트(JS)가 포함된 단일 HTML 파일 1개. (CSS는 <style> 태그 안에, JS는 <script> 태그 안에 포함).

Create a event page that not only meets the user's requirements but also follows modern web development best practices and provides an excellent user experience. You must print out the code block only.|

Output:

1: Event Page Generator
Create Event Page
Plantilla de Salida Final
1: Event Page Generator

Información

Creador: David Ryu

20

Ejecuciones

0

Favoritos

35756.74s

Tiempo Promedio

$0.09

Costo Promedio

Ejemplos (0)