Merge pull request #960 from caco3/improve-iframe-sizing

Various WebUI Improvements

code/components/jomjol_fileserver_ota/server_help.cpp

@@ -120,6 +120,8 @@ esp_err_t set_content_type_from_file(httpd_req_t *req, const char *filename)
         return httpd_resp_set_type(req, "image/x-icon");
     } else if (IS_FILE_EXT(filename, ".js")) {
         return httpd_resp_set_type(req, "text/javascript");
+    } else if (IS_FILE_EXT(filename, ".css")) {
+        return httpd_resp_set_type(req, "text/css");
     }
     /* This is a limited set only */
     /* For any other type always set as plain text */

code/platformio.ini

@@ -45,3 +45,6 @@ monitor_rts = 0
 monitor_dtr = 0
 
 debug_tool = esp-prog
+
+; Enable and adapt for logging over USB
+;upload_port = /dev/ttyUSB0

sd-card/html/common.js

@@ -0,0 +1,31 @@
+ 
+var basepath = "http://192.168.178.22";
+        
+function LoadHostname() {
+    _basepath = getbasepath(); 
+
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.addEventListener('load', function(event) {
+        if (xhttp.status >= 200 && xhttp.status < 300) {
+            hostname = xhttp.responseText;
+                document.title = hostname + " - jomjol - AI on the edge";
+                document.getElementById("id_title").innerHTML  = "Digitizer - AI on the edge - " + hostname;
+        } 
+        else {
+                console.warn(request.statusText, request.responseText);
+        }
+    });
+
+//     var xhttp = new XMLHttpRequest();
+    try {
+            url = _basepath + '/version?type=Hostname';     
+            xhttp.open("GET", url, true);
+            xhttp.send();
+
+    }
+    catch (error)
+    {
+//               alert("Loading Hostname failed");
+    }
+}

sd-card/html/edit_alignment.html

