search field

dashboard.py

@@ -27,7 +27,7 @@ def generate_sample(ctx, e):
     if ctx.count % 50 == 0:
         emit('debug', {'text': 'Log message #'+str(ctx.count)+'!'})
     tweet = e.data
-    print(tweet)
+    # print(tweet)
     # base sample on previous one
     # sample = clip(-100, e.data['previous'] + random.uniform(+5.0, -5.0), 100)
     # emit to outside world

dashboard_static/index.html

@@ -58,7 +58,7 @@
         </div>
         <div class="main">
             <div class="leftcol">
-                <div class="tweet"> <!-- You can use this template in the javascript file, css will come later -->
+                <!-- <div class="tweet"> 
                     <img src="https://pbs.twimg.com/profile_images/1158803404656959490/9MKSbW4O_400x400.jpg" alt="" class="tweet-profilepicture">
                     <div class="tweet-content">
                         <div class="tweet-name">
@@ -81,10 +81,17 @@
                             </div>
                         </div>
                     </div>
-                </div>
+                </div> -->
             </div>
             <div class="centercol"></div>
-            <div class="rightcol"></div>
+            <div class="rightcol">
+                <div class="filters">
+                    <div class="filters-search">
+                        <input type="text" name="" id="search">
+                        <span class="material-symbols-outlined">search</span>
+                    </div>
+                </div>
+            </div>
         </div> 
     </div>
     <script src="./js/code.js"></script>

dashboard_static/style/style.css

@@ -101,4 +101,21 @@ body {
 .tweet-interaction {
 	display: flex;
 	align-items: center;
+}
+
+.filters-search input {
+	height: 28px;
+	width: 100%;
+	border: none;
+	font-family: 'Robot', sans-serif;
+	font-size: 24px;
+	padding: 0;
+	padding-right: 32px;
+}
+
+.filters-search span {
+	position: absolute;
+	font-weight: 500;
+	font-size: 24px;
+	color: var(--main-medium-dark);
 }