Witam na mojej stronie - powstała ona z zamiłowania do programowania webowego i pasji poznawania oraz tworzenia nowych rzeczy...

ZSL-TEAM
Tutaj umieszczam projekty wykonane wspólnie z moimi uczniami na lekcjach "Programowanie aplikacji internetowych"



Projekt 1 - TABLET



>>Zobacz stronę<<

Kod HTML:

<body onload="odliczanie();">

<div id="container">

<div id="border-top"></div>
<div id="border-left"></div>
<div id="screen">
<div id="scontent">
<div id="tile1" onclick="numer1()"><i class="icon-youtube"></i></div>
<div id="tile2"><i class="icon-user"></i></div>
<div id="tile4" onclick="numer3()"><i class="icon-chrome"></i></div>
<div id="tile5"><div id="zegar">12:00:00</div></div>

<div style="clear:both"></div>
<div id="tile1" onclick="numer2()"><img src="gm.png" /></div>
<div id="tile2"><i class="icon-mail"></i></div>
<div id="tile3" onclick="numer4()"><i class="icon-twitter-squared"></i></div>
<div id="tile4"><i class="icon-camera"></i></div>
<div id="tile1" onclick="numer5()"><i class="icon-heart-empty"></i></div>
<div style="clear:both"></div>

</div>
</div>
<div id="border-right"></div>
<div id="border-bottom"></div>

</div>
</body>

Styl naszej strony:

