<?php
class Color
{
private $color;
public function __construct($color = "")
{
$this->color_ = $color;
}
public function getColor()
{
return $this->color_;
}
public function random()
{
$url_position = 0;
$array_color = 'A,B,C,D,E,F';
$array_color_length = trim($array_color);
$array_color_length = strlen($array_color_length) - 2;
$array_color_length /= 2;
$array_color = explode(',', $array_color);
while($url_position < $array_color_length + 1)
{
$templory[$url_position] = rand(0, 1);
$url_position++;
}
$url_position = 0;
foreach($templory as $val)
{
if($val== 1)
{
$val = $array_color[rand(0, $array_color_length)];
}
else
{
$val = rand(0, 9);
}
$templory[$url_position] = $val;
$url_position++;
}
$templory = '#'.implode($templory);
return $templory;
}
}
$color = new Color();
$color_block = $color->random();
if(isset($_POST['download']) && !empty($_POST['download']))
{
$_SESSION['color'] = $_POST['download'];
}
?>
<div id="header" style="background-color: <?= $_SESSION['color'] ?>;">
<a href="index.php" id="logo">Объединенный сервисный центр</a>
</div>
<script type="text/javascript">
function rand(mi, ma) { return Math.random() * (ma - mi + 1) + mi; }
function gebi(id) { return window.document.getElementById(id); }
var Color = {
cur_hex: null,
generate: function(block) {
var dec = [parseInt(rand(0, 255)), parseInt(rand(0, 255)), parseInt(rand(0, 255))], hex = [];
for (var el in dec) {
dec.hasOwnProperty(el) && (hex.push(dec[el].toString(16).length > 1 ? dec[el].toString(16) : '0' + dec[el].toString(16)));
}
hex = '#' + hex.join('');
this.cur_hex = hex;
gebi('color_block').style.backgroundColor = hex;
gebi('info_block').innerHTML = hex;
},
change: function() {
gebi('header').style.backgroundColor = Color.cur_hex;
}
};
</script>
<div id="body_info"><h2 style="font-family:Roboto Bold, Arial, sans-serif; text-shadow:0 -1px 1px #000;">Генератор цвета для фона</h2></div>
<a href="test.php" onclick="Color.generate(this); return !1;" id="click"><div id="color_block"></div></a><br />
<div id="info_block"><?= $color->random() ?></div>
<div id="body_info"><form method="post" action=""><button name="download" onclick="Color.change(); return !1;" value="<?= $color_block ?>" id="next" style="width:15%;">Загрузить оформление</button></form></div>
<style>
#color_block{
border:5px solid #FFF;
box-shadow:0 0 10px 0 #222;
text-align:center;
margin:30px auto;
width:100px;
height:100px;
border-radius:60px;
background-color:<?= $color_block ?>;
}
#info_block{
border-radius:2px;
box-shadow:0 0 10px 0 #222;
background-color:#FFF;
padding:20px;
width:80px;
margin:auto;
text-align:center;
font-size:18px;
}
@charset "utf-8";
/* CSS Document */
body{
background: url(http://koostydy.bget.ru/test/img/bg.png);
}
#header{
margin:-8px -8px;
padding:8px;
width:100%;
background-color:#232323;
border-bottom:1px solid #707070;
height: 50px;
}
#regg form input{
width: 74%;
padding-left: 10px;
height: 35px;
border: 1px solid #E9EAEB;
margin-bottom: 10px;
}
#regg form button{
outline:none;
width: 50%;
padding-left: 10px;
height: 35px;
border:0;
color:#FFF;
font-weight:900;
border-radius:4px;
border-top: 1px solid #FB8385;
box-shadow:0 0 0 1px #CD2020;
text-shadow:0 1px 0 #CD2020;
background:linear-gradient(to top, #FF2828, #FB5B5E);
}
#brands{
padding-top:10px;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
color:#333;
font-size:14px;
width:99.8%;
height:100px;
margin-left:1px;
background-color:#FFF;
margin-top:1px;
}
#counter_n{
float:left;
width:50%;
color:#FFF;
font-family:"Roboto Bold", Arial, sans-serif;
font-size:20px;
text-shadow:0 1px 0 #3181AA;
}
#counter{
width:100%;
height:70px;
box-shadow:0 0 0 1px #3795C8;
background: linear-gradient(to top, #3795C8, #49B4EC);
}
#num_count{
color:#FFF;
text-shadow:0 1px 0 #101010;
margin-right:-6px;
padding:10px;
border-radius:4px;
margin-left:10px;
box-shadow:0 0 0 1px #101010;
background: linear-gradient(to top, #242424, #3F3F3F);
}
#count_text{
margin-right:10px;
margin-top:8px;
border-radius:4px;
width:48%;
float:right;
height:50px;
border:1px dashed #FFF;
}
#contant_keys{
width:100%;
height:145px;
background-color:#F2F2F2;
margin-left:1px;
margin-top:1px;
}
#keys{
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
text-shadow:0 1px 0 #FFF;
color:#333;
width:24%;
float:left;
height:115px;
border-right:1px solid #A9A9A9;
margin-left:0.5%;
margin-top:1%;
}
#keys ul li{
float:left;
list-style:none;
}
#lenta{
text-shadow:0 1px 0 #2E78A0;
padding-top:15px;
position:relative;
width:101.9%;
margin-left:-1.9%;
height:35px;
box-shadow:0 0 0 1px #3795C8;
background: linear-gradient(to top, #3795C8, #49B4EC);
}
#lenta:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #276A8E #276A8E transparent transparent;
}
#contact_form{
margin:0 auto;
text-align:center;
}
#lenta_num{
border-bottom:1px solid #266485;
text-shadow:0 0 0 #FFF;
padding:4px 9px 4px 10px;
background-color:#FFF;
color:#3FA4D9;
font-weight:900;
border-radius:20px;
margin-right:10px;
margin-left:10px;
}
#info{
font-family: Arial, Helvetica, sans-serif;
text-shadow:0 1px 0 #FFF;
color:#333;
width:100%;
background-color:#F2F2F2;
margin-top:1px;
height:150px;
}
#sr_price{
padding:20px 0 10px 0;
width:100%;
margin-left:-1px;
background-color:#252525;
color:#FFF;
height:200px;
text-align:center;
}
#block_price{
margin-left:3%;
text-shadow:0 1px #2E78A5;
font-family: Arial, Helvetica, sans-serif;
font-size:20px;
border-radius:12px;
padding:5px;
width:30%;
float:left;
background-color:#3FA2D8;
color:#FFF;
}
#scs{
padding:5px;
border-radius:8px;
margin:0 auto;
border:1px dashed #FFF;
}
@media screen and (max-width: 830px)
{
#counter_n{
margin-top:12px;
font-size:12px;
}
#count_text{
width:45%;
}
#keys{
font-size:11px;
}
#lenta{
font-size:12px;
width:103.6%;
margin-left:-3.5%;
}
#info h2{
font-size:18px;
}
#sr_price{
padding:20px 0 55px 0;
}
#scs{
width:93%;
}
}
#screen{
width:100%;
background-color:#F2F2F2;
height:200px;
}
#scren_block{
margin-top:20px;
width:22%;
height:150px;
float:left;
border:1px dashed #666;
border-radius:8px;
margin-left:2.3%;
}
#scs button{
font-size:12px;
font-family: Arial;
width: 50%;
padding-left: 10px;
height: 35px;
border: 0;
color: #FFF;
font-weight: 900;
border-radius: 4px;
border-top: 1px solid #FB8385;
box-shadow: 0 0 0 1px #CD2020;
text-shadow: 0 1px 0 #CD2020;
background: linear-gradient(to top, #FF2828, #FB5B5E);
}
#blue_fon{
width:100%;
height:310px;
border-top:1px solid #8CD1FA;
box-shadow:0 0 0 1px #3795C8;
border-radius:8px 8px 0 0;
background: linear-gradient(to top, #3795C8, #49B4EC);
}
#send_comments{
outline:none;
text-align:center;
margin:0 auto;
width:70%;
}
#send_comments textarea{
outline:none;
border:1px solid #CCC;
width:60%;
padding:10px 10px;
font-family:"Roboto Bold", Arial, sans-serif;
min-width:60%;
max-width:60%;
max-height:80px;
min-height:50px;
height:50px;
}
#logo{
float:left;
text-decoration:none;
font-size:16px;
margin-top:15px;
margin-left:30px; /* very important for screen media */
font-family:"Roboto Bold", Arial, sans-serif;
color: #E5E5E5;
}
#logo:hover{
color:#FFF;
}
#log_in{
float:right;
margin-top:18px;
margin-right:20px;
text-decoration: none;
font-family:"Roboto Bold", Arial, sans-serif;
font-size:12px;
color:#E5E5E5;
}
#log_in:hover{
color:#FFF;
text-decoration:underline;
}
#body_info{
color:#FFF;
text-align:center;
padding-top:40px;
width:70%;
padding-bottom:30px;
margin:8px auto;
}
#log_in_block{
padding-bottom:35px;
padding-top:15px;
text-align:center;
border-radius:6px;
margin:0 auto;
color:#FFF;
max-width:35%;
min-width:250px;
}
#close_log_in_block{
width:20px;
padding-right:1px;
padding-bottom:1px;
height:20px;
float:right;
color:#E5E5E5;
margin-top:-13px;
margin-right:3px;
border-radius:20px;
border:1px solid #E5E5E5;
font-family:"Roboto Bold", Arial, sans-serif;
}
#close_log_in_block:hover{
color:#FFF;
border:1px solid #FFF;
}
#close_log_in_block a{
text-decoration:none;
}
#log_in_block span{
margin-bottom:10px;
font-family:"Roboto Bold", Arial, sans-serif;
font-size:20px;
color: #A6A6A6;
letter-spacing:3px;
}
#log_in_block form input{
outline:none;
width:74%;
padding-left:10px;
height:35px;
border:1px solid #E9EAEB;
margin-bottom:10px;
}
#form_reg_area{
padding-top:10px;
font-family:"Roboto Bold", Arial, sans-serif;
width:74%;
max-width:74%;
min-width:74%;
max-height:100px;
min-height:35px;
padding-left:10px;
height:25px;
border:1px solid #E9EAEB;
margin-bottom:10px;
}
#form_reg{
width:74%;
padding-left:10px;
height:35px;
border:1px solid #E9EAEB;
margin-bottom:10px;
}
.form_reg{
font-weight:100;
font-family:"Roboto Bold", Arial, sans-serif;
margin:0 auto;
width:74%;
padding-left:10px;
height:35px;
border:1px solid #E9EAEB;
margin-bottom:10px;
}
#next2{
margin-top:10px;
}
#next2 a{
color: #444;
}
#next2 a:hover{
text-decoration:none;
}
#next{
outline: none;
font-size: 12px;
font-family:"Roboto Bold", Arial, sans-serif;
width: 60%;
padding-left: 10px;
height: 40px;
border: 0;
color: #FFF;
font-weight: 900;
border-radius: 4px;
border-top: 1px solid #FB8385;
box-shadow: 0 0 0 1px #CD2020;
text-shadow: 0 1px 0 #CD2020;
background: linear-gradient(to top, #FF2828, #FB5B5E);
}
#log_in_block form button{
outline:none;
width: 50%;
padding-left: 10px;
height: 35px;
border: 0;
color: #FFF;
font-weight: 900;
border-radius: 4px;
border-top: 1px solid #FB8385;
box-shadow: 0 0 0 1px #CD2020;
text-shadow: 0 1px 0 #CD2020;
background: linear-gradient(to top, #FF2828, #FB5B5E);
font-family:"Roboto Bold", Arial, sans-serif;
}
#reg_in{
margin-right:10px;
font-family:"Roboto Bold", Arial, sans-serif;
font-size:12px;
color:#555;
text-decoration:none;
}
#reg_in:hover{
text-decoration: underline;
}
#comments{
background-color:#FFF;
width:90%;
max-width:90%;
min-width: 90%;
padding:20px;
margin-top:20px;
color:#333;
}
#name{
font-weight:800;
float:left;
}
#name1{
text-shadow:0 1px 1px #FFF;
float:left;
}
#dialog{
width:60%;
margin:10px auto;
}
#time{
float:left;
color:#999;
margin-top:10px;
font-size:10px;
}
#order_block{
width:80%;
padding:20px;
background-color:#FFF;
margin:0 auto;
}
#url{
margin-right:20px;
text-decoration:none;
color:#555;
}
#url:hover{
text-decoration:underline;
}
#preim1{
font-family: Arial, Helvetica, sans-serif;
float:left;
width:30%;
height:300px;
color:#FFF;
}
#preim1 h3{
text-shadow:0 1px 0 #000;
}
#preim1 ol li{
text-shadow:0 1px 0 #000;
}
#preim2{
font-family: Arial, Helvetica, sans-serif;
float:right;
width:35.1%;
height:300px;
color:#FFF;
}
#preim2 h3{
text-shadow:0 1px 0 #000;
}
#preim2 ol li{
text-shadow:0 1px 0 #000;
}
#screen_s{
padding:5px 0 30px 0;
font-family: Arial, Helvetica, sans-serif;
color:#FFF;
text-shadow:0 1px 0 #3181AA;
width:99.9%;
box-shadow:0 0 0 1px #3795C8;
background: linear-gradient(to top, #3795C8, #49B4EC);
}
#shuter{
border-top:1px solid #000;
height:150px;
width:100%;
background-color:#232323;
border-radius:0 0 8px 8px;
}
#table_form{
box-shadow:0 0 10px 0 #222;
font-family:Arial;
background-color:#FFF;
width:30%;
padding:60px 20px 60px 20px;
margin:0 auto;
text-align:center;
color:#000;
}
#table_form table{
font-size:10px;
font-weight:800;
border-collapse:collapse;
border:1px solid #000;
}
</style>