Spaces:

Ferrxni
/

Gaia_Mistral

Paused

App Files Files Community

Clément Simon commited on Feb 27

Commit

135bbd4

•

1 Parent(s): 4a533cc

feat: collapsible menu + map

Browse files

fix: hugging face missing api secrets

Files changed (5) hide show

.gitignore +1 -1
app.py +19 -0
static/layout.html +55 -26
static/script.js +6 -8
static/style.css +164 -9

.gitignore CHANGED Viewed

@@ -1,4 +1,4 @@
-.env
 .venv
 __pycache__
 static/map.html

+*.env
 .venv
 __pycache__
 static/map.html

app.py CHANGED Viewed

@@ -20,6 +20,25 @@ today = date.today()
 today = today.strftime("%Y-%m-%d")
 # Load environment variables
 load_dotenv()
 api_key = os.getenv('API_KEY')

 today = today.strftime("%Y-%m-%d")
+# Hugging face space secret retrieval:
+def create_env_file():
+    import os
+    secrets = ['API_KEY', 'AGRO_API_KEY', 'OPENCAGE_API_KEY']
+    for secret in secrets:
+        secret_value = os.environ[secret]
+        if secret_value is None:
+            print(f"Please set the environment variable {secret}")
+        else:
+            with open('.env', 'a') as f:
+                f.write(f"{secret}={secret_value}\n")
+# Hugging face space secret retrieval:
+production = True
+if production:
+    create_env_file()
 # Load environment variables
 load_dotenv()
 api_key = os.getenv('API_KEY')

static/layout.html CHANGED Viewed

@@ -1,34 +1,63 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>FastAPI Home</title>
-    <link rel="stylesheet" href="/static/style.css" />
-  </head>
-  <body>
-    <h1>FastAPI Home</h1>
-    <div id="leftMenu" class="side-menu">
-      <ul id="Profile">
-        <li>Name: {{ user_profile.name }}</li>
-        <li>Age: {{ user_profile.age }}</li>
-        <li>Location: {{ user_profile.location }}</li>
       </ul>
-      <button id="toggleMenu">Toggle Menu</button>
     </div>
     <div id="mainContent">
       <div id="map" class="map">{{ map_html | safe }}</div>
     </div>
-    <div id="rightProfile" class="side-menu">
-      <button id="toggleProfile">Toggle Profile</button>
-      <div id="chat">
-        <input type="text" id="user_input" placeholder="Enter your message" />
-        <button onclick="sendChat()">Send</button>
-        <ul id="chat_messages"></ul>
-      </div>
-    </div>
-    <script src="/static/script.js"></script>
-  </body>
 </html>

 <!DOCTYPE html>
 <html>
+  <link rel="stylesheet" href="/static/style.css" />
+  <header>
+    <nav>
+      <ul class="menus">
+        <li class="main">
+          <a href="#">
+            <i class="fas fa-bars"></i>
+          </a>
+        </li>
+        <li class="menu">
+          <a href="#">
+            <i class="fas fa-home"></i>
+          </a>
+        </li>
+        <li class="menu">
+          <a href="#">
+            <i class="fas fa-sliders-h"></i>
+          </a>
+        </li>
+        <li class="menu">
+          <a href="#">
+            <i class="fas fa-cog"></i>
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <div class="app flexed">
+    <div class="spacer">
+      <ul class="submenus">
+        <li class="main"><span>Menus</span></li>
+        <li class="submenu">
+          <a href="#">Chat</a>
+          <div id="chat">
+            <input
+              type="text"
+              id="user_input"
+              placeholder="Enter your message"
+            />
+            <button onclick="sendChat()">Send</button>
+            <ul id="chat_messages"></ul>
+          </div>
+        </li>
+        <li class="submenu">
+          <a href="#">Profile</a>
+          <ul id="Profile">
+            <li>Name: {{ user_profile.name }}</li>
+            <li>Age: {{ user_profile.age }}</li>
+            <li>Location: {{ user_profile.location }}</li>
+          </ul>
+        </li>
       </ul>
     </div>
