# GTA Timeline — Especificações dos wallpapers

Versão: 27 de outubro de 2026

## Dimensões para criar as artes

| Uso | Tamanho recomendado | Proporção | Formato |
|---|---:|---|---|
| Desktop / notebook | 3840 × 2160 px | 16:9 | WebP ou AVIF |
| Desktop ultrawide opcional | 5120 × 2160 px | 64:27 | WebP ou AVIF |
| Celular / retrato | 2160 × 3840 px | 9:16 | WebP ou AVIF |
| Hero desktop | 3840 × 2160 px | 16:9 | WebP ou AVIF |
| Hero mobile | 2160 × 3840 px | 9:16 | WebP ou AVIF |

Use 1920 × 1080 px e 1080 × 1920 px como mínimos práticos. As medidas maiores são recomendadas para telas de alta densidade; não são tamanhos rígidos dos blocos. Exporte em sRGB. Meta prática: até 600 KB por wallpaper desktop e 350 KB por mobile, quando a qualidade permitir.

## Como os blocos funcionam

- Cada jogo ocupa uma seção independente de largura total da janela; o conteúdo interno tem no máximo 1180 px.
- O hero ocupa pelo menos uma altura de tela. Cada seção de jogo também tem mínimo de uma altura de tela, mas cresce conforme o número de cards, trailers e versões. Portanto, a altura total da seção não é um tamanho fixo de imagem.
- No desktop, o wallpaper permanece fixo durante a rolagem da seção (`background-attachment: fixed`). Ao entrar na próxima seção, muda o fundo e a cor sólida. No mobile, o fundo acompanha a seção para evitar limitações de desempenho de fundos fixos.
- A arte usa `cover` e posição central: preenche o fundo e pode sofrer cortes nas bordas. As proporções de área do mapa são uma questão separada dos wallpapers.
- Não estique uma arte até a altura inteira do bloco New Generation: o fundo é pensado para o campo visual da tela, enquanto a lista rola.
- Mantenha o texto fora da imagem. Títulos, contadores e logos continuam como elementos separados.
- Há gradientes escuros para contraste. Faça personagens e detalhes principais na metade direita ou nas laterais; mantenha uma área visual mais calma atrás do texto.
- Área segura recomendada: elementos essenciais dentro dos 60% centrais; sem rostos ou texto nas extremidades. No hero desktop, prefira personagens na metade direita. Em mobile, mantenha o foco no centro superior.

## Mapeamento dos blocos

| Seletor / bloco | Arquivo desktop sugerido | Arquivo mobile sugerido | Fundo provisório atual |
|---|---|---|---|
| `#inicio` · Hero | `wallpaper-hero-desktop.webp` | `wallpaper-hero-mobile.webp` | `assets/background-gta6.webp` |
| `#gta6` · Grand Theft Auto VI | `wallpaper-gta6-desktop.webp` | `wallpaper-gta6-mobile.webp` | `assets/background-gta6.webp` |
| `#gta5` · Grand Theft Auto V | `wallpaper-gta5-desktop.webp` | `wallpaper-gta5-mobile.webp` | `assets/background-gta5.webp` |
| `#newgeneration` · Grand Theft Auto: New Generation | `wallpaper-newgeneration-desktop.webp` | `wallpaper-newgeneration-mobile.webp` | `assets/background-trilogy.webp` |
| `#balladgaytony` · Grand Theft Auto: The Ballad of Gay Tony | `wallpaper-balladgaytony-desktop.webp` | `wallpaper-balladgaytony-mobile.webp` | `assets/background-episodes.webp` |
| `#chinatownwars` · Grand Theft Auto: Chinatown Wars | `wallpaper-chinatownwars-desktop.webp` | `wallpaper-chinatownwars-mobile.webp` | `assets/cover-chinatownwars.webp` |
| `#lostanddamned` · Grand Theft Auto IV: The Lost and Damned | `wallpaper-lostanddamned-desktop.webp` | `wallpaper-lostanddamned-mobile.webp` | `assets/background-episodes.webp` |
| `#gta4` · Grand Theft Auto IV | `wallpaper-gta4-desktop.webp` | `wallpaper-gta4-mobile.webp` | `assets/background-gta4.webp` |
| `#vicecitystories` · Grand Theft Auto: Vice City Stories | `wallpaper-vicecitystories-desktop.webp` | `wallpaper-vicecitystories-mobile.webp` | `assets/cover-vicecitystories.webp` |
| `#libertycitystories` · Grand Theft Auto: Liberty City Stories | `wallpaper-libertycitystories-desktop.webp` | `wallpaper-libertycitystories-mobile.webp` | `assets/cover-libertycitystories.webp` |
| `#sanandreas` · Grand Theft Auto: San Andreas | `wallpaper-sanandreas-desktop.webp` | `wallpaper-sanandreas-mobile.webp` | `assets/background-sanandreas.webp` |
| `#advance` · Grand Theft Auto Advance | `wallpaper-advance-desktop.webp` | `wallpaper-advance-mobile.webp` | `assets/cover-advance.webp` |
| `#vicecity` · Grand Theft Auto: Vice City | `wallpaper-vicecity-desktop.webp` | `wallpaper-vicecity-mobile.webp` | `assets/background-vicecity.webp` |
| `#gta3` · Grand Theft Auto III | `wallpaper-gta3-desktop.webp` | `wallpaper-gta3-mobile.webp` | `assets/background-gta3.webp` |
| `#gta2` · Grand Theft Auto 2 | `wallpaper-gta2-desktop.webp` | `wallpaper-gta2-mobile.webp` | `assets/background-gta2.webp` |
| `#london` · Grand Theft Auto: London (1961 à esquerda; 1969 à direita) | `wallpaper-london-desktop.webp` | `wallpaper-london-mobile.webp` | `assets/cover-london1969.webp` |
| `#gta1` · Grand Theft Auto | `wallpaper-gta1-desktop.webp` | `wallpaper-gta1-mobile.webp` | `assets/background-gta1.webp` |

