<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
    <style>
        /* ===================== FILE INPUT ===================== */
         .file-area {
             width: 100%;
             position: relative;
        }
         .file-area input[type=file] {
             position: absolute;
             width: 100%;
             height: 100%;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             opacity: 0;
             cursor: pointer;
        }
         .file-area .file-dummy {
             width: 100%;
             padding: 30px;
             background: rgba(255, 255, 255, 0.2);
             border: 2px dashed rgba(255, 255, 255, 0.2);
             text-align: center;
             transition: background 0.3s ease-in-out;
        }
         .file-area .file-dummy .success {
             display: none;
        }
         .file-area:hover .file-dummy {
             background: rgba(255, 255, 255, 0.1);
        }
         .file-area input[type=file]:focus + .file-dummy {
             outline: 2px solid rgba(255, 255, 255, 0.5);
             outline: -webkit-focus-ring-color auto 5px;
        }
         .file-area input[type=file]:valid + .file-dummy {
             border-color: rgba(0, 255, 0, 0.4);
             background-color: rgba(0, 255, 0, 0.3);
        }
         .file-area input[type=file]:valid + .file-dummy .success {
             display: inline-block;
        }
         .file-area input[type=file]:valid + .file-dummy .default {
             display: none;
        }
        /* ===================== BASIC STYLING ===================== */
         * {
             box-sizing: border-box;
             font-family: 'Lato', sans-serif;
        }
         html, body {
             margin: 0;
             padding: 0;
             font-weight: 300;
             height: 100%;
             background: #053777;
             color: #fff;
             font-size: 16px;
             overflow: hidden;
             background: -moz-linear-gradient(top, #053777 0%, #00659b 100%);
            /* FF3.6+ */
             background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #053777), color-stop(100%, #00659b));
            /* Chrome,Safari4+ */
             background: -webkit-linear-gradient(top, #053777 0%, #00659b 100%);
            /* Chrome10+,Safari5.1+ */
             background: -o-linear-gradient(top, #053777 0%, #00659b 100%);
            /* Opera 11.10+ */
             background: -ms-linear-gradient(top, #053777 0%, #00659b 100%);
            /* IE10+ */
             background: linear-gradient(to bottom, #053777 0%, #00659b 100%);
            /* W3C */
        }
         h1 {
             text-align: center;
             margin: 50px auto;
             font-weight: 100;
        }
         label {
             font-weight: 500;
             display: block;
             margin: 4px 0;
             text-transform: uppercase;
             font-size: 13px;
             overflow: hidden;
        }
         label span {
             float: right;
             text-transform: none;
             font-weight: 200;
             line-height: 1em;
             font-style: italic;
             opacity: 0.8;
        }
         .form-controll {
             display: block;
             padding: 8px 16px;
             width: 100%;
             font-size: 16px;
             background-color: rgba(255, 255, 255, 0.2);
             border: 1px solid rgba(255, 255, 255, 0.3);
             color: #fff;
             font-weight: 200;
        }
         .form-controll:focus {
             outline: 2px solid rgba(255, 255, 255, 0.5);
             outline: -webkit-focus-ring-color auto 5px;
        }

    </style>
</head>
<body>
    <h1><strong>EcoML</strong> - Predictions of consumption and accuracy of classification algorithms on your dataset</h1>
    <br>
    <br>
    <h1> Predicted consumption using linear regression: {{cons_linear}} gCO2eq</h1>
    <h1> Predicted F1 score using linear regression: {{f1_linear}}</h1>

    <h1> Predicted consumption using Decision Tree: {{cons_Decision_Tree}} gCO2eq</h1>
    <h1> Predicted F1 score using Decision Tree: {{f1_Decision_Tree}}</h1>

    <h1> Predicted consumption using Random Forest: {{cons_Random_Forest}} gCO2eq</h1>
    <h1> Predicted F1 score using Random Forest: {{f1_Random_Forest}}</h1>

    <h1> Predicted consumption using Neural Network: {{cons_Neural_Network}} gCO2eq</h1>
    <h1> Predicted F1 score using Neural Network: {{f1_Neural_Network}}</h1>
    <link href='https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,600,700' rel='stylesheet' type='text/css'>

</body>
</html>