Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style></style>
<script src="clasp.js" type="text/javascript" charset="windows-1251"></script>
<script>
clasp_html.register_tag('printcard',function(descr)
{
var W=30;
var R=W>>1;
var angle=-0.052;
function PK(x) {
var BW=0;
function reset_BW() {BW=0;return '';}
function sh(r,b,c,l) {return 'inset 0px 0px '+b+'px '+(BW+=r)+'px '+c+(l===undefined?'':',');}
function Sh(xyb,r,c,l) {return 'inset '+xyb[0]+'px '+xyb[1]+'px '+xyb[2]+'px '+r+'px '+c+(l===undefined?'':',');}
function oSh(xyb,c,l) {return ''+xyb[0]+'px '+xyb[1]+'px '+xyb[2]+'px '+c+(l===undefined?'':',');}
function div(c,S) {return {g:'div',c:c,a:{'class':S}};}
function tra(x,y) {return 'translate('+x+'px,'+y+'px)'; }
var kW = clasp.get(x,'c','R',W);
var kR = kW>>1;
function key_grad(br) {
function key_grd(br,rgb,p,n) { return clasp_html.cssColor(clasp_html.rgbMul([rgb[0]*1,rgb[0]*br*0.87,rgb[0]*br*0.65],br))+' '+p+'%'+(n?',':')'); }
var res='radial-gradient(ellipse at center, '+key_grd(br,[106,65,43],0,1)+key_grd(br,[165,127,107],45,1)+key_grd(br,[206,185,171],62,1)+key_grd(br,[86,62,45],66,1)+key_grd(br,[135,98,71],100);
return res;
// return 'radial-gradient(ellipse at center, rgba(106,65,43,1) 0%, rgba(165,127,107,1) 45%, rgba(206,185,171,1) 62%, rgba(86,62,45,1) 66%,rgba(86,62,45,1) 66%,rgba(135,98,71,1) 100%)';
}
return {g:'div' ,c:[{g:'div',c:{g:'div'}},div(x,'C1')] ,a:{'class':'CPKcss'} ,s:{
css:{
'.CPKcss' : {
defname :''
, display :'inline-block'
, width :kW
, height :kW
, position :'absolute'
, fontSize :kW*0.7
, fontFamily:'times'
, border :'0px solid #f00'
, backgroundColor:'#60391B'
, borderRadius:kR
, marginLeft:kR*0.3
, marginRight:kR*0.3
, background:key_grad(0.8)
, boxShadow:Sh([1,1,1],1,'rgba(255,255,255,0.6)',',')+sh(0.5,0.5,'#48220d',',')+sh(2,0.5,'#fffbf2',',')+sh(0.5,0,'#48220d',1)+oSh([10,10,7],'rgba(0,0,0,0.4)',1)+oSh([8,-8,7],'rgba(50,29,17,0.6)')
, zIndex:3
, css:{
':hover' : {
boxShadow:reset_BW()+Sh([1,1,1],1,'rgba(255,255,255,0.6)',',')+sh(0.5,0.5,'#48220d',',')+sh(2,0.5,'#fffbf2',',')+sh(0.5,0,'#48220d',1)+oSh([5,5,5],'rgba(0,0,0,0.4)',1)+oSh([4,-4,5],'rgba(50,29,17,0.6)')
, marginTop:2
, cursor:'pointer'
, css : {
'+div' : {
boxShadow :oSh([1,1,1],'rgba(50,29,17,0.6)')
, background:'linear-gradient(to bottom, rgba(237,225,215,1) 0%,rgba(221,193,164,1) 56%,rgba(91,66,56,1) 100%)'
}
}
}
, '[name="d"]' : {
background:key_grad(0.7)
, css : {
'>div>div:after' : {
content :'\u26ab'
, width :kR*0.2
, height :kR*0.2
, backgroundColor:'#fff'
, borderRadius:kR*.2
, fontSize :kW*0.3
, position :'absolute'
, left :kR*0.4
, top :kR*0.2-0-9000
, textShadow:reset_BW()+oSh([0,9000,6],'rgba(255,255,255,0.1),')+oSh([0,9000,6],'#fff,')+oSh([-R*0.1,R*0.6+9000,6],'rgba(255,255,255,0.2),')+oSh([R*0.8,R*0.2+9000,4],'rgba(255,255,255,0.1)')
}
}
}
, '+div' : { // палочка под кнопкой
width :kW*0.15
, height :kW
, marginLeft:kR+kW*0.075
, marginTop :kR
, position :'absolute'
, background:'linear-gradient(to bottom, rgba(237,225,215,1) 0%,rgba(91,66,56,1) 100%)'
, boxShadow :oSh([2,1,3],'rgba(50,29,17,0.6)')
, zIndex :2
}
, '>div>div' : { css : {
':before' : {
content :')'
, position :'absolute'
, left :kR*1.3
, top :kR*0.1-0-9000
, textShadow:oSh([0,9000,4],'#3E1C08')
}
, ':after' : {
content :'\u26ab'
, width :kR*0.2
, height :kR*0.2
, backgroundColor:'#fff'
, borderRadius:kR*.2
, fontSize :kW*0.3
, position :'absolute'
, left :kR*0.4
, top :kR*0.2-0-9000
, textShadow:oSh([0,9000,6],'rgba(255,255,255,0.5),')+oSh([0,9000,6],'#fff,')+oSh([-R*0.1,R*0.6+9000,6],'rgba(255,255,255,0.5),')+oSh([R*0.8,R*0.2+9000,4],'rgba(255,255,255,0.3)')
}
}}
, '>.C1' : {
display :'table-cell'
, textAlign :'center'
, verticalAlign:'middle'
, position :'absolute'
, left :kR*0.55
, top :kR*0.2
, overflow :'visible'
, color :'#F7F2EE'
, textShadow:oSh([-0.75,-0.75,0.5],'#000',1)+oSh([0.75,0.75,0.6],'rgba(255,248,237,0.5)')
}}
}
}
}};
}
function set_pnt(x) { return {g:'div',c:x,s:{position:'relative',overflow:'visible',width:10,height:10}}; }
function PKLine(x) {
var lst=[];
var WS = W*1.4;
var cos_a = WS*Math.cos(x.pos.a);
var sin_a = WS*Math.sin(x.pos.a);
for(var i =0; i<x.c.length; ++i)
{
var s={left:x.pos.x+i*cos_a,top:x.pos.y+i*sin_a};
var bt = {g:PK,c:x.c[i],s:s};
if(x.pos.name)
bt.a={name:x.pos.name};
lst.push(bt);
lst.push({g:'div',s:s});
}
return set_pnt(lst);
}
function PrintMCard(descr)
{
var W = clasp.get(descr,'width',200);
var H = clasp.get(descr,'height',180);
return {g:'div' ,a:{'class':'CPrintMCard'},s:{
width :W
, height :H
, css:{
'.CPrintMCard':{
position:'relative'
, overflow:'hidden'
, display:'inline-block'
, borderRadius:10
}
, '.CPrintMCard .BG':{
width :W+40
, height :H+40
, background:'linear-gradient(to bottom, rgba(64,31,14,1) 0%,rgba(63,20,13,1) 13%,rgba(255,235,206,1) 14%,rgba(255,235,206,1) 14%,rgba(255,246,229,1) 15%,rgba(64,31,14,1) 17%,rgba(158,91,58,1) 23%,rgba(247,239,232,1) 24%,rgba(255,250,247,1) 28%,rgba(255,250,247,1) 28%,rgba(201,196,193,1) 29%,rgba(229,222,218,1) 31%,rgba(244,238,235,1) 38%,rgba(193,177,168,1) 39%,rgba(175,128,112,1) 55%,rgba(158,113,93,1) 58%,rgba(201,186,179,1) 60%,rgba(122,90,72,1) 62%,rgba(137,96,81,1) 71%,rgba(81,59,52,1) 73%,rgba(168,87,62,1) 78%,rgba(28,20,18,1) 79%,rgba(170,119,100,1) 82%,rgba(172,137,109,1) 100%)'
//, background:'linear-gradient(to bottom, rgba(64,31,14,1) 0%,rgba(63,20,13,1) 13%,rgba(255,235,206,1) 14%,rgba(255,235,206,1) 14%,rgba(255,246,229,1) 15%,rgba(64,31,14,1) 17%,rgba(158,91,58,1) 23%,rgba(247,239,232,1) 24%,rgba(255,250,247,1) 28%,rgba(255,250,247,1) 28%,rgba(201,196,193,1) 29%,rgba(229,222,218,1) 31%,rgba(244,238,235,1) 38%,rgba(193,177,168,1) 39%,rgba(175,128,112,1) 55%,rgba(158,113,93,1) 58%,rgba(201,186,179,1) 60%,rgba(122,90,72,1) 62%,rgba(81,59,52,1) 75%,rgba(28,20,18,1) 76%,rgba(172,137,109,1) 88%,rgba(172,137,109,1) 100%)'
, transform:'rotate(-3deg) translate( -3px, -10px )'
, boxShadow:'inset 15px 5px 45px rgba(0,0,0,0.3),inset -65px -45px 65px rgba(0,0,0,0.3)'
}
, '.CPrintMCard .BG i:after':{
width:10
, height:20
, content:''
, left:100
, top:0
, position:'absolute'
, transition:'left 1s 0s'
, backgroundColor:'rgba(255,255,255,0.2)'
}
, '.CPrintMCard .BG i:hover:after':{
left:0
, transition:'left 1.0s 0s,background-color 0.5s 0.5s'
, display:'block'
, backgroundColor:'rgba(255,255,255,0)'
, shadowBox:'0px 20px 0px rgba(255,255,255,1)'
}
}}
,c:[ set_pnt({g:'div',c:set_pnt([{g:'i',c:'duevik\'d cledp'.replace(/d/g,'s').replace(/e/g,'a'),s:{color:'rgb(221, 198, 148)',whiteSpace:'pre',position:'absolute',display:'block',paddingLeft:4,paddingRight:4,fontSize:H*0.08,marginLeft:W*0.6,transform:'scaleY(0.5)',marginTop:13,boxShadow:'inset -1px -12px 7px rgba(235,220,194,0.3),inset 1px 2px 0px rgba(235,220,194,0.3)'}},{g:'div'}])
,a:{'class':'BG'}})
, {g:PKLine,c:['Q',{g:'div',c:'W',s:{marginLeft:-3}},'E','R','T','Y'],pos:{x:0,y:65,a:angle}}
, {g:PKLine,c:' ASDRFGH',pos:{x:-20,y:95,a:angle}}
, {g:PKLine,c:' ZXCVBN',pos:{x:-40,y:125,a:angle}}
, {g:PKLine,c:[
{g:'div',c:'2<sup>"</sup>',s:{fontSize:W*0.08}}
, {g:'div',c:'3<sup>#</sup>',s:{fontSize:W*0.08}}
, {g:'div',c:'4<sup>$</sup>',s:{fontSize:W*0.08}}
, {g:'div',c:'5<sup>%</sup>',s:{fontSize:W*0.08}}
, {g:'div',c:'6<sup>-</sup>',s:{fontSize:W*0.08}}
]
,pos:{x:20,y:-5,a:angle,name:'d'}
}
]
};
}
return {g:PrintMCard};
}
);
function main()
{
Main.innerHTML = clasp_html.create({g:'printcard'});
}
</script>
<body onload="main();">
<div id="Main"></id>
</body>
</html>
