I am trying to build a shiny app application, within R/Rstudio.
this is the code I am trying, which is part of the bigger code.
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 5px 0;
background-color: navy; /* Set background color for the body */
}
.circle-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 10px;
background-color: lightblue; /* Use the same blue color */
overflow: hidden;
}
.circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
"))
),
div(class = "circle-container", id = "circles")
)
server <- function(input, output, session) {
output$circles <- renderUI({
circle_ui_list <- lapply(1:8, function(index) {
image_path <- paste0("www/teacher", index, ".png")
div(
id = paste0("circle_", index),
class = "circle",
img(src = image_path, width = 80, height = 80)
)
})
tagList(circle_ui_list)
})
}
shinyApp(ui, server)
I want this page to look like 4th page, where I will have each teacher into those circles.
this is how it looks like: 
this page is part of a other pages, this is the code repository: https://github.com/gabrielburcea/fec.git
and want to integrate the page I am attempting to create within other pages. for more details check this page - How to adjust the sizes of the boxes and spaces between them?
but the wider reproducible code only for first page and third page is this:
library(shiny)
# Define the logo URL
ui <- fluidPage(
tags$head(
tags$style(HTML("
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100vh;
margin: 5px 0;
background-color: navy; /* Set background color for the body */
position: relative; /* Add position relative for the logo */
}
.input-container {
width: 100%;
text-align: center;
background-color: navy; /* Set background color for the input container */
padding: 20px; /* Add padding for better visibility */
width: 600px; /* Adjust the width of the input container */
}
.input-container input[type='text'],
.input-container input[type='number'],
.input-container .btn {
width: 100%;
padding: 15px;
margin: 15px 0; /*increased from 5 to 15 for more space between inputs */
box-sizing: border-box;
font-size: 18px;
text-align: center;
color: navy; /* Text color navy */
margin-bottom: 50px; /* larger space to next element */
}
.input-container .btn {
margin-top: 20px;
color: white;
}
/* Style for Your Details text */
.details-container {
text-align: center;
width: 600px; /*larger inputs as desired */
width: 100%;
}
.details-text {
color: white;
font-size: 24px;
margin-bottom: 15px;
text-align: center;
display: inline-block;
}
,form-group {
margin-bottom: 50px; /* larger space to next element */
}
.shiny-input-container:not(.shiny-input-container-inline) {
width: 600px; /*larger inputs as desired */
max-width: 100%;
}
#nextButton, #nextButtonPage3 {
width: 300px; /* shorter than the other buttons */
background-color: green; /* like in the screenshot */
margin-top: 60px; /* larger space to above */
}
#notSureButton {
width: 295px; /* shorter than the other buttons */
margin-top: 60px; /* larger space to above */
}
#startButton {
width: 300px; /* width of the start button, separately defined */
}
div#corner-triangle {
display: block;
width: 100px;
height: 100px;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #ffffff transparent transparent transparent;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
color: white;
text-shadow: 0 0 25px 9px #fff;
}
.logo {
position: absolute;
bottom: 1px;
left: 50%;
transform: translateX(-50%);
width: 300px; /* Adjust the width of the logo */
height: auto; /* Maintain aspect ratio */
}
"))
),
titlePanel(" "),
uiOutput("page")
)
server <- function(input, output, session){
output$page <- renderUI({
if (is.null(input$currentPage)) {
tagList(
div(class = "input-container",
actionButton("startButton", "Start", style = "font-size: 35px; color: navy;") # style = "font-size: 24px;"
),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
} else if (input$currentPage == "page2") {
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic"),
actionButton("intermediateButton", "Intermediate"),
actionButton("intermediatePlusButton", "Intermediate +"),
actionButton("notSureButton", "Not sure"),
actionButton("nextButtonPage3", "Next", style = "font-size: 30px; color: navy;") # style = "font-size: 24px;"
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src ="www/free_english_logo.png", class = "logo", width = "400px")
)
}
})
observeEvent(input$startButton, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
actionButton("nextButtonPage3", "Next", style = "font-size: 30px; color: navy;") #
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
)
})
})
observeEvent(input$bck1, {
output$page <- renderUI({
tagList(
div(
class = "input-container",
actionButton("startButton", "Start", style = "font-size: 35px; color: navy;")
),
tags$img(
src = "www/free_english_logo.png",
class = "logo",
width = "400px"
) # Adjust the width of the logo
)
})
})
observeEvent(input$bck2, {
output$page <- renderUI({
tagList(
div(class = "input-container",
tags$p(class = "details-text", "Teaching level:"),
actionButton("basicButton", "Basic", style = "background-color: lightblue; color: navy;"),
actionButton("intermediateButton", "Intermediate", style = "background-color: lightyellow; color: navy;"),
actionButton("intermediatePlusButton", "Intermediate +", style = "background-color: lightgreen; color: navy;"),
actionButton("notSureButton", "Not sure", style = "background-color: lightgray; color: navy;"),
actionButton("nextButtonPage3", "Next", style = "font-size: 30px; color: navy;") #
),
div(id = "corner-triangle",
actionButton(label="Back", inputId = "bck2",
style = "top: -150px;
left: 25px;
font-size: 25px;
position: relative;
transform: rotate(-45deg);
color: navy;
border: none;
background-color: transparent;
font-weight: bold;
padding: 2em;
margin: -2em;
outline: none;")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px")
)
})
})# Adjust the width of the logo
}
shinyApp(ui,server)
it would be helpful if I can integrate the first code with the other pages code