xAI TTS v1 Sub-Second Speech

“Cloudborne Balloon Dispatch”라는 제목의 완성도 높고 세련된 인터랙티브 단일 파일 HTML 웹페이지를 만드세요. 최종 HTML 문서만 출력하고, 모든 CSS와 JavaScript는 인라인으로 포함하세요. 빌드 단계나 외부 종속성, 라이브러리, 폰트, CDN, 이미지 URL, API 또는 추가 파일 없이 최신 브라우저에서 직접 열어 작동해야 합니다. 이 페이지는 고정된 16:9 구성이 아닌 반응형 웹페이지입니다. 빈티지 항공 계기, 스크린 인쇄 방식의 지형도, 촉감이 느껴지는 종이 질감, 황동 컨트롤, 현대적인 실시간 시뮬레이션이 어우러진 몰입감 있는 새벽 시대 열기구 함대 관제소를 디자인하세요. 코발트 블루, 크림 옐로, 코럴 레드, 웜 화이트, 차콜, 채도가 낮은 황동으로 세심하게 구성한 색상 팔레트를 사용하세요. 따뜻한 아침 햇빛이 왼쪽 상단 모서리에서 점차 밝아지도록 표현하세요. 고도, 바람층, 위험도를 색상, 선 굵기, 패턴, 명확한 범례로 일관되게 나타내세요. 필요한 모든 시각 요소는 HTML, CSS, Canvas, 인라인 SVG를 활용해 절차적으로 생성하세요. 중앙 영역에는 협곡, 등고선, 개별 식별이 가능한 열기구 최소 12개, 여러 개의 변화하는 바람층, 이동하는 적란운 폭풍 시스템, 난기류 구역, 목적지인 공중 등대가 표시된 대형 애니메이션 상공 지도를 배치하세요. 실제로 작동하는 경량 물리 시뮬레이션을 구현하세요. 각 열기구는 위치, 속도, 고도, 연료, 밸러스트, 온도, 위험도, 경로 기록을 추적해야 합니다. 바람의 방향과 세기는 고도에 따라 달라지고 시간에 따라 변화해야 합니다. 버너는 연료를 소모하면서 양력을 높이고, 밸러스트를 방출하면 열기구가 상승하지만 밸러스트가 영구적으로 줄어들어야 합니다. 냉각되면 하강해야 하며, 협곡 벽과 폭풍 셀은 의미 있는 위험을 만들어야 합니다. 열기구는 계속 이동하고 눈에 보이는 페이드 아웃 비행 궤적을 남겨야 합니다. 목표는 자원이나 시간이 다 떨어지기 전에 전체 함대를 등대까지 안전하게 안내하는 것입니다. 새벽에 시작되는 눈에 띄는 발사 카운트다운과 시작, 일시정지, 재개, 초기화, 시뮬레이션 속도 컨트롤을 포함하세요. 발사 전에는 열기구가 미세하게 흔들리고 계기가 꿈틀거리도록 하세요. 발사 후에는 바람 입자, 열기구 움직임, 폭풍 성장, 궤적 그리기, 경고 펄스, 변화하는 조명을 애니메이션으로 표현하세요. 사용자가 지도에서 바람 방향 노드를 직접 드래그해 실시간으로 국소 기류를 변경할 수 있어야 하며, 즉각적인 시각적·물리적 피드백을 제공하세요. 열기구를 클릭하면 해당 열기구가 선택되고, 경로가 강조되며, 인터페이스 전체에 관련 데이터가 표시되고, 간결한 세부 정보 인스펙터가 열려야 합니다. 선택한 열기구에는 누르고 있는 동안 작동하는 버너 동작, 명확한 결과가 발생하는 밸러스트 방출 동작, 키보드 단축키, 접근 가능한 버튼을 포함한 촉각적인 버너 및 밸러스트 컨트롤을 제공하세요. 고급 플레이를 위해 다중 선택 또는 함대 전체 명령도 지원하세요. 임무 목표, 활성 경고, 기상 브리핑, 열기구별 상태 요약을 보여 주는 세로형 미션 카드 사이드바를 배치하세요. 미션 카드는 실시간으로 업데이트되고 안전, 경고, 위험, 도착, 손실 상태별 필터링을 지원해야 합니다. 하단에는 고도, 수직 속도, 연료, 폭풍 근접도, 함대 진행률을 보여 주는 부드러운 스크롤 Canvas 차트가 있는 조밀하지만 읽기 쉬운 텔레메트리 스트립을 배치하세요. 차트 위에 마우스를 올리거나 스크럽하면 동기화된 값이 표시되고, 선택한 열기구 궤적에서 해당 시점이 강조되어야 합니다. 빈티지 게이지, 회전하는 바늘, 숫자 판독값, 경고등, 스탬프 라벨, 지도 좌표, 고도 밴드, 간결한 미니맵 또는 개요, 명확한 범례를 추가하세요. 단순히 데스크톱 구성을 축소하는 방식이 아닌 반응형 레이아웃 동작을 사용하세요. 넓은 화면에서는 사이드바, 중앙 지도, 인스펙터, 텔레메트리를 동시에 표시하세요. 태블릿에서는 보조 카드를 탭이나 드로어로 접으세요. 모바일에서는 지도와 선택한 열기구 컨트롤을 우선시하고, 큰 터치 영역을 제공하며, 텔레메트리 패널을 세로로 쌓고, 드래그 상호작용을 유지하세요. 다양한 화면 비율에서 페이지가 뷰포트를 자연스럽게 채우고 마우스, 터치, 키보드로 계속 사용할 수 있도록 하세요. 시뮬레이션이 완성도 있게 느껴지도록 성공 및 실패 조건, 공중 등대에 도킹하는 애니메이션 도착, 충돌 또는 폭풍으로 인한 손실 피드백, 상황별 툴팁, 첫 사용 안내, 빈 상태와 비활성화 상태, 되돌릴 수 없는 밸러스트 방출 확인, 재시작 흐름, 상태 알림, 도착 수, 손실 수, 연료 효율, 평균 위험도, 경과 시간 등의 통계가 포함된 최종 임무 보고서를 구현하세요. 초기 상태를 시드해 시나리오가 즉시 흥미롭지만 여전히 승리할 수 있도록 하세요. 부드러운 애니메이션에는 requestAnimationFrame을 사용하고, 적절한 경우 지도와 텔레메트리에는 Canvas를 사용하세요. 렌더링 성능을 유지하고, 선명한 Canvas를 위해 devicePixelRatio를 사용하며, resize 이벤트를 올바르게 처리하고, 콘솔 오류를 방지하세요. 탁월한 시각적 계층 구조, 섬세한 마이크로 인터랙션, 설득력 있는 계기 동작, 모든 패널 간에 연결된 상태, 세밀한 마감 요소를 우선하세요. 정적인 목업을 만들지 마세요. 플레이스홀더 사각형, 전체 디자인을 대체하는 단순한 그라디언트, 작동하지 않는 가짜 컨트롤, 외부 에셋, 외부 폰트, alert() 대화상자, 과도하게 많은 설명 텍스트, 가로 오버플로, 작고 읽기 어려운 라벨, 마우스에서만 작동하는 상호작용을 사용하지 마세요. 16:9 Canvas나 고정 크기 뷰포트를 강제하지 마세요. 눈에 보이는 모든 주요 컨트롤은 실제로 작동해야 하며, 표시되는 모든 데이터는 실시간 시뮬레이션 상태에서 파생되어야 합니다.

