Difference between revisions of "Team:Heidelberg/Toolbox"

(Created page with "{{Heidelberg/header}} {{Heidelberg/navbar}} {{Heidelberg/footer}}")
 
Line 1: Line 1:
 
{{Heidelberg/header}}
 
{{Heidelberg/header}}
 
{{Heidelberg/navbar}}
 
{{Heidelberg/navbar}}
 +
<html>
 +
<style>
 +
.buttonBorder{
 +
                                                        border: 5px solid #9d1c20;
 +
                                                        background-color: #9d1c20;
 +
                                                        max-width: auto;
 +
                                                        max-height: auto;
 +
                                                        border-radius: 20px;
 +
                                                        display: inline-block;
 +
                                                        margin:40px 0px 40px 0px;
 +
                                                        box-shadow: 2px 3px 10px rgb(83, 83, 83)
 +
                                                    }
 +
                                                    .getPlasmidButton{
 +
                                                        display:inline-block;
 +
                                                        text-align: center;
 +
                                                        border-radius:15px;
 +
                                                        padding: 25px 20px 15px 20px;
 +
                                                        background-color: #9d1c20;
 +
                                                        opacity: 1;
 +
                                                        color: #ffffff !important;
 +
                                                        font-weight: 400 !important;
 +
                                                        margin: 0px !important;
 +
                                                        -webkit-transition: background-color 0.25s, color 0.25s; /* Safari */
 +
                                                        transition: background-color 0.25s, color 0.25s;
 +
                                                    }
 +
                                                    .getPlasmidButton:hover{
 +
                                                        background-color: #ffffff;
 +
                                                        color: #9d1c20 !important;
 +
                                                        cursor:pointer;
 +
                                                    }
  
 +
                                                    .plasmid_svg{
 +
                                                        width: 100%;
 +
                                                    }
 +
.input_form {
 +
                                                        background-color: #939393;
 +
                                                        border: none;
 +
                                                        color: white;
 +
                                                        padding: 5px 32px;
 +
                                                        margin-top: 25px;
 +
                                                        text-align: center;
 +
                                                        text-decoration: none;
 +
                                                        display: inline-block;
 +
                                                        font-size: 16px;
 +
                                                    }
 +
 +
                                                    input[type="text"] {
 +
                                                        display: block;
 +
                                                        margin: 0;
 +
                                                        width: 100%;
 +
                                                        height: 30px;
 +
                                                        font-size: 18px;
 +
                                                        -webkit-appearance: none;
 +
                                                        -moz-appearance: none;
 +
                                                        appearance: none;
 +
                                                        -webkit-box-shadow: none;
 +
                                                        -moz-box-shadow: none;
 +
                                                        box-shadow: none;
 +
                                                        -webkit-border-radius: none;
 +
                                                        -moz-border-radius: none;
 +
                                                        -ms-border-radius: none;
 +
                                                        -o-border-radius: none;
 +
                                                        border-radius: none;
 +
                                                    }
 +
                                               
 +
                                                    .input-form {
 +
                                                        background-color: white;
 +
                                                        border-radius: 10px;
 +
                                                        padding: 20px 0px 50px 0px;
 +
                                                        height: auto;
 +
                                                    }
 +
 +
                                                    #toolbox_form div div div {
 +
                                                        font-family: 'Josefin Sans', sans-serif;
 +
                                                    }
 +
 +
                                                    #toolbox_form>div>div>div>h3 {
 +
                                                        text-align: center;
 +
                                                        line-height: 25px;
 +
                                                        font-size: 35px;
 +
                                                        font-weight: 300 !important;
 +
                                                        padding: 20px 0px 20px 0px;
 +
                                                    }
 +
 +
                                                    .input_textarea {
 +
                                                        width: 100%;
 +
                                                        height: 120px;
 +
                                                        resize: none;
 +
                                                        float: left;
 +
                                                        visibility: visible;
 +
                                                        margin-bottom: 20px;
 +
                                                        line-height: 16px;
 +
                                                        font-size: 16px;
 +
                                                        font-family: monospace;
 +
                                                    }
 +
