responseisv + mine images

application/static/main.css

@@ -1,50 +1,31 @@
 
 
 #main{
-    width: 65rem;
+    margin-top: 10%;
-    height: 45rem;
-    position: relative;
-    top: 10rem;
-    left: -50%;
-    display: block;
     padding: 0;
     background-color: transparent !important;
-    overflow-y: scroll;
+    display: inline-block;
-    overflow-x: hidden;
+}
+.data-loaded{
+    margin-top: 0.5rem !important;
 }
 
-
-.middle{
-    padding: 2rem ;
-    margin: 0 !important;
-    height: 100%;
-    width: 45%;
-    display: block;
-}
 #nav-container{
     display: flex;
     justify-content: center;
     background-color: transparent !important;
 }
+#search-field{
+    width:88%
+}
 #search-form{
     width:25rem;
-    
 }
 #nav-button{
     float: right;
     width: 12%;
 }
 
-.disable-scrollbars::-webkit-scrollbar {
-    width: 0px;
-    background: transparent; /* Chrome/Safari/Webkit */
-}
-
-.disable-scrollbars {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none;  /* IE 10+ */
-}
-
 .recipe-img{
     width:100%;
     
@@ -57,8 +38,28 @@
     width:70%;
 }
 .recipe-score{
-    margin: 1rem 1rem;
+    margin: 1rem 0rem;
+
 }
 .recipe-container{
     padding:0;
+    display: block;
+    justify-content: start;
+    text-align: left;
+}
+
+
+.loader {
+  border: 16px solid #f3f3f3; /* Light grey */
+  border-top: 16px solid #3498db; /* Blue */
+  border-radius: 50%;
+  width: 120px;
+  height: 120px;
+  margin: auto auto;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }

application/static/main.js

@@ -3,6 +3,10 @@ var rl
 
 function loadData() {
     rl = document.getElementById("recipe-list")
+    rl.innerHTML = '<div class="loader"></div>'
+    document.getElementById("main").className += " data-loaded"
+    
+    
     // make string of get params for request
     getParams = makeGetParamString() 
 
@@ -13,7 +17,7 @@ function loadData() {
             renderRecipeList(data)
                 
         },
-        null
+        loadData()
     );
 }
 
@@ -51,13 +55,13 @@ function renderRecipeList(data){
             
             recString = `
                 <a href="${data1[2]}"> 
-                    <div class="card text-white bg-dark mb-3" style="max-width: 100%">
+                    <div class="card text-white bg-primary mb-3" style="max-width: 100%">
                         <div class="card-body recipe-container">
                             <div class="row">
-                                <div class="col-4">
+                                <div class="col-lg-5 col-sm-5 col">
                                     <img class="recipe-img" src="data:image/png;base64,${data1[4]}">
                                 </div>
-                                <div class="col-7">
+                                <div class="col-lg col-sm col">
                                     <div class="row">
                                         <div class="col">
                                             <span><h4 class="recipe-name">${data1[1]}</h4></span>
@@ -70,8 +74,8 @@ function renderRecipeList(data){
                                     </div>
                                 </div>
                                 
-                                <div class="col-1">
+                                <div class="col-lg-1 col-sm-2 col-2">
-                                <span class="recipe-score badge badge-primary badge-pill">${(key*100).toFixed(0) + "%"}</span>
+                                <span class="recipe-score badge badge-info badge-pill">${(key*100).toFixed(0) + "%"}</span>
                                 </div>
                             </div>
                         </div>

application/templates/index.html

@@ -6,9 +6,13 @@
     <!--Bootstrap-->
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-    <link href="https://bootswatch.com/4/superhero/bootstrap.css" rel="stylesheet" id="bootstrap-css3">
+    <link href="https://bootswatch.com/4/flatly/bootstrap.css" rel="stylesheet" id="bootstrap-css3">
+
     <link rel="stylesheet" title="default" href="/static/main.css">
     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+
+
+
     <!-- jQuery library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
@@ -25,19 +29,16 @@
     <script src="/static/render.js"></script>
     <script src="/static/main.js"></script>
 
-    <script src="/static/vanta/three.r95.min.js"></script>
-    <script src="/static/vanta/vanta.net.min.js"></script>
-
 </head>
 
 <body>
 
 
-    <div style="position: fixed; left: 50%;">
+    <div style="text-align:center;">
-        <div class="container bg-dark disable-scrollbars" id="main">
+        <div class="container bg-dark" id="main">
             <nav class="navbar navbar-expand-lg navbar-dark bg-primary" id="nav-container">
                   <form class="form-inline my-2 my-lg-0" id="search-form" onsubmit="loadData();return false" action="#">
-                    <input class="form-control" type="text" id="search-field" placeholder="Mehl, Eier, Zucker" style="width:88%">
+                    <input class="form-control" type="text" id="search-field" placeholder="Mehl, Eier, Zucker">
                     <button class="btn btn-secondary my-2 my-sm-0" id="nav-button" type="button" onclick="loadData()">🔍</button>
                   </form>
             </nav>
@@ -50,22 +51,5 @@
 
     
 </body>
-<script>
+
-    VANTA.BIRDS({
-      el: "body",
-      mouseControls: true,
-    touchControls: true,
-    minHeight: 200.00,
-    minWidth: 200.00,
-    scale: 1.00,
-    scaleMobile: 1.00,
-    color1: 0x91a75e,
-    color2: 0xdc1818,
-    colorMode: "lerpGradient",
-    speedLimit: 8.00,
-    separation: 8.00,
-    alignment: 86.00,
-    cohesion: 19.00
-    })
-    </script>
 </html>

getImages.py

@@ -27,13 +27,21 @@ def getImages():
 
     driver = webdriver.Chrome(chromePath, chrome_options=chrome_options)
 
+    defaultImagePath = "./data/images.jpeg"
+    image = cv2.imread(defaultImagePath)
+    ret, jpeg = cv2.imencode(".jpeg", image)
+    defaultImg = base64.b64encode(jpeg)
+
+    errorUrls = []
+
     dbSession = Session()
     counter = 0
     maxC = dbSession.query(Recipe).count()
     for recipe in dbSession.query(Recipe).all():
-
+        try:
+            if defaultImg == recipe.img:
                 url = recipe.url
-        string1 = '//*[@id="recipe-image-carousel"]/div/div[1]/div[9]/div/a/amp-img'
+                string1 = '//*[@id="recipe-image-carousel"]/div/div[1]/div[10]/div/a/amp-img'
 
                 driver.get(url)
                 element = WebDriverWait(driver, 30).until(
@@ -50,11 +58,15 @@ def getImages():
                 ret, jpeg = cv2.imencode(".jpg", image)
                 img = base64.b64encode(jpeg)
                 recipe.img = img
-        dbSession.flush()
+                #dbSession.flush()
                 dbSession.commit()
                 counter +=1
                 print(counter/maxC)
                 sleep(5)
+        except:
+            errorUrls.append(recipe.url)
+            print(recipe.url)
+            print("error")