inst/extdata/shinyApp/main/introduction.ui.R

In zhengfj1994/MeTEA: Targeted extraction from untargeted metabolomics dataset by using metabolomics database

fluidPage(
  # helpText(h3("MetEx is a calculation tool for metabolite annotation. It can easily mine metabolite information directly from raw data. We provide the R package, web server version and offline shiny UI version of MetEx, and the three will be updated simultaneously.")),
  # hr(),
  # img(src = "The_workflow_of_MetEx.png", align = "center", width = "100%"),
  fluidRow(
    div(
      id="mainbody",
      column(img(src = "flower_left.png", align = "center", width = "10%"),
             img(src = "MetEx_icon_2.png", align = "center", width = "35%"),
             img(src = "flower_right.png", align = "center", width = "10%"),
             align = "center", width = 12),
      column(3),
      column(
        12,
        div(style="text-align:center;margin-top:0px;font-size:200%;color:darkred",
            HTML("~~ <em>Dear Users, Welcome to MetEx</em> ~~")),
        div(style="width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;font-size:150%;margin-top:20px",
            HTML("<b>MetEx</b> is a computational tool for metabolite targered extraction and annotation based on databases. The process of MetEx is convenient and so that we believe that it will narrow the gap between LC-MS raw data and annotated metabolites. MetEx was provided in three forms:
                 <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='https://github.com/zhengfj1994/MetEx' target='_blank'>R package</a>;
                 <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://www.metaboex.cn/MetEx/' target='_blank'>web server</a>;
                 <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='https://github.com/zhengfj1994/MetEx' target='_blank'>offline shiny UI</a>.
                 <br>The three forms will be updated simultaneously.")),
        div(style="text-align:center;margin-top: 50px",
            a(href='#',
              img(src='The_workflow_of_MetEx.png', align = "center", width = "80%"))),
        div(style="width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;margin-top:20px;font-size:150%",
            HTML("The basic logic of annotation is as follows:<br />"),
            HTML("&nbsp;&nbsp;1. Construction of a database containing retention time, accurate mass and MS/MS information;<br />"),
            HTML("&nbsp;&nbsp;2. Prepare the original data and convert them into mzXML and mgf formats;<br />"),
            HTML("&nbsp;&nbsp;3. Choose appropriate qualitative methods and parameters;<br />"),
            HTML("&nbsp;&nbsp;4. Output result;<br />"),
            HTML("Detailed introduction can be found in the <em><b>Help</b></em> part.<br />"),
            HTML("<br />"),
            HTML("MetEx is very flexible to use. If users have a good understanding of R language, they can directly use MetEx's R language package version. If the user is not very familiar with the R language, they can use MetEx's Shiny UI. We also provide a web server to help understand and use MetEx. If you have any questions and good suggestions, we welcome you to contact Zheng Fujian at <u>zhengfj@dicp.ac.cn</u>.")),

        div(style="text-align:center;margin-top:20px;font-size:150%;color:darkgreen",
            HTML("<br />"),
            HTML("^_^ <em>Enjoy yourself in MetEx</em> ^_^")),
        tags$hr(style="border-color: grey60;"),
        div(style="text-align:center;margin-top: 20px;font-size:120%",
            HTML(" &copy; 2021 <a href='http://www.402.dicp.ac.cn/index.htm' target='_blank'>Guowang Xu's Group</a>. All Rights Reserved.")),
        div(style="text-align:center;margin-bottom: 20px;font-size:120%",
            HTML("&nbsp;&nbsp; Created by Fujian Zheng. E-mail: <u>zhengfj@dicp.ac.cn</u>."))
      ),
      column(3)
    )
  )
)