5. ساخت تقویم
زبان نوشتاری PHP
سطح برنامه : متوسط
*********//*********

<style>
calendar { border-left:1px solid #999; width:100%;}
* html .day, * html .day-np { height:80px;}
.day:hover { background:#eceff5; }
.day-np { background:#ccc; min-height:80px; }
.day-head { background:#17a68a; color:#fff; font-weight:bold; text-align:center; padding:5px; width:80px; border-top:1px solid #636363; border-right:1px solid #636363; }
.day-num { background:#353632; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
.day, .day-np { padding:5px; border-bottom:1px solid #636363; width:80px; border-right:1px solid #636363; }
.day { color:#353632; font-weight:bold; }
</style>
<?php
function draw_calendar($month, $year) {

$cal = '<table cellpadding="0" cellspacing="0" class="calendar" width="100%">';
$headings = array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
$cal .= '<tr class="row">
<td class="day-head">'
.implode('</td><td class="day-head">',$headings).'
</td></tr>';

$running_day = date('w',mktime(0,0,0,$month,1,$year));
$days_in_month = date('t',mktime(0,0,0,$month,1,$year));
$days_in_this_week = 1;
$day_counter = 0;
$dates_array = array();

$cal .= '<tr class="row">';

for($x = 0; $x < $running_day; $x++) {
$cal .= '<td class="day-np"> </td>';
$days_in_this_week++;
}

for($list_day = 1; $list_day <= $days_in_month; $list_day++) {
$cal .= '<td class="day" align="center">';
$cal .= $list_day;
$cal .= str_repeat('<p> </p>', 2);
$cal.= '</td>';
if($running_day == 6) {
$cal .= '</tr>';
if(($day_counter+1) != $days_in_month) {
$cal .= '<tr class="row">';
}
$running_day = -1;
$days_in_this_week = 0;
}
$days_in_this_week++;
$running_day++;
$day_counter++;
};

if($days_in_this_week < 8) {
for($x = 1; $x <= (8 - $days_in_this_week); $x++) {
$cal .= '<td class="day-np"> </td>';
}
}
$cal .= '</tr>';
$cal .= '</table>';

return $cal;
}

//Draw calendar for the current month/year
echo draw_calendar(date("m"), date("Y"));

?>

@de_coder

css :

@import 'https://fonts.googleapis.com/css?family=Dosis';
body {
padding:0;
margin: 0;
background-color:#000;
}
#project-beginner {
width: 90%;
display:block ;
margin:20px 30px;
}
.for-you {
background-color: #000;
border-radius: 4px;
border: 4px solid aquamarine;
box-shadow: 0px 0px 20px aquamarine;
width: 90%;
}

.for-you .above {
width: 100%;
background-color: aquamarine;
color: #000;
text-align: center;
font-size: 1em;
font-family: 'Dosis', sans-serif;
font-weight: bolder;
}
input[type="text"] {
outline: 0 none;
background-color: #000;
color: aquamarine;
padding: 4px;
border: 2px solid aquamarine;
border-top: 4px solid aquamarine;
width: 50%;
-webkit-transition: width 0.5s;
-moz-transition: width 0.5s;
transition: width 0.5s;
display: block;
margin: 0 auto;
margin-top: 20px;
}

input[type="password"] {
outline: 0 none;
border: 2px solid aquamarine;
border-top: 4px solid aquamarine;
background-color: #000;
color: aquamarine;
padding: 4px;
display: block;
margin: 0 auto;
width: 50%;
-webkit-transition: width 0.5s;
-moz-transition: width 0.5s;
transition: width 0.5s;
}
input:focus {
width: 96%;
}

.sumbit-button {
display: block;
margin: 20px auto;
width: 50%;
padding: 2px 0;
outline: 0 none;
border: 2px solid aquamarine;
border-radius: 2px;
cursor: pointer;
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
transition: background 0.5s;
background-color: #000;
color: aquamarine;
font-family: 'dosis';
font-weight: 500;
}
.sumbit-button:hover {
background-color: aquamarine;
color: #000;
font-weight: 700;
}

h4 {
color: #FFF;
margin-top: 40px;
font-family: 'Dosis', sans-serif;
text-align:center ;
font-weight: normal;
}
h4 a {
font-family: 'Dosis', sans-serif;
text-decoration: underline;
}

a {
color: aquamarine;
text-align: center;
text-decoration: none;
font-family: 'arial';
}
label {
color: #fff;
font-family: 'Arial', sans-serif;
}

@de_coder

body {
background-color:#4286f4;
}
.spinner {
margin: 100px auto 0;
width: 70px;
text-align: center;
}

.spinner > div {
width: 18px;
height: 18px;
background-color: #FFF;

border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}

@de_coder