I am working with golem framework and trying to add my modules to app_ui and app_server yet, I do not succeed to get what I want -the page with Start button and logo .
Hre is the app_ui which I call in the first_page_module_ui:
#' The application User-Interface
#'
#' @param request Internal parameter for `{shiny}`.
#' DO NOT REMOVE.
#' @import shiny
#' @noRd
app_ui <- function(request) {
tagList(
golem_add_external_resources(),
fluidPage(
first_page_module1_ui("first_page_module1_ui_1")
)
)
}
#' Add external Resources to the Application
#'
#' This function is internally used to add external
#' resources inside the Shiny application.
#'
#' @import shiny
#' @importFrom golem add_resource_path activate_js favicon bundle_resources
#' @noRd
golem_add_external_resources <- function() {
add_resource_path(
"www",
app_sys("app/www")
)
tags$head(
favicon(),
bundle_resources(
path = app_sys("app/www"),
app_title = "fec"
)
# Add here other external resources
# for example, you can add shinyalert::useShinyalert()
)
}
Here is my app_server where I call first_page_module1_server:
#' The application server-side
#'
#' @param input,output,session Internal parameters for {shiny}.
#' DO NOT REMOVE.
#' @import shiny
#' @noRd
app_server <- function(input, output, session) {
# Load the modules
first_page_module1_server("first_page_module1_server_1")
}
Here is my actual first_page where I store my both modules
#' first_page_module1_ui UI Function
#'
#' @description A shiny Module.
#'
#' @param id,input,output,session Internal parameters for {shiny}.
#'
#' @noRd
#'
#' @importFrom shiny NS tagList
first_page_module1_ui <- function(id) {
ns <- NS(id)
tagList(
fluidPage(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")),
titlePanel(" "),
uiOutput("page")))
}
#' first_page_module1_server Functions
#'
#' @noRd
first_page_module1_server <- function(id){
moduleServer( id, function(input, output, session){
ns <- session$ns
output$page <- renderUI({
if (is.null(input$currentPage)) {
tagList(
div(class = "input-container",
actionButton("startButton", "Start", style = "font-size: 50px; color: navy")),
tags$img(src = "www/free_english_logo.png", class = "logo", width = "400px") # Adjust the width of the logo
)
}
})
})
}
here is my css file just in case:
/* styles.css */
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 */
}
.input-container input[type='text'],
.input-container input[type='number'],
.input-container .btn {
width: 100%;
padding: 15px;
margin: 5px 0;
box-sizing: border-box;
font-size: 18px;
text-align: center;
color: navy; /* Text color navy */
}
.input-container .btn {
margin-top: 20px;
color: white;
}
/* Style for Your Details text */
.details-container {
text-align: center;
}
.details-text {
color: white;
font-size: 24px;
margin-bottom: 15px;
text-align: center;
display: inline-block;
}
.logo {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 300px; /* Adjust the width of the logo */
height: auto; /* Maintain aspect ratio */
}
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;
}
I should have a Start page (exclude the following pages) with a logo just like in this link first page with Start button and logo
Can someone help?