Os jogos sem wallpaper horizontal verificado usam provisoriamente a capa ou arte oficial correspondente. GTA Online usa a capa/arte de GTA V, que inclui esse modo. Os episódios usam a arte da coleção Episodes from Liberty City. London 1961 usa a arte da expansão-base London 1969. GTA VI usa arte promocional oficial, não uma capa física inventada. GTA Advance usa logo transparente corrigida e arte promocional alternativa colorida como visual de capa; a capa original cinza também está disponível no modal. Vice City usa o logo original branco e rosa, com transparência real.

## Troca dos arquivos

Coloque as novas artes em `dist/assets/`. É possível atualizar o caminho `background` do jogo em `dist/data.js`, mantendo a estrutura. Para artes diferentes por dispositivo, as variáveis CSS já têm pontos de substituição:

```css
#gta5 {
  --wallpaper-desktop: url("assets/wallpaper-gta5-desktop.webp");
  --wallpaper-mobile: url("assets/wallpaper-gta5-mobile.webp");
}
#inicio {
  --hero-wallpaper-desktop: url("assets/wallpaper-hero-desktop.webp");
  --hero-wallpaper-mobile: url("assets/wallpaper-hero-mobile.webp");
}
```

Cards, botões e faixas usam cantos arredondados; barras de rolagem e sliders têm o tema do site. Modais usam transformação suave a partir do botão de origem e voltam a ele no fechamento, respeitando a preferência por movimento reduzido.

A versão mobile é aplicada em telas com largura de até 700 px. Se uma variável específica não for fornecida, a arte geral do jogo continua como fallback.

## Logos e capas

- Os logos foram distribuídos nos cabeçalhos das respectivas seções, alternando lados. GTA VI usa a versão plana em `assets/logo-gta6-flat.png`. GTA V usa `assets/logo-gta5-transparent.png` em 1700 × 1500 px, com canal alpha real, substituindo a versão com fundo quadriculado embutido.
- Logos: PNG/WebP transparente, largura de 1200 a 2000 px, sem margens excessivas.
- Capas: retrato 2:3 ou 3:4 conforme o material original; mantenha a imagem oficial sem deformar. Cards usam área de 90 × 120 px no desktop e 75 × 100 px no mobile.
- Quando só há arte promocional em paisagem, ela é identificada como arte; pode aparecer cortada no espaço de capa provisório.

## Mapa de lançamento

- Página: `lancamento.html` (também acessível pelo caminho `/lancamento`).
- Cabeçalho compacto; mapa e caixa lateral ficam antes dos controles de plataforma e simulação. PS5 usa destaque ciano, e Xbox usa destaque rosa.
- O país selecionado mostra dois timers independentes: relógio real e simulação. Os 10 minutos finais ativam pulsação progressiva; o instante cadastrado gera um clarão branco e depois rosa.
- Horários estimados usam contornos tracejados e indicação explícita de ausência de confirmação local.
- SVG com viewBox 1200 × 640 e largura responsiva, sem zoom.
- Projeção Equal Earth, com preservação proporcional de áreas; geografia Natural Earth 1:110 milhões, contornos simplificados.
- Cinza: região verificada aguardando seu horário. Rosa: horário cadastrado atingido. Contorno tracejado: referência estimada sem confirmação de disponibilidade.
- As logos também mudam de preto e branco para a versão colorida ao atingir o horário cadastrado.
- Dados: 55 registros verificados de loja (28 PS5 e 27 Xbox), além de 251 países, territórios e áreas geográficas com fusos de referência. Os horários não oficiais são hipóteses de 00h local e ficam identificados como estimados; não confirmam lançamento ou disponibilidade. Consulta: 27/10/2026.
- Os horários são instantes das lojas regionais, não meia-noite em todos os fusos de cada país. Brasil: 19/11/2026 03:00 UTC = 00:00 de Brasília.
- O modo ao vivo usa o relógio do dispositivo e os horários cadastrados. Ele não consulta servidores para comprovar que a conta consegue executar o jogo e não descobre alterações posteriores de calendário. A simulação é marcada explicitamente.

## Arquivos principais

| Arquivo | Função |
|---|---|
| `index.html` | Estrutura da coleção e modal |
| `style.css` | Layout, tipografia, painéis e fundos |
| `data.js` | Jogos, versões, equipe, música, hardware, fontes e imagens |
| `app.js` | Cards, contadores, modal e painel de aeroporto |
| `lancamento.html` | Mapa mundial e timeline de liberação |
| `map.css` | Aparência do mapa e contadores regionais |
| `map.js` | Estados por horário, projeção, busca e simulação |
| `launch-data.js` | Horários regionais verificados e fontes por plataforma |
| `country-reference.js` | Países, fusos e horários hipotéticos identificados como estimados |
| `assets/image-sources.json` | Proveniência das imagens |

## Observações de curadoria

- New Generation é um agrupamento editorial; não um produto oficial. Ports mobile usam as datas de lançamento das versões, e trailers mantêm suas próprias datas de publicação.
- Onde só mês/ano foi confirmado, não foi inventado um dia para produzir um contador diário.
- Requisitos e espaço são identificados por edição. Não há equivalência moderna de hardware sem benchmark comparável.
- Picos globais de simultâneos não são inventados nem confundidos com limite por sessão.
- Uma confirmação de idade local não libera um vídeo restrito do YouTube. Os links oficiais são mantidos para assistir numa conta elegível.
- Os nomes ouvidos como Sunny Play e Wand Jones foram interpretados como SanInPlay e Davy Jones; os demais canais são Flow Games, BRKsEDU e Adrenaline.

## Vídeo oficial com player HTML5

O vídeo `Grand Theft Auto VI: An Extended Look` usa o MP4 da CDN oficial da Rockstar, com controles nativos e 14 opções de legenda, incluindo português do Brasil. O carregamento é iniciado apenas por ação do visitante (`preload="none"`). O link fornecido corresponde a GTA VI, não San Andreas. A reprodução alternativa não altera as restrições do YouTube.

## Organização dos conjuntos

- GTA V reúne o jogo base, Enhanced e Online. As cinco plataformas/edições aparecem em duas linhas no desktop: Enhanced e PS5/Xbox Series na primeira; PC Legacy, PS4/Xbox One e PS3/Xbox 360 na segunda.
- O trailer de GTAV Enhanced é o mais recente da seleção de GTA V; o vídeo de PC a 60 fps usa a miniatura oficial da Rockstar como poster.
- The Trilogy – The Definitive Edition é um conjunto único com versões para console/PC, Steam e mobile.
- Os conjuntos mobile anteriores foram preservados.
- London 1961 e 1969 dividem um bloco e um wallpaper; em telas pequenas ficam empilhados.
- Os botões Visão do jogador e Rever estão reservados e identificados como Em breve.