Skip to content
This repository has been archived by the owner on Mar 19, 2024. It is now read-only.

Waterslide Modus #3

Closed
kazschuri opened this issue Jul 25, 2013 · 0 comments
Closed

Waterslide Modus #3

kazschuri opened this issue Jul 25, 2013 · 0 comments

Comments

@kazschuri
Copy link

Neuer Beitrag aus der Abteilung Requirements Engineering: Schiebregler.

bildschirmfoto vom 2013-07-25 15 26 57

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <script type="text/javascript">
  //<![CDATA[
    function anzeigen(das) {
      if (document.getElementById(das).style.display=='none')
        document.getElementById(das).style.display='block';
      else
        document.getElementById(das).style.display='none';
    }
  //]]>
  </script>
  <title>PBA Idiot Mode Mockup</title>
    <style type="text/css">
    .progress.vertical {
    position: relative;
    width: 20px;
    min-height: 240px;
    float: left;
    margin-right: 20px;
    background: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: none;
}
.table td {
   text-align: center;   
}
    </style>
</head>

<body>

  <div class="container">
    <div class="">
      <h2>Ziehe, um den Platz nass zu machen:</h2>

      <div class="alert alert-info">


<table>

  <tr>
    <td class="span4" style="text-align: center">
    <h2>Platz 1</h2>
    </td>
    <td class="span4" style="text-align: center">
    <h2>Platz 2</h2>
    </td>
    <td class="span4" style="text-align: center">
    <h2>Platz 3</h2>
    </td>
    <td class="span4" style="text-align: center">
    <h2>Platz 4</h2>
    </td>
    <td class="span4" style="text-align: center">
    <h2>Platz 5</h2>
    </td>
    <td class="span4" style="text-align: center">
    <h2>Platz 6</h2>
    </td>
  </tr>
  <tr>
    <td class="span4">
    <table >
        <tr>
                        <td width="30%">
            </td>
            <td width="30%">
                <div class="progress vertical" style="width: 50px;">
                  <div class="bar bar-success" style="height: 0%;width:60%"></div>
                  <div class="bar bar-default" style="height: 20%;width:100%">aus</div>
                  <div class="bar bar-warning" style="height: 80%;width:60%"></div>
                </div>

            </td>
            <td width="30%">
            <br>
            aus
            <br><br>
             1min
            <br><br>
            2min
            <br><br>
            3min
            <br><br>
            4min
            <br><br>
            5min
            </td>

        </tr>
    </table>
    </td>

    <td class="span4">
    <table>
        <tr>
                    <td width="30%">
            </td>
            <td width="30%">
                <div class="progress vertical" style="width: 50px;">
                  <div class="bar bar-success" style="height: 80%;width:60%"></div>
                  <div class="bar bar-default" style="height: 20%;width:100%">4:58</div>
                  <div class="bar bar-warning" style="height: 0%;width:60%"></div>
                </div>

            </td>
            <td width="30%">
            <br>
            aus
            <br><br>
             1min
            <br><br>
            2min
            <br><br>
            3min
            <br><br>
            4min
            <br><br>
            5min
            </td>

        </tr>
    </table>
    </td>

    <td class="span4">
    <table>
        <tr>
            <td width="30%">
            </td>
            <td width="30%">
                <div class="progress vertical" style="width: 50px;">
                  <div class="bar bar-success" style="height: 0%;width:60%"></div>
                  <div class="bar bar-default" style="height: 20%;width:100%">aus</div>
                  <div class="bar bar-warning" style="height: 80%;width:60%"></div>
                </div>

            </td>
            <td width="30%">
            <br>
            aus
            <br><br>
             1min
            <br><br>
            2min
            <br><br>
            3min
            <br><br>
            4min
            <br><br>
            5min
            </td>
        </tr>
    </table>
    </td>

    <td class="span4">
    <table>
        <tr>
                    <td width="30%">
            </td>
            <td width="30%">
                <div class="progress vertical" style="width: 50px;">
                  <div class="bar bar-success" style="height: 50%;width:60%"></div>
                  <div class="bar bar-default" style="height: 20%;width:100%">2:10</div>
                  <div class="bar bar-warning" style="height: 30%;width:60%"></div>
                </div>

            </td>
            <td width="30%">
            <br>
            aus
            <br><br>
             1min
            <br><br>
            2min
            <br><br>
            3min
            <br><br>
            4min
            <br><br>
            5min
            </td>

        </tr>
    </table>
    </td>

    <td class="span4">
    <table>
        <tr>
                    <td width="30%">
            </td>
            <td width="30%">
                <div class="progress vertical" style="width: 50px;">
                  <div class="bar bar-warning" style="height: 60%;width:60%"></div>
                  <div class="bar bar-default" style="height: 20%;width:100%">startet in 2:10</div>
                  <div class="bar bar-warning" style="height: 20%;width:60%"></div>
                </div>

            </td>
            <td width="30%">
            <br>
            aus
            <br><br>
             1min
            <br><br>
            2min
            <br><br>
            3min
            <br><br>
            4min
            <br><br>
            5min
            </td>

        </tr>
    </table>
    </td>

    <td class="span4">
    <table>
        <tr>
                    <td width="30%">
            </td>
            <td width="30%">
                <div class="progress vertical" style="width: 50px;">
                  <div class="bar bar-success" style="height: 0%;width:60%"></div>
                  <div class="bar bar-default" style="height: 20%;width:100%">aus</div>
                  <div class="bar bar-warning" style="height: 80%;width:60%"></div>
                </div>

            </td>
            <td width="30%">
            <br>
            aus
            <br><br>
             1min
            <br><br>
            2min
            <br><br>
            3min
            <br><br>
            4min
            <br><br>
            5min
            </td>

        </tr>
    </table>
    </td>
  </tr>

</table>

      </div>
    </div>

<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
Die blauen "Dinger" sind vertikale Schiebregler. Durch Ziehen nach unten wird das Wässern gestartet.
Während dem Wässern läuft der Regler langsam nach oben. Nach oben Schieben bricht Bewässerung ab.
</div>

<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
Auf dem blauen Button steht die exakte Restzeit. Alle Timer zählen in Echtzeit herunter. 
</div>

<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
Platz 5 wartet, weil bereits zwei andere Sprenger laufen, der Button zeigt die Restwartezeit (wegen Platz 4).
</div>

<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
Zu evaluieren: Minuten-Anzahl auf (statt neben) den Schiebreglern.
</div>

  </div>
</body>
</html>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fknittel @kazschuri