Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- #wrapper {
- width:420px;
- height:650px;
- background-color: white;
- padding: 10px;
- border: 1px solid blue;
- margin: 5px;
- position:relative;
- }
- #bringTitel{
- position: absolute;
- left:80px;
- top:5px;
- color: #0000FF;
- font-size: 25px;
- font-weight: bold;
- line-height: 1.5em;
- }
- #wrtabelle1 {
- position:absolute;
- top:85px;
- left:80px;
- border-collapse:collapse;
- border:1px solid #7f7f7f;
- }
- td {
- border:1px solid #0090E0;
- width:50px;
- height:50px;
- text-align:center;
- font-size: 24px;
- }
- #myLevelProgress {
- position:absolute;
- left:10px;
- top:600px;
- width: 395px;
- height: 30px;
- background-color: #ddd;
- border:1px solid #0090E0;
- }
- #myLevelBar { width: 0%; height: 100%;background-color:#0090E0;}
- #levelLabel {text-align: center; line-height: 30px; color: white;}
- #myTimeProgress {
- position:absolute;
- left:10px;
- top:550px;
- width: 395px;
- height: 30px;
- background-color: #ddd;
- border:1px solid #0090E0;
- }
- #myTimeBar {width: 0%;height: 100%; background-color: #FF0000;}
- #myTimeLabel { text-align: center;line-height: 30px;color: white;}
- #TimeLabel {
- text-align: center; /* */
- line-height: 30px; /* */
- color: blue;
- padding-left:220px;
- }
- #LevelLabel {
- text-align: center;
- line-height: 30px;
- color: blue;
- padding-left:220px;
- }
- p{
- position:absolute;
- color: red;
- font-size: 20px;
- font-weight: bold;
- line-height: 1.5em;
- left:10px;
- top:430px;
- }
- #btnnr1 {
- position:absolute;
- top: 480px;
- left:80px;
- background-color: #00AFFF; /* Green */
- border: 1 solid #0020FF;
- color: white;
- padding: 2px 2px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- }
- #btnnr2 {
- position:absolute;
- top: 480px;
- left:220px;
- background-color: #00AFFF; /* Green */
- border: 1 solid #0020FF;
- color: white;
- padding: 2px 2px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- }
- .btn-group .button {
- float:left;
- margin-top:380px;
- background-color: #00AFFF;
- border: none;
- color: white;
- padding: 2px 2px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- cursor: pointer;
- width:40px;
- height:40px;
- }
- .btn-group .button:hover {
- background-color: red;
- }
- .button{
- border: 1 solid black;
- }
- </style>
- </head>
- <body onLoad="window.firstStart(7,7)">
- <div id="wrapper">
- <p id="bringTitel">Arbeitsspeicher Übung 3</p>
- <table id="wrtabelle1"> </table>
- <input type="button" class = "button1" id="btnnr1" value="Start mit Level 1" onclick="secondStart(anzahlZeilen,anzahlSpalten)" />
- <input type="button" class = "button1" id="btnnr2" value="Nächstes Level" onclick="nextLevel()" />
- <div id="myLevelProgress">
- <div id="myLevelBar">
- <div id="LevelLabel">Level</div>
- </div>
- </div>
- <div id="myTimeProgress">
- <div id="myTimeBar">
- <div id="TimeLabel">Zeit</div>
- </div>
- </div>
- <br>
- <p id="suchZahl"></p>
- <div class ="btn-group">
- <button class="button" id="btn0" onclick="giveNumber(0)">0</button>
- <button class="button" id="btn1" onclick="giveNumber(1)">1</button>
- <button class="button" id="btn2" onclick="giveNumber(2)">2</button>
- <button class="button" id="btn3" onclick="giveNumber(3)">3</button>
- <button class="button" id="btn4" onclick="giveNumber(4)">4</button>
- <button class="button" id="btn5" onclick="giveNumber(5)">5</button>
- <button class="button" id="btn6" onclick="giveNumber(6)">6</button>
- <button class="button" id="btn7" onclick="giveNumber(7)">7</button>
- <button class="button" id="btn8" onclick="giveNumber(8)">8</button>
- <button class="button" id="btn9" onclick="giveNumber(9)">9</button>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement