<!DOCTYPE html>

<html lang="en">

<head>
 <title>Text Analyzer</title>
  <style>
    body{
  padding: 30px  !important;
}
* {
  margin: 0 !important;
  font-family: Quicksand !important;
}

 .box {
  width: 20vw  !important;
  height: 60vh  !important;;
  border-radius: 5px  !important;;
  box-shadow: 0 2px 30px rgba(black, 0.2)  !important;;
  background: darken(#eff3f9, 20%)  \!important;
  position: relative  !important;;
  overflow: hidden  !important;;
  transform: translate3d(0, 0, 0)  !important;;
  min-width: 200px  !important;;
  min-height: 350px  !important;;
}

.wave {
  opacity: 0.3 !important;
  position: absolute !important;
  top: 120% !important;
  left: 50% !important;
  background: white !important;
  width: 500px !important;
  height: 500px !important;
  margin-left: -250px !important;
  margin-top: -250px !important;
  transform-origin: 50% 48% !important;
  border-radius: 43% !important;
  animation: drift 3000ms infinite linear !important;
  z-index: 1 !important;
}

.wave.-three {
  animation: drift 5000ms infinite linear !important;
  z-index: 2  !important;;
  opacity: 0.2 !important;
}

.wave.-two {
  animation: drift 7000ms infinite linear !important;
  opacity: 0.1 !important;
  z-index: 3  !important;;
}

.box:after {
  content: "" !important;
  display: block !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 11 !important;
  transform: translate3d(0, 0, 0) !important;
}

@keyframes drift {
  from {
    transform: rotate(0deg) !important;
  }

  from {
    transform: rotate(360deg) !important;
  }
}

.info {
  position: absolute !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 45% !important;
  z-index: 4 !important;
}

.location {
  text-align: center !important;
  font-weight: 800 !important;
}

.date {
  text-align: center !important;
  margin-top: 5% !important;
  color: lighten(grey, 10%) !important;
  font-size: 70% !important;
}

.temp {
  margin-top: 10% !important;
  text-align: center !important;
}

.weathercon {
  height: 55% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-size: 3em !important;
}

@media (max-width: 600px) {
  .box {
    width: 90vw !important;
    height: 80vh !important;
  }

  .wave {
    top: 85% !important;
  }

  .weathercon {
    font-size: 5em !important;
  }

  .info {
    font-size: 1.5rem !important;
  }
}

@media (max-height: 500px) {
  .box {
    height: 80vh !important;
  }

  .wave {
    top: 115% !important;
  }
}

body>span {
  width: 100vw !important;
  text-align: center !important;
  color: grey !important;
}

  </style>
  <meta charset="UTF-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

  <script>
    $(document).ready(function () {
      navigator.geolocation.getCurrentPosition(success, error);
      function success(pos) {
        var lat = pos.coords.latitude;
        var long = pos.coords.longitude;
        weather(lat, long);
      }

      function error() {
        console.log("There was an error");
      }

      function weather(lat, long) {
        var URL = `https://fcc-weather-api.glitch.me/api/current?lat=${lat}&lon=${long}`;
        $.getJSON(URL, function (data) {
          display(data);
        });
      }

      function display(data) {
        var city = data.name.toUpperCase();
        var temp =
          Math.round(data.main.temp_max) +
          "&deg; C | " +
          Math.round(Math.round(data.main.temp_max) * 1.8 + 32) +
          "&deg; F";
        var desc = data.weather[0].description;
        var date = new Date();

        var months = [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ];

        var weekday = new Array(7);
        weekday[0] = "Sunday";
        weekday[1] = "Monday";
        weekday[2] = "Tuesday";
        weekday[3] = "Wednesday";
        weekday[4] = "Thursday";
        weekday[5] = "Friday";
        weekday[6] = "Saturday";

        var font_color;
        var bg_color;
        if (Math.round(data.main.temp_max) > 25) {
          font_color = "#d36326";
          bg_color = "#f3f5d2";
        } else {
          font_color = "#44c3de";
          bg_color = "#eff3f9";
        }

        if (data.weather[0].main == "Sunny" || data.weather[0].main == "sunny") {
          $(".weathercon").html(
            "<i class='fas fa-sun' style='color: #d36326;'></i>"
          );
        } else {
          $(".weathercon").html(
            "<i class='fas fa-cloud' style='color: #44c3de;'></i>"
          );
        }

        var minutes =
          date.getMinutes() < 11 ? "0" + date.getMinutes() : date.getMinutes();
        var date =
          weekday[date.getDay()].toUpperCase() +
          " | " +
          months[date.getMonth()].toUpperCase().substring(0, 3) +
          " " +
          date.getDate() +
          " | " +
          date.getHours() +
          ":" +
          minutes;
        $(".location").html(city);
        $(".temp").html(temp);
        $(".date").html(date);
        $(".box").css("background", bg_color);
        $(".location").css("color", font_color);
        $(".temp").css("color", font_color);
      }
    });
  </script>
  <script>
    function uploadAndAnalyze() {
      console.log("File input");
      var fileInput = document.getElementById("fileInput");
      if (fileInput.files.length === 0) {
        alert("Please select a file before uploading and analyzing.");
      } else {
        document.getElementById("form1").submit(); // Submit the form
      }
    }
  </script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

</head>

<body>
  <form action="/analyze" id="form1" method="post" enctype="multipart/form-data">
    <div class="container">
      <div class="row">
        <div class="col-8">
          <h2 class="text-center">Text Analysis App</h2>
          <div class="container text-center">
            <div class="row">
              <div class="col-8">
                <input type="file" id="fileInput" class="form-control form-control-lg" name="file" accept=".txt">
              </div>
              <div class="col-4"> <button type="button" onclick="uploadAndAnalyze()"
                  class="btn btn-primary btn-lg">Upload
                  and Analyze</button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-4">
          <div class='box'>
            <div class='wave -one'></div>
            <div class='wave -two'></div>
            <div class='wave -three'></div>
            <div class="weathercon"><i class='fas fa-sun' style='color: #d36326;'></i></div>
            <div class="info">
              <h2 class="location">ENABLE LOCATION TO VIEW WEATHER INFO</h2>
              <p class="date"></p>
              <h1 class="temp"></h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>

  <div id="results">

    <!-- Display analysis results here using JavaScript -->

  </div>



</body>

</html>