index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initialscale=1.0">
  6. <title>IPERION-HS Semantic Data Integrator (task 5.4)</title>
  7. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  8. <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  9. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  10. <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">
  11. </head>
  12. <body>
  13. <header class="sticky-top">
  14. <nav class="navbar navbar-expand-lg navbar-light bg-white">
  15. <div class="container-fluid">
  16. <div class="navbar-brand">
  17. <a href="https://www.iperionhs.eu/"><img src="http://restore.ovi.cnr.it/img/LogoIperion.png" width="200" alt="Iperion" /></a>
  18. </div>
  19. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  20. <span class="navbar-toggler-icon"></span>
  21. </button>
  22. <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
  23. <ul class="navbar-nav">
  24. <li class="nav-item">
  25. <a class="nav-link" href="https://www.iperionhs.eu/">Iperion</a>
  26. </li>
  27. <li class="nav-item">
  28. <a class="nav-link" href="https://marketplace.sshopencloud.eu/tool-or-service/pIyy0d">Raise</a>
  29. </li>
  30. <li class="nav-item active">
  31. <a class="nav-link" href="#">Demo</a>
  32. </li>
  33. </ul>
  34. </div>
  35. </div>
  36. </nav>
  37. </header>
  38. <h1 style="margin-left: 1em">IPERION-HS Semantic Data Integrator (task 5.4)</h1>
  39. <form method="POST" enctype = "multipart/form-data" style="margin: 2em; border-style: groove; padding: 2em;">
  40. <div>
  41. Upload a CSV file:
  42. <fieldset>
  43. <input type="file" id="FILE" name="FILE"><br/><br/>
  44. </fieldset>
  45. <input id="submitted" type="submit" value="Activate Transformation" >
  46. </div>
  47. <div>
  48. <br/>... or manually enter the data of a record:<br/><br/>
  49. <fieldset>
  50. <legend>Record:</legend>
  51. {% for entry in data: %}
  52. <label for="nome">{{entry}}</label><br>
  53. <input type="text" id="{{entry}}" name="{{entry}}" placeholder="data"><br><br>
  54. {% endfor %}
  55. </fieldset>
  56. </div>
  57. </form>
  58. <p>When you activate this tool, input data is translated into RDF (TTL) via a user-customizable model</p>
  59. <script>
  60. $("#submitted").click(function() {
  61. alert("transformation carried out successfully");
  62. });
  63. </script>
  64. </body>
  65. </html>