<div id="layout">
<input type="checkbox" id="menu-trigger">
<div id="off-screen-menu">
<nav id="main-nav">
<ul class="flat-list">
<li>
<a href="../preview/dashboard.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dashboard" />
</svg>
Dashboard
</a>
</li>
<li>
<a href="../preview/account-settings.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#settings" />
</svg>
Account settings
</a>
</li>
<li>
<a href="../preview/suppliers.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#package" />
</svg>
Suppliers
</a>
</li>
<li>
<a href="../preview/new-wine.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#upload" />
</svg>
Add wines
</a>
</li>
<li>
<a href="../preview/my-wine-cellar.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#view-list" />
</svg>
My wine cellar
</a>
</li>
<li>
<a href="../preview/wine-cellar-inventory.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#inventory" />
</svg>
Wine cellar inventory
</a>
</li>
<li>
<a href="../preview/add-dishes.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#dish" />
</svg>
Dishes
</a>
</li>
<li>
<a href="../preview/orders.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-check" />
</svg>
Orders
</a>
</li>
<li>
<a href="../preview/digital-sommelier.html">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#sommelier" />
</svg>
Digital Sommelier
</a>
</li>
<li>
<a href="../preview/login.html" class="logout">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logout" />
</svg>
Log out
</a>
</li>
</ul>
</nav>
<div class="lang-selector">
<label for="lang-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-gb" />
</svg>
English
</label>
<input type="checkbox" id="lang-trigger">
<ul class="flat-list lang-list">
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-se" />
</svg>
Svenska
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-no" />
</svg>
Norsk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-dk" />
</svg>
Dansk
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-de" />
</svg>
Deutsch
</a>
</li>
<li>
<a href="#">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#flag-fr" />
</svg>
Français
</a>
</li>
</ul>
</div>
</div>
<header id="header">
<div class="header-content">
<p class="main-title">
<a href="../preview/dashboard.html" class="block-link"><svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#logo-badge" />
</svg>
Fine Wine Club</a>
</p>
</div>
<div class="header-content">
<div class="shopping-list-wrapper">
<label for="shopping-list-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-list" />
</svg>
<span class="trigger-label">Shopping list</span>
<span class="list-counter">3</span>
</label>
<input id="shopping-list-trigger" type="checkbox">
<div class="shopping-list">
<form action="#" method="post">
<div class="shopping-list-content">
<table class="shopping-list-table">
<thead>
<tr>
<th scope="col">Producer</th>
<th scope="col">Wine</th>
<th scope="col">Vintage</th>
<th scope="col"><span class="at-only">Remove</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Chateu Pontet-Canet</td>
<td>Chateu Pontet-Canet</td>
<td>2010</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Aalto</td>
<td>PS</td>
<td>2015</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td>Roederer</td>
<td>Cristal</td>
<td>2009</td>
<td><button type="button" class="size-xs alt" aria-label="Remove wine">
<span>
<svg class="icon size-xs alt" height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#delete" />
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="submit-area ">
<button type="button" data-prototype-url="../preview/orders.html">
<span>
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#clipboard-add" />
</svg>
<span>Create purchase orders</span>
</span>
</button>
</div>
</div>
</form>
</div>
</div>
<label for="menu-trigger">
<svg class="icon " height="20" width="20" aria-hidden="true">
<use xlink:href="../../sprite.svg#menu" />
</svg>
Menu
</label>
</div>
</header>
<main id="main-content">
<h1>Add wines to your wine cellar</h1>
<article class="article-wide">
<div class="tabbed">
<ul class="flat-list">
<li>
<a href="#section-0">
<span>Upload wine</span>
</a>
</li>
<li>
<a href="#section-1">
<span>Add wine manually</span>
</a>
</li>
</ul>
<section id="section-1">
<form action="#" method="post" class="upload-form">
<p>Use this form to upload your wine cellar. To make things as smooth as
possible, we’ve got a spreadsheet template that you can use to ensure that
you data is uploaded properly.</p>
<p><a href="#"><svg class="icon " height="16" width="16" aria-hidden="true">
<use xlink:href="../../sprite.svg#file-spreadsheet" />
</svg>
Download the spreadsheet template.</a></p>
<div class="file-input">
<label>
<em class="upload-message">Drop your filled out template file here, or click to select the file from your device.
</em>
<input id="file-upload" name="files" type="file">
<span id="upload-info"></span>
</label>
</div>
<div class="submit-area">
<button type="button" data-prototype-url="../preview/wine-matching.html">
<span>
<span>Upload</span>
</span>
</button>
</div>
</form>
</section>
<section id="section-2">
<form action="#" method="post" class="form-general">
<div class="new-wine">
<div class="form-item ">
<label for="97602315-9c71-01c8-abdb-0a1c7aac9933">
Producer
</label>
<input type="text" id="97602315-9c71-01c8-abdb-0a1c7aac9933" value="">
</div>
<div class="form-item ">
<label for="ffe867f0-8734-72b4-259a-acfe221cf5ae">
Wine name
</label>
<input type="text" id="ffe867f0-8734-72b4-259a-acfe221cf5ae" value="">
</div>
<div class="form-item ">
<label for="eefaa309-dfd9-8d07-b317-46b0e6e16d71">
Country
</label>
<input type="text" id="eefaa309-dfd9-8d07-b317-46b0e6e16d71" value="">
</div>
<div class="form-item ">
<label for="71c4de34-f6ce-5d5d-db3e-d1911ba1580e">
Region
</label>
<input type="text" id="71c4de34-f6ce-5d5d-db3e-d1911ba1580e" value="">
</div>
<div class="form-item ">
<label for="d8df1db3-297d-bab5-f6e3-01e71e04d307">
District
</label>
<input type="text" id="d8df1db3-297d-bab5-f6e3-01e71e04d307" value="">
</div>
<div class="form-item ">
<label for="ca823794-4fe7-1320-0884-f6bc2c30196e">
Vintage
</label>
<input type="text" id="ca823794-4fe7-1320-0884-f6bc2c30196e" value="">
</div>
<div class="form-item ">
<label for="fc484bca-58ed-c652-de15-08e241177ad1">
Bottle size
</label>
<input type="text" id="fc484bca-58ed-c652-de15-08e241177ad1" value="">
</div>
<div class="form-item ">
<label for="9670ff68-4caf-e41d-c382-6fa4b25094a8">
Bottles/case
</label>
<input type="text" id="9670ff68-4caf-e41d-c382-6fa4b25094a8" value="">
</div>
<div class="form-item ">
<label for="f2c6db51-4dd5-ae15-62ba-e7b8f312da77">
Bottles in wine cellar
</label>
<input type="text" id="f2c6db51-4dd5-ae15-62ba-e7b8f312da77" value="">
</div>
<div class="form-item ">
<label for="336e44cd-89b6-7b1d-bf38-b7762638e48c">
Supplier
</label>
<input type="text" id="336e44cd-89b6-7b1d-bf38-b7762638e48c" value="">
</div>
<div class="form-item ">
<label for="65f3b137-1682-4cdc-fc65-bccefc9d3479">
Purchase Price per bottle(ex VAT)
</label>
<input type="text" id="65f3b137-1682-4cdc-fc65-bccefc9d3479" value="">
</div>
<div class="form-item ">
<label for="5b430a11-2f93-6c14-fa15-910b4a33a39d">
Price per bottle in winelist (ex VAT)
</label>
<input type="text" id="5b430a11-2f93-6c14-fa15-910b4a33a39d" value="">
</div>
</div>
<div class="submit-area ">
<button type="button">
<span>
<span>Save wine</span>
</span>
</button>
</div>
</form>
</section>
</div>
</article>
</main>
</div>
{{#> @regular-page}}
<h1>Add wines to your wine cellar</h1>
{{#> @article--wide}}
{{#> @tab-interface}}
{{#> @tab-panel id="1"}}
{{render '@upload-form'}}
{{/ @tab-panel}}
{{#> @tab-panel id="2"}}
{{#> @form-general wine-details}}
{{> @new-wine-form}}
{{> @submit-area}}
{{/ @form-general}}
{{/ @tab-panel}}
{{/ @tab-interface}}
{{/ @article--wide}}
{{/ @regular-page}}
{
"tabs": [
{
"title": "Upload wine"
},
{
"title": "Add wine manually"
}
],
"wine-details": {
"input-fields": [
{
"label": "Producer"
},
{
"label": "Wine name"
},
{
"label": "Country"
},
{
"label": "Region"
},
{
"label": "District"
},
{
"label": "Vintage"
},
{
"label": "Bottle size"
},
{
"label": "Bottles/case"
},
{
"label": "Bottles in wine cellar"
},
{
"label": "Supplier"
},
{
"label": "Purchase Price per bottle(ex VAT)"
},
{
"label": "Price per bottle in winelist (ex VAT)"
}
],
"submit-button": {
"text": "Save wine"
}
}
}
No notes defined.