Difference between revisions of "Team:TU Delft/Modeling"

Line 13: Line 13:
 
   margin-top:5px;
 
   margin-top:5px;
 
}
 
}
 +
 +
        .marius_main_container {
 +
            display: flex;
 +
            justify-content: stretch;
 +
            flex-direction: row-reverse;
 +
            overflow: hidden;
 +
 +
            position: absolute;
 +
            height: 500px;
 +
            max-width: 900px;
 +
          margin:0 auto;
 +
              margin-top: 20px;
 +
            margin-bottom: 20px;
 +
        }
 +
 +
.marius_image_wrapper {
 +
    height: 100%;
 +
    max-width: 500px;
 +
}
 +
 +
#image {
 +
    height: 400px;
 +
    width: 100%;
 +
}
 +
 +
.marius_commands_wrapper {
 +
    display: flex;
 +
    flex-direction: column;
 +
    align-items: center;
 +
    height: 100%;
 +
    max-width: 350px;
 +
    padding-right: 10px;
 +
}
 +
 +
.marius_text_wrapper {
 +
    width: 100%;
 +
    height: 190px;
 +
}
 +
 +
.marius_textbox_wrapper {
 +
    display: flex;
 +
    flex-direction: column;
 +
    justify-content: space-between;
 +
    align-items: center;
 +
    width: 100%;
 +
    height: 80px;
 +
}
 +
 +
.slider_values {
 +
    margin-left: 50px;
 +
    margin-bottom: 20px;
 +
    width: 265px;
 +
    color: #464646;
 +
}
 +
 +
.marius_button_wrapper {
 +
    width: 300px;
 +
    height: 150px;
 +
}
 +
 +
.marius_go_button {
 +
    position: relative;
 +
    left: 20px;
 +
    top: 50px;
 +
    border-width: 0;
 +
    border-radius: 5px;
 +
    color: #DDDDDD;
 +
width: 260px;
 +
    height: 73px;
 +
    font-size: 20px;
 +
    background-color: #464646;
 +
    z-index: 2 !important;
 +
}
 +
 +
.marius_go_button:hover {
 +
    /*top: 26px;*/
 +
    color: white;
 +
    cursor: pointer;
 +
    background-color: #464646;
 +
}
 +
 +
*:focus {
 +
    outline: 0;
 +
}
 +
 +
.blue_text {
 +
    color: #0C3C6D;
 +
}
 +
 +
.white_text {
 +
    color: #FFFFFF;
 +
}
 +
 +
input[type=range] {
 +
    -webkit-appearance: none;
 +
    width: 260px;
 +
    margin: 7px 0;
 +
    background: none;
 +
}
 +
 +
input[type=range]:focus {
 +
    outline: none;
 +
}
 +
 +
input[type=range]::-webkit-slider-runnable-track {
 +
    width: 100%;
 +
    height: 11px;
 +
    background: #ddd;
 +
    border-radius: 2px;
 +
    border: 1px solid #cecece;
 +
}
 +
 +
input[type=range]::-moz-range-track {
 +
    width: 100%;
 +
    height: 11px;
 +
    background: #ddd;
 +
    border-radius: 2px;
 +
    border: 1px solid #cecece;
 +
}
 +
 +
input[type=range]::-webkit-slider-thumb {
 +
    -webkit-appearance: none;
 +
    border: none;
 +
    border-radius: 2px;
 +
    height: 26px;
 +
    width: 14px;
 +
    background: #464646;
 +
    margin-top: -8.6px;
 +
    position: relative;
 +
}
 +
 +
input[type=range]::-webkit-slider-thumb:hover {
 +
    background: #2045A4;
 +
}
 +
 +
input[type=range]::-webkit-slider-thumb:active {
 +
    background: #2045A4;
 +
    width: 18px;
 +
    /*margin-top: -10.6px;*/
 +
}
 +
 +
input[type=range]::-moz-range-thumb {
 +
    -webkit-appearance: none;
 +
    border: none;
 +
    border-radius: 2px;
 +
    height: 30px;
 +
    width: 20px;
 +
    background: #464646;
 +
    margin-top: -12.6px;
 +
    position: relative;
 +
}
 +
 +
 +
