Comment puis-je donner à ma boîte une couleur différente en HTML ?-Questions et réponses sur le réseau chinois PHP

P.S. J'ai mis à jour cet article pour que ce soit plus clair !

Comment attribuer différentes couleurs aux cases en html pour marquer les candidatures internes et externes ?

J'essaie d'étiqueter les boîtes de différentes couleurs comme marqueurs pour les applications internes et externes. Ce code HTML est ensuite transmis à une application rshiny.

Les candidatures internes sont liées par 内部有 astrazeneca 字样的网页链接定义的，外部链接是那些 没有 astrazeneca.

Voici un échantillon des fichiers html dont je dispose (j'ai environ 50 fichiers html mais je n'en fournirai qu'un) à titre d'exemple :

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 10px;
            padding: 10px;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .box img {
            max-width: 50%;
            height: auto;
            margin-bottom: 10px;
        }
        .heading {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>

    
    <h2 class="heading">Gene Expression Analysis</h2>
    <div class="container">
        <div class="box">
            <a href= "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/", target=”_blank” >
                <img src= "www/FluidigmAnalysisToolkit.v2.png" alt="Box 1">
                <p>Fludigm_Browser</p>
                <p>Perform Fluidigm data analysis</p>
            </a>
        </div>
        <div class="box">
            <a href="https://gtexportal.org/home", target=”_blank”>
                <img src="www/gtex.png" alt="Box 2">
                <p>GTEx Portal</p>
                <p>Gene expression in normal tissue</p>
            </a>
        </div>
        <div class="box">
            <a href="https://azcollaboration.sharepoint.com/sites/AZ208/SitePages/BioTuring.aspx?OR=Teams-HL&CT=1670593304007&clickparam =eyJBcHBOYW1lIjoiVGVhbXMtRGVza3RvcCIsIkFwcFZlcnNpb24iOiIyOC8yMjExMzAwNDEwMCIsIkhhc0ZlZGVyYXRlZFVzZXIiOmZhbHNlfQ%3D%3D", target=”_blank”>
                <img src="www/bioturing.svg" alt="Box 3">
                <p> BioTuring </p>
                <p>Platform for single-cell analysis and spatial transcriptomics exploration</p>
            </a>
        </div>
        <div class="box">
            <a href="http://informatics.medimmune.com/shiny/scope/", target=”_blank”>
                <img src="www/scope.svg" alt="Box 4">
                <p>SCOPE</p>
                <p>Explore available single cell RNA-Seq studies</p>
            </a>
        </div>
    </div>

    <h2 class="heading">Pathway Analysis</h2>
    <div class="container">
        <div class="box">
            <a href="https://clarivate.com/cortellis/learning/clarivate-for-astrazeneca1796/", target=”_blank”>
                <img src="www/clarivate.png" alt="Box 1">
                <p>Clarivate</p>
                <p>Pathway analysis tools from Cortellis including MetaCore</p>
            </a>
        </div>
        <div class="box">
            <a href="https://analysis.ingenuity.com/pa/launch.jsp">
                <img src= "www/ipa.png" alt="Box 2">
                <p>Ingenuity Pathway Analysis</p>
                <p>Analyze data using manually curated gene sets</p>
            </a>
        </div>
        <div class="box">
            <a href="https://astrazeneca.onramp.bio", target=”_blank”>
                <img src= "www/onramp.png" alt="Box 3">
                <p>OnRamp - Rosalind</p>
                <p>Interactively explore RNA-seq and ChIP-Seq data</p>
            </a>
        </div>
        <div class="box">
            <a href="http://software.broadinstitute.org/gsea/msigdb/index.jsp", target=”_blank”>
                <img src="www/gsea.png" alt="Box 4">
                <p>GSEA</p>
                <p>Gene set enrichment analysis</p>
            </a>
        </div>
    </div>

Comme vous pouvez le voir dans le html ci-dessus, j'ai quelques liens avec "astrazeneca" comme mot, comme "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" et un autre sans, comme "www/bioturing.svg"

Voici le code rshiny, à des fins de contexte :

library(shiny)
ui <- shiny::fluidPage(
  theme = shinythemes::shinytheme("united"),

  tags$head(tags$style(".navbar {margin-bottom: 0px;}")),

  tags$head(
    tags$style(".container-fluid {padding-right: 0px; padding-left: 0px;}")
  ),

  navbarPage(
    title = div(
      img(src = "www/bftb_logo_v8_bare.png", height = "30px"),
      "AZ Oncology Bioinformatics Toolbox"
    ),
    windowTitle = "BFTB Landing Page",

    tabPanel("Toolbox", icon = icon("wrench"), disable = TRUE,
             shinydashboard::dashboardPage(
               header = shinydashboard::dashboardHeader(title = "   ", titleWidth = 300, disable = TRUE),
               shinydashboard::dashboardSidebar(
                 width = 300 ,
                 textInput("search_term", "Search for apps:"),
                 actionButton("search_button", "Search"),
                 shinydashboard::sidebarMenu(
                   shinydashboard::menuItem(
                     "Tools",
                     tabName = "tools_app",
                     icon = icon("wrench")
                   ),
                   shinydashboard::menuSubItem(
                     "Gene Expression/Signature/Pathways",
                     tabName = "gene_app",
                     icon = icon("chart-line")
                   )
                 )
               ),
               shinydashboard::dashboardBody(
                 shinydashboard::tabItems(
                   shinydashboard::tabItem("tools_app", mod_tools_path_ui("tools_path_ui_1")),
                   shinydashboard::tabItem("gene_app", mod_gene_expressions_sign_path_ui("gene_expression_sign_path_ui"))
                 )
               )
             )
    )
  )
)


server <- function(input, output){


}


shinyApp(ui = ui, server = server)

Et 2 modules : Outil 1

mod_tools_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    
  )
}

