Usuário Discussão:Ttuzu - Histórico de revisão

Ttuzu: Limpou toda a página

2025-06-10T22:51:07Z

Limpou toda a página

Ttuzu: /* Personagem:Franky (Timeskip) */ nova seção

2025-06-10T22:39:10Z

Personagem:Franky (Timeskip): nova seção

← Edição anterior		Edição das 22h39min de 10 de junho de 2025
Linha 503:		Linha 503:
	</pre>		</pre>
	</noinclude>		</noinclude>

			== Personagem:Franky (Timeskip) ==

			{{Persona
			\|Nome=Franky (Timeskip)
			\|tier=Diamante
			\|classe=Atirador/Tanque
			\|image=File:Franky_Timeskip_Art.png \|habilidadesRaw=<nowiki>
			nome=Rocket Launcher
			icon=File:Icon_Rocket_Launcher.png level=70
			desc=Usando a tecnologia que adquiriu em Bajimroa Island, Franky usa seus grandes ombros, dos quais ele libera uma linha (Raffle Franky 1/?) revelando três pequenos, porém poderosos, mísseis que serão lançados no oponente. Causa dano em uma grande área e para o oponente. Oponentes que estiverem no caminho dos mísseis recebem apenas 75% de dano e não são punidos.
			atr=File:Icon_Cooldown.png,35 SEG,File:Icon_Cost.png,-,File:Icon_Range.png,40,File:Icon_Damage.png,35 video=File:Video_Rocket_Launcher.webm \|\|
			nome=Punch de Aço
			icon=File:Icon_Punch.png
			level=60
			desc=Franky desfere um soco poderoso, causando dano massivo e atordoando o alvo por um breve período.
			atr=File:Icon_Cooldown.png,20 SEG,File:Icon_Cost.png,50,File:Icon_Range.png,5,File:Icon_Damage.png,120
			video=File:Video_Punch.webm
			</nowiki>
			\|skinsRaw=<nowiki>
			nome=Skin Padrão
			image=File:Skin_Franky_Default.png
			desc=Aparência original de Franky.
			\|\|
			nome=Skin de Férias
			image=File:Skin_Franky_Vacation.png
			desc=Franky pronto para relaxar na praia.
			</nowiki>
			}}

Ttuzu: /* Predefinição:Persona */ nova seção

2025-06-10T22:37:56Z

Predefinição:Persona: nova seção

← Edição anterior		Edição das 22h37min de 10 de junho de 2025
Linha 418:		Linha 418:

	})();		})();

			== Predefinição:Persona ==

			<includeonly>{{#tag:div\|
			<div class="persona-container">
			<div class="persona-header">
			<img class="art-personagem" src="{{{image\|}}}" alt="Arte do personagem">
			<div class="persona-info">
			<h1 class="persona-name"></h1>
			<p class="persona-tier"></p>
			<p class="persona-class"></p>
			</div>
			</div>

			<div class="persona-tabs">
			<button class="tab-btn active" data-tab="habilidades">Habilidades</button>
			<button class="tab-btn" data-tab="skins">Skins</button>
			</div>

			<div id="persona-data"
			data-nome="{{{Nome\|}}}"
			data-tier="{{{tier\|}}}"
			data-classe="{{{classe\|}}}"
			data-image="{{{image\|}}}"
			data-habilidadesraw="{{{habilidadesRaw\|}}}"
			data-skinsraw="{{{skinsRaw\|}}}">
			</div>

			<div class="habilidades-details">
			<div class="cuadros-container habilidades-container">
			</div>
			<div class="descripcion-container">
			<h3 class="ability-name-level">
			<span class="ability-name-text"></span> <span class="ability-level-text"></span>
			<div class="ability-attributes">
			</div>
			</h3>
			<p class="ability-desc"></p>
			<div class="ability-video-container">
			<video class="ability-video" controls poster="">
			<source src="" type="video/webm">
			Seu navegador não suporta o elemento de vídeo.
			</video>
			</div>
			</div>
			</div>
			</div>
			}}<templatestyles src="Predefinição:Persona/styles.css" /><widget name="Persona" /></includeonly><noinclude>
			{{Documentação da Predefinição 'Persona'}}
			Esta predefinição gera uma ficha interativa de personagem, conectada a um widget em JavaScript que exibe habilidades e skins de forma dinâmica.

			== Exemplo para Copiar e Colar ==
			<pre>
			{{Persona
			\|Nome=Franky (Timeskip)
			\|tier=Diamante
			\|classe=Atirador/Tanque
			\|image=Caminho/Para/ImagemDoFranky.png
			\|habilidadesRaw=<nowiki>
			nome=Rocket Launcher
			icon=/caminho/para/icone_rocket_launcher.png
			level=70
			desc=Usando a tecnologia que adquiriu em Bajimroa Island, Franky usa seus grandes ombros, dos quais ele libera uma linha (Raffle Franky 1/?) revelando três pequenos, porém poderosos, mísseis que serão lançados no oponente. Causa dano em uma grande área e para o oponente. Oponentes que estiverem no caminho dos mísseis recebem apenas 75% de dano e não são punidos.
			atr=/caminho/para/icone_cooldown.png,35 SEG,/caminho/para/icone_custo.png,-,/caminho/para/icone_alcance.png,40,/caminho/para/icone_dano.png,35
			video=/caminho/para/video_rocket_launcher.webm
			\|\|
			nome=Punch de Aço
			icon=/caminho/para/icone_punch.png
			level=60
			desc=Franky desfere um soco poderoso, causando dano massivo e atordoando o alvo por um breve período.
			atr=/caminho/para/icone_cooldown.png,20 SEG,/caminho/para/icone_custo.png,50,/caminho/para/icone_alcance.png,5,/caminho/para/icone_dano.png,120
			video=/caminho/para/video_punch.webm
			</nowiki>
			\|skinsRaw=<nowiki>
			nome=Skin Padrão
			image=/caminho/para/skin_padrao.png
			desc=Aparência original de Franky.
			\|\|
			nome=Skin de Férias
			image=/caminho/para/skin_ferias.png
			desc=Franky pronto para relaxar na praia.
			</nowiki>
			}}
			</pre>
			</noinclude>

