Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:RecipeBlock: Difference between revisions

Template page
Undo revision 5857 by Hytalewiki (talk)
Tags: Replaced Undo
No edit summary
Line 1: Line 1:
<div class="recipe-visual" style="display:flex; flex-wrap:wrap; align-items:flex-start; gap:1em; padding:1em; margin-top:1em;">
<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="flex:1; min-width:250px;">
   
<table style="width:100%; border-collapse:collapse;">
    <!-- Left Column: Ingredients -->
<tr>
    <div>
  <th style="text-align:left; padding:4px; width:32px">Icon</th>
      <h4 style="color: #3498db; margin-top: 0; margin-bottom: 1em; font-size: 1.1em;">
  <th style="text-align:left; padding:4px;">Material</th>
        📦 Required Materials
  <th style="text-align:right; padding:4px;">Quantity</th>
      </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>


<!-- Bench / Tier -->
    <!-- Right Column: Crafting Info -->
<div style="margin-top:1em; font-size:90%;">
    <div>
<span style="font-weight:bold;">Workbench:</span> [[{{{bench}}}]]<br/>
      <h4 style="color: #3498db; margin-top: 0; margin-bottom: 1em; font-size: 1.1em;">
<span style="font-weight:bold;">Required Tier:</span> {{{tier}}}<br/>
        ⚙️ Crafting Details
<span style="font-weight:bold;">Crafting Time:</span> {{{time}}}<br/>
      </h4>
<span style="font-weight:bold;">Requirements:</span> {{{requirements}}}
     
      <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)


</div>
[[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)