Template:RecipeBlock: Difference between revisions
Template page
More actions
Hytalewiki (talk | contribs) Undo revision 5857 by Hytalewiki (talk) Tags: Replaced Undo |
Hytalewiki (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
<div class="recipe- | <div class="recipe-container" style=" | ||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |||
border: 2px solid #0f4c75; | |||
border-radius: 12px; | |||
padding: 1.5em; | |||
margin: 1.5em 0; | |||
box-shadow: 0 4px 15px rgba(0,0,0,0.3); | |||
"> | |||
<!-- Header --> | |||
<div style=" | |||
display: flex; | |||
align-items: center; | |||
gap: 0.5em; | |||
margin-bottom: 1.5em; | |||
padding-bottom: 0.75em; | |||
border-bottom: 2px solid #0f4c75; | |||
"> | |||
<span style="font-size: 1.5em;">🔨</span> | |||
<h3 style="margin: 0; color: #3498db; font-size: 1.3em;">Crafting Recipe</h3> | |||
</div> | |||
<!-- Ingredients --> | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2em;"> | ||
<div style=" | |||
<table style="width:100%; border-collapse: | <!-- Left Column: Ingredients --> | ||
<tr> | <div> | ||
<h4 style="color: #3498db; margin-top: 0; margin-bottom: 1em; font-size: 1.1em;"> | |||
📦 Required Materials | |||
</h4> | |||
</tr> | |||
{{{ingredients}}} | <table style="width: 100%; border-collapse: separate; border-spacing: 0;"> | ||
</table> | <thead> | ||
<tr style="background: rgba(52, 152, 219, 0.1); border-bottom: 2px solid #0f4c75;"> | |||
<th style="padding: 8px; text-align: left; color: #3498db; width: 50px;">Icon</th> | |||
<th style="padding: 8px; text-align: left; color: #3498db;">Material</th> | |||
<th style="padding: 8px; text-align: center; color: #3498db; width: 70px;">Qty</th> | |||
</tr> | |||
</thead> | |||
<tbody> | |||
{{{ingredients}}} | |||
</tbody> | |||
</table> | |||
</div> | |||
<!-- | <!-- Right Column: Crafting Info --> | ||
<div style="margin-top:1em; font-size: | <div> | ||
<span style="font- | <h4 style="color: #3498db; margin-top: 0; margin-bottom: 1em; font-size: 1.1em;"> | ||
<span style="font- | ⚙️ Crafting Details | ||
<span style="font- | </h4> | ||
<span style="font-weight:bold;"> | |||
<div style="background: rgba(15, 76, 117, 0.2); border-radius: 8px; padding: 1em;"> | |||
<!-- Workbench --> | |||
<div style="display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.75em; padding: 0.5em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;"> | |||
<span style="font-size: 1.2em;">🔧</span> | |||
<div> | |||
<div style="font-size: 0.85em; color: #95a5a6;">Workbench</div> | |||
<div style="font-weight: bold; color: #ecf0f1;">[[{{{bench}}}]]</div> | |||
</div> | |||
</div> | |||
<!-- Tier --> | |||
<div style="display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.75em; padding: 0.5em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;"> | |||
<span style="font-size: 1.2em;">⭐</span> | |||
<div> | |||
<div style="font-size: 0.85em; color: #95a5a6;">Required Tier</div> | |||
<div style="font-weight: bold; color: #ecf0f1;">{{{tier}}}</div> | |||
</div> | |||
</div> | |||
<!-- Time --> | |||
<div style="display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.75em; padding: 0.5em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;"> | |||
<span style="font-size: 1.2em;">⏱️</span> | |||
<div> | |||
<div style="font-size: 0.85em; color: #95a5a6;">Crafting Time</div> | |||
<div style="font-weight: bold; color: #ecf0f1;">{{{time}}}</div> | |||
</div> | |||
</div> | |||
<!-- Requirements --> | |||
<div style="display: flex; align-items: center; gap: 0.5em; padding: 0.5em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;"> | |||
<span style="font-size: 1.2em;">📋</span> | |||
<div> | |||
<div style="font-size: 0.85em; color: #95a5a6;">Requirements</div> | |||
<div style="font-weight: bold; color: #ecf0f1;">{{{requirements}}}</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- Output Product --> | |||
{{#if:{{{output|}}}| | |||
<div style=" | |||
margin-top: 1em; | |||
padding: 1em; | |||
background: linear-gradient(135deg, rgba(46, 213, 115, 0.15), rgba(52, 152, 219, 0.15)); | |||
border: 2px solid #2ecc71; | |||
border-radius: 8px; | |||
text-align: center; | |||
"> | |||
<div style="font-size: 0.85em; color: #95a5a6; margin-bottom: 0.5em;">Produces</div> | |||
<div style="font-weight: bold; color: #2ecc71; font-size: 1.1em;">{{{output}}}</div> | |||
</div> | |||
}} | |||
</div> | |||
</div> | |||
</div> | </div> | ||
</div> | <!-- Estilos para las filas de ingredientes --> | ||
<style> | |||
.recipe-container tbody tr { | |||
background: rgba(255, 255, 255, 0.02); | |||
transition: background 0.2s ease; | |||
} | |||
.recipe-container tbody tr:hover { | |||
background: rgba(52, 152, 219, 0.1); | |||
} | |||
.recipe-container tbody td { | |||
padding: 10px 8px; | |||
border-bottom: 1px solid rgba(15, 76, 117, 0.3); | |||
color: #ecf0f1; | |||
} | |||
.recipe-container tbody tr:last-child td { | |||
border-bottom: none; | |||
} | |||
/* Responsive */ | |||
@media (max-width: 768px) { | |||
.recipe-container > div:nth-child(2) { | |||
grid-template-columns: 1fr !important; | |||
} | |||
} | |||
</style><noinclude> | |||
== Usage == | |||
<pre> | |||
{{RecipeBlock | |||
| ingredients = {{RecipeRow|File:Ingredient_Bar_Cobalt.png|Cobalt Ingot|7}} | |||
{{RecipeRow|File:Ingredient_Leather_Heavy.png|Heavy Leather|2}} | |||
{{RecipeRow|File:Ingredient_Fabric_Scrap_Shadoweave.png|Shadoweave Scraps|4}} | |||
| bench = Workbench | |||
| tier = None | |||
| time = 4 seconds | |||
| requirements = None | |||
| output = 1x Cobalt Pickaxe | |||
}} | |||
</pre> | |||
== Parameters == | |||
* '''ingredients''' - Use {{tl|RecipeRow}} template for each ingredient | |||
* '''bench''' - Crafting station required | |||
* '''tier''' - Required tier/level | |||
* '''time''' - Crafting duration | |||
* '''requirements''' - Additional requirements (optional) | |||
* '''output''' - What the recipe produces (optional) | |||
</ | [[Category:Templates]] | ||
</noinclude> | |||
Revision as of 20:35, 18 January 2026
🔨
Crafting Recipe
📦 Required Materials
<thead> </thead> <tbody> {{{ingredients}}} </tbody>| Icon | Material | Qty |
|---|
⚙️ Crafting Details
🔧
Workbench
[[{{{bench}}}]]
⭐
Required Tier
{{{tier}}}
⏱️
Crafting Time
{{{time}}}
📋
Requirements
{{{requirements}}}
<style> .recipe-container tbody tr {
background: rgba(255, 255, 255, 0.02); transition: background 0.2s ease;
}
.recipe-container tbody tr:hover {
background: rgba(52, 152, 219, 0.1);
}
.recipe-container tbody td {
padding: 10px 8px; border-bottom: 1px solid rgba(15, 76, 117, 0.3); color: #ecf0f1;
}
.recipe-container tbody tr:last-child td {
border-bottom: none;
}
/* Responsive */ @media (max-width: 768px) {
.recipe-container > div:nth-child(2) {
grid-template-columns: 1fr !important;
}
} </style>
Usage
{{RecipeBlock
| ingredients = {{RecipeRow|File:Ingredient_Bar_Cobalt.png|Cobalt Ingot|7}}
{{RecipeRow|File:Ingredient_Leather_Heavy.png|Heavy Leather|2}}
{{RecipeRow|File:Ingredient_Fabric_Scrap_Shadoweave.png|Shadoweave Scraps|4}}
| bench = Workbench
| tier = None
| time = 4 seconds
| requirements = None
| output = 1x Cobalt Pickaxe
}}
Parameters
- ingredients - Use Template:Tl template for each ingredient
- bench - Crafting station required
- tier - Required tier/level
- time - Crafting duration
- requirements - Additional requirements (optional)
- output - What the recipe produces (optional)