|
|
| (5 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <div class="recipe-container" style=" | | <div class="recipe-container"> |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
| | <h3 class="recipe-header">Crafting Recipe</h3> |
| 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;
| |
| ">
| |
| <h3 style="margin: 0; color: #3498db; font-size: 1.3em;">Crafting Recipe</h3>
| |
| </div>
| |
|
| |
|
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2em;"> | | <div class="recipe-grid"> |
| | | |
| <!-- Left Column: Ingredients --> | | <!-- Left Column: Ingredients --> |
| <div> | | <div> |
| <h4 style="color: #3498db; margin-top: 0; margin-bottom: 1em; font-size: 1.1em;"> | | <h4 class="recipe-section-title">📦 Required Materials</h4> |
| 📦 Required Materials
| |
| </h4>
| |
| | | |
| <table style="width: 100%; border-collapse: separate; border-spacing: 0;"> | | <table class="recipe-table"> |
| <tr style="background: rgba(52, 152, 219, 0.1); border-bottom: 2px solid #0f4c75;"> | | <tr class="recipe-table-header"> |
| <th style="padding: 8px; text-align: left; color: #3498db; width: 50px;">Icon</th> | | <th>Icon</th> |
| <th style="padding: 8px; text-align: left; color: #3498db;">Material</th> | | <th>Material</th> |
| <th style="padding: 8px; text-align: center; color: #3498db; width: 70px;">Qty</th> | | <th>Qty</th> |
| </tr> | | </tr> |
| {{{ingredients}}} | | {{{ingredients}}} |
| Line 39: |
Line 20: |
| <!-- Right Column: Crafting Info --> | | <!-- Right Column: Crafting Info --> |
| <div> | | <div> |
| <h4 style="color: #3498db; margin-top: 0; margin-bottom: 1em; font-size: 1.1em;"> | | <h4 class="recipe-section-title">⚙️ Crafting Details</h4> |
| ⚙️ Crafting Details
| |
| </h4>
| |
| | | |
| <div style="background: rgba(15, 76, 117, 0.2); border-radius: 8px; padding: 1em;"> | | <div class="crafting-details"> |
| | | |
| <!-- Workbench -->
| | <div class="detail-item"> |
| <div style="display: grid; grid-template-columns: 40px 1fr; gap: 0.75em; align-items: center; margin-bottom: 0.75em; padding: 0.75em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;"> | | <div class="detail-icon">{{{bench_icon}}}</div> |
| <div style="width: 40px; height: 40px; background: rgba(0,0,0,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2em;">🔧</div> | |
| <div> | | <div> |
| <div style="font-size: 0.85em; color: #95a5a6;">Workbench</div> | | <div class="detail-label">Workbench</div> |
| <div style="font-weight: bold; color: #ecf0f1;">[[{{{bench}}}]]</div> | | <div class="detail-value">[[{{{bench}}}]]</div> |
| </div> | | </div> |
| </div> | | </div> |
|
| |
|
| <!-- Tier -->
| | <div class="detail-item"> |
| <div style="display: grid; grid-template-columns: 40px 1fr; gap: 0.75em; align-items: center; margin-bottom: 0.75em; padding: 0.75em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;"> | | <div class="detail-icon">⭐</div> |
| <div style="width: 40px; height: 40px; background: rgba(0,0,0,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2em;">⭐</div> | |
| <div> | | <div> |
| <div style="font-size: 0.85em; color: #95a5a6;">Workbench Tier</div> | | <div class="detail-label">Workbench Tier</div> |
| <div style="font-weight: bold; color: #ecf0f1;">{{{tier}}}</div> | | <div class="detail-value">{{{tier}}}</div> |
| </div> | | </div> |
| </div> | | </div> |
|
| |
|
| <!-- Time -->
| | <div class="detail-item"> |
| <div style="display: grid; grid-template-columns: 40px 1fr; gap: 0.75em; align-items: center; margin-bottom: 0.75em; padding: 0.75em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;"> | | <div class="detail-icon">⏱️</div> |
| <div style="width: 40px; height: 40px; background: rgba(0,0,0,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2em;">⏱️</div> | |
| <div> | | <div> |
| <div style="font-size: 0.85em; color: #95a5a6;">Crafting Time</div> | | <div class="detail-label">Crafting Time</div> |
| <div style="font-weight: bold; color: #ecf0f1;">{{{time}}}</div> | | <div class="detail-value">{{{time}}}</div> |
| </div> | | </div> |
| </div> | | </div> |
|
| |
|
| <!-- Requirements -->
| | <div class="detail-item"> |
| <div style="display: grid; grid-template-columns: 40px 1fr; gap: 0.75em; align-items: center; padding: 0.75em; background: rgba(52, 152, 219, 0.1); border-radius: 6px;"> | | <div class="detail-icon">📋</div> |
| <div style="width: 40px; height: 40px; background: rgba(0,0,0,0.3); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2em;">📋</div> | |
| <div> | | <div> |
| <div style="font-size: 0.85em; color: #95a5a6;">Requirements</div> | | <div class="detail-label">Requirements</div> |
| <div style="font-weight: bold; color: #ecf0f1;">{{{requirements}}}</div> | | <div class="detail-value">{{{requirements}}}</div> |
| </div> | | </div> |
| </div> | | </div> |
|
| |
|
| </div>
| |
|
| |
| <!-- Output Product -->
| |
| <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;
| |
| ">
| |
| <div style="font-size: 0.85em; color: #95a5a6; margin-bottom: 0.75em; text-align: center;">Produces</div>
| |
| <div style="display: flex; align-items: center; justify-content: center; gap: 1em;">
| |
| {{#if:{{{icon|}}}|
| |
| <div style="background: rgba(0,0,0,0.3); padding: 0.5em; border-radius: 6px;">
| |
| [[File:{{{icon}}}|64px]]
| |
| </div>
| |
| }}
| |
| <div style="font-weight: bold; color: #2ecc71; font-size: 1.2em;">{{{name}}}</div>
| |
| </div>
| |
| </div> | | </div> |
| </div> | | </div> |
| Line 105: |
Line 61: |
| </div> | | </div> |
| </div> | | </div> |
|
| |
| <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>
| |