@@ -86,7 +86,10 @@ select {
 
 	<table>
 	  <tr>
-		<td colspan="2"><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini"></td>
+		<td><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini"></td>
+	  </tr> 
+	  <tr>
+                <td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate saved config</button></td>
 	  </tr>  
 	</table>
 
@@ -107,7 +110,17 @@ select {
             basepath = "http://192.168.178.26";
             basepath = "",
             param;
-
+    
+function doReboot() {
+    if (confirm("Are you sure you want to reboot? Did you save the config?")) {
+            var stringota = "/reboot";
+            window.location = stringota;
+            window.location.href = stringota;
+            window.location.assign(stringota);
+            window.location.replace(stringota);
+    }
+}
+    
 function ChangeSelection(){
     aktindex = parseInt(document.getElementById("index").value);
     UpdateReference();

sd-card/html/edit_analog.html

@@ -129,6 +129,9 @@ th, td {
 	  <tr>
 		<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini" tabindex=7></td>
 	  </tr>  
+	  <tr>
+                <td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate saved config</button></td>
+	  </tr>  
     </table>	
 
 
@@ -147,8 +150,17 @@ th, td {
             enhanceCon = false;
             lockAR = true;
             basepath = "http://192.168.178.26";
-
-
+    
+function doReboot() {
+    if (confirm("Are you sure you want to reboot? Did you save the config?")) {
+            var stringota = "/reboot";
+            window.location = stringota;
+            window.location.href = stringota;
+            window.location.assign(stringota);
+            window.location.replace(stringota);
+    }
+}
+    
 function EnDisableAnalog() {
         isEnabled = document.getElementById("Category_Analog_enabled").checked;
 

sd-card/html/edit_digits.html

@@ -119,6 +119,9 @@ th, td {
 	<table>
 	  <tr>
 		<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini" tabindex=7></td>
+	  </tr> 
+	  <tr>
+                <td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate saved config</button></td>
 	  </tr>  
 	</table>
 
@@ -140,6 +143,15 @@ th, td {
             lockAR = true;
             basepath = "http://192.168.178.26";
 
+    function doReboot() {
+        if (confirm("Are you sure you want to reboot? Did you save the config?")) {
+                var stringota = "/reboot";
+                window.location = stringota;
+                window.location.href = stringota;
+                window.location.assign(stringota);
+                window.location.replace(stringota);
+        }
+    }
 
 function EnDisableDigits() {
         isEnabled = document.getElementById("Category_Digits_enabled").checked;

sd-card/html/edit_explain_0.html

@@ -7,9 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
-
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}
 h3 {font-size: 1.2em;}

sd-card/html/edit_explain_6.html

@@ -7,9 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
-
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}
 h3 {font-size: 1.2em;}

sd-card/html/edit_reference.html

@@ -35,6 +35,7 @@ table {
 
 <body style="font-family: arial; padding: 0px 10px;">
     <h2>Create Reference out of Raw Image</h2>
+    <p><b>Note: After saving a new Reference Image, make sure to update the Alignment Marks and the ROI's and reboot once!</b></p>
 
 	<table>
 	  <tr>
@@ -85,6 +86,9 @@ table {
 		</tr>			
 		<tr>		
 			<td><input class="button" type="button" id="updatereferenceimage" value="Update Reference Image" onclick="SaveReference()"></td>
+		</tr>		
+		<tr>		
+			<td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate saved Reference</button></td>
 		</tr>
 	</table>
 
@@ -102,6 +106,16 @@ table {
             basepath = "http://192.168.178.26";   
             isActReference = false;
             param;
+            
+        function doReboot() {
+            if (confirm("Are you sure you want to reboot? Did you save the config?")) {
+                    var stringota = "/reboot";
+                    window.location = stringota;
+                    window.location.href = stringota;
+                    window.location.assign(stringota);
+                    window.location.replace(stringota);
+            }
+        }
 
         function doTake(){ 
             var xhttp = new XMLHttpRequest();

sd-card/html/explain_0.html

@@ -7,9 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
-
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}
 h3 {font-size: 1.2em;}

sd-card/html/explain_1.html

@@ -7,8 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
 
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}

sd-card/html/explain_2.html

@@ -7,9 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
-
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}
 h3 {font-size: 1.2em;}

sd-card/html/explain_3.html

@@ -7,8 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
 
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}

sd-card/html/explain_4.html

@@ -7,9 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
-
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}
 h3 {font-size: 1.2em;}

sd-card/html/explain_5.html

@@ -7,9 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
-
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}
 h3 {font-size: 1.2em;}

sd-card/html/explain_6.html

@@ -7,8 +7,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
 
 h1 {font-size: 2em; margin-block-end: 0.3em;}
 h2 {font-size: 1.5em;margin-block-start: 0.3em;}

sd-card/html/index.html

@@ -1,78 +1,20 @@
 <!DOCTYPE html>
-<html style="width: fit-content">
+<html>
 <head>
 <link rel="icon" href="favicon.ico" type="image/x-icon">
 <title>jomjol - AI on the edge</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="style.css" type="text/css" >
 
-<style>
-.h_iframe iframe {width:995px;height:605px;}
-.h_iframe {width:995px;height:605px;}
-
-h1 {font-size: 2em; margin-block-end: 0.3em;}
-h2 {font-size: 1.5em;margin-block-start: 0.3em;}
-h3 {font-size: 1.2em;}
-p {font-size: 1em;}
-
-ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  background-color: #333;
-  width:1000px;
-}
-
-li {
-  float: left;
-  font-family: arial;
-  font-size: 18px;
-}
-
-li a, .dropbtn {
-  display: inline-block;
-  color: white;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-}
-
-li a:hover, .dropdown:hover .dropbtn {
-  background-color: red;
-}
-
-li.dropdown {
-  display: inline-block;
-}
-
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #f9f9f9;
-  min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-  font-family: arial;
-}
-
-.dropdown-content a {
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-  text-align: left;
-}
-
-.dropdown-content a:hover {background-color: #f1f1f1;}
-
-.dropdown:hover .dropdown-content {
-  display: block;
-}
-</style>
+<script type="text/javascript" src="common.js"></script>
+<script type="text/javascript" src="gethost.js"></script>
+<script type="text/javascript" src="readconfigcommon.js"></script>
+<script type="text/javascript" src="readconfigparam.js"></script>
 </head>
 
-<body style="font-family: arial">
+<body>
+<div class="main">
 
 <table style="border: none">
   <tr><td style="padding-right: 10px;"><img src="favicon.ico"></td>
@@ -82,72 +24,35 @@ li.dropdown {
 </table>
 
 <ul>
-  <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">Overview</a></li>
-	<li class="dropdown">
+    <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">Overview</a></li>
+    <li class="dropdown">
 	<a href="javascript:void(0)" class="dropbtn">Configuration</a>
 	<div class="dropdown-content">
-	  <a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set preValue</a>
-	  <a href="index_configure.html">Edit Configuration</a>
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set Previous Value</a>
+	    <a href="index_configure.html">Edit Configuration</a>
 	</div>
-  </li>
-  <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">Recognition</a></li>
-  <li><a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a></li>
-	<li class="dropdown">
+    </li>
+    <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">Recognition</a></li>
+    <li><a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a></li>
+    <li class="dropdown">
 	<a href="javascript:void(0)" class="dropbtn">System</a>
 	<div class="dropdown-content">
-	  <a href="#"onclick="document.getElementById('maincontent').src = '/backup.html';">Backup/Restore</a>
-	  <a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
-	  <a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/log/message/?readonly=true';">Log Viewer</a>      
-	  <a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
-	  <a href="#"onclick="document.getElementById('maincontent').src = '/info.html';">Info</a>      
+  	  <a href="#"onclick="document.getElementById('maincontent').src = '/backup.html';">Backup/Restore</a>
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/log/message/?readonly=true';">Log Viewer</a>      
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/info.html';">Info</a>      
 	</div> 
+    </li>
 </ul>
-<p>
-
-<div class="h_iframe">
-	 <iframe name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe> 
-</div>
-
-<script type="text/javascript" src="./gethost.js"></script> 
-<script type="text/javascript" src="./readconfigcommon.js"></script>  
-<script type="text/javascript" src="./readconfigparam.js"></script>  
 
+<iframe name="maincontent" class="iframe" id="maincontent" src="wasserzaehler_roi.html"></iframe>
 
 <script type="text/javascript">
-	var basepath = "http://192.168.178.22";
-
-
-function LoadHostname() {
-	_basepath = getbasepath(); 
-
-
-	var xhttp = new XMLHttpRequest();
-	xhttp.addEventListener('load', function(event) {
-	  if (xhttp.status >= 200 && xhttp.status < 300) {
-		hostname = xhttp.responseText;
-		  document.title = hostname + " - jomjol - AI on the edge";
-		  document.getElementById("id_title").innerHTML  = "Digitizer - AI on the edge - " + hostname;
-	  } else {
-		 console.warn(request.statusText, request.responseText);
-	  }
-	 });
-
-//     var xhttp = new XMLHttpRequest();
-	 try {
-		  url = _basepath + '/version?type=Hostname';     
-		  xhttp.open("GET", url, true);
-		  xhttp.send();
-
-	 }
-	 catch (error)
-	 {
-//               alert("Loading Hostname failed");
-	 }
-  }
-
   LoadHostname();
-
 </script>
 
+</div>
+
 </body>
 </html>

sd-card/html/index_configure.html

@@ -5,73 +5,11 @@
 <title>jomjol - AI on the edge</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-	
-<style>
-.h_iframe iframe {width:995px;height:765px;}
-.h_iframe {width:995px;height:765px;}
+<link rel="stylesheet" href="style.css" type="text/css" >
+</head>
 
-h1 {font-size: 2em; margin-block-end: 0.3em;}
-h2 {font-size: 1.5em;margin-block-start: 0.3em;}
-h3 {font-size: 1.2em;}
-p {font-size: 1em;}
-
-ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  background-color: #333;
-  width:1000px;
-}
-
-li {
-  float: left;
-  font-family: arial;
-  font-size: 18px;
-}
-
-li a, .dropbtn {
-  display: inline-block;
-  color: white;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-}
-
-li a:hover, .dropdown:hover .dropbtn {
-  background-color: red;
-}
-
-li.dropdown {
-  display: inline-block;
-}
-
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #f9f9f9;
-  min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-  font-family: arial;
-}
-
-.dropdown-content a {
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-  text-align: left;
-}
-
-.dropdown-content a:hover {background-color: #f1f1f1;}
-
-.dropdown:hover .dropdown-content {
-  display: block;
-}
-</style>
-
-<body style="font-family: arial">
+<body>
+<div class="main">
 
 <table style="border: none">
   <tr><td style="padding-right: 10px;"><img src="favicon.ico"></td>
@@ -81,62 +19,43 @@ li.dropdown {
 </table>
 
 <ul>
-	<li aria-current="page"><a href="index.html">Main Page</a>	
-	<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_config_param.html';">Configuration</a></li>
+    <li aria-current="page"><a href="index.html">Main Page</a>	
+    <li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_config_param.html';">Configuration</a></li>
+    <li class="dropdown">
+	<a href="javascript:void(0)" class="dropbtn">Alignment</a>
+	<div class="dropdown-content">
+		<a href="#"onclick="document.getElementById('maincontent').src = 'edit_reference.html';">Reference Image</a>
+		<a href="#"onclick="document.getElementById('maincontent').src = 'edit_alignment.html';">Alignment Marks</a>
+	</div>
+    </li>
     <li class="dropdown">
-		<a href="javascript:void(0)" class="dropbtn">Alignment</a>
-		<div class="dropdown-content">
-			<a href="#"onclick="document.getElementById('maincontent').src = 'edit_reference.html';">Reference Image</a>
-			<a href="#"onclick="document.getElementById('maincontent').src = 'edit_alignment.html';">Alignment Marks</a>
-		</div>
-	</li>
+	<a href="javascript:void(0)" class="dropbtn">Regions Of Interest (ROI)</a>
+	<div class="dropdown-content">
+		<a href="#"onclick="document.getElementById('maincontent').src = 'edit_digits.html';">Digital ROIs</a>
+		<a href="#"onclick="document.getElementById('maincontent').src = 'edit_analog.html';">Analog ROIs</a>
+	</div> 
+    </li>
     <li class="dropdown">
-		<a href="javascript:void(0)" class="dropbtn">Regions Of Interest (ROI)</a>
-		<div class="dropdown-content">
-			<a href="#"onclick="document.getElementById('maincontent').src = 'edit_digits.html';">Digital ROIs</a>
-			<a href="#"onclick="document.getElementById('maincontent').src = 'edit_analog.html';">Analog ROIs</a>
-		</div> 
-	</li>		
+	<a href="javascript:void(0)" class="dropbtn">System</a>
+	<div class="dropdown-content">
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/log/message/?readonly=true';">Log Viewer</a>      
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
+	    <a href="#"onclick="document.getElementById('maincontent').src = '/info.html';">Info</a>      
+	</div> 
+    </li>
 </ul>
-<p>
-<div class="h_iframe">
-	 <iframe width="1020px" height="650px" name="maincontent" id ="maincontent" src="edit_config_param.html" title="fileserver"></iframe> 
-</div>
-<script type="text/javascript" src="./gethost.js"></script> 
-
-<script type="text/javascript">
-	var basepath = "http://192.168.178.22";
-
-
-function LoadHostname() {
-	_basepath = getbasepath(); 
-  
-	var xhttp = new XMLHttpRequest();
-	xhttp.addEventListener('load', function(event) {
-	  if (xhttp.status >= 200 && xhttp.status < 300) {
-		  hostname = xhttp.responseText;
-      document.title = hostname + " - Configure";
-		  document.getElementById("id_title").innerHTML  = "Configure - " + hostname;
-	  } else {
-		 console.warn(request.statusText, request.responseText);
-	  }
-	 });
 
-//     var xhttp = new XMLHttpRequest();
-	 try {
-		  url = _basepath + '/version?type=Hostname';     
-		  xhttp.open("GET", url, true);
-		  xhttp.send();
+<iframe name="maincontent" class="iframe" id="maincontent" src="edit_config_param.html"></iframe>
 
-	 }
-	 catch (error)
-	 {
-//               alert("Loading Hostname failed");
-	 }
-  }
+<script type="text/javascript" src="common.js"></script>
+<script type="text/javascript" src="gethost.js"></script>
 
+<script type="text/javascript">
   LoadHostname();
-
 </script>
+
+</div>
+
 </body>
 </html>

sd-card/html/style.css

@@ -0,0 +1,100 @@
+body, html {
+    width: 100%; 
+    height: 100%; 
+    min-height: 800px;
+    margin: 0px 0px 0px 2px; 
+    padding: 0; 
+    font-family: arial;
+    width: fit-content;
+}
+
+.main {
+    display: flex; 
+    width: 100%; 
+    height: 100%; 
+    flex-direction: column; 
+    overflow: hidden;
+}
+
+.iframe {
+    flex-grow: 1;
+    margin: 5px 7px 4px 0px; 
+    padding: 0; 
+    border: 2px solid black;
+}
+
+h1 {
+    font-size: 2em; 
+    margin-block-end: 0.3em;
+}
+
+h2 {
+    font-size: 1.5em;
+    margin-block-start: 0.3em;
+}
+
+h3 {
+    font-size: 1.2em;
+}
+
+p {
+    font-size: 1em;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+    width:1000px;
+}
+
+li {
+    float: left;
+    font-family: arial;
+    font-size: 18px;
+}
+
+li a, .dropbtn {
+    display: inline-block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+li a:hover, .dropdown:hover .dropbtn {
+    background-color: red;
+}
+
+li.dropdown {
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    font-family: arial;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+}
+
+.dropdown-content a:hover {
+    color: white;
+    background-color: red;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}