data-transport/www/html/index.html

<style>
  .small {font-size:13px; font-weight:lighter;}
  
    .title-x {display:grid; grid-template-columns: 50% 50%; gap:8px;; 
    
   }

    .dataframe {
        border-collapse: collapse;
        margin: 25px 0;
        font-size: 0.9em;
        font-family: sans-serif;
        width:100%;
        border:1px solid #CAD5E0;
        
        /* min-width: 400px; */
        /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); */
    }
    .dataframe thead tr {
        background-color: #4682B4;
        color: #ffffff;
        text-align: left;
    }
    .dataframe th,
    .dataframe td {
        padding: 12px 15px;
    }
    .dataframe tbody tr {
    border-bottom: 1px solid #dddddd;
}

.dataframe tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

/* .dataframe tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
} */
.dataframe tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

.transport .facts {
        font-family:sans-serif; font-weight:lighter; line-height: 1.5; 
        font-size:16px;
        height: auto;
    }
    .transport .facts .details {display:none}
    .transport .facts #features ul,.introduction ul { height:125px}
    .transport .facts #install {
        grid-row:1; grid-column: 2;
        
        /* border-left:1px solid #CAD5E0; */
        padding-left:10px;
         }
    .transport h3 {
        font-size:24px;
        margin:0px;
        font-family: sans-serif;
        border-bottom:1px solid #CAD5E0;
    }         
    /* .transport .facts {
        display:grid;
        grid-template-columns: repeat(2,1fr); gap:8px; font-family: sans-serif; font-weight: lighter;
        ;
    }     */
    .transport .paragraph { min-height:270px; margin:8px;}
    /* .transport #facts-right div:first-child{min-height: 270px;} */
    /* .transport #facts-left div:first-child{min-height: 270px;} */
    .shadow {
        box-shadow: 10px 5px 5px #d3d3d3;
    }
    .figure {padding:1%; margin:8px;}
    .poster {
        background-image: url("www/html/_assets/images/banner.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        align-items: center;
        align-content: center;
        display: block;
        padding:0px;
    }   
    .transport ul {   list-style-type: none;}
    .transport ul .line-item {
        margin:4px; padding:4px; 
        
    }
    .line-item .fa-check {color:green;}
    .product i {font-size:22px;}
    .product table {width:100%; }
    .product table th , .product table td {text-transform: capitalize; font-weight:bold; text-align: center;}
    .product table tr td {border:1px solid #CAD5E0;}
    .product table td:first-child{text-align: left;}
    .product table thead th{background-color: #4682B4; font-size:18;}
    .product table thead th:first-child{background-color: rgba(242,242,242,1);}

    .features {display:grid; grid-template-columns: repeat(2,1fr);
    gap:4px;}

</style>
<script>
var InitProduct = function (){
        var http = HttpClient.instance()
        var uri = '{{system.context}}/api/info/product'
        http.get(uri,function(x){
            $('.product').html(x.responseText)
        })
    }    
if (!qcms){
    var qcms = {}
}
qcms.source_code = function (){
         
}
    $(document).ready(()=>{
        InitProduct()
    })
</script>
<div class="transport">
    <p>

            <div class="title-x " align="center">
                <div>
                    <div class="large-text bold poster" style="height:58%; align-self:center">
                        <div style="align-self: center;">
                            <div>Read, Write & Stream Data</div>
                            <div>Anywhere</div>
                            <div class="small">
                                version 
                                <span id="data-transport-version" ></span>
                            </div>
                        </div>
                  
                    
                    </div>
                    <div class="features">
                        <div align="left" class="border-round border" style="background-color: #f3f3f3;">
                            <div align="center" class="bold">Open-Source</div>
                            <p>
                                <div align="left" class="small">Built with python, easy install and available under MIT license on github</div>
                            </p>
                        </div>
                         <div class="border-round border" style="background-color: #f3f3f3;">
                            <div class="bold">Multiple Databases</div>
                            <p>
                                <div align="left" class="small">Seamless & consistent access to SQL, NoSQL, Cloud & Warehouse databases</div>
                            </p>
                        </div>
                         <div class="border-round border" style="background-color: #f3f3f3;">
                            <div class="bold">Secure Collaboration</div>
                            <p>
                                <div class="small" align="left">
                                    Uses a registry to prevent sensitive data connectivity to be in a notebook (Zeppelin, Jypterlab ...)
                                </div>
                            </p>
                        </div>
                        <div class="border-round border" style="background-color: #f3f3f3;">
                            <div class="bold">Pipelines</div>
                            <p>
                                <div align="left" class="small">
                                Apply user-defined functions across database technologies for consistent results
                            </div>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="" >
                    <div class="product" ></div>
                    <div style="display:grid; grid-template-columns:40% 30% 30%; gap:1px; align-content: center;" align="center">
                        <div></div>
                        <div></div>
                        <div class="">
                            <div class="">
                               <div class="border-round border">
                                    <div class="small bold"> <i class="fa-solid fa-envelope"></i>
                                        info@the-phi.com</div>
                                        <div class="small bold">Contact US   </div>
                               </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>            
       
     


    </p>
   

</div>