Et le gène un :

mod_gene_expressions_sign_path_ui <- function(id){
  ns <- NS(id)
  tagList(
    shinydashboard::tabItem(
      tabName = "gene_app",
      fluidRow(
        shiny::headerPanel(h3()),
        br(),
        htmltools::htmlTemplate("www/gene.html")
      )
    )
  )
  
}

<div class="box"> <a class="internal" href="https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" target=”_blank”> <img src="www/FluidigmAnalysisToolkit.v2.png" alt="Box 1"> <p>Fludigm_Browser</p> <p>Perform Fluidigm data analysis</p> </a> </div> <div class="box"> <a class="external" href="https://gtexportal.org/home" target=”_blank”> <img src="www/gtex.png" alt="Box 2"> <p>GTEx Portal</p> <p>Gene expression in normal tissue</p> </a> </div>

a.internal:link { color: green; background-color: transparent; text-decoration: none; } a.internal:visited { color: pink; background-color: transparent; text-decoration: none; } a.internal:hover { color: red; background-color: transparent; text-decoration: underline; } a.internal:active { color: yellow; background-color: transparent; text-decoration: underline; } a.external:link { color: crimson; background-color: transparent; text-decoration: none; } a.external:visited { color: cyan; background-color: transparent; text-decoration: none; } a.external:hover { color: midnightblue; background-color: transparent; text-decoration: underline; } a.external:active { color: lime; background-color: transparent; text-decoration: underline; }

<!DOCTYPE html> <html> <head> <style> .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .box { width: 200px; height: 200px; margin: 10px; padding: 10px; border: 2px solid black; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .box img { max-width: 50%; height: auto; margin-bottom: 10px; } .heading { font-size: 24px; font-weight: bold; text-align: center; margin-top: 50px; } a.internal:link { color: green; background-color: transparent; text-decoration: none; } a.internal:visited { color: pink; background-color: transparent; text-decoration: none; } a.internal:hover { color: red; background-color: transparent; text-decoration: underline; } a.internal:active { color: yellow; background-color: transparent; text-decoration: underline; } a.external:link { color: crimson; background-color: transparent; text-decoration: none; } a.external:visited { color: cyan; background-color: transparent; text-decoration: none; } a.external:hover { color: midnightblue; background-color: transparent; text-decoration: underline; } a.external:active { color: lime; background-color: transparent; text-decoration: underline; } </style> </head> <body> <h2 class="heading">Gene Expression Analysis</h2> <div class="container"> <div class="box"> <a class="internal" href="https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/" target=”_blank”> <img src="www/FluidigmAnalysisToolkit.v2.png" alt="Box 1"> <p>Fludigm_Browser</p> <p>Perform Fluidigm data analysis</p> </a> </div> <div class="box"> <a class="external" href="https://gtexportal.org/home" target=”_blank”> <img src="www/gtex.png" alt="Box 2"> <p>GTEx Portal</p> <p>Gene expression in normal tissue</p> </a> </div> </div> </body> </html>