hello

server.R
ui.R

library(shiny)

server <- function(input, output, session) {
  observeEvent(input$bins, {
    # Followings add a dismissable alert every time the "bins" changes
    removeUI("#alert-holder .alert", immediate = T)
    insertUI(
      "#alert-holder", where = "afterBegin",
      ui = div(
        tags$button(
          type="button", class="close", `data-dismiss`="alert",
          `aria-label`="Close", span(`aria-hidden`="true", HTML("&times;"))
        ),
        class="alert alert-info alert-dismissible m-2", role = "alert",
        paste0("Alert: Input \"bins\" changes to", input$bins)
        ),
      immediate = T
    )
    output$distPlot <- renderPlot({
      x    <- faithful$waiting
      bins <- seq(min(x), max(x), length.out = input$bins + 1)
      hist(x, breaks = bins, col = "#75AADB", border = "white",
           xlab = "Waiting time to next eruption (in mins)",
           main = "Histogram of waiting times")
    })
  })
  
}

library(shiny)
library(htmltools)


ui <- fluidPage(
  # define window title
  tags$head(
    tags$title("hello"),
    tags$style("
      /* followings means put a small background image in the bottom left */
      body {
        background-image: url(https://brand.wisc.edu/content/uploads/2016/11/uw-crest-color-300x180.png);
        background-color: rgba(255,255,255,0.5);
        background-repeat: no-repeat;
        background-position: center left;
      }
      /* The following changes the font size of input label */
      .shiny-input-container label {font-size: 3rem;}
    ")
  ),
  
  # Inline CSS
  # CSS uses '-' (minus) as a separator character in property names,
  # but this is an inconvenient character to use in an R function 
  # argument name. Instead, you can use '.' (period) and/or '_' 
  # (underscore) as separator characters.
  h2("Central limit theorem", style = 
    css(text.align="center", color="red")
  ),
  div(class="row", id="alert-holder"),
  sidebarLayout(
    sidebarPanel(
      # Now just as an example, we write tags of silderInput manually
      # and make some slight format changes
      sliderInput(inputId = "bins", label = "Number of bins:", min = 1, max = 50, value = 30),
      submitButton(text = "Apply Changes", icon = NULL, width = NULL)
    ),
    
    mainPanel(
      plotOutput(outputId = "distPlot"),
      # Native HTML - including a video from Youtube
      # Due to limited bandwidth of your server/shinyapps.io
      # It is always better to put videos and other large
      # resource files in somewhere else and use external link
      # so that user browser will download from other servers
      # directly without consuming the bandwidth of 
      # your shiny app server
      HTML('<iframe
           src="https://www.youtube.com/embed/0W84gxCm83A"
           title="YouTube video player" frameborder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen height="400" 
           style="width: 50%; aspect-ratio: 16/9; margin:3rem;"></iframe>')
    )
  )
)