input[type=range]:focus::-webkit-slider-thumb:after {
 +
    position: absolute;
 +
    font-size: 13px;
 +
    top: -5px;
 +
    left: 50%;
 +
    -webkit-transform: translateX(-50%);
 +
    transform: translateX(-50%);
 +
    background: transparent;
 +
    color: #fff;
 +
    padding: 5px 10px;
 +
    border: none;
 +
}
 +
 +
input[type=range]:focus::-moz-range-thumb:after {
 +
    position: absolute;
 +
    top: -35px;
 +
    left: 50%;
 +
    transform: translateX(-50%);
 +
    background: #eee;
 +
    border-radius: 5px;
 +
    color: #555;
 +
    padding: 5px 10px;
 +
    border: 2px solid #555;
 +
}
 +
  
 
</style>
 
</style>
Line 32: Line 210:
 
     </div>
 
     </div>
 
     <div class="container">
 
     <div class="container">
 +
<div class="marius_main_container">
 +
    <div class="marius_image_wrapper">
 +
        <img id="image" src="" alt="First picture"/>
 +
    </div>
 +
    <form class="marius_commands_wrapper">
 +
        <div class="marius_text_wrapper">
 +
          <h2>Title</h2>
 +
<p class="lead">With the controls you can see how "a" and "b" values affect the trajectory of the outcome. Go ahead and try it yourself</p>
 +
        </div>
 +
 +
        <div class="marius_textbox_wrapper">
 +
            <input name="slider1" id="slider1" type="range" min="1" max="5"/>
 +
            <output for="slider1" onforminput="value = slider1.valueAsNumber;"></output>
 +
            <span id="value1" class="slider_values">
 +
                1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5
 +
            </span>
 +
            <input name="slider2" id="slider2" type="range" min="1" max="5"/>
 +
            <output for="slider2" onforminput="value = slider2.valueAsNumber;"></output>
 +
            <span id="value2" class="slider_values">
 +
                1 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5
 +
            </span>
 +
        </div>
 +
        <div class="marius_button_wrapper">
 +
            <button type="button" class="marius_go_button">
 +
                CHANGE
 +
            </button>
 +
        </div>
 +
    </form>
 +
</div>
 +
 
       <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt ipsum, vitae tempor nibh porta ac. Fusce consectetur neque et dolor vestibulum iaculis. Nunc pretium turpis at arcu tempus vehicula.  
 
       <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt ipsum, vitae tempor nibh porta ac. Fusce consectetur neque et dolor vestibulum iaculis. Nunc pretium turpis at arcu tempus vehicula.  
 
       </p>
 
       </p>
Line 480: Line 688:
 
   }
 
   }
 
});
 
});
 +
</script>
 +
 +
<script>
 +
/**
 +
* Created by mariusvlas on 09/08/15.
 +
*/
 +
function getSlider1Value() {
 +
    return (document.getElementById("slider1").value);
 +
}
 +
function getSlider2Value() {
 +
    return (document.getElementById("slider2").value);
 +
}
 +
 +
$(document).ready(function () {
 +
        $("#slider1")
 +
            .mousedown(function () {
 +
                $("#value1").css("color", "#2555e1");
 +
            })
 +
            .mouseup(function () {
 +
                $("#value1").css("color", "#464646");
 +
            });
 +
        $("#slider2")
 +
            .mousedown(function () {
 +
                $("#value2").css("color", "#2555e1");
 +
            })
 +
            .mouseup(function () {
 +
                $("#value2").css("color", "#464646");
 +
            });
 +
        $('input[type="range"]')
 +
            .on('mouseup', function () {
 +
                this.blur();
 +
            })
 +
            .on('mousedown input', function () {
 +
                styl.inject('input[type=range]:focus::-webkit-slider-thumb:after,' +
 +
                    ' input[type=range]:focus::-ms-thumb:after,' +
 +
                    ' input[type=range]:focus::-moz-range-thumb:after',
 +
                    {content: "'" + this.value + "'"}).apply();
 +
            });
 +
 +
        $(".marius_go_button").click(function () {
 +
            val1 = getSlider1Value();
 +
            val2 = getSlider2Value();
 +
            if (val1 == 1 && val2 == 1)
 +
                $('#image').attr('src', 'https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png');
 +
            else {
 +
                if (val1 == 1 && val2 == 2)
 +
                    $('#image').attr('src', 'http://i.forbesimg.com/media/lists/companies/google_416x416.jpg');
 +
                else {
 +
                    if (val1 == 1 && val2 == 3)
 +
                        $('#image').attr('src', 'https://www.google.com/logos/2013/doodle_4_google_2013_-_greece_winner-1735005-hp.jpg');
 +
                    else {
 +
                        /* tot asa pana te plictisesti */
 +
                    }
 +
                }
 +
            }
 +
        })
 +
    }
 +
);
 +
 