+  </div>
+  <body>
+    <h1>FastAPI Home</h1>
     <div id="mainContent">
       <div id="map" class="map">{{ map_html | safe }}</div>
     </div>
+  <script src="/static/script.js"></script>
 </html>

static/script.js CHANGED Viewed

@@ -1,12 +1,10 @@
-document.getElementById('toggleMenu').addEventListener('click', function () {
-    var menu = document.getElementById('leftMenu');
-    menu.classList.toggle('hidden');
-});
-document.getElementById('toggleProfile').addEventListener('click', function () {
-    var profile = document.getElementById('rightProfile');
-    profile.classList.toggle('hidden');
-});
 function sendChat() {
     var user_input = document.getElementById("user_input").value;

+if (document.querySelector(".main")) {
+    document.querySelector(".main").onclick = function (){
+        var submenu = document.querySelector(".spacer");
+        submenu.classList.toggle("show");
+    }
+}
 function sendChat() {
     var user_input = document.getElementById("user_input").value;

static/style.css CHANGED Viewed

@@ -1,24 +1,179 @@
-.side-menu {
-  width: 200px;
-  /* Fixed width */
   position: fixed;
   top: 0;
-  overflow: auto;
   height: 100%;
 }
-#leftMenu {
-  left: 0;
 }
-#rightProfile {
-  right: 0;
 }
-.hidden {
   display: none;
 }
 .map {
   /* show full screen the iframe */
   position: fixed;

+html {
+  font-family: sans-serif;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+header,
+nav {
+  display: block;
+}
+a {
+  background-color: transparent;
+  color: inherit;
+  text-decoration: none;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+img {
+  border: 0;
+}
+ul {
+  list-style: none;
+  margin: 0;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-start: 0px;
+}
+header {
   position: fixed;
   top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100px;
   height: 100%;
+  min-height: 0;
+  min-width: 100px;
+  overflow-y: auto;
+  transition: 500ms;
+  background-color: rgb(56, 82, 102);
+  border-right: 1px solid #ffffff80;
+  z-index: 10;
 }
+.flexed {
+  display: flex;
+}
+.spacer {
+  display: inline-block;
+  position: relative;
+  height: 100%;
+  width: 10vw;
+  min-width: 110px;
+}
+.menus {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  min-height: 400px;
+  text-align: center;
+}
+.main {
+  padding: 1em 1em 0.8em;
+  border-bottom: 1px solid #FFF;
+  color: #f1f1f1;
+}
+.menu {
+  margin: 0.5em 0 0;
+  color: #f1f1f1;
+  transition: 0.5s;
+  font-size: 1.5rem;
+  padding: 0.5em 0;
+  border-bottom: 1px solid #ececec;
+  width: 33.333%;
+}
+.menu:hover {
+  color: #ececec;
+  background-color: rgba(11, 123, 132, 1);
+  border: 1px solid #FFF;
+  border-radius: 50%;
+  padding: 0.3em;
+  box-shadow: 0 0 5px 0 #000;
+}
+.spacer {
+  transition: 300ms;
 }
+.spacer.show {
+  width: auto;
+  margin-right: 1em;
 }
+.spacer .submenus {
   display: none;
 }
+.spacer.show .submenus {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 300px;
+  height: 100vh;
+  min-height: 100px;
+  margin-left: 100px;
+  padding-left: 1em;
+  text-align: left;
+  background-color: rgb(56, 82, 102);
+  animation: sulod 300ms linear;
+  -webkit-animation: sulod 300ms linear;
+}
+.submenu {
+  margin: 0.5em 0 0;
+  color: #FFF;
+  transition: 0.5s;
+  font-size: 90%;
+  line-height: 2.2rem;
+  padding: 0.5em 0;
+}
+.spacer .main {
+  border: none;
+  color: transparent;
+}
+@keyframes sulod {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+@-moz-keyframes sulod {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+@-webkit-keyframes sulod {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
 .map {
   /* show full screen the iframe */
   position: fixed;