Genera una maqueta de interfaz de usuario responsiva para escritorio y móvil para un sitio web de historias o juegos de misterio japonés con una atmósfera envolvente.
Objetivo: Crear una maqueta de sitio web pulida para un juego o archivo de historias de misterio japonés titulado 月蝕綺譚, presentada como una vista previa de diseño responsivo con una ventana de navegador de escritorio a la izquierda y una pantalla de teléfono inteligente a la derecha.
Lienzo: Imagen de presentación panorámica en 16:9 sobre un fondo gris claro. Coloca una maqueta de navegador de escritorio grande que ocupe aproximadamente el 75% del ancho a la izquierda, y una maqueta de teléfono inteligente alta que ocupe aproximadamente el 22% del ancho a la derecha. Utiliza marcos de dispositivos realistas con sombras suaves.
Estilo visual: Horror literario japonés elegante, misterio silencioso, documentos de archivo, oscuridad a la luz de la luna. Paleta de papel marfil, tinta negra, azul marino oscuro, gris apagado y un acento fuerte en rojo bermellón. Utiliza tipografía japonesa con serifa, líneas finas, bordes tipo boleto, textura de papel sutil, imágenes de manuscritos antiguos y gráficos de líneas de órbita de media luna tenues. El ambiente general debe sentirse como un sitio web oficial premium para un juego narrativo.
Diseño de escritorio: Muestra una ventana de navegador con una barra superior oscura y tres puntos de ventana pequeños. Dentro de la página, utiliza un encabezado color marfil con el título del sitio 月蝕綺譚 a la izquierda, un pequeño sello rojo y exactamente 5 elementos de navegación horizontales: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 y un botón azul marino oscuro etiquetado como 「メールで会員になる」. La sección principal (hero) debajo es una imagen oscura de un eclipse lunar con el título vertical 「月蝕綺譚」 centrado sobre una media luna/eclipse brillante. Superpone una tarjeta de interfaz de archivo translúcida con documentos japoneses antiguos y exactamente 5 tarjetas pequeñas de coleccionables/documentos a lo largo de la parte inferior de esa superposición. A lo largo de la parte inferior de la imagen principal, incluye exactamente 5 tiras de miniaturas horizontales que muestren: una calle nocturna, una habitación tipo plano, una carpeta u objeto oscuro, papeles antiguos escritos a mano y un mapa de escritorio/espacio de trabajo.
Tarjeta de registro derecha en escritorio: A la derecha de la sección principal, coloca una tarjeta de membresía grande con forma de boleto color crema con muescas semicirculares recortadas y un borde decorativo fino. Incluye la pequeña etiqueta 「入会札」, un emblema de sello, el titular 「メールで会員になる」, un icono de sobre, texto explicativo breve, un campo de entrada de correo electrónico con el marcador de posición 「メールアドレスを入力」 y un botón de llamada a la acción (CTA) rojo etiquetado como 「登録する」 con una flecha hacia la derecha. Incluye texto pequeño de política de privacidad debajo.
Contenido inferior en escritorio: Debajo de la sección principal, crea una sección con apariencia de dos columnas. A la izquierda, un eslogan japonés grande 物語の続きを、いちばん近くで。 con una línea roja vertical fina y un pequeño párrafo descriptivo. A la derecha, coloca exactamente 3 tarjetas de artículos en fila. Las 3 tarjetas son: 1) 「月蝕綺譚 最新便」 con una imagen de luna, una etiqueta roja pequeña de NUEVO (NEW), título 「大型アップデート『○○』を公開しました」, fecha 2024.05.20; 2) 「開発記録」 con una imagen de cuaderno y bolígrafo, título 「開発記録 #12:環境音の調整について」, fecha 2024.05.18; 3) 「ご意見箱」 con una imagen de buzón oscuro, título 「ご意見・ご感想をお聞かせください」, fecha 2024.05.16. Cada tarjeta tiene un borde fino, una pequeña flecha en el encabezado y líneas de resumen de marcador de posición en gris.
Pie de página en escritorio: Añade un pie de página azul marino oscuro que abarque la parte inferior con exactamente 6 enlaces: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Incluye un icono de luna creciente y el copyright 「© 2024 月蝕綺譚」 a la derecha.
Diseño móvil: En el teléfono inteligente de la derecha, muestra el mismo sitio adaptado a móvil. La hora de la barra de estado marca las 9:41. El encabezado contiene el título 「月蝕綺譚」 y un icono de menú hamburguesa. Debajo, muestra una sección principal oscura compacta con el eclipse y el título vertical, luego exactamente 5 miniaturas horizontales pequeñas. Continúa con el eslogan 「物語の続きを、いちばん近くで。」, luego la misma tarjeta de registro de correo electrónico con forma de boleto, y después la primera tarjeta de noticias 「月蝕綺譚 最新便」 con la imagen de la luna y la etiqueta roja de NUEVO. La vista móvil debe parecer desplazable verticalmente pero contenida dentro de la pantalla del teléfono.
Restricciones: Mantén todo el texto visible de la interfaz en japonés según lo especificado. Utiliza un renderizado de maqueta de interfaz de usuario limpio y de alta fidelidad, tipografía nítida, sombras sutiles y sin logotipos ni marcas de agua adicionales. El diseño debe parecer una maqueta de web/aplicación terminada generada para la planificación de la implementación.