add adf
This commit is contained in:
fencl
21
ADF/LICENSE
21
ADF/LICENSE
@@ -1,21 +0,0 @@
|
|||||||
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.
|
|
||||||
@@ -1,65 +0,0 @@
|
|||||||
# 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
BIN
ADF/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
1
ADF/go.mod
Normal file
1
ADF/go.mod
Normal file
@@ -0,0 +1 @@
|
|||||||
|
module ADF
|
||||||
207
ADF/index.html
207
ADF/index.html
@@ -1,173 +1,54 @@
|
|||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset=utf-8 name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<meta charset="UTF-8">
|
||||||
<title> Martin Fencl's CV | CV</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link href="media/kjhealy-screen.css" type="text/css" rel="stylesheet" media="screen">
|
<title>Slider</title>
|
||||||
<link href="media/kjhealy-print.css" type="text/css" rel="stylesheet" media="print">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="main">
|
<div class="flexbox">
|
||||||
<div id="content">
|
<div class="flex-item">
|
||||||
<h1 id="martin-fencl">Martin Fencl</h1>
|
<div class="h_main">
|
||||||
<p>Software test developer, Python engineer, HW tester.</p>
|
<h3>A.D. mood! make my life easier</h3>
|
||||||
|
<div class="mood-box">
|
||||||
<div id="webaddress">
|
<div class="face-wrapper">
|
||||||
<a href="martin@martinfencl.eu">martin@martinfencl.eu</a>
|
<div id="eyes" class="case3">
|
||||||
| <a href="https://www.linkedin.com/in/martin-fencl-6a9795189/">My linkedin page</a>
|
<div class="eyebrow left"></div>
|
||||||
|
<div class="eye left">
|
||||||
|
<div class="eyelid"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bottomlid left"></div>
|
||||||
<div style="position:absolute; top: 125px; left:33.5%;">
|
<div class="eyebrow right"></div>
|
||||||
<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 class="eye right">
|
||||||
|
<div class="eyelid"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bottomlid right"></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>
|
</div>
|
||||||
|
<div id="mouth" class="case3">
|
||||||
<!-- ### Footer
|
<div id="mouth-open"></div>
|
||||||
|
</div>
|
||||||
Last updated: May 2013 -->
|
<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>
|
||||||
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,194 +0,0 @@
|
|||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,195 +0,0 @@
|
|||||||
/* 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...
|
|
||||||
}*/
|
|
||||||
@@ -1,194 +0,0 @@
|
|||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,196 +0,0 @@
|
|||||||
/* 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...
|
|
||||||
}*/
|
|
||||||
83
ADF/scripts/script.js
Normal file
83
ADF/scripts/script.js
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
$(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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
11
ADF/server.js
Normal file
11
ADF/server.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
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}`);
|
||||||
|
});
|
||||||
474
ADF/styles/styles.css
Normal file
474
ADF/styles/styles.css
Normal file
@@ -0,0 +1,474 @@
|
|||||||
|
@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;
|
||||||
|
}
|
||||||
482
ADF/styles/styles.scss
Normal file
482
ADF/styles/styles.scss
Normal file
@@ -0,0 +1,482 @@
|
|||||||
|
@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