From 2b34706c4bf0516336832bb6456f6390681ec678 Mon Sep 17 00:00:00 2001 From: fencl Date: Tue, 2 Jan 2024 09:09:13 +0100 Subject: [PATCH] add adf --- ADF/LICENSE | 21 -- ADF/README.md | 65 ----- ADF/favicon.ico | Bin 34494 -> 0 bytes ADF/go.mod | 1 + ADF/index.html | 225 ++++----------- ADF/media/davewhipp-print.css | 194 ------------- ADF/media/davewhipp-screen.css | 195 ------------- ADF/media/kjhealy-print.css | 194 ------------- ADF/media/kjhealy-screen.css | 196 -------------- ADF/scripts/script.js | 83 ++++++ ADF/server.js | 11 + ADF/styles/styles.css | 474 ++++++++++++++++++++++++++++++++ ADF/styles/styles.scss | 482 +++++++++++++++++++++++++++++++++ 13 files changed, 1104 insertions(+), 1037 deletions(-) delete mode 100644 ADF/LICENSE delete mode 100644 ADF/README.md delete mode 100644 ADF/favicon.ico create mode 100644 ADF/go.mod delete mode 100644 ADF/media/davewhipp-print.css delete mode 100644 ADF/media/davewhipp-screen.css delete mode 100644 ADF/media/kjhealy-print.css delete mode 100644 ADF/media/kjhealy-screen.css create mode 100644 ADF/scripts/script.js create mode 100644 ADF/server.js create mode 100644 ADF/styles/styles.css create mode 100644 ADF/styles/styles.scss diff --git a/ADF/LICENSE b/ADF/LICENSE deleted file mode 100644 index 8ba2564..0000000 --- a/ADF/LICENSE +++ /dev/null @@ -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. diff --git a/ADF/README.md b/ADF/README.md deleted file mode 100644 index 99d2d44..0000000 --- a/ADF/README.md +++ /dev/null @@ -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) - -![](https://help.github.com/assets/images/help/repository/fork_button.jpg) - -and edit the `index.md` file [directly in Github](https://help.github.com/articles/editing-files-in-your-repository/) - -![](https://help.github.com/assets/images/help/repository/edit-file-edit-button.png) - -adding your skills, jobs and education. - -![](https://help.github.com/assets/images/help/repository/edit-readme-light.png) - -## 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 ⌘ + p. 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)). - -![Eliseo Papa](https://s.gravatar.com/avatar/eae1f0c01afda2bed9ce9cb88f6873f6?s=100) - -### License - -[MIT License](https://github.com/elipapa/markdown-cv/blob/master/LICENSE) diff --git a/ADF/favicon.ico b/ADF/favicon.ico deleted file mode 100644 index c3bca6c625d73f87860860479b7cf01a77e10ed2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 34494 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 diff --git a/ADF/go.mod b/ADF/go.mod new file mode 100644 index 0000000..5fa3b48 --- /dev/null +++ b/ADF/go.mod @@ -0,0 +1 @@ +module ADF diff --git a/ADF/index.html b/ADF/index.html index 875d2fc..45ed24d 100644 --- a/ADF/index.html +++ b/ADF/index.html @@ -1,173 +1,54 @@ - - - - - Martin Fencl's CV | CV - - - - -
-
-

Martin Fencl

-

Software test developer, Python engineer, HW tester.

- - - -
- -
- -


-


- -

  - 

- -


- -

  - 

- -


- -

Currently

- -

I work as a freelancer and I’m searching for interesting projects that I would enjoy.

- -

Interest in

- -
    -
  • Robotics
    -– autonomous projects
    -– DYI projects (modeling drones, aircraft …)
    -– automation (home security system, DYI projects)
    • -
  • Linux-based systems (preferring Debian-Based)
    • -
  • Dockerizing
    -– docker, docker-compose
    -– kubernetes
    • -
  • Cryptography (YubiKey)
    -– OATH – HOTP
    -– OATH – TOTP
    -– FIDO U2F, FIDO2 (WebAuthn)
    • -
- -

Education

- -

2008-2012

-


-

Completion of the study program in the field of Electronics Mechanics

-
    -
  • High School of Electrical Engineering, Hluboká nad Vltavou (Czechia)
    • -
  • Level EQF 4
    • -
- -

2013-2018

-


-

Completion of the study program in the field of Applied Electrical Engineering

-
    -
  • University of West Bohemia, Faculty of Electrical Engineering, Pilsen (Czechia)
    • -
  • Level EQF 6
    • -
- -

2018-2020

-


-

Completion of the study program in the field of commercial electrical engineering

-
    -
  • University of West Bohemia, Faculty of Electrical Engineering, Pilsen (Czechia)
    • -
  • Level EQF 7
    • -
- -

Work Experience

-

2013-2013

-


-

IT service worker / support

-
    -
  • Karel Peisker, Budweis (Czechia)
    • -
  • Network service, user interface security
    • -
- -

2016-2017

-


-

Development programmer - development department (internship)

-
    -
  • Robert Bosch, spol. s.r.o., Budweis (Czechia)
    • -
  • Programming of laboratory instruments
    • -
  • Development department assistance
    • -
- -

technologies / tools used:
-– LabView
-– Python

- -

2017-2020

-


-

Development programmer - technology department (internship)

-
    -
  • Robert Bosch, spol. s.r.o., Budweis (Czechia)
    • -
  • Programming of laboratory measuring devices
    • -
  • Testing of laboratory equipment, proposal for improvement and calibration
    • -
  • Analysis and work with data
    • -
- -

technologies / tools used:
-– Git
-– LabVIEW
-– Python
-– Visual Basic for Applications (VBA)
-– Structured Text (ST)
-– 3D printing (SLA, DMLS)
-– Measuring and analysis technology

- -

2017-2020

-


-

Software test engineer – DITET5 (Schweinfurth team for EMF projects)

-
    -
  • ZF Engineering Pilsen, spol. s.r.o., Pilsen (Czechia)
    • -
  • Testing of hybrid automotive units (8P4G project)
    • -
  • Creating automation tests, regression tests
    • -
  • Manual testing of internal software (EMF)
    • -
  • Problem analysis, consulting of status SW
    • -
- -

technologies / tools used:
-– Dspace SCALEXIO (rapid control prototyping (RCP) applications)
-– Exam (test extension/orchestrator)
-– Python

- -

2020-

-


-

Software test developer

-
    -
  • W.A.G. payment solutions, a.s., Princip, a.s., Prague (Czechia)
    • -
  • Creating, develop and maintain software unit project for testing (SwMU)
    • -
  • Modified existing software to detect and correct errors, improve performance, and upgrade interfaces (cooperating with sw-team)
    • -
  • Prepared reports on specifications and activities for each project.
    • -
  • Designed web applications (interface for support SwMU project)
    • -
- -

technologies / tools used:
-– Apache Kafka (event streaming platform)
-– Python
-– Git
-– Flask, Flask-RestAPI
-– Django
-– Docker, Docker-compose
-– Helm, Skaffold
-– Kubernetes (and local minikube)

- -
- -
- - - -
-
- + + + + + + Slider + + + + + +
+
+
+

A.D. mood! make my life easier

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🐄 +
+
+
+
+
+
+
+

jak se dneska máš pšouku?

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/ADF/media/davewhipp-print.css b/ADF/media/davewhipp-print.css deleted file mode 100644 index 79b3ddd..0000000 --- a/ADF/media/davewhipp-print.css +++ /dev/null @@ -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; -} - - - diff --git a/ADF/media/davewhipp-screen.css b/ADF/media/davewhipp-screen.css deleted file mode 100644 index adacc45..0000000 --- a/ADF/media/davewhipp-screen.css +++ /dev/null @@ -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... -}*/ \ No newline at end of file diff --git a/ADF/media/kjhealy-print.css b/ADF/media/kjhealy-print.css deleted file mode 100644 index 1996e09..0000000 --- a/ADF/media/kjhealy-print.css +++ /dev/null @@ -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; -} - - - - diff --git a/ADF/media/kjhealy-screen.css b/ADF/media/kjhealy-screen.css deleted file mode 100644 index a8bffae..0000000 --- a/ADF/media/kjhealy-screen.css +++ /dev/null @@ -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... -}*/ diff --git a/ADF/scripts/script.js b/ADF/scripts/script.js new file mode 100644 index 0000000..0cf1a8d --- /dev/null +++ b/ADF/scripts/script.js @@ -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"; + } + } +}); \ No newline at end of file diff --git a/ADF/server.js b/ADF/server.js new file mode 100644 index 0000000..8082176 --- /dev/null +++ b/ADF/server.js @@ -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}`); +}); diff --git a/ADF/styles/styles.css b/ADF/styles/styles.css new file mode 100644 index 0000000..9c0bd7f --- /dev/null +++ b/ADF/styles/styles.css @@ -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; +} diff --git a/ADF/styles/styles.scss b/ADF/styles/styles.scss new file mode 100644 index 0000000..acf6790 --- /dev/null +++ b/ADF/styles/styles.scss @@ -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; +} + + +