Basic css changes, and added inference card under graphs

index.html

@@ -168,9 +168,12 @@
  });
  </script>
  </div>
-
+ <div class="inference-card">
+ <h2 class="inference-title">Inference</h2>
+ <p class="inference-text">This is the inference text for the graph.</p>
+ </div>
  <button onclick="window.location.href = 'vis2.html';"
- style="font-size: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">Go
+ style="font-size: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin-bottom:30px">Go
  to Word Cloud - Most Winning Teams</button>
  </div>
 

static/styles.css

@@ -4,18 +4,12 @@
  font-style: normal;
 }
 
-body {
- /* removing default margin */
- margin: 0;
- padding: 0;
- overflow: auto;
- font-family: 'Anton', sans-serif;
-}
+
 
 #main_div {
  /* main background div */
  background-color: #e9f1ed;
- justify-content: center;
+ /* justify-content: center; */
  align-items: center;
  padding: 20px;
  overflow: auto;
@@ -45,19 +39,24 @@ body {
 
 .graph_titles {
  display: flex;
- font-size: 59px;
+
  text-align: center;
  /* position: relative; */
  align-items: center;
  justify-content: center;
- margin-top: 100px;
+ margin-top: 50px;
 
  /* font family to cursive */
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
+ font-size: 59px;
  font-style: normal;
 }
-
+body {
+ width: 100%;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
 #choropleth {
  /* for the choropleth */
  display: flex;
@@ -72,9 +71,6 @@ body {
  align-items: center;
  justify-content: center;
 
- /* border work */
- border: 7px dashed rgb(172, 172, 255);
- border-radius: 20px;
 }
 
 #bar_race_chart {
@@ -93,6 +89,37 @@ svg {
  height: auto;
  border-width: 10px;
 }
+.inference-card {
+ background-color: #f9f9f9;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ padding: 10px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.inference-title {
+
+
+ text-align: center;
+ /* position: relative; */
+
+ justify-content: center;
+
+ /* font family to cursive */
+ font-family: "Permanent Marker", cursive;
+ font-weight: 400;
+ font-size: 59px;
+ font-style: normal;
+}
+
+.inference-text {
+ font-size: 24px;
+ font-family: "Permanent Marker", cursive;
+ font-weight: 400;
+ font-style: normal;
+}
 
 .tooltip {
  color: black;

vis2.html

@@ -36,16 +36,19 @@
  </button>
  </div>
 
+
  <div id="word_cloud">
  <!-- Adding an image in the center, taking up most of the screen size and responsive -->
  <img id="wordcloud_image" src="./static/wordclouds/WCWinners_wordcloud1.jpg"
  style="width: 100%; height: auto;">
  </div>
-
- <div>
+ <div class="inference-card">
+ <h2 class="inference-title">Inference</h2>
+ <p class="inference-text">This is the inference text for the graph.</p>
+ </div>
  <!-- Button to go to another page -->
  <button onclick="window.location.href = 'vis3.html';"
- style="font-size: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 20px;">
+ style="font-size: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin-top: 10px;">
  Go to Top Goal Scorers (Nations)
  </button>
  </div>

vis3.html

@@ -30,7 +30,10 @@
  <iframe width="100%" height="733" frameborder="0"
  src="https://observablehq.com/embed/c7e796558b4c7fe4@3127?cells=viewof+keyframe%2Cchart"></iframe>
  </div>
-
+ <div class="inference-card">
+ <h2 class="inference-title">Inference</h2>
+ <p class="inference-text">This is the inference text for the graph.</p>
+ </div>
  <button onclick="window.location.href = 'vis4.html';"
  style="font-size: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">Go
  to Zoomable Packing</button>

vis4.html

@@ -24,14 +24,16 @@
  <div id="main_div">
  <div id="top_bar">The FIFA Story</div>
 
- <div class="graph_titles">Top Goal Scoring Nations</div>
+ <div class="graph_titles">Cups Won By Each Continent</div>
 
  <div id="zoomable_packing" height="700">
- <iframe width="100%" height="1004" frameborder="0"
- src="https://observablehq.com/embed/2ab74b23f1db7fef?cells=chart"></iframe>
+ <iframe width="100%" height="1103" frameborder="0"
+ src="https://observablehq.com/embed/c9a4a9d158444ea6@665?cells=chart"></iframe>
+ </div>
+ <div class="inference-card">
+ <h2 class="inference-title">Inference</h2>
+ <p class="inference-text">This is the inference text for the graph.</p>
  </div>
-
-
  <button onclick="window.location.href = 'vis5.html';"
  style="font-size: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">Go
  to French Field Analysis</button>

vis5.html

@@ -168,7 +168,10 @@
  <!-- <div id="image_container"></div> -->
  <div id="image_container" style="width: 100%; height: 40%;"></div>
  </div>
-
+ <div class="inference-card">
+ <h2 class="inference-title">Inference</h2>
+ <p class="inference-text">This is the inference text for the graph.</p>
+ </div>
  <div><button onclick="window.location.href = 'vis6.html';"
  style="font-size: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">Go
  to Top 5 World-Class Player comparision</button></div>

vis6.html

@@ -31,7 +31,10 @@
  <iframe width="100%" height="1000" frameborder="0"
  src="https://observablehq.com/embed/8c2b7ae25b3c17cd?cells=viewof+watching%2Clegend%2Cchart"></iframe>
  </div>
-
+ <div class="inference-card">
+ <h2 class="inference-title">Inference</h2>
+ <p class="inference-text">This is the inference text for the graph.</p>
+ </div>
  <button onclick="window.location.href = 'vis6.html';"
  style="font-size: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">Next</button>
  </div>