parser/healthcareio/server/templates/store.html

<link href="{{context}}/static/css/fa/css/all.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
<link href="{{context}}/static/css/borders.css" type="text/css" rel="stylesheet">
<style>
    .form , input{font-family:sans-serif; font-size:18px}
    .form .small {font-size:14px; line-height:2}
    .mongo, .couchdb{
    
        display:grid;
        gap:2px;
    }
    .grid-full {display:grid; grid-template-columns: 100%;}
    .grid-split-half {display:grid; grid-template-columns: 50% 50%; gap:2px;}
    .store .title-bar {display:grid; align-items:center; grid-template-columns: auto 32px; padding:8px;}
    .file {display:grid; align-items:center; grid-template-columns: 40% auto; gap:2px; font-family:sans-serif; padding:8px}
    .file input {display:none}
    .file label {padding:8px;}
    
    
</style>
<div class="store">
    
    <div class="title-bar">
        <div class="caption">Export Module <span class="bold id"></span></div>
        <div class="active" align="center" onclick="jx.modal.close()">
            <i class="fas fa-times"></i>
        </div>
    </div>
    <p></p>

    <div class="cloud form border-round">
        <div class="small border-round">
            Please provide select access-key file or service account key file to perform ETL            
            to <span class="bold id"></span>. <br>The files will be re-created in JSON format
        </div>
        <div class="file">
            <label class="active-button border-round">
                <span style="font-family:sans-serif">
                    <i class="icon fas fa-file-upload" style="font-size:24px"></i>
                </span>               
                <div>Select key file</div> 
                <input type="file" id="file" aria-label="File browser example" onchange="publish.set.file()">

            </label>
            <div class="name small black bold" style="padding-left:24px"></div>
        </div>
    </div>
   <div class="database form border-round">
       <div class="small border-round">
        Tables / collections will be automatically inferred in the <span class="bold id"></span>
       </div>
        <div class="mongo">

            <div class="grid-split-half">
                <input type="text" class="host" placeholder="host:port"/>
                <input type="text" class="host" placeholder="database"/>
            </div>
           
            <div class="grid-split-half">
                <input type="text" placeholder="user"/>
            
                <input type="text" placeholder="password"/>
            </div>

        </div>
        <p></p>
        <div>
            <br>
            <div class="active-button border-round" style="margin-left:30%; margin-right:30%">
                <div class="icon">
                    <i class="fas fa-check"></i>
                </div>
                <div class="bold" align="center">Export Now</div>
            </div>
        </div>
    
   </div>
</div>