Wie kann ich meiner Box in HTML eine andere Farbe geben?
P.S. Ich habe diesen Beitrag aktualisiert, um es klarer zu machen!
Wie kann ich Kästchen in HTML verschiedene Farben zuweisen, um interne und externe Anwendungen zu kennzeichnen?
Ich versuche, die Boxen in verschiedenen Farben als Markierungen für interne und externe Anwendungen zu beschriften. Dieser HTML-Code wird dann an eine Rshiny-Anwendung übergeben.
Interne Bewerbungen sind durch 内部有 astrazeneca 字样的网页链接定义的，外部链接是那些 没有 astrazeneca verlinkt.
Hier ist ein Beispiel der HTML-Dateien, die ich habe (ich habe etwa 50 HTML-Dateien, werde aber nur eine bereitstellen) als Beispiel:
<!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>
Wie Sie im HTML oben sehen können, habe ich einige Links mit „astrazeneca“ als Wort, wie "https://rstudio-connect.scp.astrazeneca.net/RStudio_FLAT/", und einen anderen ohne, wie „www/bioturing.svg“
Dies ist der Rshiny-Code für Kontextzwecke:
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)
Und 2 Module: Tool 1
mod_tools_path_ui <- function(id){
ns <- NS(id)
tagList(
)
}
Und Gen eins:
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")
)
)
)
}