Gera um mockup de interface responsiva para desktop e dispositivos móveis para um site de história ou jogo de mistério japonês com atmosfera imersiva.
Objetivo: Criar um mockup de site refinado para um jogo ou arquivo de histórias de mistério japonês intitulado 月蝕綺譚, exibido como uma prévia de design responsivo com uma janela de navegador desktop à esquerda e uma tela de smartphone à direita.
Canvas: Imagem de apresentação em formato 16:9 em um fundo cinza claro. Coloque um mockup de navegador desktop grande ocupando cerca de 75% da largura à esquerda e um mockup de smartphone alto ocupando cerca de 22% da largura à direita. Use molduras de dispositivos realistas com sombras suaves.
Estilo visual: Terror literário japonês elegante, mistério silencioso, documentos de arquivo, escuridão sob o luar. Paleta de papel marfim, tinta preta, azul-marinho profundo, cinza suave e um forte toque de vermelho vermelhão. Use tipografia japonesa serifada, linhas finas, bordas que lembram bilhetes, textura sutil de papel, imagens de manuscritos antigos e gráficos tênues de órbitas lunares. O clima geral deve parecer um site oficial premium para um jogo narrativo.
Layout desktop: Exiba uma janela de navegador com uma barra superior escura e três pontos de janela pequenos. Dentro da página, use um cabeçalho marfim com o título do site 月蝕綺譚 à esquerda, um pequeno selo vermelho e exatamente 5 itens de navegação horizontais: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」 e um botão azul-marinho escuro rotulado 「メールで会員になる」. A seção principal abaixo é um visual de eclipse lunar escuro e amplo com o título vertical 「月蝕綺譚」 centralizado sobre uma lua crescente/eclipse brilhante. Sobreponha um cartão de interface de arquivo translúcido com documentos japoneses antigos e exatamente 5 pequenos cartões de colecionáveis/documentos ao longo da parte inferior dessa sobreposição. Ao longo da parte inferior da imagem principal, inclua exatamente 5 miniaturas horizontais mostrando: uma rua noturna, uma sala que lembra uma planta baixa, uma pasta ou objeto escuro, papéis antigos manuscritos e um mapa de mesa/espaço de trabalho.
Cartão de inscrição à direita no desktop: À direita da seção principal, coloque um grande cartão de membro em formato de bilhete cor creme com entalhes semicirculares e uma borda decorativa fina. Inclui o pequeno rótulo 「入会札」, um emblema de carimbo, o título 「メールで会員になる」, um ícone de envelope, um breve texto explicativo, um campo de entrada de e-mail com o placeholder 「メールアドレスを入力」 e um botão CTA vermelho rotulado 「登録する」 com uma seta para a direita. Inclua um pequeno texto de política de privacidade abaixo.
Conteúdo inferior no desktop: Abaixo da seção principal, crie uma seção com aspecto de duas colunas. À esquerda, um grande slogan japonês 物語の続きを、いちばん近くで。 com uma linha vertical vermelha fina e um pequeno parágrafo descritivo. À direita, coloque exatamente 3 cartões de artigo em uma linha. Os 3 cartões são: 1) 「月蝕綺譚 最新便」 com uma imagem da lua, um pequeno rótulo vermelho NEW, título 「大型アップデート『○○』を公開しました」, data 2024.05.20; 2) 「開発記録」 com uma imagem de caderno e caneta, título 「開発記録 #12:環境音の調整について」, data 2024.05.18; 3) 「ご意見箱」 com uma imagem de caixa de correio escura, título 「ご意見・ご感想をお聞かせください」, data 2024.05.16. Cada cartão possui uma borda fina, uma pequena seta no cabeçalho e linhas de resumo cinzas como placeholder.
Rodapé desktop: Adicione um rodapé azul-marinho escuro abrangendo a parte inferior com exatamente 6 links de rodapé: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」. Inclua um ícone de lua crescente e o copyright 「© 2024 月蝕綺譚」 à direita.
Layout mobile: No smartphone à direita, mostre o mesmo site adaptado para dispositivos móveis. A hora na barra de status marca 9:41. O cabeçalho contém o título 「月蝕綺譚」 e um ícone de menu hambúrguer. Abaixo, mostre uma seção principal escura e compacta com o eclipse e o título vertical, seguidos por exatamente 5 miniaturas horizontais pequenas. Continue com o slogan 「物語の続きを、いちばん近くで。」, depois o mesmo cartão de inscrição de e-mail em formato de bilhete e, em seguida, o primeiro cartão de notícias 「月蝕綺譚 最新便」 com a imagem da lua e o rótulo vermelho NEW. A visualização mobile deve parecer rolável verticalmente, mas contida dentro da tela do telefone.
Restrições: Mantenha todo o texto visível da interface em japonês conforme especificado. Use renderização de mockup de interface limpa e de alta fidelidade, tipografia nítida, sombras sutis e sem logotipos ou marcas d'água extras. O design deve parecer um mockup de web/app finalizado, gerado para planejamento de implementação.