davidheineman
/

colbert-acl

Model card Files Files and versions Community

davidheineman commited on Apr 26

Commit

9027915

•

1 Parent(s): 6d0cba0

update style

Browse files

Files changed (3) hide show

static/css/styles.css +25 -26
templates/index.html +3 -5
templates/results.html +36 -15

static/css/styles.css CHANGED Viewed

@@ -1,55 +1,55 @@
-/* Body background */
 body {
     background-color: #f4f4f4;
 }
-/* Custom fonts */
 h1 {
-    text-align: center; /* Center the text */
     font-family: 'Droid Serif', Georgia, Times, serif;
 }
-p {
-    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
-}
-/* Formatting welcome message */
-#welcome-message {
-    text-align: center; /* Center the text */
-    margin-bottom: 20px; /* Add some space below the message */
 }
-#welcome-message h1 {
-    font-size: 36px; /* Adjust font size */
-    color: #333; /* Text color */
 }
-#welcome-message p {
-    font-size: 18px; /* Adjust font size */
-    color: #666; /* Text color */
 }
-/* Style the form container */
 form {
-    margin: 20px auto; /* Center horizontally */
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
     width: 300px;
-    background-color: #fff; /* Form background color */
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
 }
-/* Style the form input fields */
 input[type="text"] {
-    width: calc(100% - 22px); /* Adjust width to account for padding */
     padding: 10px;
-    margin-bottom: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
 }
-/* Style the submit button */
 input[type="submit"] {
     width: 100%;
     padding: 10px;
@@ -60,7 +60,6 @@ input[type="submit"] {
     cursor: pointer;
 }
-/* Change the submit button color on hover */
 input[type="submit"]:hover {
     background-color: #45a049;
 }

 body {
     background-color: #f4f4f4;
+    padding-top: 20px;
+    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
 }
 h1 {
+    text-align: center;
     font-family: 'Droid Serif', Georgia, Times, serif;
 }
+.welcome-message {
+    text-align: center;
+    margin-bottom: 20px;
 }
+.welcome-message h1 {
+    font-size: 36px;
+    color: #333;
 }
+.welcome-message p {
+    font-size: 18px;
+    color: #666;
 }
 form {
+    margin-bottom: 20px;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
+    background-color: #fff;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
+.welcome-form {
+    margin: auto;
     width: 300px;
 }
+.welcome-form input[type="text"] {
+    margin-top: 5px;
+    margin-bottom: 20px;
+}
 input[type="text"] {
+    width: calc(100% - 22px);
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
 }
 input[type="submit"] {
     width: 100%;
     padding: 10px;
     cursor: pointer;
 }
 input[type="submit"]:hover {
     background-color: #45a049;
 }

templates/index.html CHANGED Viewed

@@ -1,22 +1,20 @@
 <html>
     <head>
-        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
         <link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
     </head>
     <body>
-        <div id="welcome-message">
             <h1>Welcome!</h1>
             <p>Please enter your search terms below</p>
         </div>
-        <form action="/query" method="post">
-            <!-- Label and input field for Query -->
             <label for="query">Query:</label>
             <input type="text" id="query" name="query" placeholder="Enter your search query">
-            <!-- Label and input field for Year -->
             <label for="year">Year:</label>
             <input type="text" id="year" name="year" placeholder="Enter the year">

 <html>
     <head>
+        <link rel="stylesheet" type="text/css" class='welcome-form' href="{{ url_for('static', filename='css/styles.css') }}">
         <link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
     </head>
     <body>
+        <div id="welcome-message" class="welcome-message">
             <h1>Welcome!</h1>
             <p>Please enter your search terms below</p>
         </div>
+        <form class='welcome-form' action="/query" method="post">
             <label for="query">Query:</label>
             <input type="text" id="query" name="query" placeholder="Enter your search query">
             <label for="year">Year:</label>
             <input type="text" id="year" name="year" placeholder="Enter the year">

templates/results.html CHANGED Viewed

@@ -1,23 +1,44 @@
 <!DOCTYPE html>
 <html>
 <head>
     <title>Search Results</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
 </head>
 <body>
-    <h1>Search Results for "{{ query }}" in {{ year }}</h1>
-    <ul>
-        {% for result in results %}
-        <li>
-            <p><strong>Title:</strong> {{ result.title }}</p>
-            <p><strong>Authors:</strong> {{ result.authors }}</p>
-            <p><strong>Year:</strong> {{ result.year }}</p>
-            <p><strong>Abstract:</strong> {{ result.abstract }}</p>
-            <p><strong>Type:</strong> {{ result.type }}</p>
-            <p><strong>Venue:</strong> {{ result.venue }}</p>
-            <p><strong>URL:</strong> {{ result.url }}</p>
-        </li>
-        {% endfor %}
-    </ul>
 </body>
-</html>

 <!DOCTYPE html>
 <html>
 <head>
     <title>Search Results</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
 </head>
 <body>
+    <div class="container">
+        <!-- <h1>Search Results for "{{ query }}" in {{ year }}</h1> -->
+        <form action="/query" method="post" class="form-inline">
+            <div class="form-group mr-2 col-md-6">
+                <input style="width: 600px;" type="text" class="form-control mr-2" id="query" name="query" value="{{ query }}">
+            </div>
+            <div class="form-group mr-2">
+                <label for="year" class="mr-2">Year:</label>
+                <input type="text" class="form-control mr-2" id="year" name="year" value="{{ year }}" placeholder="Enter the year">
+            </div>
+            <button type="submit" class="btn btn-primary">Search</button>
+        </form>
+        <div class="row">
+            {% for result in results %}
+            <div class="col-md-12">
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <h4 class="card-title"><a href="{{ result.url }}" target="_blank">{{ result.title }}</a></h4>
+                        <h5 class="card-text">{{ result.authors }}</h5>
+                        <p class="card-text">{{ result.year }} | {{ result.venue }}</p>
+                        <!-- <p class="card-text"><strong>Type:</strong> {{ result.type }}</p> -->
+                        <p class="card-text">{{ result.abstract }}</p>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
 </body>
+</html>