body
{
background-color:rgba(255,255,255,1);
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 20px;
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#border-top
{
margin-top:20px;
width: 1000px;
height:20px;
background-color:black;
border-radius:10px 10px 0 0;
}
#border-left
{
width: 20px;
height:550px;
background-color:black;
float:left;
}

#screen
{
width: 960px;
height:550px;
background-color:white;
background-image:url('t2.jpg');
float:left;
}
#border-right
{
width: 1000px;
width: 20px;
height:550px;
background-color:black;
float:left;
}

#border-bottom
{
width: 1000px;
height:20px;
background-color:black;
border-radius:0 0 10px 10px;
clear:both;

}
#scontent
{
margin:10px 30px;
}
#tile1
{
margin:15px;
width: 150px;
height:130px;
background-color:rgba(255,0,0,0.5);
text-align:center;
padding:20px 0 0 0;
float:left;
transition:all ease-in-out 0.5s;
-webkit-transition:all ease-in-out 0.5s;
cursor:pointer;
}
#tile1:hover
{
-webkit-transform: rotateY(150deg); /* Safari */
transform: rotateY(150deg);
}
#tile2
{
margin:15px;
width: 150px;
height:130px;
background-color:rgba(255,255,0,0.5);
float:left;
transition:all ease-in-out 0.5s;
-webkit-transition:all ease-in-out 0.5s;
cursor:pointer;
text-align:center;
padding:20px 0 0 0;
}
#tile2:hover
{
-webkit-transform: rotateY(150deg); /* Safari */
transform: rotateY(150deg);
}
#tile3
{
margin:15px;
width: 150px;
height:130px;
background-color:rgba(0,255,255,0.5);
float:left;
transition:all ease-in-out 0.5s;
-webkit-transition:all ease-in-out 0.5s;
cursor:pointer;
text-align:center;
padding:20px 0 0 0;
}
#tile3:hover
{
-webkit-transform: rotateY(150deg); /* Safari */
transform: rotateY(150deg);
}
#tile4
{
margin:15px;
width: 150px;
height:130px;
background-color:rgba(0,255,0,0.5);
float:left;
transition:all ease-in-out 0.5s;
-webkit-transition:all ease-in-out 0.5s;
cursor:pointer;
text-align:center;
padding:20px 0 0 0;
}
#tile4:hover
{
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
#tile5
{
margin:15px;
width: 330px;
height:150px;
background-color:rgba(0,0,0,0.3);
float:left;
}
#zegar
{
margin-top:40px;
font-size:50px;
text-align:center;
}

Kod skrypu JavaScript:


function numer1(){
document.getElementById('scontent').innerHTML ="<iframe width='800' height='420'
src='https://www.youtube.com/embed/-a6Pe1ovKHg' frameborder='0' allowfullscreen></iframe><div><i
class='icon-cancel-outline' onclick='location.reload();' style='cursor:pointer'></i></div>";
}

function numer2(){
document.getElementById('scontent').innerHTML ="<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2548. ' width='800' height='400' frameborder='0'
style='border:0' allowfullscreen></iframe><div><i class='icon-cancel-outline' onclick='location.reload();'
style='cursor:pointer'></i></div>"; }

function numer3(){
document.getElementById('scontent').innerHTML ="<iframe width='800' height='420'
src='http://zstio.eu' frameborder='0' allowfullscreen></iframe><div><i
class='icon-cancel-outline' onclick='location.reload();' style='cursor:pointer'></i></div>";
}

function numer4(){
document.getElementById('scontent').innerHTML ="<iframe width='800' height='420'
src='http://twitter.com' frameborder='0' allowfullscreen></iframe><div><i class='icon-cancel-outline'
onclick='location.reload();' style='cursor:pointer'></i></div>";
}

function numer5(){
document.getElementById('scontent').innerHTML ="<iframe width='800' height='420'
src='http://external.kongregate-games.com/gamez/0022/3733/live/embeddable_223733.swf'
frameborder='0' allowfullscreen></iframe><div><i class='icon-cancel-outline'
onclick='location.reload();' style='cursor:pointer'></i></div>";
}

Projekt 2 - SMARTPHONE - formatowanie tabeli level hight



>>Zobacz stronę<<



Kod HTML:


<table>
<thead>
<tr>
<td colspan="3">HTC</td>
</tr>
</thead>
<tbody id="lcd">
<tr>
<td colspan="3" class="ekran" id="ekran">Wpisz numer</td>
</tr>
<tr>
<td><a href="#" onclick="numer1()">1</a></td>
<td><a href="#" onclick="numer2()">2</a></td>
<td><a href="#" onclick="numer3()">3</a></td>
</tr>
<tr>
<td><a href="#" onclick="numer4()">4</a></td>
<td><a href="#" onclick="numer5()">5</a></td>
<td><a href="#" onclick="numer6()">6</a></td>
</tr>
<tr>
<td><a href="#" onclick="numer7()">7</a></td>
<td><a href="#" onclick="numer8()">8</a></td>
<td><a href="#" onclick="numer9()">9</a></td>
</tr>
<tr>
<td><a href="#" onclick="gwiazdka()">*</a></td>
<td><a href="#" onclick="numer0()">0</a></td>
<td><a href="#" onclick="krzyzyk()">#</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<a href="#" onclick="start()">== </a>
<a href="#" onclick="esc()">[ ]</a>
<a href="#" onclick="koniec()"> ==</a>
</td>
</tr>
</tfoot>
</table>



Styl tabeli - kod CSS:


table
{
width:300px;
margin-left:auto;
margin-right:auto;
background-color:black;
border-radius: 10px 10px 10px 10px;
}

thead td
{
background-color:rgba(0,0,0,1);
color:silver;
margin:10px 0px 10px 0px;
padding:5px;
font-size: 14pt;
text-align:center;
height:50px;
border:2px solid black;
border-radius: 10px 10px 0px 0px;
}

tbody
{
background-image:url("htc.jpg");
}

tbody td
{
color:white;
margin:10px 0px 10px 0px;
padding:1px;
font-size: 12pt;
text-align:center;
height:80px;
border:1px solid black;
}

tbody td.ekran
{
background-color:rgba(255,255,255,0.6);
color:darkblue;
font-size: 18pt;
}

tbody td a
{
background-color:rgba(0,0,0,0.6);
display:block;
text-decoration:none;
color:white;
height:50px;
padding:30px 0 0 0;
}

tbody td a:active
{
color:black;
background-color:rgba(255,255,255,0.6);
}

tfoot td
{
background-color:black;
color:silver;
margin:10px 0px 10px 0px;
padding:1px;
font-size: 12pt;
text-align:center;
height:50px;
border:1px solid black;
border-radius: 10px 10px 0 0;
text-decoration:none;
}

tfoot td a
{
text-decoration:none;
color:white;
}

Projekt 3 - TABLET - prace uczniów klasy 3x

Powered by Eugeniusz Piechula © 2016-18 - Dziękuję za wizytę na stronie!