home.component.html

<div class="container">
    <div class="px-4 py-4">

        <div class="alert alert-info alert-dismissible fade show" role="alert">
  <strong>Drugst.One is available as preprint!</strong> Add Drugst.One now to your application to join the initiative. <a class="btn btn-primary" href="/call">Join</a>
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

        <!-- <h1 class="display-5 fw-bold">Centered hero</h1> -->
        <div class="row mt-5">
            <div class="col-lg-7 col-md-12 text-lg-start text-sm-center">
                <!-- <img
                        class="ml-auto mr-0 mb-4 home-logo"
                        [src]="isDark() ? '/assets/logo_white.png' : '/assets/logo_black.png'"
                        alt="drugstone logo"
                /> -->
                <h1 class="display-5">
                    Network Exploration and Drug Repurposing on your website</h1>
                <p class="lead mt-3 justify-text">
                    <br>
                    Drugst.One turns your tool that outputs a list of genes or proteins into a feature rich, drug
                    repurposing web tool with interactive network visualization.
                    <br>
                    <br>
                    With just 3 lines of code, users of your website can benefit from the exploratory functions and
                    immediately start researching the results of your tool.
                    <br>
                    <br>
                </p>
            </div>
            <div class="col-lg-5 col-md-12 d-flex justify-content-end align-self-start">
                <video poster="assets/videos/drugstone_overview.png" controls width="100%" height="100%">
                    <source src="assets/videos/drugstone_overview.mp4" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
    <div class="row align-items-start text-center">
        <div class="col mt-5">

            <div class="d-flex justify-content-center">
                <p-button
                        label="Integrate drugst.one"
                        icon="pi pi-fw pi-th-large"
                        (onClick)="switchTab('idea')"
                ></p-button>
            </div>
            <div class="d-flex justify-content-center">
                <div style="width:360px; height: 240px">
                    <video poster="assets/videos/tutorial1.png" controls width="360px" height="240px">
                        <source src="assets/videos/tutorial1.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
            <div class="d-flex justify-content-center justify-text lead my-3 px-2">
                <span>
                See how <b>easily Drugst.One</b> is <b>integrated</b> to serve as a result visualization of a simple HTML website in this tutorial video.
                    </span>
            </div>
        </div>
        <div class="col mt-5">
            <div class="d-flex justify-content-center">
                <p-button
                        label="Configure drugst.one"
                        icon="pi pi-fw pi-send"
                        (onClick)="switchTab('playground')"
                ></p-button>
            </div>
            <div class="d-flex justify-content-center">
                <div style="width:360px; height: 240px">
                    <video poster="assets/videos/tutorial2.png" controls width="360px" height="240px">
                        <source src="assets/videos/tutorial2.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
            <div class="d-flex justify-content-center justify-text lead my-3 px-2">
                <span>
                Check out the options and resources that let you <b>interactively configure</b> your drugst.one
                <b>network</b>, <b>features</b> and <b>style</b>.
                </span>
            </div>
        </div>
        <div class="col mt-5">
            <div class="d-flex justify-content-center">
                <a href="/doc#standalone_api">
                    <p-button
                            label="Use Drugst.One standalone"
                            icon="pi pi-fw pi-send"
                    ></p-button>
                </a>
            </div>
            <div class="d-flex justify-content-center">
                <div style="width:360px; height: 240px">
                    <video poster="assets/videos/tutorial3.png" controls width="360px" height="240px">
                        <source src="assets/videos/tutorial3.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
            <div class="d-flex justify-content-center justify-text lead my-3 px-2">
                <span>
                Drugst.One can be used by <b>redirecting to</b> a <b>standalone implementation</b> and freely configured to <b>upgrade any tool</b>.
                </span>
            </div>
        </div>
    </div>
</div>