Skip to content

Instantly share code, notes, and snippets.

@machinefriendly

machinefriendly/index.html

Forked from anonymous/index.html
Created December 6, 2016 13:58
Show Gist options
  • Save machinefriendly/bf74a67277622e70fc40ffff252843dc to your computer and use it in GitHub Desktop.
Save machinefriendly/bf74a67277622e70fc40ffff252843dc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. machinefriendly revised this gist Dec 6, 2016. No changes.
  2. @invalid-email-address Anonymous created this gist Dec 6, 2016.
    198 changes: 198 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,198 @@
    <!DOCTYPE html>
    <html>

    <head>

    <link rel="stylesheet" id="bs-css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" >
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-progressbar/0.9.0/bootstrap-progressbar.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.js">
    </script>
    <script>
    $(function() {
    $('.progress .progress-bar').progressbar();
    $('input').on('click', function(){
    var valeur = 0;
    $('input:checked').each(function(){
    if ( $(this).attr('value') > valeur )
    {
    valeur = $(this).attr('value');
    }
    });
    $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);
    });
    })

    </script>
    <style id="jsbin-css">
    .tasks{
    background-color: #F6F8F8;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    }
    .tasks span{
    font-weight: bold;
    }
    .tasks input{
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    }
    .tasks a{
    color: #000;
    text-decoration: none;
    border:none;
    }
    .tasks a:hover{
    border-bottom: dashed 1px #0088cc;
    }
    .tasks label{
    display: block;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <div class="progress progress-striped active">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

    </div>
    </div>
    <div class="row tasks">
    <div class="col-md-6">
    <p><span>Identify your campaign audience.</span>Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.</p>
    </div>
    <div class="col-md-2">
    <label>2014-01-29</label>
    </div>
    <div class="col-md-2">
    <input name="progress" class="progress" type="checkbox" value="10">
    </div>
    <div class="col-md-2">
    <input name="done" class="done" type="checkbox" value="20">
    </div>
    </div><!-- tasks -->

    <div class="row tasks">
    <div class="col-md-6">
    <p><span>Set your goals + benchmarks</span>Having SMART goals can help you be
    sure that you’ll have tangible results to share with the world (or your
    boss) at the end of your campaign.</p>
    </div>
    <div class="col-md-2">
    <label>2014-01-25</label>
    </div>
    <div class="col-md-2">
    <input name="progress" class="progress" type="checkbox" value="30">
    </div>
    <div class="col-md-2">
    <input name="done" class="done" type="checkbox" value="40">
    </div>
    </div><!-- tasks -->




    <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
    <html>

    <head>

    <link rel="stylesheet" id="bs-css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" >
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"><\/script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-progressbar/0.9.0/bootstrap-progressbar.js">
    <\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.js">
    <\/script>
    <script>
    $(function() {
    $('.progress .progress-bar').progressbar();
    $('input').on('click', function(){
    var valeur = 0;
    $('input:checked').each(function(){
    if ( $(this).attr('value') > valeur )
    {
    valeur = $(this).attr('value');
    }
    });
    $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);
    });
    })

    <\/script>
    </head>
    <body>
    <div class="progress progress-striped active">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

    </div>
    </div>
    <div class="row tasks">
    <div class="col-md-6">
    <p><span>Identify your campaign audience.</span>Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.</p>
    </div>
    <div class="col-md-2">
    <label>2014-01-29</label>
    </div>
    <div class="col-md-2">
    <input name="progress" class="progress" type="checkbox" value="10">
    </div>
    <div class="col-md-2">
    <input name="done" class="done" type="checkbox" value="20">
    </div>
    </div><\!-- tasks -->

    <div class="row tasks">
    <div class="col-md-6">
    <p><span>Set your goals + benchmarks</span>Having SMART goals can help you be
    sure that you’ll have tangible results to share with the world (or your
    boss) at the end of your campaign.</p>
    </div>
    <div class="col-md-2">
    <label>2014-01-25</label>
    </div>
    <div class="col-md-2">
    <input name="progress" class="progress" type="checkbox" value="30">
    </div>
    <div class="col-md-2">
    <input name="done" class="done" type="checkbox" value="40">
    </div>
    </div><\!-- tasks -->



    </body>
    </html></script>

    <script id="jsbin-source-css" type="text/css">.tasks{
    background-color: #F6F8F8;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    }
    .tasks span{
    font-weight: bold;
    }
    .tasks input{
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    }
    .tasks a{
    color: #000;
    text-decoration: none;
    border:none;
    }
    .tasks a:hover{
    border-bottom: dashed 1px #0088cc;
    }
    .tasks label{
    display: block;
    text-align: center;
    }</script>
    </body>
    </html>
    26 changes: 26 additions & 0 deletions jsbin.gujurij.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    .tasks{
    background-color: #F6F8F8;
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
    }
    .tasks span{
    font-weight: bold;
    }
    .tasks input{
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    }
    .tasks a{
    color: #000;
    text-decoration: none;
    border:none;
    }
    .tasks a:hover{
    border-bottom: dashed 1px #0088cc;
    }
    .tasks label{
    display: block;
    text-align: center;
    }