HTML
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset="utf-8">
<title>CV Europass</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Archivo&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Khand&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sarpanch&subset=latin-ext" rel="stylesheet">
<link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAAmJLR0QA94lURI0AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfhCAMVKBRuY53kAAAAp0lEQVQYGQXBkQLFMAyG0bzlMFgsBovB4I/FYnE4HN5HGA6Hn95zDAAAgHtjwJ15A/B4yKBaViuAPbKM3TU1+wYy47TPpd5L/sIhf+2K6fvXlMnT1DDlKNhd/p6RhVWOE3CNXRUXNqrfwIrqTf5ilXEBT5u9qYEpxwJo6jEEdoUc+NaYigsMVx7t8Ltr+gfG6pqa7XVVBwzkMcJ/FSHAgOdc5w1rAfwBOKCycaxSaL4AAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />
<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,.table footer,header,hgroup,menu,nav,section,form,div,img,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html,body{line-height:24px}
body {
color: #555;
font: 1em/1.5 'Archivo',Arial, Geneva, Tahoma, sans-serif;
background: #F7F7F7;
-webkit-box-shadow:0px 169px 0px 0px #ffffff inset;
-moz-box-shadow:0px 169px 0px 0px #ffffff inset;
box-shadow:0px 169px 0px 0px #ffffff inset;
}
h2.left{font-family:'Khand', Verdana, sans-serif;}
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-bottom:0}
#vardas,.kCell h2{text-transform:capitalize}
#email{text-transform:lowercase;}
img{height:116px;width:116px;background:#fff;padding:2px;-moz-box-shadow:0 0 6px #777;-webkit-box-shadow:0 0 6px #777;box-shadow:0 0 6px #777;z-index:1;border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;-webkit-border-radius:3px;}
h1{font-size:1.5em;line-height:1;margin-top:1em}
h2,h3{font-size:1em;}
p,ul,blockquote,pre,td,th,label{font-size:1em;line-height:1.5}
h1,h2,h3,h4,h5,h6,p{text-shadow:0 1px 0 #fff;}
.num{font-weight:900;letter-spacing:.125em;font-family:Arial, serif;}
.tr{text-align:right}
.title{font-family:'Khand', Verdana, sans-serif;letter-spacing:.125em;font-weight:900;direction:rtl}
.progress{width:auto;display:block;position:relative;padding:2px 4px 2px 2px;margin:0;color:#111}
.percent{position:absolute;display: block;overflow: hidden;}
.percent, .kCell{text-indent:4px;}
.langue{margin: 0 24px;}
.bar{height:18px;line-height:18px;display:block;border:1px solid #aaa}
.c00{width:0}.c10{width:10%}.c20{width:20%}.c30{width:30%}.c40{width:40%}.c50{width:50%}.c60{width:60%}.c70{width:70%}.c80{width:80%}.c90{width:90%}.c100{width:100%}
.progress .bar{background:rgba(144,173,184,1);background:-moz-linear-gradient(left, rgba(144,173,184,1) 0%, rgba(183,222,237,1) 100%);background:-webkit-gradient(left top, right top, color-stop(0%, rgba(144,173,184,1)), color-stop(100%, rgba(183,222,237,1)));background:-webkit-linear-gradient(left, rgba(144,173,184,1) 0%, rgba(183,222,237,1) 100%);background:-o-linear-gradient(left, rgba(144,173,184,1) 0%, rgba(183,222,237,1) 100%);background:-ms-linear-gradient(left, rgba(144,173,184,1) 0%, rgba(183,222,237,1) 100%);background:linear-gradient(to right, rgba(144,173,184,1) 0%, rgba(183,222,237,1) 100%)}
#photo{padding:24px;width:120px;height:120px;position:absolute;top:0;right:0;}
#cv input {line-height:24px;height:24px;border:0;padding:0;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
}
#main,#header,#cv,section,.left,.righ{margin: 0 auto;position: relative;}
#main,#header,section {width: 960px;min-height:24px;}
#header,#he{height:168px;overflow: hidden;}
.left {float: left;width: 324px;text-align: right;padding:0 24px;}
.righ {float: left;width: 564px;}
#header .title {
font-family: 'Sarpanch', Arial, sans-serif;
font-weight: 900;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=315, Color=#f7f7f7)";
text-shadow: -1px -1px 0px #f7f7f7, -2px -2px 2px #eee, 1px 1px 0px #f7f7f7, 2px 2px 2px #aaaaaa;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=315, Color=#f7f7f7);
letter-spacing:2px;
padding:24px 0;
color:#777;
position: relative;
}
.blokas:last-child{margin-bottom:48px;}
.blokas{background:#F7F7F7;display: block; position: relative;}
.blokas{
-webkit-box-shadow:0px 1px 0px 0px #ffffff inset,0px -1px 0px 0px #cccccc inset;
-moz-box-shadow:0px 1px 0px 0px #ffffff inset,0px -1px 0px 0px #cccccc inset;
box-shadow:0px 1px 0px 0px #ffffff inset,0px -1px 0px 0px #cccccc inset;
}
.prof:last-child, .darb:last-child{-moz-box-shadow: none; -webkit-box-shadow: none;box-shadow: none;}
.prof, .darb{
-webkit-box-shadow:0px -1px 0px 0px #ccc inset;
-moz-box-shadow:0px -1px 0px 0px #ccc inset;
box-shadow:0px -1px 0px 0px #ccc inset;
}
a{color:#000;font-weight:900;}a:focus{outline:0;background:#ced}
a:link,a:visited,a:focus,a:active{color:#222;text-decoration:none}
a:hover{color:#000;text-decoration:underline;cursor:pointer}
.ktable h3{text-align:right;}
.ktable{width:936px;padding:0;float:left;font-family:'Khand', Verdana, sans-serif;}
.kCell,.kCelli{box-sizing:border-box;float:left;height:24px;overflow:hidden;line-height:24px}
.kCell{text-align:left;-webkit-box-shadow:inset -1px 1px 0px 0px #ccc;-moz-box-shadow:inset -1px 1px 0px 0px #ccc;box-shadow:inset -1px 1px 0px 0px #ccc;}
.kCelli{width:372px;-webkit-box-shadow:-1px 0px 0px 0px #ccc inset;-moz-box-shadow:-1px 0px 0px 0px #ccc inset;box-shadow:-1px 0px 0px 0px #ccc inset;}
.lent{width:112px}
.titlelentbig{width:224px}
.titlelent{height:48px}
.hauto{text-align:center}
section:after{content:" ";visibility:hidden;display:block;height:0;width:0;clear:both;font-size:0;overflow:hidden}
.bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAV1BMVEUAAAAAAAAICAgQEBAZGRkhISEpKSkxMTFCQkJKSkpSUlJaWlpjY2Nra2tzc3N7e3uEhISMjIyUlJScnJylpaWtra21tbW9vb3FxcXe3t7m5ubv7+////+kcD+qAAAAHXRSTlMAHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHzgkAGUAAABjSURBVBgZncEBAkJAEADAoRxyOORK9f939oedMXGS2Zk4KfxEvLiYGWgZKVQRlUxDR0fixiXizkZmoKEh0Yjo2fiy0zPQUkSsHMwcJCqJTUTHSqLw4cHIIuLNyM6TTGXhEPAHKRgDTFwqlV8AAAAASUVORK5CYII=');
}
@media only screen and (max-width : 960px) {
.langue{margin: 0;}
.left, .righ {
clear: both;
position: relative;
width: 100%;
padding: 0;
margin: 0 auto;
height: auto !important;
overflow: hidden;
text-align: left;
}
section{width:auto;}
#main {
position: relative;
width: auto;
margin: 0 auto;
display: block;
border-radius: 0px 0px 0px 0px !important;
-moz-border-radius: 0px 0px 0px 0px !important;
-webkit-border-radius: 0px 0px 0px 0px !important;
}
#cv {
padding: 6px;
}
#header {
display: block;
min-height: 168px;
height: auto;
width: auto;
padding: 0;
}
#header .title{padding: 0;}
.ktable,.kBody,.kRow,.kCell {
width: 100%;
margin: 0;
}
.ktable h3{direction:ltr;text-align:left;text-indent:0;}
.kal {
width: 15%;
}
.kCell {
width: 17%;
-ms-word-break: break-all;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.titlelentbig {
width: 34%;
}
.titlelent{
font-size:0.6250em;
line-height: 2.4;
}
#photo,#preview, img {
margin: 0 auto;
overflow: hidden;
text-align: center;
position: relative;
}
h1,h2,span.cen {
text-align: center;
}
section h2 {display: none;}
.hi {
display: none;
}
.num {
text-align: center;
}
#flag {
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.5);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.5);
position: absolute;
display: block;
right: 0;
top: 0;
width: 0;
height: 0;
border-top: 24px solid #aaa;
border-left: 24px solid transparent;
background: #fff;
}
}
@media print {
html,body {
min-width: 100%;
max-width: 100%;
background-color: transparent;
background: none;
border: none !important;
}
#header {
min-height: 144px;
height: auto;
}
#main, #cv, #photo {
border: 0;
}
.kCell{border:1px solid #eee;box-sizing: border-box;}
#main,#cv,html,body,.righ,.left,#header,img {
margin: 0;
padding: 0;
width: auto;
height: auto;
}
.left {
width: 23%;
}
.righ {
width: 75%;
margin-left: 2%;
}
.blokas,.kCelli{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
h1,h2,h3,h4,h5,h6,p {
font-size: 10pt;
}
.ktable,.kBody,.kRow,.kCell {
display: block;
width: 100%;
}
.kCell {
width: 15%;
}
.kCelli {
width: 25%;
-ms-word-break: break-all;
word-break: break-all;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.titlelentbig {
width: 30%;
}
#main:before {
font-size: 24pt;
}
}
::-moz-selection {
color: #eee;
background: #090;
}
::selection {
color: #eee;
background: #090;
}
</style>
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement('header');
document.createElement('section');
</script>
<![endif]-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body class="bg">
<div id="main">
<div id="flag"></div>
<div id="header">
<div id="he" class="left">
<h1 class="title">Europass gyvenimo <br>aprašymas</h1> </div>
<h1 class="remove"><span style="display:none;">Online</span>Offline CV Europass maker</h1>
<div id="photo"><img src="person.png" id="preview" alt="" /> </div>
</div>
<div id="cv">
<div class="blokas">
<section>
<h2 class="left num hm">Asmeninė informacija</h2> </section>
<section>
<h2 class="left hi">Vardas / Pavardė</h2>
<h3 id="vardas" class="righ num">Europass Maker</h3> </section>
<section>
<h2 class="left hi">Telefonas(-ai)</h2>
<h3 class="righ num" id="number">+37068000000</h3> </section>
<section>
<h2 class="left hi">El. paštas(-ai)</h2>
<h3 id="email" class="righ num"><a href="mailto:e-pastas@gmail.com?subject=DARBAS">e-pastas@gmail.com</a></h3> </section>
<section>
<h2 class="left">Adresas(-ai)</h2>
<h3 class="righ">Adresas Adresas, Adresas Adresas (Adresas)</h3> </section>
<section>
<h2 class="left">Pilietybė</h2>
<h3 class="righ">Pilietybė</h3> </section>
<section>
<h2 class="left">Gimimo data</h2>
<h3 class="righ">Metai mėnuo diena</h3> </section>
<section>
<h2 class="left">Lytis</h2>
<h3 class="righ">Lytis</h3> </section>
</div>
<div class="blokas">
<section>
<h2 class="left">Pageidaujamas darbas ar profesinės veiklos sritis</h2>
<h3 class="righ num">IT, telekomunikacija, programavimas, kita</h3> </section>
</div>
<div class="blokas">
<section>
<h2 class="left num hm">Darbo patirtis</h2> </section>
<div id="darb" class="darb">
<section>
<h2 class="left">Datos</h2>
<h3 class="righ">Data - Data</h3></section>
<section>
<h2 class="left">Profesija arba pareigos</h2>
<h3 class="righ">CV šablonų kūrimas</h3></section>
<section>
<h2 class="left">Pagrindinės veiklos ir atsakomybės</h2>
<h3 class="righ">CV šablonų kūrimas</h3></section>
<section>
<h2 class="left">Darbovietės pavadinimas ir adresas</h2>
<h3 class="righ">CV maker, Europa, Lietuva</h3></section>
<section>
<h2 class="left">Darbovietės veiklos sritis arba ūkio šaka</h2>
<h3 class="righ">Darbovietės veiklos sritis arba ūkio šaka</h3></section>
</div>
</div>
<div class="blokas">
<section>
<h2 class="left num hm">Išsilavinimas</h2> </section>
<div id="prof" class="prof">
<section>
<h2 class="left">Datos</h2>
<h3 class="righ">Data - Data</h3> </section>
<section>
<h2 class="left">Kvalifikacija</h2>
<h3 class="righ">Kvalifikacija</h3></section>
<section>
<h2 class="left">Pagrindiniai dalykai/ profesiniai gebėjimai</h2>
<h3 class="righ">Bendrieji dalykai
- Informatika, užsienio kalba(anglų)
Profesiniai dalykai
- Kompiuterių įrangos derinimas, priežiūra, aptarnavimas.
</h3> </section>
<section>
<h2 class="left">Švietimo teikėjo pavadinimas ir tipas</h2>
<h3 class="righ">Mokykla
Adresas Adresas, Adresas (Šalis)
</h3> </section>
<section>
<h2 class="left">Kvalifikacijos lygmuo pagal nacionalinę arba tarptautinę klasifikaciją</h2>
<h3 class="righ">ISCED7</h3> </section>
</div>
</div>
<div class="blokas">
<section>
<h2 class="left">Asmeniniai gebėjimai ir kompetencijos </h2> </section>
<section>
<h2 class="left">Gimtoji kalba(-os)</h2>
<h3 class="righ">Lietuvių</h3> </section>
<section>
<h2 class="left">Kita kalba (-os) </h2>
<h3 class="righ brd">Kalba, language</h3> </section>
</div>
<div class="blokas toka">
<section>
<div class="table">
<div class="ktable">
<div class="kBody kalbos">
<div class="kRow">
<div class="kCelli hauto kal"></div>
<div class="kCell titlelentbig hauto">
<h2>supratimas</h2> </div>
<div class="kCell titlelentbig hauto">
<h2>kalbėjimas</h2> </div>
<div class="kCell lent hauto">
<h2>rašymas</h2> </div>
</div>
<div class="kRow">
<div class="kCelli titlelent hauto kal"></div>
<div class="kCell lent titlelent hauto">Klausymas</div>
<div class="kCell lent titlelent hauto">Skaitymas</div>
<div class="kCell lent titlelent hauto">Bendravimas žodžiu</div>
<div class="kCell lent titlelent hauto">Informacijos pateikimas žodžiu</div>
<div class="kCell lent titlelent hauto"></div>
</div>
<div class="kRow">
<div class="kCelli kal">
<h3 class="langue">Kalba</h3> </div>
<div class="kCell edit lent">Double Click</div>
<div class="kCell edit lent">Double Click</div>
<div class="kCell edit lent">Double Click</div>
<div class="kCell edit lent">Double Click</div>
<div class="kCell edit lent">Double Click</div>
</div>
<div class="kRow">
<div class="kCelli kal">
<h3 class="langue">Kita kalba</h3> </div>
<div class="kCell edit lent">Double Click</div>
<div class="kCell edit lent">Double Click</div>
<div class="kCell edit lent">Double Click</div>
<div class="kCell edit lent">Double Click</div>
<div class="kCell edit lent">Double Click</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="blokas">
<section>
<h2 class="left">Socialiniai gebėjimai ir kompetencijos</h2>
<h3 class="righ">Geri bendravimo gebėjimai
Gebėjimai dirbti komandoje ir savarankiškai</h3> </section>
</div>
<div class="blokas">
<section>
<h2 class="left">Techniniai gebėjimai ir kompetencijos</h2>
<h3 class="righ">CV temlate making</h3> </section>
</div>
<div class="blokas">
<section>
<h2 class="left num">Darbo kompiuteriu gebėjimai ir kompetencijos</h2>
<h3 class="righ sss">Operacinės sistemos: Unix/Linux, Windows, Mac OS, Android.
Programinės įrangos paketai: Inkscape (vektorinė grafika), Gimp(rasterinė grafika), Blender(3D grafika),
Photoshop(pagrindai), MS Office programos(Word, Exel, PowerPoint) ir kt.</h3> </section>
</div>
<div class="blokas topr">
<section>
<div class="ktable">
<div class="kBody pkalbos">
<div class="kRow">
<div class="kCelli kal">
<h3 class="langue">Programavimo kalbos</h3> </div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">C++</h3>
<div class="bar c90"></div>
</div>
</div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">Java Script</h3>
<div class="bar c80"></div>
</div>
</div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">html</h3>
<div class="bar c70"></div>
</div>
</div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">css</h3>
<div class="bar c90"></div>
</div>
</div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">php</h3>
<div class="bar c70"></div>
</div>
</div>
</div>
<div class="kRow">
<div class="kCelli kal">
<h3 class="langue">Naudojamos programos</h3> </div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">Vivaldi</h3>
<div class="bar c80"></div>
</div>
</div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">Firefox</h3>
<div class="bar c100"></div>
</div>
</div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">Opera</h3>
<div class="bar c70"></div>
</div>
</div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">Chromium</h3>
<div class="bar c90"></div>
</div>
</div>
<div class="kCell lent">
<div class="progress"><h3 class="percent">IE</h3>
<div class="bar c50"></div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="re.js"></script>
</body>
</html>
CSS
#upload_form {
position:absolute;
display: block;
width: 432px;
height: 144px;
overflow: hidden;
top:24px;
right:144px;
padding-right: 12px;
}
.upload_form_cont {
background: -moz-linear-gradient(#ffffff, #f2f2f2);
background: -ms-linear-gradient(#ffffff, #f2f2f2);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
background: -webkit-linear-gradient(#ffffff, #f2f2f2);
background: -o-linear-gradient(#ffffff, #f2f2f2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
background: linear-gradient(#ffffff, #f2f2f2);
color:#000;
overflow:hidden;
}
#preview{
background-clip:padding-box;
-webkit-box-shadow:0px 0px 0px 1px #aaaaaa inset,0px 0px 0px 3px #ffffff inset;
-moz-box-shadow:0px 0px 0px 1px #aaaaaa inset,0px 0px 0px 3px #ffffff inset;
box-shadow:0px 0px 0px 1px #aaaaaa inset,0px 0px 0px 3px #ffffff inset;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,211,148,1) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,211,148,1))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,211,148,1) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,211,148,1) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,211,148,1) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,211,148,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#FFD394',GradientType=1 ); /* ie6-9 */
}
#speed,#remaining {
float:left;
width:100px;
}
#b_transfered {
float:right;
text-align:right;
}
.clear_both {
clear:both;
}
#upload_form input {
border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
-webkit-border-radius:3px;
border:0;
}
.brdr{border: 1px solid #eee;}
.btn, button {
border:0;
outline:0;
cursor: pointer;
box-sizing: border-box;
font-family: 'Sarpanch', Arial, sans-serif;
line-height: 24px;
border-radius:3px;
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
-webkit-border-radius:3px;
color: #eee;
display:block;
height: 24px;
padding:0 6px;
font-weight:900;
text-align: center;
z-index: 1;
}
.shd{
-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.2);
}
/*button*/
input[type=file] {
position: absolute;
top:-1px;
left:-1px;
margin: 0;
padding: 0;
opacity: 0;
width: 116px;
height: 24px;
display: block;
cursor: pointer;
text-indent: -9999px;
}
#fakebtn {
display: block;
position: absolute;
margin: 0;
padding: 0;
bottom: 26px;
left: 26px;
width: 114px;
height: 24px;
text-align: center;
z-index:555;
background:#6E91B4;
color:#eee;
box-sizing: content-box;
cursor: pointer;
font-family: 'Sarpanch', Arial, sans-serif;
}
#fakebtn:hover,input[type=file]:hover, button:hover, .btn:hover {
color:#333;
}
#fileinfo,#error,#error2,#abort,#warnsize {
display:none;
font-size: 0.6250em;
line-height: 2.4000em;
text-align: right;
font-family: 'Sarpanch', Arial, sans-serif;
}
#progress {
border:1px solid #ccc;
display:none;
float:left;
height:14px;
border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
background: -moz-linear-gradient(#66cc00, #4b9500);
background: -ms-linear-gradient(#66cc00, #4b9500);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));
background: -webkit-linear-gradient(#66cc00, #4b9500);
background: -o-linear-gradient(#66cc00, #4b9500);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')";
background: linear-gradient(#66cc00, #4b9500);
}
#progress_percent {
float:right;
}
.righ {cursor: pointer;}
#progress_info{position:relative;top:48px; right:0;}
#upload_response {
margin-top: 10px;
padding: 20px;
overflow: hidden;
display: none;
border: 1px solid #ccc;
border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: 0 0 5px #ccc;
background: -moz-linear-gradient(#bbb, #eee);
background: -ms-linear-gradient(#bbb, #eee);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));
background: -webkit-linear-gradient(#bbb, #eee);
background: -o-linear-gradient(#bbb, #eee);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";
background: linear-gradient(#bbb, #eee);
}
.progress {
cursor: pointer;
}
#reda{background:#6BB89D;display:block;position:absolute;top:0;right:24px;margin:0 0 0 24px;}#info::after{clear:both; display:block; content:' ';}
#close{background:#6E91B4;position: absolute;display: block;top:0;font-weight:900;font-size: 24px;font-family: serif;}
.save{background: #6BB89D;z-index:999;text-transform:uppercase;width: 240px;top:0;left:50%;position:fixed;margin:0 0 0 -120px;}
.add{top:0;background-position: 1px 1px;}
.add:hover{background-color: #35FFB8;}
.rem{top:24px;background-position: 1px -20px;}
.rem:hover{background-color: #FF3568;}
.w24{width: 24px;right:0;height: 24px;
}
.wbg {
display: block;
position: absolute;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAiCAMAAABodAmPAAAAM1BMVEUAAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQED////daNdfAAAAD3RSTlMAVWJyeYSlrL3GytPf6OstfOOKAAAARUlEQVR42t3RJQKAUAwA0O8yvf9pcQpOQl6ZpImZJdVkJm9s5joSVZnSbEhXaLvp4whVcUr9m3cPpQTzX8ArcOOb1q3YFtQWCZFg+shnAAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-color: #6BB89D;
z-index: 1;
font-size: 0;
}
button::-moz-focus-inner {
border: 0;
}
:focus {outline: none;}
.remove{position:absolute;color:#777;top:0;left:0;padding:0 12px;text-indent: -9999px;}
#info-text{padding:0 24px 24px;}
#infoc{width: 100%; height: 24px;background:#6E91B4;cursor: pointer;}
#info span{text-align:right; padding: 0 24px;}
#info{background:#fff;border-radius: 3px;z-index:777;font-size:0.75em;line-height:2;text-align:center;font-family: 'Sarpanch', Arial, sans-serif;display: block; position:fixed;top:24px;width:100%;left:50%;margin:0 0 0 -50%;border-left:1px solid #eee;box-sizing: border-box;-webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);}
.blokas:hover{background:#cde;}
.kCell select {width: 100%;}
@media only screen and (max-width : 960px) {
.remove{display: none;}
#upload_form {
display: none;
}
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
JAVASCRIPT
$(function() {
"use strict";
var ef;
var cssId = "styl";
if (!document.getElementById(cssId)) {
var head = document.getElementsByTagName("head")[0];
var link = document.createElement("link");
link.id = cssId;
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css?v=2";
link.media = "all";
head.appendChild(link);
document.oncontextmenu = function() {
return false;
};
}
$("ul, li, #sort").disableSelection();
$(".blokas:first-child").prepend(
'<button id="close" class="shd brdr w24" href="#">i</button>'
);
$("body").prepend(
'<div id="info" style="display:none"><div id="infoc"><span class="btn brdr shd">Uždaryti ✖</span></div><div id="info-text">CV šablonų kūrėjas. Neuždaryti lango kol neišsaugoma, nes jokia informacija nėra išsaugoma duomenų bazėje. Išsaugoti tekstą reikia paspausti \'Enter\' Blokus galima sukeisti, du kartus spragtelėjus pelės klavišu keičiami kalbų lygiai. Galima \'inspektinti\' ir keisti betkokį tekstą naršyklėje dažniausia nuspaudus F12. Nuotraukos dydis turėtų būti 120x120 pikselių. Kiek galima sumažinti nuotraukos failo dydį. Jeigu nėra darbo patirties galima ištrinti bloką. Naršyklė Internet Explorer nepalaikoma. Išsaugotą CV galima naršyklėje išsaugoti PDF formatu paspaudus \'print\' ir \'print to file\'. Visi mygtukai bus ištrinti išsaugant CV. <a href="http://burundukas.lt/cv-maker1/index.html" target="_blank">Senoji versija!</a> Šabloną galima parsiūsti <a href="http://burundukas.lt/cv-maker/template.html" target="_blank">Čia</a></div></div>'
),
$("body").prepend(
'<a class="share shd brdr btn" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fburundukas.lt%2Fcv-maker%2Findex.html&src=sdkpreparse" style="position:fixed;width:96px; color:#fff !important;top: 0;right:0;z-index: 999; background: #4867AA url(fb.png) no-repeat center left;">Dalintis</a>'
);
$("body").prepend(
'<button onclick="htmls()" name="button" class="save brdr shd">Išsaugoti CV</button>'
);
$(".toka").prepend(
'<button class="shd brdr wbg w24 add" id="dubl" name="button">+</button><button class="shd brdr wbg w24 rem" id="dubl6" name="button">-</button>'
);
$(".topr").prepend(
'<button class="shd brdr wbg w24 add" id="dubl1" name="button">+</button><button class="shd brdr wbg w24 rem" id="dubl7" name="button">-</button>'
);
$("#darb").prepend(
'<button id="reda" class="brdr shd">Ištrinti</button><button class="shd brdr wbg w24 add" id="dubl2" name="button">+</button><button class="shd brdr wbg w24 rem" id="dubl4" name="button">-</button>'
);
$("#prof").prepend(
'<button class="shd brdr wbg w24 add" id="dubl3" name="button">+</button><button class="shd brdr wbg w24 rem" id="dubl5" name="button">-</button>'
);
$("#close,#infoc").on("click", function(e) {
e.preventDefault();
$("#info").css(
"display",
$("#info").css("display") === "none" ? "" : "none"
);
});
var refresh = function refresh() {
var my = $(".kCell,h3,.percent");
var i = 1;
my.each(function() {
var ei = this.className;
var er = ei.split(" ").pop();
er = er.substring(0, 3);
if (er !== "scs") {
ei = ei + " scs" + i++;
$(this).attr("class", ei);
} else {
ei = ei.replace(/[0-9]/g, "");
$(this).attr("class", ei + i++);
}
});
};
refresh();
var btnud =
'<div id="fakebtn" class="brdr">Įkelti failą<input id="image_file" name="image_file" onchange="fileSelected();" type="file"></div>';
var stre =
'<div id="dele"><form action="" enctype="multipart/form-data" id="upload_form" method="post" name="upload_form"><div id="fileinfo"><div id="filename"></div><div id="filesize"></div><div id="filetype"></div><div id="filedim"></div></div><div id="error">Failas nepalaikomas! bmp, gif, jpeg, png, tiff</div><div id="error2">An error occurred while uploading the file</div><div id="abort">The upload has been canceled</div><div id="warnsize">Failas per didelis!</div><div id="progress_info"><div id="progress"></div><div id="progress_percent"> </div><div class="clear_both"></div><div><div id="speed"> </div><div id="remaining"> </div><div id="b_transfered"> </div><div class="clear_both"></div></div><div id="upload_response"></div></div></form></div>';
$("#header").prepend(stre);
$("#photo").prepend(btnud);
$("body").on("click", ".progress", function(e) {
e.preventDefault();
var classes = [
"bar c00",
"bar c10",
"bar c20",
"bar c30",
"bar c40",
"bar c50",
"bar c60",
"bar c70",
"bar c80",
"bar c90",
"bar c100"
];
$(this)
.children(".bar")
.each(function() {
this.className =
classes[($.inArray(this.className, classes) + 1) % classes.length];
});
});
$("#cv").sortable({
helper: "clone",
forceHelperSize: !1,
axis: "y"
});
var focused = document.activeElement;
function outf() {
$("#cv input").replaceWith(function() {
if (this.id) {
var id = this.id;
}
if (this.id === "email") {
return $("<a />")
.attr({
class: this.className,
href: "mailto:" + $(this).val() + "?subject=Darbas"
})
.text($(this).val());
} else {
return $("<h3 />")
.attr({
class: this.className,
id: id
})
.text($(this).val());
}
});
}
$("body").on("click", "#dubl", function() {
$(".kBody.kalbos>div.kRow:last-child")
.clone()
.insertAfter(".kBody.kalbos>div.kRow:last-child");
refresh();
});
$("body").on("click", "#dubl1", function() {
$(".kBody.pkalbos>div.kRow:last-child")
.clone()
.insertAfter(".kBody.pkalbos>div.kRow:last-child");
refresh();
});
$("body").on("click", "#dubl2", function(e) {
var kiekid = document.getElementsByClassName("darb").length;
e.preventDefault();
$("#darb")
.clone()
.attr({
class: "darb",
id: "darb" + ++kiekid
})
.insertAfter("#darb");
refresh();
});
$("body").on("click", "#dubl3", function() {
var kiekid = $(".prof").length;
$("#prof")
.clone()
.attr({
class: "prof",
id: "prof" + ++kiekid
})
.insertAfter("#prof");
refresh();
});
$("body").on("click", "#dubl4", function(e) {
e.preventDefault();
var divs = document.getElementsByClassName("darb").length;
if (divs > 1) {
$("#darb" + divs--).remove();
}
});
$("body").on("click", "#dubl5", function(e) {
e.preventDefault();
var divs = document.getElementsByClassName("prof").length;
if (divs > 1) {
$("#prof" + divs--).remove();
}
});
$("body").on("click", "#dubl6", function(e) {
e.preventDefault();
var divs = $(".kBody.kalbos>div.kRow").length;
if (divs > 3) {
--divs;
$(".kBody.kalbos>div.kRow:last-child").remove();
}
});
$("body").on("click", "#dubl7", function(e) {
e.preventDefault();
var divs = $(".kBody.pkalbos>div.kRow").length;
if (divs > 1) {
--divs;
$(".kBody.pkalbos>div.kRow:last-child").remove();
}
});
$("body").on("mousedown", ".percent", function(e) {
e.preventDefault();
if (e.button == 2) {
var ek = $(this).attr("class");
ef = ek.split(/[, ]+/).pop();
$("." + ef + "").replaceWith(function() {
return $("<input />")
.val($(this).text())
.attr({
autofocus: "",
class: ek,
type: "text"
});
});
$("." + ef + "").select();
$("." + ef + "").focus();
return false;
}
return true;
});
$("body").on("click", "h3", function(e) {
e.preventDefault();
if (this.id) {
var id = this.id;
}
var ek = $(this).attr("class");
ef = ek.split(/[, ]+/).pop();
$("." + ef + "").replaceWith(function() {
return $("<input />")
.val($(this).text())
.attr({
autofocus: "",
class: ek,
type: "text",
id: id
});
});
$("." + ef + "").select();
$("." + ef + "").focus();
});
$("body").on("dblclick", "div.kCell.edit", function(e) {
e.preventDefault();
var lygiai =
'<select id="lygis"><option value="A1 – Lūžis">A1 – Lūžis (Breakthrogh)</option><option value="A2 – Pusiaukelė">A2 – Pusiaukelė (Waystage)</option><option value="B1 – Slenkstis"> B1 – Slenkstis (Threshold)</option><option value="B2 – Aukštuma">B2 – Aukštuma (Vantage)</option><option value="C1 – Efektyvus">C1 – Efektyvus (Effective Operational Proficiency)</option><option value="C2 – Meistriškas">C2 – Meistriškas (Mastery)</option></select>';
var ek = $(this).attr("class");
ef = ek.split(/[, ]+/).pop();
$("." + ef + "").empty();
if ($("." + ef + "#lygis").length == !1) {
$("." + ef + "").append(lygiai);
$("." + ef + "")
.children()
.attr("class", ek);
}
});
$("body").on("click", "select", function(e) {
var clicks = $("#lygis").data("clicks", 0);
var wrap = $("#lygis");
var elem = this;
elem.addEventListener("click", function(e) {
e.preventDefault();
var txt = this.value;
wrap.replaceWith(txt);
});
});
$("body").on("click", "#reda", function(e) {
e.preventDefault();
$("#darb")
.parent()
.remove();
});
$(document).keyup(function(e) {
if ($("input:focus") && e.keyCode === 13) {
outf();
}
});
});
var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576;
var oTimer = 0;
var sResultFileSize = "";
function secondsToTime(secs) {
var hr = Math.floor(secs / 3600);
var min = Math.floor((secs - hr * 3600) / 60);
var sec = Math.floor(secs - hr * 3600 - min * 60);
if (hr < 10) {
hr = "0" + hr;
}
if (min < 10) {
min = "0" + min;
}
if (sec < 10) {
sec = "0" + sec;
}
if (hr) {
hr = "00";
}
return hr + ":" + min + ":" + sec;
}
function bytesToSize(bytes) {
var sizes = ["Bytes", "KB", "MB"];
if (bytes == 0) return "n/a";
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return (bytes / Math.pow(1024, i)).toFixed(1) + " " + sizes[i];
}
function fileSelected() {
document.getElementById("fileinfo").style.display = "none";
document.getElementById("upload_response").style.display = "none";
document.getElementById("error").style.display = "none";
document.getElementById("error2").style.display = "none";
document.getElementById("abort").style.display = "none";
document.getElementById("warnsize").style.display = "none";
var oFile = document.getElementById("image_file").files[0];
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (!rFilter.test(oFile.type)) {
document.getElementById("error").style.display = "block";
return;
}
if (oFile.size > iMaxFilesize) {
document.getElementById("warnsize").style.display = "block";
return;
}
var oImage = document.getElementById("preview");
var oReader = new FileReader();
oReader.onload = function(e) {
oImage.src = e.target.result;
oImage.onload = function() {
sResultFileSize = bytesToSize(oFile.size);
document.getElementById("fileinfo").style.display = "block";
document.getElementById("filename").innerHTML = "Name: " + oFile.name;
document.getElementById("filesize").innerHTML =
"Size: " + sResultFileSize;
document.getElementById("filetype").innerHTML = "Type: " + oFile.type;
document.getElementById("filedim").innerHTML =
"Dimension: " + oImage.naturalWidth + " x " + oImage.naturalHeight;
};
};
oReader.readAsDataURL(oFile);
}
function startUploading() {
iPreviousBytesLoaded = 0;
document.getElementById("upload_response").style.display = "none";
document.getElementById("error").style.display = "none";
document.getElementById("error2").style.display = "none";
document.getElementById("abort").style.display = "none";
document.getElementById("warnsize").style.display = "none";
document.getElementById("progress_percent").innerHTML = "";
var oProgress = document.getElementById("progress");
oProgress.style.display = "block";
oProgress.style.width = "0px";
var vFD = new FormData(document.getElementById("upload_form"));
var oXHR = new XMLHttpRequest();
oXHR.upload.addEventListener("progress", uploadProgress, !1);
oXHR.addEventListener("load", uploadFinish, !1);
oXHR.addEventListener("error", uploadError, !1);
oXHR.addEventListener("abort", uploadAbort, !1);
oXHR.open("POST", "upload.php");
oXHR.send(vFD);
oTimer = setInterval(doInnerUpdates, 300);
}
function doInnerUpdates() {
var iCB = iBytesUploaded;
var iDiff = iCB - iPreviousBytesLoaded;
if (iDiff == 0) return;
iPreviousBytesLoaded = iCB;
iDiff = iDiff * 2;
var iBytesRem = iBytesTotal - iPreviousBytesLoaded;
var secondsRemaining = iBytesRem / iDiff;
var iSpeed = iDiff.toString() + "B/s";
if (iDiff > 1024 * 1024) {
iSpeed =
(Math.round((iDiff * 100) / (1024 * 1024)) / 100).toString() + "MB/s";
} else if (iDiff > 1024) {
iSpeed = (Math.round((iDiff * 100) / 1024) / 100).toString() + "KB/s";
}
document.getElementById("speed").innerHTML = iSpeed;
document.getElementById("remaining").innerHTML =
"| " + secondsToTime(secondsRemaining);
}
function uploadProgress(e) {
if (e.lengthComputable) {
iBytesUploaded = e.loaded;
iBytesTotal = e.total;
var iPercentComplete = Math.round((e.loaded * 100) / e.total);
var iBytesTransfered = bytesToSize(iBytesUploaded);
document.getElementById("progress_percent").innerHTML =
iPercentComplete.toString() + "%";
document.getElementById("progress").style.width =
(iPercentComplete * 4).toString() + "px";
document.getElementById("b_transfered").innerHTML = iBytesTransfered;
if (iPercentComplete == 100) {
var oUploadResponse = document.getElementById("upload_response");
oUploadResponse.innerHTML = "<h1>Please wait...processing</h1>";
oUploadResponse.style.display = "block";
}
} else {
document.getElementById("progress").innerHTML = "unable to compute";
}
}
function uploadFinish(e) {
var oUploadResponse = document.getElementById("upload_response");
oUploadResponse.innerHTML = e.target.responseText;
oUploadResponse.style.display = "block";
document.getElementById("progress_percent").innerHTML = "100%";
document.getElementById("progress").style.width = "400px";
document.getElementById("filesize").innerHTML = sResultFileSize;
document.getElementById("remaining").innerHTML = "| 00:00:00";
clearInterval(oTimer);
}
function uploadError(e) {
document.getElementById("error2").style.display = "block";
clearInterval(oTimer);
}
function uploadAbort(e) {
document.getElementById("abort").style.display = "block";
clearInterval(oTimer);
}
function download(fileName, html) {
var pom = document.createElement("a");
document.body.appendChild(pom);
pom.setAttribute(
"href",
"data:text/plain;charset=utf-8," + encodeURIComponent(html)
);
pom.setAttribute("download", fileName + ".html");
pom.target = "_blank";
if (document.createEvent) {
var event = document.createEvent("MouseEvents");
event.initEvent("click", !0, !0);
pom.dispatchEvent(event);
} else {
pom.click();
}
}
function htmls() {
var ceds = document
.getElementById("vardas")
.childNodes[0].nodeValue.replace(/\s/g, "_");
$("button,.share,#dele,#fakebtn,#dubl,.remove,#info,#close").remove();
$("script").remove();
$("link")
.last()
.remove();
var html = $("html").clone();
var htmlString = html.html();
htmlString = '<!DOCTYPE html>\n<html lang="lt">\n' + htmlString.replace(/(\r\n|\n|\r)/gm," ") + "</html>";
download(ceds, htmlString);
}