인라인 HTML, CSS, 순수 JavaScript만 사용해 “Midnight Automated Bakery”라는 제목의 완성도 높고 세련된 단일 파일 인터랙티브 HTML 웹페이지를 만드세요. 실행 가능한 전체 HTML 문서만 출력하고 다른 내용은 출력하지 마세요. 외부 라이브러리, 프레임워크, CDN, 폰트, 이미지, SVG 파일, 오디오 파일, API 또는 네트워크 요청을 사용하지 마세요. 모든 시각 요소, 아이콘, 사운드와 유사한 피드백, 효과, 게임 로직은 HTML/CSS/JS로 로컬에서 생성해야 합니다. 자정의 자동화 제빵소를 배경으로 한 완전히 플레이 가능한 주문 일정 관리 게임을 만드세요. 반죽 조각이 등각 투영 방식의 컨베이어 시스템으로 계속 들어오며, 모양, 레시피, 필요한 굽기 온도, 굽기 시간, 신선도 제한, 점수 값이 명확히 구분되어야 합니다. 대형 중앙 산업용 오븐, 스위치를 조작할 수 있는 순환 컨베이어 네트워크, 측면에 장착된 실시간 계기 패널을 중심으로 인터페이스를 구성하세요. 플레이어는 오븐 대기열의 반죽 아이템을 드래그해 순서를 바꾸고, 호환되는 슬롯 사이에서 드래그하며, 트랙 스위치를 클릭해 들어오는 반죽의 경로를 변경하고, 오븐 컨트롤을 클릭해 온도를 조절하거나 시스템을 활성화하며, 일시적인 컨베이어 가속과 비상 냉각을 위한 키보드 컨트롤을 사용할 수 있어야 합니다. 마우스, 터치, 클릭, 드래그, 키보드 상호작용은 모두 즉시 눈에 보이는 방식으로 반응해야 합니다. 정적인 목업이 아닌 실제 상태 기반 게임플레이를 구현하세요. 여러 주문의 동시 처리, 컨베이어 이동, 트랙 라우팅, 드래그 앤 드롭 충돌 및 스냅 유효성 검사, 용량 제한, 아이템별 타이머, 오븐 온도 관성, 굽기 진행도, 덜 구움/완벽하게 구움/과하게 구움 상태, 점수, 배수 콤보, 생명 또는 평판, 점진적으로 높아지는 난이도, 일시정지/재개, 재시작, 간결한 인터랙티브 튜토리얼 또는 도움말 오버레이를 포함하세요. 레시피는 의미 있는 일정 충돌을 만들어야 합니다. 제품마다 필요한 온도와 시간이 달라 대기열 재배치와 전략적인 냉각 또는 가속을 유도해야 합니다. 완벽하게 구워진 빵은 황금빛으로 나와 만족스러운 입자 폭발을 일으키고, 제빵소 진열창을 밝히며, 콤보를 높이고, 주문 기록을 업데이트해야 합니다. 실수하면 눈에 띄게 새까맣게 탄 빵, 피어오르는 연기와 불씨 입자, 경고등, 흔들리는 계기, 콤보 손실, 명확한 비오디오 피드백이 나타나야 합니다. 선택 사항인 사운드 토글을 제공하되, 활성화하면 JavaScript로 완전히 생성한 Web Audio를 사용해 시각적으로도 사운드 피드백을 시뮬레이션하세요. 음소거 상태에서도 게임을 완전히 이해할 수 있어야 합니다. 세밀한 등각 투영 픽셀 아트와 정밀한 산업용 계기를 결합한 독창적이고 일관된 시각 언어를 사용하세요. 깊은 인디고 색상의 자정 환경에 따뜻한 호박색 용광로 빛, 구리색 하이라이트, 빛나는 빵, 부드러운 크림색 라벨을 대비시키세요. CSS로 그린 기계 장치, 타일 바닥, 파이프, 통풍구, 그림자, 하이라이트, 픽셀 계단식 가장자리, 은은한 스캔라인, 표시등, 분할 디스플레이, 게이지, 경고 줄무늬, 애니메이션 기계 디테일을 활용해 깊이감을 만드세요. 중앙 오븐은 깜빡이는 챔버, 도어, 온도 다이얼, 아지랑이, 상태등이 있는 살아 있는 공간처럼 보여야 합니다. 성능을 고려한 CSS와 JavaScript로 컨베이어 벨트, 기어, 반죽 이동, 연기, 불꽃, 냉각 증기, 창문 조명, 콤보 피드백, 패널 전환을 애니메이션으로 표현하세요. 밀도 높은 관제실 분위기에서도 선명한 가독성과 강한 계층 구조를 유지하세요. 플레이 가능한 제빵소 바닥, 들어오는 주문 대기열, 오븐 대기열, 레시피 참고 영역, 실시간 점수/콤보 표시, 온도 및 처리량 계기, 이벤트 로그, 컨트롤 범례, 상태 알림, 상세한 결과와 다시 플레이 동작이 포함된 게임 종료 또는 교대 요약 모달 등 충실하고 세심하게 배치된 콘텐츠를 포함하세요. 접근 가능한 라벨, 눈에 보이는 포커스 상태, 키보드 조작, 모션 감소 지원, 색상에 의존하지 않는 상태 표시를 추가하세요. 데스크톱, 태블릿, 모바일 브라우저에 맞게 레이아웃을 반응형으로 구성하고, 사용성을 유지하면서 패널을 지능적으로 재배치하고 제빵소 규모를 조정하세요. 이 페이지는 웹페이지이므로 고정된 16:9 Canvas나 하드코딩된 뷰포트 크기를 강제하지 마세요. 일반적인 와이드스크린에서 특히 보기 좋으면서 세로 화면에도 자연스럽게 적응하는 유동적인 반응형 레이아웃을 사용하세요. 완성도, 게임의 손맛, 안정적인 상태 관리, 정확한 타이밍, 견고한 드래그 처리, 명확한 충돌 규칙, 세련된 전환, 시각적 피드백을 우선하세요. 페이지는 단일 .html 파일로 저장해 로컬에서 열었을 때 즉시 작동해야 합니다. 다음 요소는 사용하지 마세요: 정적인 콘셉트 아트, 작동하지 않는 대시보드, 플레이스홀더 컨트롤, 가짜 드래그 상호작용, 고장 난 타이머, 겹치는 텍스트, 읽기 어려운 작은 라벨, 과도한 설명 문구, 단순한 평면 카드, 사실적인 이미지, 외부 에셋, 외부 종속성, 삽입된 base64 이미지, 네트워크 접근, 빌드 단계, 여러 파일, 고정된 16:9 크기, 필수 사운드, 자동 재생 오디오, 브라우저 알림, 콘솔에만 표시되는 피드백, 미완성 TODO 섹션.