init
This commit is contained in:
commit
47904a8435
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,255 @@
|
|||
.croppie-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.croppie-container .cr-image {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: 0 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.croppie-container .cr-boundary {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* overflow: auto;*/
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0px 0px 20px 0px #0000004f;
|
||||
transition: all .25s;
|
||||
}
|
||||
|
||||
.croppie-container .cr-viewport,
|
||||
.croppie-container .cr-resizer {
|
||||
position: absolute;
|
||||
/* border: 2px solid #fff;*/
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
/* box-shadow: 0 0 2000px 2000px #EBF2EF; /*rgba(255,255,255, 0.75)*/*/
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer {
|
||||
z-index: 2;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-vertical,
|
||||
.croppie-container .cr-resizer-horisontal {
|
||||
position: absolute;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-vertical::after,
|
||||
.croppie-container .cr-resizer-horisontal::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-vertical {
|
||||
bottom: -5px;
|
||||
cursor: row-resize;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-vertical::after {
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-horisontal {
|
||||
right: -5px;
|
||||
cursor: col-resize;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-horisontal::after {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.croppie-container .cr-original-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.croppie-container .cr-vp-circle {
|
||||
/* border-radius: 50%;*/
|
||||
}
|
||||
|
||||
.croppie-container .cr-overlay {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
cursor: move;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.croppie-container .cr-slider-wrap {
|
||||
width: 75%;
|
||||
margin: 15px auto 15px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.croppie-result {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.croppie-result img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.croppie-container .cr-image,
|
||||
.croppie-container .cr-overlay,
|
||||
.croppie-container .cr-viewport {
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/***** STYLING RANGE INPUT ***********/
|
||||
/*************************************/
|
||||
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
|
||||
/*************************************/
|
||||
|
||||
.cr-slider {
|
||||
-webkit-appearance: none;
|
||||
/*removes default webkit styles*/
|
||||
/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
|
||||
width: 290px;
|
||||
/*required for proper track sizing in FF*/
|
||||
max-width: 100%;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cr-slider::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.cr-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.cr-slider:focus {
|
||||
outline: none;
|
||||
}
|
||||
/*
|
||||
.cr-slider:focus::-webkit-slider-runnable-track {
|
||||
background: #ccc;
|
||||
}
|
||||
*/
|
||||
|
||||
.cr-slider::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.cr-slider::-moz-range-thumb {
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
/*hide the outline behind the border*/
|
||||
.cr-slider:-moz-focusring {
|
||||
outline: 1px solid white;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.cr-slider::-ms-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: transparent;
|
||||
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
|
||||
border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
|
||||
border-width: 6px 0;
|
||||
color: transparent;/*remove default tick marks*/
|
||||
}
|
||||
.cr-slider::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.cr-slider::-ms-fill-upper {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.cr-slider::-ms-thumb {
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
margin-top:1px;
|
||||
}
|
||||
.cr-slider:focus::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.cr-slider:focus::-ms-fill-upper {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
/*******************************************/
|
||||
|
||||
/***********************************/
|
||||
/* Rotation Tools */
|
||||
/***********************************/
|
||||
.cr-rotate-controls {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.cr-rotate-controls button {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
.cr-rotate-controls i:before {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-size: 22px;
|
||||
}
|
||||
.cr-rotate-l i:before {
|
||||
content: '↺';
|
||||
}
|
||||
.cr-rotate-r i:before {
|
||||
content: '↻';
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 601 B |
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=.9, maximum-scale=1, user-scalable=no">
|
||||
|
||||
<title>Social media studio - BIJ1</title>
|
||||
<!-- credits hiervoor aan PvdD! -->
|
||||
|
||||
<meta name="description" content="Maak een social media post of profielfoto in BIJ1-stijl. Upload je foto, selecteer een stijl en deel je creatie online.">
|
||||
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta property="twitter:site" content="@PolitiekBIJ1" />
|
||||
|
||||
<meta property="og:title" content="Social media studio - BIJ1" />
|
||||
<meta property="og:description" content="Maak een social media post of profielfoto in BIJ1-stijl. Upload je foto, selecteer een stijl en deel je creatie online." />
|
||||
<meta property="og:type" content="website" />
|
||||
<!-- <meta property="og:image" content="https://studio.bij1.org/header.jpg" /> -->
|
||||
<meta property="og:url" content="https://studio.bij1.org/" />
|
||||
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="./apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="270x270" href="./favicon-16x16.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="./favicon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
|
||||
<link rel='stylesheet' href='./ext/croppie.css'>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="stylesheet" href="./ext/fa/css/all.min.css">
|
||||
|
||||
<script>var _paq = window._paq = window._paq || [];
|
||||
_paq.push(["setDoNotTrack", true]);
|
||||
_paq.push(["disableCookies"]);
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="https://analytics.partijvoordedieren.nl/";
|
||||
_paq.push(['setTrackerUrl', u+'piwik.php']);
|
||||
_paq.push(['setSiteId', '64']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<form id="form1" runat="server">
|
||||
|
||||
<input type='file' id="foto_input" accept="image/png, image/gif, image/jpeg" />
|
||||
|
||||
<div id="uploadfile">
|
||||
<div>
|
||||
<h1>Sleep je foto hierheen of klik om het bestand te selecteren</h1>
|
||||
<p>De foto wordt op je eigen apparaat verwerkt en <b>niet</b> geüpload naar onze server.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cropper">
|
||||
<!-- <img src="help.png" id="helpoverlay" style="display: none;"> -->
|
||||
<div id="switch">
|
||||
<span id="modeProfiel">Profielfoto</span>
|
||||
<label class="switch">
|
||||
<span class="switchSlider"></span>
|
||||
</label>
|
||||
<span id="modePost" class="inactive">Social media post</span>
|
||||
</div>
|
||||
<div id="thumbs">
|
||||
<img class="thumb profiel" src="overlays/BIJ1_2023_01.png">
|
||||
<img class="thumb profiel" src="overlays/BIJ1_2023_02.png">
|
||||
<img class="thumb profiel" src="overlays/BIJ1_2023_03.png">
|
||||
<img class="thumb profiel" src="overlays/BIJ1_2023_04.png">
|
||||
<img class="thumb profiel" src="overlays/BIJ1_2023_05.png">
|
||||
|
||||
<img class="thumb post" src="overlays/BIJ1_2023_01.png">
|
||||
<img class="thumb post" src="overlays/BIJ1_2023_02.png">
|
||||
<img class="thumb post" src="overlays/BIJ1_2023_03.png">
|
||||
<img class="thumb post" src="overlays/BIJ1_2023_04.png">
|
||||
<img class="thumb post" src="overlays/BIJ1_2023_05.png">
|
||||
</div>
|
||||
<div><img id="profielfoto" src=""></div>
|
||||
<div id="buttons">
|
||||
<a href="#" id="back" class="button"><i class="fas fa-backspace fa-fw"></i> Opnieuw</a>
|
||||
<a href="#" id="help" class="button"><i class="fas fa-question-circle fa-fw"></i> Help</a>
|
||||
<a href="#" id="use" class="button"><i id="useIcon"></i><i id="spin" class="fas fa-circle-notch fa-spin fa-fw"></i> Opslaan</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div id="helpbg" style="display: none;"></div>
|
||||
<canvas id="dummyCanvas" width="1080" height="1080"></canvas>
|
||||
|
||||
<script src='./ext/jquery-3.6.1.min.js?v=2.2'></script>
|
||||
<script src='./ext/croppie.min.js?v=2.2'></script>
|
||||
<script src='./ext/exif-js.js?v=2.2'></script>
|
||||
<script src="./script.js?v=2.10"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 487 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 472 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 493 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
|
|
@ -0,0 +1,297 @@
|
|||
var imageMode = 0;
|
||||
var overlay = "";
|
||||
|
||||
var hasTouchScreen = false;
|
||||
var useShare = false;
|
||||
var redirect = false;
|
||||
|
||||
if ("maxTouchPoints" in navigator) {
|
||||
hasTouchScreen = navigator.maxTouchPoints > 0;
|
||||
} else if ("msMaxTouchPoints" in navigator) {
|
||||
hasTouchScreen = navigator.msMaxTouchPoints > 0;
|
||||
} else {
|
||||
var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
|
||||
if (mQ && mQ.media === "(pointer:coarse)") {
|
||||
hasTouchScreen = !!mQ.matches;
|
||||
} else if ('orientation' in window) {
|
||||
hasTouchScreen = true; // deprecated, but good fallback
|
||||
} else {
|
||||
// Only as a last resort, fall back to user agent sniffing
|
||||
var UA = navigator.userAgent;
|
||||
hasTouchScreen = (
|
||||
/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
|
||||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// function iOS() {
|
||||
// return [
|
||||
// 'iPad Simulator',
|
||||
// 'iPhone Simulator',
|
||||
// 'iPod Simulator',
|
||||
// 'iPad',
|
||||
// 'iPhone',
|
||||
// 'iPod'
|
||||
// ].includes(navigator.platform)
|
||||
// || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
|
||||
// }
|
||||
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
var isAndroid = ua.indexOf("android") > -1;
|
||||
|
||||
$(function() {
|
||||
|
||||
if (hasTouchScreen && navigator.share && !isAndroid) {
|
||||
useShare = true;
|
||||
$("#useIcon").addClass("fas fa-share fa-fw");
|
||||
} else if (!navigator.share && isAndroid) {
|
||||
redirect = true;
|
||||
$('#uploadfile h1').text('Open deze pagina in Chrome via de drie puntjes bovenin je scherm.');
|
||||
$('#uploadfile h1').css('background', '#EB1951aa');
|
||||
$('#uploadfile p').hide();
|
||||
} else {
|
||||
useShare = false;
|
||||
$("#useIcon").addClass("fas fa-file-download fa-fw");
|
||||
}
|
||||
|
||||
overlay = $("#thumbs .profiel:first").attr("src");
|
||||
|
||||
$("#foto_input").change(function() {
|
||||
readURL(this);
|
||||
// console.log(this);
|
||||
});
|
||||
|
||||
let isSwitching = false;
|
||||
|
||||
$("#switch").on("mouseup", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (isSwitching) {
|
||||
return;
|
||||
}
|
||||
|
||||
isSwitching = true;
|
||||
|
||||
if (imageMode == 0) {
|
||||
imageMode = 1;
|
||||
$('.cr-boundary').css("border-radius", "0");
|
||||
$('.switch').addClass("right");
|
||||
$('#modePost').removeClass("inactive");
|
||||
$('#modeProfiel').addClass("inactive");
|
||||
$(".thumb.profiel").fadeOut(250, function() {
|
||||
$(".thumb.post").fadeIn(250);
|
||||
});
|
||||
var newSrc = $("#thumbs .post:first").attr("src");
|
||||
var $overlay = $('#overlay');
|
||||
|
||||
$overlay.fadeOut(250, function() {
|
||||
$overlay.attr('src', newSrc).fadeIn(250);
|
||||
});
|
||||
|
||||
} else {
|
||||
imageMode = 0;
|
||||
$('.cr-boundary').css("border-radius", "50%");
|
||||
$('.switch').removeClass("right");
|
||||
$('.switch').removeClass("inactive");
|
||||
$('#modeProfiel').removeClass("inactive");
|
||||
$('#modePost').addClass("inactive");
|
||||
$(".thumb.post").fadeOut(250, function() {
|
||||
$(".thumb.profiel").fadeIn(250);
|
||||
});
|
||||
|
||||
var newSrc = $("#thumbs .profiel:first").attr("src");
|
||||
var $overlay = $('#overlay');
|
||||
|
||||
$overlay.fadeOut(250, function() {
|
||||
$overlay.attr('src', newSrc).fadeIn(250);
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
isSwitching = false;
|
||||
}, 500);
|
||||
|
||||
});
|
||||
|
||||
$('.thumb').on('click', function(e) {
|
||||
$('#overlay').attr('src',$(this).attr('src'));
|
||||
overlay = $(this).attr('src');
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$("html").on("dragover", function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// $('#uploadfile').addClass('hilight');
|
||||
});
|
||||
|
||||
$("html").on("drop", function(e) { e.preventDefault(); e.stopPropagation(); });
|
||||
|
||||
$('#uploadfile').on('dragenter', function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
$('#uploadfile').addClass('hilight');
|
||||
});
|
||||
|
||||
$('#uploadfile').on('dragover', function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
$('#uploadfile').addClass('hilight');
|
||||
});
|
||||
|
||||
$('#uploadfile').on('dragleave', function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
$('#uploadfile').removeClass('hilight');
|
||||
});
|
||||
|
||||
$('#uploadfile').on('drop', function (e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
var file = e.originalEvent.dataTransfer;
|
||||
var fd = new FormData();
|
||||
|
||||
fd.append('file', file[0]);
|
||||
readURL(file);
|
||||
});
|
||||
|
||||
if (!redirect) {
|
||||
$("#uploadfile").click(function(){
|
||||
$("#foto_input").click();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
function dataURItoBlob(dataURI) {
|
||||
var byteString = atob(dataURI.split(',')[1]);
|
||||
var ab = new ArrayBuffer(byteString.length);
|
||||
var ia = new Uint8Array(ab);
|
||||
for (var i = 0; i < byteString.length; i++) {
|
||||
ia[i] = byteString.charCodeAt(i);
|
||||
}
|
||||
return new Blob([ab], { type: 'image/png' });
|
||||
}
|
||||
|
||||
function readURL(input) {
|
||||
if (input.files && input.files[0]) {
|
||||
if (input.files.length != 1) { $('#uploadfile').removeClass('hilight'); return }
|
||||
|
||||
var resize;
|
||||
|
||||
var imageType = /image.*/;
|
||||
if (input.files[0].type.match(imageType)) {
|
||||
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
|
||||
$('#profielfoto').attr('src', e.target.result);
|
||||
resize = new Croppie($('#profielfoto')[0], {
|
||||
viewport: {
|
||||
width: 365,
|
||||
height: 365,
|
||||
type: 'circle'
|
||||
},
|
||||
boundary: {
|
||||
width: 365,
|
||||
height: 365
|
||||
},
|
||||
enableExif: true,
|
||||
enableOrientation: true,
|
||||
initialZoom: .5,
|
||||
update: function (data) {
|
||||
|
||||
resize.result({ type: 'base64', size: { width: 100, height: 100 }, circle: false }).then(function(dataImg) {
|
||||
// console.log(dataImg);
|
||||
$('.thumb').css('background-image', 'url(' + dataImg + ')');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
resize.bind(e.target.result)
|
||||
.then(() => {
|
||||
resize.setZoom(0);
|
||||
});
|
||||
|
||||
$( ".cr-boundary" ).prepend( '<img id="overlay" src="'+$("#thumbs .profiel:first").attr("src")+'" class="cr-viewport cr-vp-circle" style="width:365px;height:365px;" />' );
|
||||
|
||||
$('#cropper').show();
|
||||
$('#uploadfile').hide();
|
||||
|
||||
$('#use').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
$("#useIcon").hide();
|
||||
$("#spin").css("display", "inline-block");
|
||||
|
||||
tagOverlay = overlay.match(/\/([^/]+)\.png/)[1];
|
||||
_paq.push(['trackEvent', 'Download', tagOverlay]);
|
||||
|
||||
resize.result({ type: 'base64', size: { width: 1080, height: 1080 }, circle: false }).then(function(dataImg) {
|
||||
|
||||
var c=document.getElementById("dummyCanvas");
|
||||
var context=c.getContext("2d");
|
||||
var achtergrond = new Image();
|
||||
var pvdd_overlay = new Image();
|
||||
|
||||
achtergrond.src = dataImg;
|
||||
achtergrond.onload = function() {
|
||||
context.drawImage(achtergrond, 0, 0, 1080, 1080);
|
||||
pvdd_overlay.src = overlay;
|
||||
pvdd_overlay.onload = function() {
|
||||
context.drawImage(pvdd_overlay, 0, 0, 1080, 1080);
|
||||
var img = c.toDataURL("image/png");
|
||||
|
||||
var t = new Date;
|
||||
var timestamp = t.getDate()+"-"+(t.getMonth()+1)+"-"+t.getFullYear()+
|
||||
" om " +t.getHours()+"."+t.getMinutes()+"."+t.getSeconds();
|
||||
var a = document.createElement("a");
|
||||
a.href = img;
|
||||
a.download = "Profielfoto "+timestamp+".png";
|
||||
|
||||
if (useShare) {
|
||||
var blob = dataURItoBlob(img);
|
||||
navigator.share({
|
||||
files: [new File([blob], "Profielfoto "+timestamp+".png", {type: blob.type})],
|
||||
});
|
||||
} else {
|
||||
a.click();
|
||||
}
|
||||
|
||||
$("#useIcon").css("display", "inline-block");
|
||||
$("#spin").hide();
|
||||
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
|
||||
$('#back').on('click', function(e) {
|
||||
location.reload(true);
|
||||
});
|
||||
|
||||
$('#help').on('click', function(e) {
|
||||
// $('#helpoverlay').fadeIn('fast');
|
||||
$('#helpbg').fadeIn('fast');
|
||||
});
|
||||
|
||||
$('#helpoverlay, #helpbg').on('click', function(e) {
|
||||
// $('#helpoverlay').fadeOut('fast');
|
||||
$('#helpbg').fadeOut('fast');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
} else {
|
||||
$('#uploadfile').removeClass('hilight');
|
||||
}
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
:root {
|
||||
|
||||
--bg-color: #0C1E3A;
|
||||
--primary-color: #fff;
|
||||
--secondary-color: #A1B3D2;
|
||||
|
||||
}
|
||||
|
||||
/*var(--bg-color)*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'CircularProBook';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("./ext/fonts/CircularProBook.woff");
|
||||
/* src: url("./ext/fonts/CircularProBook.woff") format("woff"),url("/fonts/CircularPro-Book.otf") format("opentype"),url("/fonts/CircularProBook.svg") format("svg"),url("/fonts/CircularProBook.ttf") format("ttf")*/
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'CircularProBook';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("./ext/fonts/CircularProBold.woff");
|
||||
/* src: url("./ext/fonts/CircularProBold.woff") format("woff"),url("/fonts/CircularPro-Bold.otf") format("opentype"),url("/fonts/CircularProBold.svg") format("svg"),url("/fonts/CircularProBold.ttf") format("ttf")*/
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
background-image: url('golf.jpg');
|
||||
background-size: contain;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
#profielfoto {
|
||||
display: none;
|
||||
}
|
||||
#dummyCanvas {
|
||||
display: none;
|
||||
}
|
||||
.thumb {
|
||||
width:50px;
|
||||
height: 50px;
|
||||
background-color: #aaa;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ffffff;
|
||||
background-size: cover;
|
||||
box-shadow: 1px 1px 3px 0px #00000033;
|
||||
}
|
||||
.thumb.profiel {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.thumb.post {
|
||||
display: none;
|
||||
}
|
||||
.thumb:hover {
|
||||
box-shadow: 1px 1px 5px 1px #00000055;
|
||||
}
|
||||
#thumbs {
|
||||
text-align: center;
|
||||
padding-bottom: 10px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
|
||||
#switch {
|
||||
font-family: 'CircularProBook';
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-ms-user-select: none; /* IE 10 and IE 11 */
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
|
||||
|
||||
#cropper {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#uploadfile {
|
||||
width: 380px;
|
||||
height: 380px;
|
||||
border: 2px dashed var(--primary-color);
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 50px;
|
||||
box-sizing: border-box;
|
||||
transition: all .3s;
|
||||
|
||||
/* display: none;*/
|
||||
}
|
||||
|
||||
#uploadfile:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#uploadfile h1 {
|
||||
font-family: CircularProBook, sans-serif !important;;
|
||||
font-weight: 700;
|
||||
|
||||
text-align: center;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.3em;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
#uploadfile p {
|
||||
font-family: CircularProBook, sans-serif !important;;
|
||||
font-weight: 400;
|
||||
|
||||
text-align: center;
|
||||
color: var(--secondary-color);
|
||||
font-size: .8em;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.hilight {
|
||||
background-color: #ffffff33;
|
||||
}
|
||||
|
||||
#foto_input{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.button {
|
||||
font-family: CircularProBook, sans-serif !important;;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: .8em;
|
||||
margin: 0 1px;
|
||||
opacity: .9;
|
||||
/* transition: all .25s;*/
|
||||
/* border: 1px solid transparent;*/
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
/* box-shadow: 0 0 11px 2px #000000a1;*/
|
||||
|
||||
|
||||
opacity: 1;
|
||||
/* border: 1px solid #fff;*/
|
||||
}
|
||||
|
||||
.button i {
|
||||
margin-right: 2px;
|
||||
|
||||
}
|
||||
|
||||
#use {
|
||||
background-color: var(--primary-color);
|
||||
|
||||
color: #00743c;
|
||||
}
|
||||
#use:hover {
|
||||
/* background-color: var(--secondary-color);*/
|
||||
}
|
||||
|
||||
#spin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#back {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--bg-color);
|
||||
/* color: #EB1951;*/
|
||||
}
|
||||
#help {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--bg-color);
|
||||
/* color: #F48120;*/
|
||||
}
|
||||
|
||||
|
||||
/*#kk {
|
||||
width: 377px;
|
||||
height: 377px;
|
||||
position: absolute;
|
||||
border: 2px solid var(--bg-color);
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}*/
|
||||
|
||||
#helpoverlay {
|
||||
width: 380px;
|
||||
height: 554.5px;
|
||||
z-index: 9999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#helpbg {
|
||||
background-color: var(--bg-color);
|
||||
background-image: url(help.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 369px 584px;
|
||||
opacity: .8;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 9998;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/********** Range Input Styles **********/
|
||||
/*Range Reset*/
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
/* Removes default focus */
|
||||
input[type="range"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
|
||||
/* slider track */
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
background-color: var(--secondary-color);
|
||||
border-radius: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
/* slider thumb */
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
margin-top: -8px; /* Centers thumb on the track */
|
||||
|
||||
/*custom styles*/
|
||||
background-color: var(--primary-color);
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
input[type="range"]:focus::-webkit-slider-thumb {
|
||||
border: 1px solid var(--secondary-color);
|
||||
outline: 3px solid var(--secondary-color);
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
|
||||
/******** Firefox styles ********/
|
||||
/* slider track */
|
||||
input[type="range"]::-moz-range-track {
|
||||
background-color: #053a5f;
|
||||
border-radius: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
/* slider thumb */
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
border: none; /*Removes extra border that FF applies*/
|
||||
border-radius: 0; /*Removes default border-radius that FF applies*/
|
||||
|
||||
/*custom styles*/
|
||||
background-color: var(--primary-color);
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
input[type="range"]:focus::-moz-range-thumb {
|
||||
border: 1px solid #053a5f;
|
||||
outline: 3px solid #053a5f;
|
||||
outline-offset: 0.125rem;
|
||||
}
|
||||
|
||||
|
||||
/* Switch https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch */
|
||||
|
||||
#switch {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 17px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.switch .switchSlider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #586a88;
|
||||
-webkit-transition: .25s;
|
||||
transition: .25s;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.switch .switchSlider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background-color: white;
|
||||
-webkit-transition: .25s;
|
||||
transition: .25s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.switch.right .switchSlider:before {
|
||||
-webkit-transform: translateX(13px);
|
||||
-ms-transform: translateX(13px);
|
||||
transform: translateX(13px);
|
||||
}
|
||||
|
||||
.inactive {
|
||||
color: #586a88;
|
||||
}
|
||||
Loading…
Reference in New Issue