</script>
 
</script>
 
</html>
 
</html>
 
{{:Team:TU_Delft/Footer}}
 
{{:Team:TU_Delft/Footer}}

Revision as of 18:09, 15 September 2015

Modeling

..

Overview

Subtitle or summary goes here. Should be short - two or three sentences.

First picture

Title

With the controls you can see how "a" and "b" values affect the trajectory of the outcome. Go ahead and try it yourself

1            .            .            .            5 1            .            .            .            5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt ipsum, vitae tempor nibh porta ac. Fusce consectetur neque et dolor vestibulum iaculis. Nunc pretium turpis at arcu tempus vehicula.

Generic placeholder image Generic placeholder image Generic placeholder image Generic placeholder image

Gene Modeling

Subtitle or summary goes here. Should be short - two or three sentences.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt ipsum, vitae tempor nibh porta ac. Fusce consectetur neque et dolor vestibulum iaculis. Nunc pretium turpis at arcu tempus vehicula. Nam nec accumsan metus, ac tempus tortor. Aenean euismod elit vitae ex ultrices pulvinar. Etiam rhoncus non urna vel volutpat. Donec ut erat ornare, faucibus quam a, posuere urna. Phasellus at nisl sed erat ultricies commodo vel ut mauris. Morbi ac mauris dui. Cras sit amet ornare nisl. Suspendisse lectus mi, ullamcorper et dolor a, vulputate condimentum velit. Morbi dolor eros, cursus euismod magna sit amet, tempus volutpat quam. Morbi at est sed erat efficitur lobortis nec non elit. Integer urna nisi, dapibus nec magna non, pharetra sodales felis. Fusce dignissim elit sit amet purus aliquet, quis luctus tortor commodo. Donec viverra enim vel ultrices iaculis.

Back to Top
Text2 Back to Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices tincidunt ipsum, vitae tempor nibh porta ac. Fusce consectetur neque et dolor vestibulum iaculis. Nunc pretium turpis at arcu tempus vehicula. Nam nec accumsan metus, ac tempus tortor. Aenean euismod elit vitae ex ultrices pulvinar. Etiam rhoncus non urna vel volutpat. Donec ut erat ornare, faucibus quam a, posuere urna. Phasellus at nisl sed erat ultricies commodo vel ut mauris. Morbi ac mauris dui. Cras sit amet ornare nisl. Suspendisse lectus mi, ullamcorper et dolor a, vulputate condimentum velit. Morbi dolor eros, cursus euismod magna sit amet, tempus volutpat quam. Morbi at est sed erat efficitur lobortis nec non elit. Integer urna nisi, dapibus nec magna non, pharetra sodales felis. Fusce dignissim elit sit amet purus aliquet, quis luctus tortor commodo. Donec viverra enim vel ultrices iaculis.

Back to Top
Text4 Back to Top

Curli Formation

Subtitle or summary goes here. Should be short - two or three sentences.

Biofilm Formation

Subtitle or summary goes here. Should be short - two or three sentences.

Policy and Practice

Subtitle or summary goes here. Should be short - two or three sentences.

Contact Details

Address:

Faculty of Applied Sciences

Room F109

TU Delft

Lorentzweg 1

2628 CJ Delft

The Netherlands

Phone:

+31 15 278 18 62

Email:

tudelft.igem@gmail.com