test
This commit is contained in:
fencl
21
ADF/LICENSE
Normal file
21
ADF/LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Eliseo Papa
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
65
ADF/README.md
Normal file
65
ADF/README.md
Normal file
@@ -0,0 +1,65 @@
|
||||
# markdown-cv
|
||||
|
||||
A curriculum vitae maintained in plain text and rendered to HTML and PDF using CSS.
|
||||
|
||||
For more details, see the [project page](http://elipapa.github.io/markdown-cv), or the blog post on [why I switched to markdown for my CV](http://elipapa.github.io/blog/why-i-switched-to-markdown-for-my-cv.html).
|
||||
|
||||
***
|
||||
|
||||
## Customization
|
||||
|
||||
Simply [fork the markdown-cv repo](https://github.com/elipapa/markdown-cv)
|
||||
|
||||
|
||||
|
||||
and edit the `index.md` file [directly in Github](https://help.github.com/articles/editing-files-in-your-repository/)
|
||||
|
||||
|
||||
|
||||
adding your skills, jobs and education.
|
||||
|
||||
|
||||
|
||||
## Distribution
|
||||
|
||||
To transform your plain text CV into a beautiful and shareable HTML page, you have two options:
|
||||
|
||||
### I. Use Github Pages to publish it online
|
||||
|
||||
1. Delete the existing `gh-pages` branch from your fork. It will only contain this webpage. You can either use git or [the Github web interface](https://help.github.com/articles/creating-and-deleting-branches-within-your-repository/#deleting-a-branch).
|
||||
2. Create a new branch called `gh-pages`.
|
||||
3. Head to *yourusername*.github.io/markdown-cv to see your CV live.
|
||||
|
||||
Any change you want to make to your CV from then on would have to be done on the `gh-pages` branch and will be immediately rendered by Github Pages.
|
||||
|
||||
### II. Build it locally and print a PDF
|
||||
|
||||
1. To [install jekyll](https://jekyllrb.com/docs/installation/), run `gem install bundler jekyll` from the command line.
|
||||
3. [Clone](https://help.github.com/en/articles/cloning-a-repository) your fork of markdown-cv to your local machine.
|
||||
3. Type `jekyll serve` to render your CV at http://localhost:4000.
|
||||
4. You can edit the `index.md` file and see the changes live in your browser.
|
||||
5. To print a PDF, press <kbd>⌘</kbd> + <kbd>p</kbd>. Print and web CSS media queries should take care of the styling.
|
||||
|
||||
## Styling
|
||||
|
||||
The included CSS will render your CV in two styles:
|
||||
s
|
||||
1. `kjhealy` the original default, inspired by [kjhealy's vita
|
||||
template](https://github.com/kjhealy/kjh-vita).
|
||||
2. `davewhipp` is a tweaked version of `kjhealy`, with bigger fonts and dates
|
||||
right aligned.
|
||||
|
||||
To change the default style, simply change the variable in the
|
||||
`_config.yml` file.
|
||||
|
||||
Any other styling is possible. More CSS style contributions and forks are welcome!
|
||||
|
||||
### Author
|
||||
|
||||
Eliseo Papa ([Twitter](http://twitter.com/elipapa)/[Github](http://github.com/elipapa)/[Website](https://elipapa.github.io)).
|
||||
|
||||
|
||||
|
||||
### License
|
||||
|
||||
[MIT License](https://github.com/elipapa/markdown-cv/blob/master/LICENSE)
|
||||
BIN
ADF/favicon.ico
Normal file
BIN
ADF/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
225
ADF/index.html
225
ADF/index.html
@@ -1,54 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Slider</title>
|
||||
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-slider-pips/1.11.4/jquery-ui-slider-pips.min.css">
|
||||
<link rel="stylesheet" href="styles/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexbox">
|
||||
<div class="flex-item">
|
||||
<div class="h_main">
|
||||
<h3>A.D. mood! make my life easier</h3>
|
||||
<div class="mood-box">
|
||||
<div class="face-wrapper">
|
||||
<div id="eyes" class="case3">
|
||||
<div class="eyebrow left"></div>
|
||||
<div class="eye left">
|
||||
<div class="eyelid"></div>
|
||||
</div>
|
||||
<div class="bottomlid left"></div>
|
||||
<div class="eyebrow right"></div>
|
||||
<div class="eye right">
|
||||
<div class="eyelid"></div>
|
||||
</div>
|
||||
<div class="bottomlid right"></div>
|
||||
</div>
|
||||
<div id="mouth" class="case3">
|
||||
<div id="mouth-open"></div>
|
||||
</div>
|
||||
<div id="face-bg" class="case3">
|
||||
<div class="face-light"></div>
|
||||
<div class="cow">
|
||||
🐄 <!-- Můžete nahradit ikonou krávy nebo obrázkem krávy podle potřeby -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="amount" style="font-size: 18px;"></div>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<h4>jak se dneska máš pšouku?</h4>
|
||||
<div id="slider"></div>
|
||||
<div id="text_ad"></div>
|
||||
</div>
|
||||
</div></div>
|
||||
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-slider-pips/1.11.4/jquery-ui-slider-pips.min.js"></script>
|
||||
<script src="/scripts/script.js"></script>
|
||||
</body>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=utf-8 name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title> Martin Fencl's CV | CV</title>
|
||||
<link href="media/kjhealy-screen.css" type="text/css" rel="stylesheet" media="screen">
|
||||
<link href="media/kjhealy-print.css" type="text/css" rel="stylesheet" media="print">
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<div id="content">
|
||||
<h1 id="martin-fencl">Martin Fencl</h1>
|
||||
<p>Software test developer, Python engineer, HW tester.</p>
|
||||
|
||||
<div id="webaddress">
|
||||
<a href="martin@martinfencl.eu">martin@martinfencl.eu</a>
|
||||
| <a href="https://www.linkedin.com/in/martin-fencl-6a9795189/">My linkedin page</a>
|
||||
</div>
|
||||
|
||||
<div style="position:absolute; top: 125px; left:33.5%;">
|
||||
<img src="https://media-exp1.licdn.com/dms/image/C4D03AQHf42s9PdItiQ/profile-displayphoto-shrink_800_800/0/1649094514688?e=2147483647&v=beta&t=dzRGhT5vQ_64piZjueEWZvFbEpyOczqQ6bkrHRQvDWs" width="200" height="200" />
|
||||
</div>
|
||||
|
||||
<p><br /></p>
|
||||
<p><br /></p>
|
||||
|
||||
<p>
|
||||
</p>
|
||||
|
||||
<p><br /></p>
|
||||
|
||||
<p>
|
||||
</p>
|
||||
|
||||
<p><br /></p>
|
||||
|
||||
<h2 id="currently">Currently</h2>
|
||||
|
||||
<p><strong>I work as a freelancer and I’m searching for interesting projects that I would enjoy.</strong></p>
|
||||
|
||||
<h3 id="interest-in">Interest in</h3>
|
||||
|
||||
<ul>
|
||||
<li>Robotics <br />
|
||||
– autonomous projects <br />
|
||||
– DYI projects (modeling drones, aircraft …) <br />
|
||||
– automation (home security system, DYI projects) <br /></li>
|
||||
<li>Linux-based systems (preferring Debian-Based)</li>
|
||||
<li>Dockerizing <br />
|
||||
– docker, docker-compose <br />
|
||||
– kubernetes <br /></li>
|
||||
<li>Cryptography (YubiKey) <br />
|
||||
– OATH – HOTP <br />
|
||||
– OATH – TOTP <br />
|
||||
– FIDO U2F, FIDO2 (WebAuthn)<br /></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="education">Education</h2>
|
||||
|
||||
<p><code class="language-plaintext highlighter-rouge">2008-2012</code></p>
|
||||
<p><br /></p>
|
||||
<p><strong>Completion of the study program in the field of Electronics Mechanics</strong></p>
|
||||
<ul>
|
||||
<li>High School of Electrical Engineering, Hluboká nad Vltavou (Czechia)</li>
|
||||
<li>Level EQF 4</li>
|
||||
</ul>
|
||||
|
||||
<p><code class="language-plaintext highlighter-rouge">2013-2018</code></p>
|
||||
<p><br /></p>
|
||||
<p><strong>Completion of the study program in the field of Applied Electrical Engineering</strong></p>
|
||||
<ul>
|
||||
<li>University of West Bohemia, Faculty of Electrical Engineering, Pilsen (Czechia)</li>
|
||||
<li>Level EQF 6</li>
|
||||
</ul>
|
||||
|
||||
<p><code class="language-plaintext highlighter-rouge">2018-2020</code></p>
|
||||
<p><br /></p>
|
||||
<p><strong>Completion of the study program in the field of commercial electrical engineering</strong></p>
|
||||
<ul>
|
||||
<li>University of West Bohemia, Faculty of Electrical Engineering, Pilsen (Czechia)</li>
|
||||
<li>Level EQF 7</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="work-experience">Work Experience</h2>
|
||||
<p><code class="language-plaintext highlighter-rouge">2013-2013</code></p>
|
||||
<p><br /></p>
|
||||
<p><strong>IT service worker / support</strong></p>
|
||||
<ul>
|
||||
<li><em>Karel Peisker</em>, Budweis (Czechia)</li>
|
||||
<li>Network service, user interface security</li>
|
||||
</ul>
|
||||
|
||||
<p><code class="language-plaintext highlighter-rouge">2016-2017</code></p>
|
||||
<p><br /></p>
|
||||
<p><strong>Development programmer - development department (internship)</strong></p>
|
||||
<ul>
|
||||
<li><em>Robert Bosch, spol. s.r.o.</em>, Budweis (Czechia)</li>
|
||||
<li>Programming of laboratory instruments</li>
|
||||
<li>Development department assistance</li>
|
||||
</ul>
|
||||
|
||||
<p><em>technologies / tools used:</em> <br />
|
||||
– LabView <br />
|
||||
– Python <br /></p>
|
||||
|
||||
<p><code class="language-plaintext highlighter-rouge">2017-2020</code></p>
|
||||
<p><br /></p>
|
||||
<p><strong>Development programmer - technology department (internship)</strong></p>
|
||||
<ul>
|
||||
<li><em>Robert Bosch, spol. s.r.o.</em>, Budweis (Czechia)</li>
|
||||
<li>Programming of laboratory measuring devices</li>
|
||||
<li>Testing of laboratory equipment, proposal for improvement and calibration</li>
|
||||
<li>Analysis and work with data</li>
|
||||
</ul>
|
||||
|
||||
<p><em>technologies / tools used:</em> <br />
|
||||
– Git <br />
|
||||
– LabVIEW <br />
|
||||
– Python <br />
|
||||
– Visual Basic for Applications (VBA) <br />
|
||||
– Structured Text (ST) <br />
|
||||
– 3D printing (SLA, DMLS) <br />
|
||||
– Measuring and analysis technology <br /></p>
|
||||
|
||||
<p><code class="language-plaintext highlighter-rouge">2017-2020</code></p>
|
||||
<p><br /></p>
|
||||
<p><strong>Software test engineer – DITET5 (Schweinfurth team for EMF projects)</strong></p>
|
||||
<ul>
|
||||
<li><em>ZF Engineering Pilsen, spol. s.r.o.</em>, Pilsen (Czechia)</li>
|
||||
<li>Testing of hybrid automotive units (8P4G project)</li>
|
||||
<li>Creating automation tests, regression tests</li>
|
||||
<li>Manual testing of internal software (EMF)</li>
|
||||
<li>Problem analysis, consulting of status SW</li>
|
||||
</ul>
|
||||
|
||||
<p><em>technologies / tools used:</em> <br />
|
||||
– Dspace SCALEXIO (rapid control prototyping (RCP) applications) <br />
|
||||
– Exam (test extension/orchestrator) <br />
|
||||
– Python <br /></p>
|
||||
|
||||
<p><code class="language-plaintext highlighter-rouge">2020-</code></p>
|
||||
<p><br /></p>
|
||||
<p><strong>Software test developer</strong></p>
|
||||
<ul>
|
||||
<li><em>W.A.G. payment solutions, a.s., Princip, a.s.</em>, Prague (Czechia)</li>
|
||||
<li>Creating, develop and maintain software unit project for testing (SwMU)</li>
|
||||
<li>Modified existing software to detect and correct errors, improve performance, and upgrade interfaces (cooperating with sw-team)</li>
|
||||
<li>Prepared reports on specifications and activities for each project.</li>
|
||||
<li>Designed web applications (interface for support SwMU project)</li>
|
||||
</ul>
|
||||
|
||||
<p><em>technologies / tools used:</em> <br />
|
||||
– Apache Kafka (event streaming platform) <br />
|
||||
– Python <br />
|
||||
– Git <br />
|
||||
– Flask, Flask-RestAPI <br />
|
||||
– Django <br />
|
||||
– Docker, Docker-compose <br />
|
||||
– Helm, Skaffold <br />
|
||||
– Kubernetes (and local minikube) <br /></p>
|
||||
|
||||
<div style="position:static;bottom: 0px; left:0px;">
|
||||
<button onclick="history.back()">Go Back</button>
|
||||
</div>
|
||||
|
||||
<!-- ### Footer
|
||||
|
||||
Last updated: May 2013 -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
194
ADF/media/davewhipp-print.css
Normal file
194
ADF/media/davewhipp-print.css
Normal file
@@ -0,0 +1,194 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, 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;
|
||||
}
|
||||
|
||||
/* end of reset */
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font: normal normal 400;
|
||||
font-size: 12pt;
|
||||
line-height: 1.35em;
|
||||
/*also written as... font: normal normal 400 100%/1.5em;*/
|
||||
font-family: Avenir,Verdana,sans-serif;
|
||||
/*margin-top: 1em;
|
||||
margin-left: 1em;*/
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
left: 25%;
|
||||
margin-bottom: 0.2em;
|
||||
margin-right: 0;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
code {
|
||||
font: normal normal;
|
||||
font-size: 90%;
|
||||
/*line-height: 1em;*/
|
||||
font-family: Monaco,Menlo,monospace,sans-serif;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
p code {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
right: -20%;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 75%;
|
||||
margin-bottom: 1em;
|
||||
/*margin-top: -0.5em;*/
|
||||
}
|
||||
|
||||
/*uncomment to get dashes in the list*/
|
||||
/*li:before {
|
||||
content: "-";
|
||||
position: relative;
|
||||
left: -0.25em;
|
||||
}*/
|
||||
|
||||
li {
|
||||
/*second line indent*/
|
||||
padding-left: 1.25em;
|
||||
text-indent: -1.25em;
|
||||
/*color: #777;*/
|
||||
}
|
||||
|
||||
li ul {
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-weight: 400;
|
||||
font-family: Avenir,Cousine,Verdana,sans-serif;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
font-size: 3em;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
h1+p {
|
||||
/*subtitle*/
|
||||
font-style: italic;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.1em;
|
||||
color: #a00;
|
||||
margin-top: 2em;
|
||||
position: relative;
|
||||
top: 1.2em;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
color: #ccc;
|
||||
position: relative;
|
||||
top: 1.6em;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#39f
|
||||
}
|
||||
|
||||
#webaddress {
|
||||
margin-top: 1em;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
color: #ccc;
|
||||
font-family: Monaco,Menlo,monospace,sans-serif;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
#webaddress a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: #2d4e5e
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#ghbutton {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
195
ADF/media/davewhipp-screen.css
Normal file
195
ADF/media/davewhipp-screen.css
Normal file
@@ -0,0 +1,195 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, 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;
|
||||
}
|
||||
|
||||
/* end of reset */
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font: normal normal 400;
|
||||
font-size: 100%;
|
||||
line-height: 1.5em;
|
||||
/*also written as... font: normal normal 400 100%/1.5em;*/
|
||||
font-family: Avenir,Verdana,sans-serif;
|
||||
margin-top: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
left: 25%;
|
||||
margin-bottom: 0.7em;
|
||||
margin-right: 0;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
code {
|
||||
font: normal normal;
|
||||
font-size: 90%;
|
||||
/*line-height: 1em;*/
|
||||
font-family: Monaco,Menlo,monospace,sans-serif;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
p code {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
right: -20%;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 75%;
|
||||
margin-bottom: 1.5em;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
|
||||
/*uncomment to get dashes in the list*/
|
||||
/*li:before {
|
||||
content: "-";
|
||||
position: relative;
|
||||
left: -0.25em;
|
||||
}*/
|
||||
|
||||
li {
|
||||
/*second line indent*/
|
||||
padding-left: 1.25em;
|
||||
text-indent: -1.25em;
|
||||
/*color: #777;*/
|
||||
}
|
||||
|
||||
li ul {
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-weight: 400;
|
||||
font-family: Avenir,Cousine,Verdana,sans-serif;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
font-size: 3em;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
}
|
||||
|
||||
h1+p {
|
||||
/*subtitle*/
|
||||
font-style: italic;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.1em;
|
||||
color: #bc412b;
|
||||
margin-top: 3em;
|
||||
position: relative;
|
||||
top: 1.4em;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
top: 1.7em;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
/*text-decoration:none*/
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#39f
|
||||
}
|
||||
|
||||
#webaddress {
|
||||
margin-top: 1em;
|
||||
position: relative;
|
||||
left: 25%;
|
||||
color: #bc412b;
|
||||
font-family: Monaco,Menlo,monospace,sans-serif;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
#webaddress a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
em {
|
||||
/* font-weight: bold; */
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#address {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
@media only screen and (max-width: 480px) {
|
||||
make one column somehow...
|
||||
}*/
|
||||
194
ADF/media/kjhealy-print.css
Normal file
194
ADF/media/kjhealy-print.css
Normal file
@@ -0,0 +1,194 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, 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;
|
||||
}
|
||||
|
||||
/* end of reset */
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font: normal normal 400;
|
||||
font-size: 10pt;
|
||||
line-height: 1.35em;
|
||||
/*also written as... font: normal normal 400 100%/1.5em;*/
|
||||
font-family: Verdana,sans-serif;
|
||||
/*margin-top: 1em;
|
||||
margin-left: 1em;*/
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
left: 28%;
|
||||
margin-bottom: 0.2em;
|
||||
margin-right: 0;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
code {
|
||||
font: normal normal;
|
||||
font-size: 60%;
|
||||
/*line-height: 1em;*/
|
||||
font-family: Menlo,monospace,sans-serif;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
p code {
|
||||
position: absolute;
|
||||
left: -11%;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
left: 28%;
|
||||
width: 65%;
|
||||
margin-bottom: 1em;
|
||||
/*margin-top: -0.5em;*/
|
||||
}
|
||||
|
||||
/*uncomment to get dashes in the list*/
|
||||
/*li:before {
|
||||
content: "-";
|
||||
position: relative;
|
||||
left: -0.25em;
|
||||
}*/
|
||||
|
||||
li {
|
||||
/*second line indent*/
|
||||
padding-left: 1.25em;
|
||||
text-indent: -1.25em;
|
||||
/*color: #777;*/
|
||||
}
|
||||
|
||||
li ul {
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-weight: 400;
|
||||
font-family: Cousine,Verdana,sans-serif;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
font-size: 3em;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: 28%;
|
||||
}
|
||||
|
||||
h1+p {
|
||||
/*subtitle*/
|
||||
font-style: italic;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.1em;
|
||||
color: #a00;
|
||||
margin-top: 2em;
|
||||
position: relative;
|
||||
top: 1.2em;
|
||||
text-align: right;
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
color: #ccc;
|
||||
position: relative;
|
||||
top: 1.6em;
|
||||
text-align: right;
|
||||
width: 18%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#39f
|
||||
}
|
||||
|
||||
#webaddress {
|
||||
margin-top: 1em;
|
||||
position: relative;
|
||||
left: 28%;
|
||||
color: #ccc;
|
||||
font-family: Menlo,monospace,sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#webaddress a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
color: #2d4e5e
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#ghbutton {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
196
ADF/media/kjhealy-screen.css
Normal file
196
ADF/media/kjhealy-screen.css
Normal file
@@ -0,0 +1,196 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
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;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, 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;
|
||||
}
|
||||
|
||||
/* end of reset */
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font: normal normal 400;
|
||||
font-size: 80%;
|
||||
line-height: 1.5em;
|
||||
/*also written as... font: normal normal 400 100%/1.5em;*/
|
||||
font-family: Verdana,sans-serif;
|
||||
margin-top: 1em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
left: 33%;
|
||||
margin-bottom: 0.7em;
|
||||
margin-right: 0;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
code {
|
||||
font: normal normal;
|
||||
font-size: 75%;
|
||||
/*line-height: 1em;*/
|
||||
font-family: Menlo,monospace,sans-serif;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
p code {
|
||||
position: absolute;
|
||||
left: -14%;
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
left: 33%;
|
||||
width: 65%;
|
||||
margin-bottom: 1.5em;
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
|
||||
/*uncomment to get dashes in the list*/
|
||||
/*li:before {
|
||||
content: "-";
|
||||
position: relative;
|
||||
left: -0.25em;
|
||||
}*/
|
||||
|
||||
li {
|
||||
/*second line indent*/
|
||||
padding-left: 1.25em;
|
||||
text-indent: -1.25em;
|
||||
/*color: #777;*/
|
||||
}
|
||||
|
||||
li ul {
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-weight: 400;
|
||||
font-family: Cousine,Verdana,sans-serif;
|
||||
width: 65%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
font-size: 3em;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: 33%;
|
||||
}
|
||||
|
||||
h1+p {
|
||||
/*subtitle*/
|
||||
font-style: italic;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.1em;
|
||||
color: #a00;
|
||||
margin-top: 3em;
|
||||
position: relative;
|
||||
top: 1.4em;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
top: 1.7em;
|
||||
text-align: right;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
/*text-decoration:none*/
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color:#39f
|
||||
}
|
||||
|
||||
#webaddress {
|
||||
position: relative;
|
||||
left: 33%;
|
||||
margin-bottom: 0.7em;
|
||||
margin-right: 0;
|
||||
width: 65%;
|
||||
color: #aaa;
|
||||
font-family: Menlo,monospace,sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#webaddress a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
em {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#address {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
@media only screen and (max-width: 480px) {
|
||||
make one column somehow...
|
||||
}*/
|
||||
@@ -1,83 +0,0 @@
|
||||
$(function() {
|
||||
var slider = $("#slider");
|
||||
|
||||
slider.slider({
|
||||
range: "max",
|
||||
min: 1,
|
||||
max: 6,
|
||||
value: 3,
|
||||
slide: function(event, ui) {
|
||||
$("#text_ad").text(getText(ui.value));
|
||||
$("#amount").text(ui.value);
|
||||
localStorage.setItem("sliderValue", ui.value.toString());
|
||||
updateFace(ui.value);
|
||||
}
|
||||
});
|
||||
|
||||
var savedValue = localStorage.getItem("sliderValue");
|
||||
if (savedValue) {
|
||||
slider.slider("value", parseInt(savedValue));
|
||||
$("#text_ad").text(getText(savedValue));
|
||||
$("#amount").text(savedValue);
|
||||
}
|
||||
|
||||
// Manuální spuštění funkce updateFace při načítání stránky
|
||||
updateFace(slider.slider("value"));
|
||||
|
||||
slider.slider('pips', {
|
||||
first: 'pip',
|
||||
last: 'pip',
|
||||
});
|
||||
|
||||
function updateFace(value) {
|
||||
var face = $(".face-wrapper").children();
|
||||
|
||||
switch (value) {
|
||||
case 1:
|
||||
removeClass();
|
||||
$(face).addClass("case1");
|
||||
break;
|
||||
case 2:
|
||||
removeClass();
|
||||
$(face).addClass("case2");
|
||||
break;
|
||||
case 3:
|
||||
removeClass();
|
||||
$(face).addClass("case3");
|
||||
break;
|
||||
case 4:
|
||||
removeClass();
|
||||
$(face).addClass("case4");
|
||||
break;
|
||||
case 5:
|
||||
removeClass();
|
||||
$(face).addClass("case5");
|
||||
break;
|
||||
case 6:
|
||||
removeClass();
|
||||
$(face).addClass("case6");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function removeClass() {
|
||||
$(".face-wrapper").children().removeClass("case1 case2 case3 case4 case5 case6");
|
||||
}
|
||||
|
||||
function getText(value) {
|
||||
switch (parseInt(value)) {
|
||||
case 1:
|
||||
return "1 test";
|
||||
case 2:
|
||||
return "2 test";
|
||||
case 3:
|
||||
return "3 test";
|
||||
case 4:
|
||||
return "4 test";
|
||||
case 5:
|
||||
return "5 test";
|
||||
case 6:
|
||||
return "6 test";
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1,11 +0,0 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
|
||||
const app = express();
|
||||
const port = 3000;
|
||||
|
||||
app.use(express.static(path.join(__dirname, '')));
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`Server běží na http://localhost:${port}`);
|
||||
});
|
||||
@@ -1,474 +0,0 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Baloo");
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
.left {
|
||||
left: 0px;
|
||||
}
|
||||
.right {
|
||||
right: 0px;
|
||||
}
|
||||
html, body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: 'Baloo', cursive;
|
||||
font-size: 1.5em;
|
||||
letter-spacing: .8px;
|
||||
color: tomato;
|
||||
background-color: #4F0E91;
|
||||
}
|
||||
/** FLEXBOX **/
|
||||
.flexbox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
.flexbox .flex-item {
|
||||
padding: 0px 20px;
|
||||
flex: 1 100%;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
/** SLIDER **/
|
||||
#slider {
|
||||
border-radius: 50px;
|
||||
}
|
||||
#slider .ui-slider-handle {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
border-radius: 100%;
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
}
|
||||
#slider .ui-slider-handle:active {
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
#slider.ui-slider {
|
||||
border: 5px solid #fff;
|
||||
background: -webkit-linear-gradient(left, #84b6e5, #ECA58F 50%);
|
||||
}
|
||||
#slider .ui-slider-range-max {
|
||||
border-radius: 50px;
|
||||
background-color: #4F0E91 !important;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-max {
|
||||
background-color: #4F0E91;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-max {
|
||||
background-color: #4F0E91 !important;
|
||||
}
|
||||
.ui-slider-pips .ui-slider-line {
|
||||
background: #fff !important;
|
||||
opacity: .5;
|
||||
width: 5px;
|
||||
border-radius: 50px;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
height: 20px;
|
||||
}
|
||||
.mood-box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
/*********************************** *************FACE ***********************************/
|
||||
.face-wrapper {
|
||||
border: 3px solid #4F0E91;
|
||||
border-radius: 100%;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
animation: neutral 6.5s infinite ease-in-out;
|
||||
}
|
||||
.face-wrapper div {
|
||||
position: absolute;
|
||||
transition: all .8s ease-in-out;
|
||||
}
|
||||
#face-bg {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0px auto;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
position: absolute;
|
||||
background-color: #db9553;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
#face-bg .face-light {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
border-radius: 100%;
|
||||
background-color: #E5B384;
|
||||
}
|
||||
#face-bg.case1 {
|
||||
background-color: #5399db;
|
||||
}
|
||||
#face-bg.case1 .face-light {
|
||||
background: #84b6e5;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
}
|
||||
#face-bg.case2 {
|
||||
background-color: #948d86;
|
||||
}
|
||||
#face-bg.case2 .face-light {
|
||||
background: #A9B5C0;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
top: 0px;
|
||||
left: -20px;
|
||||
}
|
||||
#face-bg.case4 {
|
||||
background-color: #e85b51;
|
||||
}
|
||||
#face-bg.case4 .face-light {
|
||||
background: #ECA58F;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
#face-bg.case5 {
|
||||
background-color: #ff3279;
|
||||
}
|
||||
#face-bg.case5 .face-light {
|
||||
background: #FF80AC;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
bottom: 40px;
|
||||
left: 10px;
|
||||
}
|
||||
#face-bg.case6 {
|
||||
background-color: #ff3279;
|
||||
}
|
||||
#face-bg.case6 .face-light {
|
||||
background: #FF80AC;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
bottom: 40px;
|
||||
left: 10px;
|
||||
}
|
||||
#face-bg.case6 .cow {
|
||||
position: absolute;
|
||||
scale: 1.3;
|
||||
bottom: 10%;
|
||||
left: 90%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 2em;
|
||||
}
|
||||
/*End Face BG*/
|
||||
#eyes {
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
z-index: 2;
|
||||
top: 30%;
|
||||
left: calc(50% - 1.5em);
|
||||
}
|
||||
#eyes .eyebrow {
|
||||
top: -5px;
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
border-radius: 10px 10px 20px 20px;
|
||||
background: #db9553;
|
||||
}
|
||||
#eyes .eyebrow.left {
|
||||
left: calc(-.13em);
|
||||
}
|
||||
#eyes .eyebrow.right {
|
||||
right: calc(-.13em);
|
||||
}
|
||||
#eyes .eye {
|
||||
background: #343838;
|
||||
height: 40px;
|
||||
width: 20px;
|
||||
border-radius: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#eyes .eye .eyelid {
|
||||
background: #db9553;
|
||||
width: 25px;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
height: 0%;
|
||||
border-radius: 100% 100% 0% 0%;
|
||||
animation: blink 10s ease-in 2s infinite;
|
||||
}
|
||||
#eyes.case1 {
|
||||
transform: translateX(0px) translateY(40px);
|
||||
}
|
||||
#eyes.case1 .eyebrow {
|
||||
background: #5399db;
|
||||
border-radius: 0px 0px 100px 100px;
|
||||
z-index: 4;
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
#eyes.case1 .eyebrow.right {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
#eyes.case1 .eyelid {
|
||||
background: #5399db;
|
||||
}
|
||||
#eyes.case1 .bottomlid {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #84b6e5;
|
||||
}
|
||||
#eyes.case2 {
|
||||
transform: translateX(-40px) translateY(20px);
|
||||
}
|
||||
#eyes.case2 .eyebrow {
|
||||
background: #948d86;
|
||||
height: 20px;
|
||||
border-radius: 50px 50px 60px 60px;
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
#eyes.case2 .eyebrow.right {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
#eyes.case2 .eyelid {
|
||||
background: #948d86;
|
||||
}
|
||||
#eyes.case4 {
|
||||
transform: translateX(20px) translateY(-10px);
|
||||
}
|
||||
#eyes.case4 .eyebrow {
|
||||
background: #e85b51;
|
||||
height: 20px;
|
||||
border-radius: 80px 80px 60px 60px;
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
#eyes.case4 .eyebrow.right {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
#eyes.case4 .eyelid {
|
||||
background: #e85b51;
|
||||
}
|
||||
#eyes.case5 {
|
||||
transform: translateX(5px) translateY(-20px);
|
||||
}
|
||||
#eyes.case5 .eye {
|
||||
width: 20px;
|
||||
}
|
||||
#eyes.case5 .eyebrow {
|
||||
background: #ff3279;
|
||||
height: 20px;
|
||||
border-radius: 80px 80px 60px 60px;
|
||||
transform: rotate(-40deg);
|
||||
}
|
||||
#eyes.case5 .eyebrow.right {
|
||||
transform: rotate(40deg);
|
||||
}
|
||||
#eyes.case5 .eyelid {
|
||||
background: #ff3279;
|
||||
}
|
||||
#eyes.case5 .bottomlid {
|
||||
position: absolute;
|
||||
background: #FF80AC;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50px;
|
||||
top: 22px;
|
||||
z-index: 2;
|
||||
}
|
||||
#eyes.case6 {
|
||||
transform: translateX(5px) translateY(-20px);
|
||||
}
|
||||
#eyes.case6 .eye {
|
||||
width: 20px;
|
||||
}
|
||||
#eyes.case6 .eyebrow {
|
||||
background: #ff3279;
|
||||
height: 20px;
|
||||
border-radius: 80px 80px 60px 60px;
|
||||
transform: rotate(-40deg);
|
||||
}
|
||||
#eyes.case6 .eyebrow.right {
|
||||
transform: rotate(40deg);
|
||||
}
|
||||
#eyes.case6 .eyelid {
|
||||
background: #ff3279;
|
||||
}
|
||||
#eyes.case6 .bottomlid {
|
||||
position: absolute;
|
||||
background: #FF80AC;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50px;
|
||||
top: 22px;
|
||||
z-index: 2;
|
||||
}
|
||||
/*End Eyes*/
|
||||
#mouth {
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
z-index: 3;
|
||||
top: 70%;
|
||||
left: calc(50% - 1.5em);
|
||||
position: absolute;
|
||||
background: #db9553;
|
||||
}
|
||||
#mouth #mouth-open {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: -20px;
|
||||
position: absolute;
|
||||
}
|
||||
#mouth.case1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: #343838;
|
||||
transform: translateX(0px) translateY(20px);
|
||||
}
|
||||
#mouth.case1 #mouth-open {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
top: 5px;
|
||||
left: -12px;
|
||||
border-radius: 50%;
|
||||
background: #84b6e5;
|
||||
}
|
||||
#mouth.case2 {
|
||||
width: 50px;
|
||||
height: 4px;
|
||||
border-radius: 50px;
|
||||
background: #343838;
|
||||
transform: translateX(-20px) translateY(0px) rotate(20deg);
|
||||
}
|
||||
#mouth.case3 #mouth-open {
|
||||
display: none;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
border-top: 20px solid #343838;
|
||||
border-left: 40px solid transparent;
|
||||
border-right: 40px solid transparent;
|
||||
top: 0px;
|
||||
left: -12px;
|
||||
border-radius: 0%;
|
||||
}
|
||||
#mouth.case4 {
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
border-radius: 50px;
|
||||
background: #343838;
|
||||
transform: rotate(20deg) translateY(-40px) translateX(40px) scale(0.8);
|
||||
}
|
||||
#mouth.case4 #mouth-open {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: block;
|
||||
border-top: 20px solid #343838;
|
||||
border-left: 40px solid transparent;
|
||||
border-right: 40px solid transparent;
|
||||
top: 0px;
|
||||
left: -12px;
|
||||
border-radius: 10%;
|
||||
}
|
||||
#mouth.case5 {
|
||||
top: 105px;
|
||||
border-radius: 50px;
|
||||
background: #343838;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
#mouth.case5 #mouth-open {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: block;
|
||||
border-top: 20px solid #343838;
|
||||
border-left: 40px solid transparent;
|
||||
border-right: 40px solid transparent;
|
||||
top: 0px;
|
||||
left: -12px;
|
||||
border-radius: 10%;
|
||||
}
|
||||
#mouth.case6 {
|
||||
top: 105px;
|
||||
border-radius: 50px;
|
||||
background: #343838;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
#mouth.case6 #mouth-open {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: block;
|
||||
border-top: 70px solid #343838;
|
||||
border-left: 83px solid transparent;
|
||||
border-right: 70px solid transparent;
|
||||
/* background: #FF80AC;
|
||||
*/
|
||||
border-radius: 10px;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
transform: translateX(-10px) scale(0.8);
|
||||
}
|
||||
/*End Mouth*/
|
||||
/** KEYFRAMES **/
|
||||
@keyframes blink {
|
||||
0% {
|
||||
height: 0%;
|
||||
}
|
||||
5% {
|
||||
height: 100%;
|
||||
}
|
||||
8% {
|
||||
height: 0%;
|
||||
}
|
||||
100% {
|
||||
height: 0%;
|
||||
}
|
||||
}
|
||||
@keyframes neutral {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
90% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-max {
|
||||
background: red;
|
||||
}
|
||||
.ui-slider {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-slider .ui-slider-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.h_main {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1,482 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Baloo');
|
||||
|
||||
$background: #4F0E91;
|
||||
$slider-light: #fff;
|
||||
|
||||
$black: #343838;
|
||||
$orange: #E5B384;
|
||||
$face-shadow: #db9553;
|
||||
|
||||
$pale: #A9B5C0;
|
||||
$pale-shadow: #948d86;
|
||||
|
||||
$pink: #ECA58F;
|
||||
$pink-shadow: #e85b51;
|
||||
|
||||
$darkblue: #84b6e5;
|
||||
$darkblue-shadow: #5399db;
|
||||
|
||||
$red: #FF80AC;
|
||||
$red-shadow: #ff3279;
|
||||
|
||||
*:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.left{
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.right{
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
html,body{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: 'Baloo', cursive;
|
||||
font-size: 1.5em;
|
||||
letter-spacing: .8px;
|
||||
color: tomato;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
/**
|
||||
FLEXBOX
|
||||
**/
|
||||
|
||||
.flexbox{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
transform: translateY(5%);
|
||||
|
||||
.flex-item{
|
||||
padding: 0px 20px;
|
||||
flex: 1 100%;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
SLIDER
|
||||
**/
|
||||
|
||||
#slider{
|
||||
border-radius: 50px;
|
||||
|
||||
.ui-slider-handle{
|
||||
border:none;
|
||||
background-color: $slider-light;
|
||||
border-radius: 100%;
|
||||
cursor: -webkit-grab; cursor:-moz-grab;
|
||||
&:active{
|
||||
cursor: -webkit-grabbing; cursor:-moz-grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
&.ui-slider{
|
||||
border: 5px solid $slider-light;
|
||||
background: -webkit-linear-gradient(left, $darkblue, $pink 50%);;
|
||||
}
|
||||
|
||||
.ui-slider-range-max{
|
||||
border-radius: 50px;
|
||||
background-color: $background !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ui-slider-horizontal .ui-slider-range-max{
|
||||
background-color: $background;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-max{
|
||||
background-color: $background !important;
|
||||
}
|
||||
|
||||
|
||||
.ui-slider-pips .ui-slider-line{
|
||||
background: #fff !important;
|
||||
opacity: .5;
|
||||
width:5px;
|
||||
border-radius: 50px;
|
||||
position:absolute;
|
||||
z-index: -1;
|
||||
height:20px;
|
||||
}
|
||||
|
||||
.mood-box{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
/***********************************
|
||||
*************FACE
|
||||
***********************************/
|
||||
|
||||
|
||||
.face-wrapper{
|
||||
border: 3px solid $background;
|
||||
border-radius: 100%;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
overflow:hidden;
|
||||
z-index:3;
|
||||
margin: 0 auto;
|
||||
position:relative;
|
||||
animation: neutral 6.5s infinite ease-in-out;
|
||||
|
||||
div{
|
||||
position: absolute;
|
||||
transition: all .8s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#face-bg{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0px auto;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
position:absolute;
|
||||
background-color: $face-shadow;
|
||||
z-index: 1;
|
||||
|
||||
|
||||
.face-light{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
border-radius:100%;
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
&.case1{
|
||||
background-color: $darkblue-shadow;
|
||||
.face-light{
|
||||
background: $darkblue;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.case2{
|
||||
background-color: $pale-shadow;
|
||||
.face-light{
|
||||
background: $pale;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
top: 0px;
|
||||
left: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.case4{
|
||||
background-color: $pink-shadow;
|
||||
.face-light{
|
||||
background: $pink;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.case5{
|
||||
background-color: $red-shadow;
|
||||
.face-light{
|
||||
background: $red;
|
||||
border-radius: 100%;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
bottom: 40px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}/*End Face BG*/
|
||||
|
||||
#eyes{
|
||||
width: 50%;
|
||||
height: 20px;
|
||||
z-index: 2;
|
||||
top: 30%;
|
||||
left: calc(50% - 1.5em);
|
||||
|
||||
.eyebrow{
|
||||
top: -5px;
|
||||
width:30px;
|
||||
height:10px;
|
||||
position:absolute;
|
||||
border-radius: 10px 10px 20px 20px;
|
||||
background: $face-shadow;
|
||||
|
||||
&.left{
|
||||
left: calc(-.13em);
|
||||
}
|
||||
|
||||
&.right{
|
||||
right: calc(-.13em);
|
||||
}
|
||||
}
|
||||
|
||||
.eye{
|
||||
background: $black;
|
||||
height: 40px;
|
||||
width: 20px;
|
||||
border-radius: 50px;
|
||||
overflow:hidden;
|
||||
|
||||
.eyelid{
|
||||
background: $face-shadow;
|
||||
width: 25px;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
height: 0%;
|
||||
border-radius: 100% 100% 0% 0%;
|
||||
animation: blink 10s ease-in 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.case1 {
|
||||
transform: translateX(0px) translateY(40px);
|
||||
|
||||
.eyebrow{
|
||||
background:$darkblue-shadow;
|
||||
border-radius: 0px 0px 100px 100px;
|
||||
z-index: 4;
|
||||
transform: rotate(-60deg);
|
||||
|
||||
&.right{
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
}
|
||||
.eyelid{
|
||||
background: $darkblue-shadow;
|
||||
}
|
||||
|
||||
.bottomlid{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: $darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
&.case2{
|
||||
transform: translateX(-40px) translateY(20px);
|
||||
|
||||
.eyebrow{
|
||||
background: $pale-shadow;
|
||||
height: 20px;
|
||||
border-radius: 50px 50px 60px 60px;
|
||||
transform: rotate(-20deg);
|
||||
&.right{
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
}
|
||||
.eyelid{
|
||||
background: $pale-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.case4{
|
||||
transform: translateX(20px) translateY(-10px);
|
||||
|
||||
.eyebrow{
|
||||
background: $pink-shadow;
|
||||
height: 20px;
|
||||
border-radius: 80px 80px 60px 60px;
|
||||
transform: rotate(-20deg);
|
||||
|
||||
&.right{
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
||||
}
|
||||
.eyelid{
|
||||
background: $pink-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&.case5{
|
||||
transform: translateX(5px) translateY(-20px);
|
||||
|
||||
.eye{
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.eyebrow{
|
||||
background: $red-shadow;
|
||||
height: 20px;
|
||||
border-radius: 80px 80px 60px 60px;
|
||||
transform: rotate(-40deg);
|
||||
&.right{
|
||||
transform: rotate(40deg);
|
||||
}
|
||||
}
|
||||
.eyelid{
|
||||
background: $red-shadow;
|
||||
}
|
||||
|
||||
.bottomlid{
|
||||
position:absolute;
|
||||
background: $red;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50px;
|
||||
top: 22px;
|
||||
z-index:2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}/*End Eyes*/
|
||||
|
||||
#mouth{
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
z-index: 3;
|
||||
top: 70%;
|
||||
left: calc(50% - 1.5em);
|
||||
position:absolute;
|
||||
|
||||
background: $face-shadow;
|
||||
|
||||
|
||||
#mouth-open{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
bottom: -20px;
|
||||
position: absolute;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.case1{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background: $black;
|
||||
transform: translateX(0px) translateY(20px);
|
||||
|
||||
#mouth-open{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: block;
|
||||
top: 5px;
|
||||
left: -12px;
|
||||
border-radius: 50%;
|
||||
background: $darkblue;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.case2{
|
||||
width: 50px;
|
||||
height: 4px;
|
||||
border-radius: 50px;
|
||||
background: $black;
|
||||
transform: translateX(-20px) translateY(0px) rotate(20deg);
|
||||
|
||||
#mouth-open{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.case3{
|
||||
#mouth-open{
|
||||
display:none;
|
||||
width:30px;
|
||||
height:40px;
|
||||
border-top: 20px solid $black;
|
||||
border-left: 40px solid transparent;
|
||||
border-right: 40px solid transparent;
|
||||
top: 0px;
|
||||
left: -12px;
|
||||
border-radius: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
&.case4{
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
border-radius: 50px;
|
||||
background: $black;
|
||||
transform: rotate(20deg) translateY(-40px) translateX(40px) scale(.8);
|
||||
|
||||
#mouth-open{
|
||||
width:0px;
|
||||
height:0px;
|
||||
display: block;
|
||||
border-top: 20px solid $black;
|
||||
border-left: 40px solid transparent;
|
||||
border-right: 40px solid transparent;
|
||||
top: 0px;
|
||||
left: -12px;
|
||||
border-radius: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
&.case5{
|
||||
top: 105px;
|
||||
border-radius: 50px;
|
||||
background: #343838;
|
||||
transform: rotate(-15deg);
|
||||
|
||||
#mouth-open{
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
display: block;
|
||||
border-top: 70px solid #343838;
|
||||
border-left: 83px solid transparent;
|
||||
border-right: 70px solid transparent;
|
||||
/* background: #FF80AC; */
|
||||
border-radius: 10px;
|
||||
top: -7px;
|
||||
left: -7px;
|
||||
transform: translateX(-10px) scale(.8);
|
||||
}
|
||||
}
|
||||
}/*End Mouth*/
|
||||
|
||||
|
||||
/**
|
||||
KEYFRAMES
|
||||
**/
|
||||
|
||||
|
||||
@keyframes blink{
|
||||
0%{ height: 0%};
|
||||
5%{height: 100%};
|
||||
8%{height: 0%};
|
||||
100%{height: 0%};
|
||||
}
|
||||
|
||||
@keyframes neutral{
|
||||
0%{ transform: rotate(0deg)};
|
||||
10%{transform:rotate(-5deg)};
|
||||
40%{ transform: rotate(10deg)};
|
||||
80%{transform:rotate(-10deg)};
|
||||
90%{transform:rotate(5deg)};
|
||||
100%{transform:rotate(0deg)};
|
||||
}
|
||||
|
||||
|
||||
.ui-slider-horizontal .ui-slider-range-max{
|
||||
background: red;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user