</style>
 +
<div style="padding-top: 100px; background-color: #222;">
 +
                                    <form name="Toolbox_form" action="" method="get" id="toolbox_form">
 +
                                        <div class="t-container">
 +
                                            <div class="t-col t-col_6" style="margin: 0px !important">
 +
                                                <img src="Images/Phage_Toolbox.svg">
 +
                                            </div>
 +
                                            <div class="t-col t-col_6" style="margin: 0px !important">
 +
                                                <h2 style="text-align: center; color: white !important;">Welcome to our
 +
                                                    <br>
 +
                                                    <span style="color: #ffd200; font-weight: 400 !important">Toolbox</span> Guide!</h2>
 +
                                                <p style="color: white !important; font-family: 'Josefin Sans' !important; font-size: 25px !important">Text on our Toolbox</p>
 +
                                            </div>
 +
                                        </div>
 +
 +
                                        <div class="t-container input-form" id="toolbox_input_form">
 +
                                            <h2 style="text-align: center; color:#6698BE !important; font-weight: 400 !important ">Plasmid</h2>
 +
                                            <div class="t-col t-col_4">
 +
                                                <h3>Resistance & Ori </h3>
 +
                                                <input name="input_origin" value="origin" type="hidden">
 +
                                                <select required id="input_origin_select" style="width: 100%;">
 +
                                                    <option value="" disabled selected>Select</option>
 +
                                                </select>
 +
                                            </div>
 +
                                            <div class="t-col t-col_4">
 +
                                                <h3>RBS + geneIII</h3>
 +
                                                <input name="input_rbs" value="rbs" type="hidden">
 +
                                                <select required id="input_rbs_select" style="width: 100%;">
 +
                                                    <option value="" disabled selected>Select</option>
 +
 +
                                                </select>
 +
                                            </div>
 +
                                            <div class="t-col t-col_4">
 +
                                                <h3>RBS + Reporter</h3>
 +
                                                <input name="input_marker" value="marker" type="hidden">
 +
                                                <select required id="input_marker_select" style="width: 100%;">
 +
                                                    <option value="" disabled selected>Select</option>
 +
 +
                                                </select>
 +
                                            </div>
 +
                                        </div>
 +
 +
 +
                                        <div class="t-container input-form" style="position: relative;top: 20px;">
 +
                                            <h2 style="text-align: center; color: #ffd200!important;font-weight: 400 !important ">Activator & Promoter</h2>
 +
                                            <span style="text-align: center;">Choose on of our sequences or upload your own</span>
 +
                                            <div class="t-row">
 +
                                                <div class="t-col t-col_12">
 +
                                                    <input name="promotor" id="input_promotor" value="Promoter" type="hidden">
 +
                                                    <select required id="input_promotor_select" name="input_promotor_select" style="margin-top:20px;margin-bottom:20px;width: 100%;visibility: visible;">
 +
                                                        <option value="" disabled selected>Select</option>
 +
                                                    </select>
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="t-row">
 +
                                                <div class="t-col t-col_12">
 +
                                                    <div id="input_promotor_upload" style="visibility:visible;display:none">
 +
                                                        <input type="file" id="input_promotor_file" style="visibility:visible;display:inline-block; margin-bottom:20px;" id="input_promotor_upload" name="files[]"
 +
                                                            multiple/>
 +
                                                        </input>
 +
                                                        <br/>
 +
                                                        <input name="" id="input_overlaps_promotor_upload" value="true" type="checkbox" border="0">
 +
                                                        <span>Overlaps are included</span>
 +
                                                    </div>
 +
 +
                                                </div>
 +
                                                <div class="t-col t-col_12">
 +
                                                    <div id="input_promotor_paste" style="visibility:visible;display:none">
 +
                                                        <textarea name="" id="input_promotor_paste_text" class="input_textarea"></textarea>
 +
                                                        <br/>
 +
                                                        <br/>
 +
                                                        <input name="" id="input_overlaps_promotor_paste" value="true" type="checkbox" border="0" style="margin-left: 5px;">
 +
                                                        <span> Overlaps are included</span>
 +
                                                    </div>
 +
                                                </div>
 +
                                            </div>
 +
 +
                                        </div>
 +
 +
                                        <div class="t-container input-form" style="position: relative;top: 50px;">
 +
                                            <h2 style="text-align: center; color:#f8991d !important; font-weight: 400 !important ">Additional sequence</h2>
 +
                                            <span style="text-align: center;">Choose on of our sequences or upload your own</span>
 +
                                            <div class="t-row">
 +
                                                <div class="t-col t-col_12">
 +
                                                    <input name="" value="Additional_options" type="hidden">
 +
                                                    <select required id="input_additional_select" name="input_additional_select" style="visibility: visible;width: 100%;margin-top:20px;margin-bottom:20px;">
 +
                                                        <option value="" disabled selected>Select</option>
 +
                                                    </select>
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="t-row">
 +
                                                <div class="t-col t-col_12">
 +
                                                    <div id="input_additional_upload" style="visibility:visible;display:none;padding-bottom:20px;">
 +
                                                        <input type="file" style="visibility:visible;display:inline-block; margin-bottom:20px;" id="input_additional_file" name="files[]"
 +
                                                            multiple/>
 +
                                                        <br/>
 +
                                                        <input name="" id="input_overlaps_additional_upload" value="true" type="checkbox" border="0">
 +
                                                        <span>Overlaps are included</span>
 +
 +
                                                    </div>
 +
                                                </div>
 +
                                                <div class="t-col t-col_12">
 +
                                                    <div id="input_additional_paste" style="visibility:visible;display:none;padding-bottom:20px;">
 +
                                                        <textarea name="" id="input_additional_paste_text" class="input_textarea"></textarea>
 +
                                                        <br/>
 +
                                                        <br/>
 +
                                                        <input name="" id="input_overlaps_additional_paste" value="true" type="checkbox" border="0" style="margin-left: 5px;">
 +
                                                        <span> Overlaps are included</span>
 +
                                                    </div>
 +
                                                </div>
 +
                                            </div>
 +
 +
                                        </div>
 +
 +
                                    </form>
 +
 +
                                </div>
 +
 +
                                <div style="padding-top: 80px;padding-bottom: 80px;  background-color: #222;">
 +
                                    <div class="t-container" style="position: relative;background-color: white; border-radius: 10px;">
 +
                                        <div class="t-row">
 +
                                            <div class="t-col t-col_12">
 +
                                                <div class="buttonBorder">
 +
                                                    <h1 class="getPlasmidButton" onclick="submit_p1()">Create Plasmid</h1>
 +
                                                </div>
 +
                                            </div>
 +
                                        </div>
 +
                                        <div class="t-row" style="display:none" id="results_area" style="min-height:600px !important">
 +
                                            <div class="t-col t-col_6">
 +
                                                <h4>Instructions</h4>
 +
                                                <div id="instructions" style="text-align:justify">
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="t-col t-col_6">
 +
                                                <div class="t-col t-col_6" id="plasmid_container">
 +
                                                </div>
 +
                                            </div> 
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
</html>
  
  
 
{{Heidelberg/footer}}
 
{{Heidelberg/footer}}

Revision as of 17:24, 26 October 2017

Welcome to our
Toolbox Guide!

Text on our Toolbox

Plasmid

Resistance & Ori

RBS + geneIII

RBS + Reporter

Activator & Promoter

Choose on of our sequences or upload your own

Additional sequence

Choose on of our sequences or upload your own

Create Plasmid