This commit is contained in:
Rafał Piskorski 2021-01-25 13:31:00 +01:00
parent 7271630b1d
commit 2579fe9d3b
9 changed files with 209 additions and 52 deletions

View File

@ -12,21 +12,22 @@ aboutUI <- function(id){
tags$head( tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "style.css") tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
), ),
fluidPage( column(12,
h1("Kim jesteśmy?", align = "center"), h1("Kim jesteśmy?", align = "center")%>% tagAppendAttributes(id = 'about-header'),
br(), br(),
h4("Jesteśmy młodym dynamicznym zespołem wdrażającym się w świat tworzenia profesjonalnych aplikacji"), h4("Jesteśmy młodym dynamicznym zespołem wdrażającym się w świat tworzenia profesjonalnych aplikacji.
h4("Nasz zespół składa się z:"), Tworząc aplikację TakeCareApp przyświecał nam cel poszerzenie dostępności diagnozy medycznej i umożliwienie szybkiego i wygodnego odczytania wyników." ),
h4("Nasz zespół składa się z"),
br(), br(),
fluidRow(column(4, fluidRow(column(4,
div(div("Jan Przybylski"),img(src="jp.png", height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile'), div("Jan Przybylski"),img(src="jp.png", height = 150, width = 150))%>% tagAppendAttributes(class = 'column-author'),
column(4, column(4,
div(div("Rafał Piskorski"),img(src="rafal.png", height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile'), div("Rafał Piskorski"),img(src="rafal.png", height = 150, width = 150))%>% tagAppendAttributes(class = 'column-author'),
column(4, column(4,
div(div("Robert Tarnas"),img(src="robert.png", height = 150, width = 150)))%>% tagAppendAttributes(class = 'column-tile'), div("Robert Tarnas"),img(src="robert.png", height = 150, width = 150))%>% tagAppendAttributes(class = 'column-author'),
), )%>% tagAppendAttributes(id = 'row-content'),
@ -34,7 +35,8 @@ aboutUI <- function(id){
)
)%>% tagAppendAttributes(id = 'about-page')
) )
} }

121
app/app.R
View File

@ -183,7 +183,7 @@ server <- shinyServer(function(input, output, session){
tabPanel(a("Firmy",id="tab1",class = "tab-link", href = route_link("firms"))), tabPanel(a("Firmy",id="tab1",class = "tab-link", href = route_link("firms"))),
tabPanel(a("O nas",id="tab2",class = "tab-link", href = route_link("about"))), tabPanel(a("O nas",id="tab2",class = "tab-link", href = route_link("about"))),
tabPanel(a("Kalkulator", id ="tab5",class="tab-link", href = route_link("calculator"))), tabPanel(a("Kalkulator", id ="tab5",class="tab-link", href = route_link("calculator"))),
tabPanel(a("Klasyfikator", id ="tab5",class="tab-link", href = route_link("klasyfikator"))), tabPanel(a("Klasyfikator", id ="tab8",class="tab-link", href = route_link("klasyfikator"))),
tabPanel(a("Wyloguj",id="tab7",class = "tab-link")), tabPanel(a("Wyloguj",id="tab7",class = "tab-link")),
tabPanel(a("Profil",id="tab4",class="tab-link", href = route_link("profil")))), tabPanel(a("Profil",id="tab4",class="tab-link", href = route_link("profil")))),
@ -214,19 +214,126 @@ server <- shinyServer(function(input, output, session){
}) })
observeEvent((session$clientData)$url_hash,{ # observeEvent((session$clientData)$url_hash,{
#
# barSelected()
#
# })
#
# observeEvent(input$reload,{
# barSelected()
# }
barSelected() observe({
currPage = get_page()
print(currPage)
if(currPage=="profil"){
}) shinyjs::addCssClass(id="tab4",class = "clicked")
shinyjs::removeCssClass(id="tab1",class = "clicked")
shinyjs::removeCssClass(id="tab2",class = "clicked")
shinyjs::removeCssClass(id="tab3",class = "clicked")
shinyjs::removeCssClass(id="tab5",class = "clicked")
shinyjs::removeCssClass(id="tab6",class = "clicked")
shinyjs::removeCssClass(id="tab7",class = "clicked")
shinyjs::removeCssClass(id="tab8",class = "clicked")
}else if(currPage=="calculator"){
shinyjs::addCssClass(id="tab5",class = "clicked")
shinyjs::removeCssClass(id="tab1",class = "clicked")
shinyjs::removeCssClass(id="tab2",class = "clicked")
shinyjs::removeCssClass(id="tab3",class = "clicked")
shinyjs::removeCssClass(id="tab4",class = "clicked")
shinyjs::removeCssClass(id="tab6",class = "clicked")
shinyjs::removeCssClass(id="tab7",class = "clicked")
shinyjs::removeCssClass(id="tab8",class = "clicked")
}else if(currPage=="login"){
shinyjs::addCssClass(id="tab3",class = "clicked")
shinyjs::removeCssClass(id="tab1",class = "clicked")
shinyjs::removeCssClass(id="tab2",class = "clicked")
shinyjs::removeCssClass(id="tab4",class = "clicked")
shinyjs::removeCssClass(id="tab5",class = "clicked")
shinyjs::removeCssClass(id="tab6",class = "clicked")
shinyjs::removeCssClass(id="tab7",class = "clicked")
shinyjs::removeCssClass(id="tab8",class = "clicked")
}
else if(currPage=="home" | currPage==""){
shinyjs::removeCssClass(id="tab1",class = "clicked")
shinyjs::removeCssClass(id="tab2",class = "clicked")
shinyjs::removeCssClass(id="tab3",class = "clicked")
shinyjs::removeCssClass(id="tab4",class = "clicked")
shinyjs::removeCssClass(id="tab5",class = "clicked")
shinyjs::removeCssClass(id="tab6",class = "clicked")
shinyjs::removeCssClass(id="tab7",class = "clicked")
shinyjs::removeCssClass(id="tab8",class = "clicked")
}else if(currPage=="firms"){
shinyjs::addCssClass(id="tab1",class = "clicked")
shinyjs::removeCssClass(id="tab2",class = "clicked")
shinyjs::removeCssClass(id="tab3",class = "clicked")
shinyjs::removeCssClass(id="tab4",class = "clicked")
shinyjs::removeCssClass(id="tab5",class = "clicked")
shinyjs::removeCssClass(id="tab6",class = "clicked")
shinyjs::removeCssClass(id="tab7",class = "clicked")
shinyjs::removeCssClass(id="tab8",class = "clicked")
}else if(currPage=="about"){
shinyjs::addCssClass(id="tab2",class = "clicked")
shinyjs::removeCssClass(id="tab1",class = "clicked")
shinyjs::removeCssClass(id="tab3",class = "clicked")
shinyjs::removeCssClass(id="tab4",class = "clicked")
shinyjs::removeCssClass(id="tab5",class = "clicked")
shinyjs::removeCssClass(id="tab6",class = "clicked")
shinyjs::removeCssClass(id="tab7",class = "clicked")
shinyjs::removeCssClass(id="tab8",class = "clicked")
}else if(currPage=="klasyfikator"){
shinyjs::addCssClass(id="tab8",class = "clicked")
shinyjs::removeCssClass(id="tab1",class = "clicked")
shinyjs::removeCssClass(id="tab2",class = "clicked")
shinyjs::removeCssClass(id="tab3",class = "clicked")
shinyjs::removeCssClass(id="tab4",class = "clicked")
shinyjs::removeCssClass(id="tab5",class = "clicked")
shinyjs::removeCssClass(id="tab7",class = "clicked")
shinyjs::removeCssClass(id="tab6",class = "clicked")
}
else if(currPage=="register"){
shinyjs::addCssClass(id="tab6",class = "clicked")
shinyjs::removeCssClass(id="tab1",class = "clicked")
shinyjs::removeCssClass(id="tab2",class = "clicked")
shinyjs::removeCssClass(id="tab3",class = "clicked")
shinyjs::removeCssClass(id="tab4",class = "clicked")
shinyjs::removeCssClass(id="tab5",class = "clicked")
shinyjs::removeCssClass(id="tab7",class = "clicked")
shinyjs::removeCssClass(id="tab8",class = "clicked")
observeEvent(input$reload,{
barSelected()
} }
)
})
router$server(input, output, session) router$server(input, output, session)

View File

@ -168,7 +168,7 @@ calculatorServer <- function(input, output, session) {
select4<-input$select4) select4<-input$select4)
print(calculatorSave)
calculatorParameterInts = list(list(name="parameter1",value = calculatorSave$slider1), calculatorParameterInts = list(list(name="parameter1",value = calculatorSave$slider1),
list(name="parameter2",value = calculatorSave$select1), list(name="parameter2",value = calculatorSave$select1),

View File

@ -91,6 +91,7 @@ firmyServer <- function(input, output,session) {
fluidRow( fluidRow(
column(12, column(12,
h1("Firmy współpracujące", align = "center")%>% tagAppendAttributes(id = 'firms-header'),
wellPanel(column(2,img(src="gsk.png", height = 150, width = 150)), wellPanel(column(2,img(src="gsk.png", height = 150, width = 150)),
column(6, column(6,

View File

@ -11,6 +11,7 @@ homeUI <- function(id) {
tags$style(HTML(" tags$style(HTML("
@import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
@import url('//fonts.googleapis.com/css2?family=Fjalla+One'); @import url('//fonts.googleapis.com/css2?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@500&display=swap');
"))), "))),

View File

@ -37,7 +37,7 @@ tags$script('Shiny.addCustomMessageHandler("tokenHandlerAfterLogin",
fluidRow(column(12, fluidRow(column(12,
wellPanel( wellPanel(
textInput("login", label = strong("Login")), textInput("login", label = strong("Login")),
passwordInput("pass", label = strong("Haslo")), passwordInput("pass", label = strong("Hasło")),
uiOutput("loginErr"), uiOutput("loginErr"),
actionButton('loginBtn',"Zaloguj") actionButton('loginBtn',"Zaloguj")
@ -87,7 +87,7 @@ loginServer <- function(input, output,session) {
if (isCorrect()==TRUE){ if (isCorrect()==TRUE){
}else{ }else{
p("Użytkownik istnieje lub wprowadzono błędne dane",style="color:yellow;text-align:center;") p("Użytkownik nie istnieje lub wprowadzono błędne dane",style="color:yellow;text-align:center;")
} }
}) })

View File

@ -209,7 +209,7 @@ profilServer <- function(input, output,session) {
dateInput("editAge", label = strong("Data urodzenia") ,value=response$profil$personalDataDTO$datebirth), dateInput("editAge", label = strong("Data urodzenia") ,value=response$profil$personalDataDTO$datebirth),
selectInput("editGender", label = strong("Płeć"), selectInput("editGender", label = strong("Płeć"),
choices = list("Żeńska" = 0, "męska" = 1), choices = list("Żeńska" = 0, "Męska" = 1),
selected = as.numeric(response$profil$personalDataDTO$gender)), selected = as.numeric(response$profil$personalDataDTO$gender)),
@ -388,7 +388,7 @@ profilServer <- function(input, output,session) {
if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÄ“ÄĹŚśŹźŻż]{2,20}$",s)==TRUE){ if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÄ“ÄĹŚśŹźŻż]{2,20}$",s)==TRUE){
return() return()
}else{ }else{
p("Bład: Nazwisko powinno zaczynać sie od wielkiej litery, zawierać jedynie litery i mieć długość od 3 do 15 znakĂłw",style="color:yellow") p("Bład: Nazwisko powinno zaczynać sie od wielkiej litery, zawierać jedynie litery i mieć długość od 3 do 15 znaków",style="color:yellow")
} }

View File

@ -84,11 +84,11 @@ registerServer <- function(input, output,session) {
password= result$password, password= result$password,
roleDTO= roleData) roleDTO= roleData)
to_send = list( tegisterToSend = list(
personalDataDTO = personalData, personalDataDTO = personalData,
userDTO = userData) userDTO = userData)
r<-httr::POST("https://syi-back.herokuapp.com/api/register",body=to_send,encode = 'json') r<-httr::POST("https://syi-back.herokuapp.com/api/register",body=tegisterToSend,encode = 'json')
# print(content(r)) print(content(r))
if (r$status_code==200){ if (r$status_code==200){
status$status = TRUE status$status = TRUE
@ -112,7 +112,7 @@ registerServer <- function(input, output,session) {
if (status$first==TRUE){ if (status$first==TRUE){
fluidRow(column(12, fluidRow(column(12,
wellPanel( wellPanel(
textInput("name", label = strong("Imie")), textInput("name", label = strong("Imię")),
uiOutput("name"), uiOutput("name"),
textInput("surname", label = strong("Nazwisko")), textInput("surname", label = strong("Nazwisko")),
uiOutput("surname"), uiOutput("surname"),
@ -120,16 +120,16 @@ registerServer <- function(input, output,session) {
uiOutput("mail"), uiOutput("mail"),
dateInput("age", label = strong("Data urodzenia"),value = "1970-01-01"), dateInput("age", label = strong("Data urodzenia"),value = "1970-01-01"),
selectInput("gender", label = strong("Plec"), selectInput("gender", label = strong("Płeć"),
choices = list("Żenska" = 0, "Meska" = 1), choices = list("Żeńska" = 0, "ska" = 1),
selected = 0), selected = 0),
textInput("username", label = strong("Login")), textInput("username", label = strong("Login")),
uiOutput("username"), uiOutput("username"),
passwordInput("haslo", label = strong("Haslo")), passwordInput("haslo", label = strong("Hasło")),
uiOutput("haslo"), uiOutput("haslo"),
checkboxGroupInput("permission", label = strong("Wyrażam zgode"), checkboxGroupInput("permission", label = strong("Wyrażam zgodę"),
choices = list("Wyrażam zgode na przetwarzanie moich danych osobowych. *" = 1, "Oswiadczam ze jestem swiadom ze aplikacja TakeCareApp to narzedzie wspierajace diagnostyke i nie moze w pelni zastapic konsultacji medycznej z lekarzem. * " = 2), choices = list("Wyrażam zgodę na przetwarzanie moich danych osobowych. *" = 1, "Oświadczam, że jestem świadom że aplikacja TakeCareApp to narzędzie wspierające diagnostykę i nie może w pełni zastąpić konsultacji medycznej z lekarzem. * " = 2),
), ),
uiOutput("permission"), uiOutput("permission"),
actionButton("submit","Zarejestruj"), actionButton("submit","Zarejestruj"),
@ -141,7 +141,7 @@ registerServer <- function(input, output,session) {
fluidRow(column(12, fluidRow(column(12,
wellPanel( wellPanel(
textInput("name", label = strong("Imie")), textInput("name", label = strong("Imię")),
uiOutput("name"), uiOutput("name"),
textInput("surname", label = strong("Nazwisko")), textInput("surname", label = strong("Nazwisko")),
uiOutput("surname"), uiOutput("surname"),
@ -149,16 +149,16 @@ registerServer <- function(input, output,session) {
uiOutput("mail"), uiOutput("mail"),
dateInput("age", label = strong("Data urodzenia"),value = "1970-01-01"), dateInput("age", label = strong("Data urodzenia"),value = "1970-01-01"),
selectInput("gender", label = strong("Plec"), selectInput("gender", label = strong("Płeć"),
choices = list("Żenska" = 0, "Meska" = 1), choices = list("Żeńska" = 0, "ska" = 1),
selected = 0), selected = 0),
textInput("username", label = strong("Login")), textInput("username", label = strong("Login")),
uiOutput("username"), uiOutput("username"),
passwordInput("haslo", label = strong("Haslo")), passwordInput("haslo", label = strong("Hasło")),
uiOutput("haslo"), uiOutput("haslo"),
checkboxGroupInput("permission", label = strong("Wyrażam zgode"), checkboxGroupInput("permission", label = strong("Wyrażam zgodę"),
choices = list("Wyrażam zgode na przetwarzanie moich danych osobowych. *" = 1, "Oswiadczam ze jestem swiadom ze aplikacja TakeCareApp to narzedzie wspierajace diagnostyke i nie moze w pelni zastapic konsultacji medycznej z lekarzem. * " = 2), choices = list("Wyrażam zgodę na przetwarzanie moich danych osobowych. *" = 1, "Oświadczam, że jestem świadom że aplikacja TakeCareApp to narzędzie wspierające diagnostykę i nie może w pełni zastąpić konsultacji medycznej z lekarzem. * " = 2),
), ),
uiOutput("permission"), uiOutput("permission"),
actionButton("submit","Zarejestruj"), actionButton("submit","Zarejestruj"),
@ -184,7 +184,7 @@ registerServer <- function(input, output,session) {
if (getStatus()==TRUE){ if (getStatus()==TRUE){
p("OK",style="color:white;text-align:center;") p("OK",style="color:white;text-align:center;")
}else{ }else{
p("Uzytkownik istnieje lub wprowadzono bledne dane",style="color:yellow;text-align:center;") p("Użytkownik istnieje lub wprowadzono błędne dane",style="color:yellow;text-align:center;")
} }
@ -196,7 +196,7 @@ registerServer <- function(input, output,session) {
if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{2,15}$",s)==TRUE){ if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{2,15}$",s)==TRUE){
return() return()
}else{ }else{
p("ad: Imie powinno zaczynac sie od wielkiej litery, zawierac jedynie litery i miec dlugosc od 3 do 15 znaków",style="color:yellow") p("ąd: Imię powinno zaczynać sie od wielkiej litery, zawierać jedynie litery i mieć długość od 3 do 15 znaków",style="color:yellow")
} }
}) })
@ -207,7 +207,7 @@ registerServer <- function(input, output,session) {
if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{2,20}$",s)==TRUE){ if (s=="" | grepl("^[A-Z][a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{2,20}$",s)==TRUE){
return() return()
}else{ }else{
p("ad: Nazwisko powinno zaczynac sie od wielkiej litery, zawierac jedynie litery i miec dlugosc od 3 do 15 znaków",style="color:yellow") p("ąd: Nazwisko powinno zaczynać sie od wielkiej litery, zawierać jedynie litery i mieć długość od 3 do 15 znaków",style="color:yellow")
} }
@ -220,7 +220,7 @@ registerServer <- function(input, output,session) {
if (s=="" | grepl("^[a-z]+[0-9]*@([a-z]{2,10}\\.)+[a-z]{2,5}$",s)==TRUE){ if (s=="" | grepl("^[a-z]+[0-9]*@([a-z]{2,10}\\.)+[a-z]{2,5}$",s)==TRUE){
return() return()
}else{ }else{
p("ad: Mail powinien miec budowe adres@nazwa.domena",style="color:yellow") p("ąd: Mail powinien mieć budowę adres@nazwa.domena",style="color:yellow")
} }
@ -238,9 +238,9 @@ registerServer <- function(input, output,session) {
if ((grepl("^([a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]+[0-9\\-\\_]*){5,20}$",s)==TRUE) & number==0){ if ((grepl("^([a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]+[0-9\\-\\_]*){5,20}$",s)==TRUE) & number==0){
return() return()
}else if(number!=0){ }else if(number!=0){
p("ad: Login jest zajety",style="color:yellow") p("ąd: Login jest zajęty",style="color:yellow")
}else{ }else{
p("ad: Login powinien skladac si z liter i cyfr i miec dlugosc od 5 do 15 znaków",style="color:yellow") p("ąd: Login powinien składać się z liter i cyfr i mieć długość od 5 do 15 znaków",style="color:yellow")
} }
} }
@ -253,7 +253,7 @@ registerServer <- function(input, output,session) {
if (s=="" | grepl("^([a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{5,}[0-9]{5,}[a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż0-9]*)+$",s)==TRUE){ if (s=="" | grepl("^([a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż]{5,}[0-9]{5,}[a-zA-ZĄąĆćĘꣳŃńÓ󌜏źŻż0-9]*)+$",s)==TRUE){
return() return()
}else{ }else{
p("ad: Haslo powinno skladac sie z co najmniej 5 liter i 5 cyfr od 10 znaków",style="color:yellow") p("ąd: Hasło powinno składać sie z co najmniej 5 liter i 5 cyfr od 10 znaków",style="color:yellow")
} }
}) })

View File

@ -98,7 +98,7 @@ background-color:#00A896;
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
#background-color: #008375; #background-color: #008375;
#color: #FFFFFF !important; #color: #FFFFFF !important;
#font-family: Fjalla One; #font-family: 'Teko', sans-serif;
} }
.navbar-default .navbar-nav > li:hover{ .navbar-default .navbar-nav > li:hover{
@ -108,7 +108,9 @@ background-color:#00A896;
.navbar-default .navbar-nav > li > a{ .navbar-default .navbar-nav > li > a{
color: #FFFFFF !important; color: #FFFFFF !important;
font-family: Fjalla One; font-family: 'Teko', sans-serif;
font-size:18px;
text-align: center; text-align: center;
} }
@ -243,9 +245,10 @@ border-radius: 20px;
.column-tile > div >div .column-tile > div >div
{ {
text-align:center; text-align:center;
font-size:25px; font-size:30px;
color:white; color:white;
font-family: Fjalla One; font-family: 'Teko', sans-serif;
} }
@ -265,7 +268,8 @@ background-color:#028090;
color:white; color:white;
justify-content:center; justify-content:center;
align-items:center; align-items:center;
font-family:Fjalla One; font-family: 'Teko', sans-serif;
font-size:18px;
text-align:center; text-align:center;
} }
@ -336,7 +340,8 @@ color:white;
background-color:#028090; background-color:#028090;
border:none; border:none;
border-radius:0; border-radius:0;
font-family:Fjalla One; font-family: 'Teko', sans-serif;
font-size:18px;
} }
.nav-tabs > li > a:hover { .nav-tabs > li > a:hover {
@ -387,7 +392,8 @@ table.dataTable{
table.dataTable td{ table.dataTable td{
#color: white; #color: white;
#text-shadow: 1px 0 0.5px black, -1px 0 0.5px black, 0 1px 0.5px black, 0 -1px 0.5px black; #text-shadow: 1px 0 0.5px black, -1px 0 0.5px black, 0 1px 0.5px black, 0 -1px 0.5px black;
font-family: 'Fjalla One'; font-family: 'Teko', sans-serif;
font-size:18px;
text-align:center!important; text-align:center!important;
} }
@ -432,8 +438,18 @@ table.dataTable th{
#firms{ #firms{
background-color: #C7F9CC; background-color: #C7F9CC;
} }
#column-firms{
font-family: 'Teko', sans-serif;
font-size:18px;
border-radius: 10px;
display:flex;
flex-direction:column;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
background: #F9F3F3;
}
#column-firms > .well{ #column-firms > .well{
#border-radius: 10px;
display:flex; display:flex;
flex-direction:row; flex-direction:row;
@ -466,6 +482,36 @@ table.dataTable th{
text-align:center; text-align:center;
} }
#about-page{
font-family: 'Teko', sans-serif;
border-radius: 10px;
display:flex;
flex-direction:column;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
background: #F9F3F3;
}
#about-page>h4{
width:50%;
max-width:800px;
align-self:center;
}
#about-page>#row-content>div{
font-size:20px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
#about-header,#firms-header{
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25), -2px -2px 4px rgba(0, 0, 0, 0.25);
background-color:#028090;
color:white;
}
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
body >.container-fluid{ body >.container-fluid{
height:auto; height:auto;