201 lines
No EOL
7.1 KiB
HTML
201 lines
No EOL
7.1 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
|
|
<head>
|
|
<title>Samuel Philipp</title>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
<link rel="shortcut icon" href="img/samuel.png">
|
|
|
|
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen"/>
|
|
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen"/>
|
|
|
|
<script type="text/javascript" src="js/vendor/jquery-2.2.4.min.js"></script>
|
|
<script type="text/javascript" src="js/vendor/jquery.easing.min.js"></script>
|
|
<script type="text/javascript" src="js/vendor/jquery.flip.min.js"></script>
|
|
|
|
<script type="text/javascript" src="js/vendor/supersized.3.2.7.min.js"></script>
|
|
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
$('#prevslide').removeClass('hide');
|
|
$('#nextslide').removeClass('hide');
|
|
$.supersized({
|
|
// Functionality
|
|
slideshow: 1, // Slideshow on/off
|
|
autoplay: 1, // Slideshow starts playing automatically
|
|
start_slide: 1, // Start slide (0 is random)
|
|
stop_loop: 0, // Pauses slideshow on last slide
|
|
random: 0, // Randomize slide order (Ignores start slide)
|
|
slide_interval: 5000, // Length between transitions
|
|
transition: 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
|
|
transition_speed: 1000, // Speed of transition
|
|
new_window: 0, // Image links open in new window/tab
|
|
pause_hover: 0, // Pause slideshow on hover
|
|
keyboard_nav: 1, // Keyboard navigation on/off
|
|
performance: 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
|
|
image_protect: 1, // Disables image dragging and right click with Javascript
|
|
|
|
min_width: 0, // Min width allowed (in pixels)
|
|
min_height: 0, // Min height allowed (in pixels)
|
|
vertical_center: 1, // Vertically center background
|
|
horizontal_center: 1, // Horizontally center background
|
|
fit_always: 0, // Image will never exceed browser width or height (Ignores min. dimensions)
|
|
fit_portrait: 1, // Portrait images will not exceed browser height
|
|
fit_landscape: 0, // Landscape images will not exceed browser width
|
|
|
|
// Components
|
|
slide_links: 'name', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
|
|
thumb_links: 0, // Individual thumb links for each slide
|
|
thumbnail_navigation: 0, // Thumbnail navigation
|
|
slides: [ // Slideshow Images
|
|
{
|
|
image: 'img/sp-magic.png',
|
|
title: 'sp-magic',
|
|
thumb: 'img/sp-magic.png',
|
|
url: 'http://sp-magic.de'
|
|
},
|
|
{
|
|
image: 'img/sp-codes.png',
|
|
title: 'sp-codes',
|
|
thumb: 'img/sp-codes.png',
|
|
url: 'http://sp-codes.de'
|
|
}],
|
|
|
|
// Theme Options
|
|
progress_bar: 1, // Timer for each slide
|
|
mouse_scrub: 0
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.list').addClass('hide');
|
|
|
|
var card = $('#card');
|
|
card.css('cursor', 'pointer');
|
|
card.find('.back').removeClass('hide');
|
|
card.flip({
|
|
trigger: 'click',
|
|
speed: 500,
|
|
reverse: false
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
color: #fff;
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.logo {
|
|
max-width: 128px;
|
|
max-height: 128px;
|
|
background-color: #ffffff;
|
|
border-radius: 50%;
|
|
border: 1px solid #222222;
|
|
}
|
|
|
|
#icon {
|
|
position: fixed;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
width: 128px;
|
|
height: 128px;
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.list {
|
|
margin: 5% auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.list .item {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.list .item img {
|
|
width: 512px;
|
|
border: 1px solid #fff;
|
|
-webkit-border-radius: 7px;
|
|
-moz-border-radius: 7px;
|
|
border-radius: 7px;
|
|
}
|
|
|
|
#magician {
|
|
color: #000000;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 15%;
|
|
font-family: "Daniel Black", cursive;
|
|
font-size: 50pt;
|
|
}
|
|
|
|
#developer {
|
|
color: #ffffff;
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
top: 50%;
|
|
font-family: "Courier New", monospace;
|
|
font-size: 50pt;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
|
|
<!-- Piwik -->
|
|
<script type="text/javascript">
|
|
var _paq = _paq || [];
|
|
_paq.push(["setDomains", ["*.samuel-philipp.de"]]);
|
|
_paq.push(['trackPageView']);
|
|
_paq.push(['enableLinkTracking']);
|
|
(function () {
|
|
var u = "//piwik.sp-codes.de/";
|
|
_paq.push(['setTrackerUrl', u + 'piwik.php']);
|
|
_paq.push(['setSiteId', '2']);
|
|
var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
|
|
g.type = 'text/javascript';
|
|
g.async = true;
|
|
g.defer = true;
|
|
g.src = u + 'piwik.js';
|
|
s.parentNode.insertBefore(g, s);
|
|
})();
|
|
</script>
|
|
<noscript><p><img src="//piwik.sp-codes.de/piwik.php?idsite=2" style="border:0;" alt=""/></p></noscript>
|
|
<!-- End Piwik Code -->
|
|
</head>
|
|
<body>
|
|
<!--Arrow Navigation-->
|
|
<a id="prevslide" class="load-item hide"></a>
|
|
<a id="nextslide" class="load-item hide"></a>
|
|
|
|
<h1 id="magician" style="display: none;">Zauberkünstler</h1>
|
|
<h1 id="developer" style="display: none;">Softwareentwickler</h1>
|
|
|
|
<div class="list">
|
|
<div class="item">
|
|
<a href="https://www.sp-magic.de"><img src="img/sp-magic.png"/></a>
|
|
</div>
|
|
<div class="item">
|
|
<a href="https://www.sp-codes.de"><img src="img/sp-codes.png"/></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="icon">
|
|
<div id="card">
|
|
|
|
<div class="front">
|
|
<img class="logo" src="img/samuel.png">
|
|
</div>
|
|
<div class="back hide">
|
|
<img class="logo" src="img/samuel.png">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |