Predefinição:TesteMapaTrilha - Histórico de revisão

Ceu azul em 19h06min de 10 de abril de 2026

2026-04-10T19:06:09Z

← Edição anterior		Edição das 19h06min de 10 de abril de 2026
Linha 31:		Linha 31:
	<circle cx="600" cy="100" r="6" fill="red" />		<circle cx="600" cy="100" r="6" fill="red" />
	</svg>		</svg>
			</div>
	</includeonly>		</includeonly>

Ceu azul em 19h04min de 10 de abril de 2026

2026-04-10T19:04:32Z

← Edição anterior		Edição das 19h04min de 10 de abril de 2026
Linha 1:		Linha 1:
	<includeonly>		<includeonly>
	~~<!-- CSS Específico para esta predefinição -->~~
	~~<style>~~
	~~.meu-container {~~
	~~border: 2px solid #3366cc;~~
	~~background-color: #f8f9fa;~~
	~~padding: 15px;~~
	~~border-radius: 8px;~~
	~~font-family: sans-serif;~~
	}
	~~.meu-titulo {~~
	~~color: #3366cc;~~
	~~margin-top: 0;~~
	~~font-weight: bold;~~
	}
	~~.meu-corpo {~~
	~~color: #333;~~
	}
	~~</style>~~

	<!-- ~~Estrutura HTML~~ -->		<div class="map-container" style="position: relative; width: 600px;">
	<~~div class~~="~~meu~~-~~container"~~>		<!-- Sua imagem de fundo (ex: um mapa de parque ou RPG) -->
	<h2 class="~~meu~~-~~titulo~~">~~{{{titulo\|Título Padrão}}}~~</h2>		<img src="https://wiki.gla.com.br/images/9/9b/Bau_foosha_01.png" style="width: 100%; display: block; filter: brightness(0.8);">
	<~~div~~ class="~~meu~~-~~corpo~~">
	~~{{{conteudo\|Insira o texto aqui.}}}~~		<svg viewBox="0 0 600 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
	</~~div~~>		<!-- O caminho da trilha -->
	</~~div~~>		<path d="M50,300 Q150,50 300,200 T550,100"
			fill="none"
			stroke="#FFD700"
			stroke-width="4"
			stroke-linecap="round"
			class="trilha-pontilhada" />
			</svg>
			<svg viewBox="0 0 800 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 100%;">
			<!-- A trilha que liga os pontos -->
			<path id="trilha"
			d="M 50,350 L 200,250 L 400,300 L 600,100"
			fill="none"
			stroke="#FFD700"
			stroke-width="4"
			stroke-dasharray="1, 10"
			stroke-linecap="round"
			class="trilha-pontilhada"/>

			<!-- Marcadores nos pontos de parada -->
			<circle cx="50" cy="350" r="6" fill="red" />
			<circle cx="200" cy="250" r="6" fill="red" />
			<circle cx="400" cy="300" r="6" fill="red" />
			<circle cx="600" cy="100" r="6" fill="red" />
			</svg>
	</includeonly>		</includeonly>

Ceu azul em 18h59min de 10 de abril de 2026

2026-04-10T18:59:26Z

← Edição anterior		Edição das 18h59min de 10 de abril de 2026
Linha 1:		Linha 1:
			<includeonly>
			<!-- CSS Específico para esta predefinição -->
	<style>		<style>
	~~/* Container que segura a imagem e o SVG */~~		.meu-container {
	.~~mapa~~-container {		border: 2px solid #3366cc;
	~~position~~: ~~relative~~;		background-color: #f8f9fa;
	~~width~~: ~~500px~~; ~~/* Ou 100% para responsividade */~~		padding: 15px;
	~~height~~: ~~300px~~;		border-radius: 8px;
	}		font-family: sans-serif;
			}
	~~/* A imagem do mapa */~~		.meu-titulo {
	~~.mapa~~-~~base {~~		color: #3366cc;
	~~width~~: ~~100%~~;		margin-top: 0;
	~~height~~: ~~100%~~;		font-weight: bold;
	}		}
			.meu-corpo {
	~~/* O SVG sobreposto */~~		color: #333;
	.~~mapa~~-~~overlay~~ {		}
	~~position~~: ~~absolute~~;
	top: 0;
	~~left~~: 0;
	~~width: 100%;~~
	~~height: 100%;~~
	}

	~~/* Estilização interativa do path */~~
	.~~area~~-~~mapa~~ {
	~~fill: rgba(0, 0, 255, 0.3); /* Cor transparente inicial */~~
	~~stroke: blue;~~
	~~stroke-width: 2;~~
	~~cursor: pointer;~~
	~~transition~~: ~~fill 0.3s~~;
	}

	~~.area-mapa:hover {~~
	~~fill: rgba(0, 0, 255, 0.6); /* Cor ao passar o mouse */~~
	}
	</style>		</style>

	~~<div class="map-container" style="position: relative; width: 600px;">~~		<!-- Estrutura HTML -->
	<!-- ~~Sua imagem de fundo (ex: um mapa de parque ou RPG)~~ -->		<div class="meu-container">
	<~~img src~~="~~https://wiki.gla.com.br/images/9/9b/Bau_foosha_01.png" style="width: 100%; display: block; filter: brightness(0.8);">~~		<h2 class="meu-titulo">{{{titulo\|Título Padrão}}}</h2>
			<div class="meu-corpo">
	~~<svg viewBox="0 0 600 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;~~">		{{{conteudo\|Insira o texto aqui.}}}
	<~~!-- O caminho da trilha -->~~		</div>
	~~<path d="M50,300 Q150,50 300,200 T550,100"~~
	~~fill="none"~~
	~~stroke="#FFD700"~~
	~~stroke-width="4"~~
	~~stroke-linecap="round"~~
	class="~~trilha~~-~~pontilhada~~" />
	</~~svg~~>
	<~~svg viewBox="0 0 800 400" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 100%;">~~
	~~<!-- A trilha que liga os pontos -->~~
	~~<path id="trilha"~~
	~~d="M 50,350 L 200,250 L 400,300 L 600,100"~~
	~~fill="none"~~
	~~stroke="#FFD700"~~
	~~stroke-width="4"~~
	~~stroke-dasharray="1, 10"~~
	~~stroke-linecap="round"~~
	class="~~trilha~~-~~pontilhada~~"/>

	<~~!-- Marcadores nos pontos de parada -->~~
	~~<circle cx="50" cy="350" r="6" fill="red"~~ />
	~~<circle cx="200" cy="250" r="6" fill="red" />~~
	~~<circle cx="400" cy="300" r="6" fill="red" />~~
	~~<circle cx="600" cy="100" r="6" fill="red" />~~
	~~</svg>~~

	</div>		</div>
			</includeonly>
	<~~style>~~
	~~.trilha-pontilhada {~~
	/* O primeiro número é o tamanho do ponto, o segundo é o espaço */
	~~stroke-dasharray: 1, 12;~~
	~~filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));~~
	~~animation: caminhar 20s linear infinite;~~
	}

	~~/* Opcional: Animação para a trilha "se mexer" */~~
	~~@keyframes caminhar {~~
	~~from { stroke-dashoffset: 100; }~~
	~~to { stroke-dashoffset: 0; }~~
	}
	~~</style~~>

Ceu azul: Criou página com '