Ttuzu: /* Predefinição:Persona/styles.css */

2025-06-10T22:31:41Z

Predefinição:Persona/styles.css

Mostrar alterações

Ttuzu: /* Widget:Persona */ nova seção

2025-06-10T22:30:43Z

Widget:Persona: nova seção

Mostrar alterações

Ttuzu: /* Predefinição:Persona/styles.css */ nova seção

2025-06-10T22:29:50Z

Predefinição:Persona/styles.css: nova seção

Página nova

== Predefinição:Persona/styles.css ==

@media (min-width: 1280px) and (min-aspect-ratio: 3/4) {
.habilidades-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
width: 90%;
align-self: center;
margin-top: 20px;
}

.habilidades-container {
flex-direction: column-reverse;
width: 100%;
}

.cuadros-container {
display: flex;
flex-wrap: nowrap;
gap: 16px;
width: 100%;
overflow-x: auto;
padding-bottom: 8px;
margin-bottom: 1%;
justify-self: center;
justify-content: flex-start;
}

.descripcion-container {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
padding: 20px;
background-color: #2a2a2a;
border-radius: 8px;
}

.descripcion-container h3 {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
color: #fff;
font-size: 1.5em;
margin-bottom: 10px;
}

.ability-name-text {
font-weight: bold;
}

.ability-level-text {
font-size: 0.8em;
color: #bbb;
}

.ability-attributes {
display: flex;
align-items: center;
gap: 10px;
}

.ability-attributes div {
display: flex;
align-items: center;
gap: 5px;
color: #fff;
font-size: 0.9em;
}

.ability-attributes img {
width: 24px;
height: 24px;
vertical-align: middle;
}

.ability-desc {
color: #ccc;
line-height: 1.5;
font-size: 1.1em;
margin-bottom: 15px;
}

.ability-video-container {
width: 100%;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-top: auto;
}

.ability-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 4px;
background-color: #000;
}

.cuadros-container .cuadro {
flex: 0 0 auto;
width: 60px;
height: 60px;
border-radius: 8px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease-in-out;
background-size: cover;
background-position: center;
background-color: #333;
overflow: hidden;
}

.cuadros-container .cuadro.active {
border-color: #007bff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.6);
}
}

.persona-container {
max-width: 1200px;
margin: 20px auto;
background-color: #1a1a1a;
color: #fff;
font-family: sans-serif; /* Usar fonte padrão, ou especificar uma que você importe */
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
padding: 20px;
}

.persona-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #333;
}

.art-personagem {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #007bff;
}

.persona-info h1 {
font-size: 2.5em;
margin: 0;
color: #007bff;
}

.persona-info p {
margin: 5px 0;
color: #bbb;
}

.persona-tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #333;
}

.tab-btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 1.1em;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
transition: background-color 0.3s ease;
margin-right: 5px;
}

.tab-btn:hover {
background-color: #444;
}

.tab-btn.active {
background-color: #007bff;
color: #fff;
border-bottom: 2px solid #007bff;
}

@media (max-width: 768px) {
.persona-header {
flex-direction: column;
text-align: center;
}

.persona-info {
text-align: center;
}

.habilidades-details {
flex-direction: column;
width: 95%;
}

.cuadros-container {
flex-wrap: wrap;
justify-content: center;
}

.cuadros-container .cuadro {
width: 50px;
height: 50px;
}

.descripcion-container h3 {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}

.ability-attributes {
margin-top: 10px;
justify-content: center;
flex-wrap: wrap;
}
}