final v

data/intro.txt

@@ -0,0 +1,2 @@
+World War II (WW2), was a global war that lasted from 1939 to 1945, although related conflicts began earlier. The vast majority of the world's countries—including all of the great powers—eventually formed two opposing military alliances: the Allies and the Axis. It was the most global war in history; it directly involved more than 100 million people from over 30 countries. World War II was the deadliest conflict in human history, marked by 50 to 85 million fatalities, most of which were civilians in the Soviet Union and China. It included massacres, the genocide of the Holocaust, strategic bombing, starvation, disease, and the only use of nuclear weapons in warfare.
+<br>World War II changed the political alignment and social structure of the world. The victorious great powers—China, France, the Soviet Union, the United Kingdom, and the United States—became the permanent members of the United Nations Security Council. The Soviet Union and the United States emerged as rival superpowers, setting the stage for the Cold War, which lasted for the next 46 years. Meanwhile, the influence of European great powers waned, while the decolonisation of Africa and Asia began.

server.R

@@ -18,6 +18,7 @@ ts_df <- read_csv("data/monthly_obs_count.csv", col_types = list("start_month" =
 load("data/groupColors.rda")
 load("data/ajmatrix.rda")
 allies_axis_text <- read_file("data/axis_allies.txt")
+intro_text <- read_file("data/intro.txt")
 ####Sever####
 shinyServer(function(input, output, session) {
   target_map <- SharedData$new(df_target, key = ~id, group = "grp1")
@@ -206,6 +207,7 @@ shinyServer(function(input, output, session) {
 })
 
   output$allies_axis <- renderText(allies_axis_text)
-
+  output$intro <- renderText((intro_text))
+  output$instruction <- renderText(paste("Use the selection tool on the map to highlight the target area and update plots"))
 })
 

ui.R

@@ -18,22 +18,24 @@ shinyUI(dashboardPage(
         tabName = "timeline",
         icon = icon("line-chart")
       ),
+      menuItem(
+        "Alliance",
+        tabName = "alliance",
+        icon = icon("fighter-jet")),
       menuItem(
         "Map",
         tabName = "maps", 
         icon = icon("globe")
-      ),
-      menuItem(
-        "Alliance",
-        tabName = "alliance",
-        icon = icon("fighter-jet")
-      )
-    )
-  ),
+      ))
+    ),
   dashboardBody(
     tabItems(
       tabItem(
         tabName = "maps",
+        fluidRow(
+          tags$style("#instruction {font-size:15px;
+               font-style:italic; }"),
+          column(width = 5, htmlOutput("instruction"))),
         fluidRow(
         box(
           width = "100%",
@@ -75,9 +77,17 @@ shinyUI(dashboardPage(
         tabName = "timeline",
         fluidRow(
           box(title = tags$b("Count of Bombing Mission in WW2"), solidHeader = TRUE,
-              plotlyOutput("timeseries"), width = 12)
-        ))
-    )
-  )
+              plotlyOutput("timeseries"), width = 12)),
+        fluidRow(box(title = tags$b("WW2 Introduction"), status = "primary",
+                     solidHeader = F, collapsible = F, width = 12,
+                     fluidRow(
+                       tags$style("#allies_axis {font-size:15px;
+               display:block; }"),
+                       column(width = 9, htmlOutput("intro")),
+                       column(width = 3, align = "center",
+                              img(src = "uss_arizona_burning_sinking-P.jpeg", height = '170px', width = '240px')))
+                 )
+                 ))
+    ))
 )
 )