<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initialscale=1.0">
  <title>IPERION-HS Semantic Data Integrator (task 5.4)</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

  <header class="sticky-top">
		<nav class="navbar navbar-expand-lg navbar-light bg-white">
			<div class="container-fluid">
				<div class="navbar-brand">
					<a href="https://www.iperionhs.eu/"><img src="http://restore.ovi.cnr.it/img/LogoIperion.png" width="200" alt="Iperion" /></a>
				</div>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
					<ul class="navbar-nav">
						<li class="nav-item">
							<a class="nav-link" href="https://www.iperionhs.eu/">Iperion</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="https://marketplace.sshopencloud.eu/tool-or-service/pIyy0d">Raise</a>
						</li>
						<li class="nav-item active">
							<a class="nav-link" href="#">Demo</a>
						</li>
						
					</ul>
				</div>
			</div>
		</nav>
	</header>


<h1 style="margin-left: 1em">IPERION-HS Semantic Data Integrator (task 5.4)</h1>
  <form method="POST" enctype = "multipart/form-data" style="margin: 2em;  border-style: groove;  padding: 2em;">
    <div>
      Upload a CSV file:
      <fieldset>
        <input type="file" id="FILE" name="FILE"><br/><br/>
      </fieldset>
      <input id="submitted" type="submit" value="Activate Transformation" >
    </div>
    <div>
        <br/>... or manually enter the data of a record:<br/><br/>
      <fieldset>
        <legend>Record:</legend>
        {% for entry in data: %}
          <label for="nome">{{entry}}</label><br>
          <input type="text" id="{{entry}}" name="{{entry}}" placeholder="data"><br><br>
        {% endfor %}
      </fieldset>
    </div>
  </form>

<p>When you activate this tool, input data is translated into RDF (TTL) via a user-customizable model</p>
<script>
    $("#submitted").click(function() {
       alert("transformation carried out successfully");
    });
 </script>
</body>
</html>