- Scan ID:
- f98f6e03-639b-431d-99d3-9e487d29aaf3Finished
- Submitted URL:
- https://qrco.de/bfQL0e
- Report Finished:
Links · 2 found
The outgoing links identified from the page
| Link | Text |
|---|---|
| https://cdn.qr-code-generator.com/account37697268/48823209_1.mp3?Expires=1727241372&Signature=U1KbmHyKdVhnfccJ8FxU32yARuBo3eeKaYj8Bf6vuZivHbevpjjbBtD4YLn1k3CVOlm9NmunrSzAPaDm1K2w-Ud95lsx93odDTbxx6zklgcWoNHOfV4~JtCCdp5jPfk4OE1DsZgp9JIhLZxVQniX1R2WKMXQUT5Hlx~OQZ~okgn3VwSv8U~454bW673BWG1cpB7vnyw-M3n~DDh4~j64yVrRcvJd1J4KK5bywYPbX18RSw8oTcy6F7a~ZzB6GIQotvKArao88BmI1V2W4nhAGDSe8T82zf0cm0seN099dAEEL6EmAYZLVk5-QXf8Gqbir8Wo0KLJxzTtGdmeDudqLw__&Key-Pair-Id=KKMPOJU8AYATR | |
| http://www.thereluctant.com | www.thereluctant.com |
JavaScript Variables · 14 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| onbeforetoggle | string |
| documentPictureInPicture | string |
| onscrollend | string |
| YII_CSRF_TOKEN | string |
| GLOBAL_CSRF_TOKEN | string |
| $ | string |
| jQuery | string |
| app | string |
| SocialShareKit | string |
| angular | string |
Console log messages · 0 found
Messages logged to the web console
HTML
The raw HTML body of the page
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" itemscope="" itemtype="http://qrco.de/bfQL0e?trackSharing=1"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<link rel="stylesheet" type="text/css" href="/css/build/pages/dmp3/template_normal.min.css?v=a4b96120de920e7fbd5ebfd0eb32701338a8a557">
<script type="text/javascript">
/*<![CDATA[*/
YII_CSRF_TOKEN='8225866e61aa90349310da646e19380d4d190780';
/*]]>*/
</script>
<title>Mp3 Page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="robots" content="noindex, nofollow">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="/img/favicon/favicon.ico" type="image/x-icon">
<script type="text/javascript">
window.GLOBAL_CSRF_TOKEN = '8225866e61aa90349310da646e19380d4d190780';
</script>
<link rel="apple-touch-icon" href="//s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/header.png">
<link rel="apple-touch-icon" sizes="76x76" href="//s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/header.png">
<link rel="apple-touch-icon" sizes="120x120" href="//s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/header.png">
<link rel="apple-touch-icon" sizes="152x152" href="//s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/header.png">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--Facebook meta-->
<meta property="og:url" content="http://qrco.de/bfQL0e?trackSharing=1">
<meta property="og:title" content="Stars">
<meta property="og:description" content="The Reluctant">
<meta property="og:image" content="http://s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/header.png">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://qrco.de/bfQL0e?trackSharing=1">
<meta name="twitter:title" content="Stars">
<meta name="twitter:description" content="The Reluctant">
<meta name="twitter:image" content="http://s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/header.png">
<meta name="twitter:image:width" content="200">
<meta name="twitter:image:height" content="200">
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Stars">
<meta itemprop="description" content="The Reluctant">
<meta itemprop="image" content="http://s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/header.png">
</head>
<body ng-app="app" id="mp3-body" ng-controller="ComplexController" class="whiteTheme">
<div class="loading-welcome active welcome-screen" ng-style="{'background-color': view.code.welcome_extra.background || view.welcome_extra.background}" style="background-color: #ffffff">
<div class="progress">
<div class="loading-bar indeterminate" ng-style="{'background-color': view.code.color1 || view.color1}" style="background-color: rgb(255, 127, 114);"></div>
</div>
<div class="helper"></div>
<img id="welcomeImg" imageonload="" ng-src="//s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/welcome.png" ng-style="{
'max-width': view.code.welcome_extra.zoom *2 || view.welcome_extra.zoom *2 + 'px',
'max-height': view.code.welcome_extra.zoom *2 || view.welcome_extra.zoom *2 + 'px',
'animation-iteration-count' : view.showPreview == 'infinite' ? 'infinite' : '',
'animation-direction' : view.showPreview == 'infinite' ? 'alternate' : ''
}" src="//s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/welcome.png" style="max-width: 100px; max-height: 100px; display: inline; opacity: 0.862327;">
</div>
<div class="vcard-template style2" id="rootElement">
<div class="bgd-shadow"></div>
<div class="page-home page">
<div class="header-container">
<div class="dynamicTextColor">
<div class="skewBackground" ng-style="getBackgroundColor()" style="background: rgb(255, 127, 114);"></div>
<!-- ngIf: !loadDemo && view.code.downloadMp3 --><a class="download-mp3 dynamicTextColor ng-scope" ng-if="!loadDemo && view.code.downloadMp3" href="https://cdn.qr-code-generator.com/account37697268/48823209_1.mp3?Expires=1727241372&Signature=U1KbmHyKdVhnfccJ8FxU32yARuBo3eeKaYj8Bf6vuZivHbevpjjbBtD4YLn1k3CVOlm9NmunrSzAPaDm1K2w-Ud95lsx93odDTbxx6zklgcWoNHOfV4~JtCCdp5jPfk4OE1DsZgp9JIhLZxVQniX1R2WKMXQUT5Hlx~OQZ~okgn3VwSv8U~454bW673BWG1cpB7vnyw-M3n~DDh4~j64yVrRcvJd1J4KK5bywYPbX18RSw8oTcy6F7a~ZzB6GIQotvKArao88BmI1V2W4nhAGDSe8T82zf0cm0seN099dAEEL6EmAYZLVk5-QXf8Gqbir8Wo0KLJxzTtGdmeDudqLw__&Key-Pair-Id=KKMPOJU8AYATR" download="AUD-20240121-WA0007.mp3" id="download-fab-button">
<i class="icon-download" ng-click=""></i>
</a><!-- end ngIf: !loadDemo && view.code.downloadMp3 -->
<!-- ngIf: loadDemo && view.code.downloadMp3 -->
<span class="share-icon dynamicTextColor" id="share-fab-button" ng-click="!loadDemo ? '' : callAction($event,'shareAction')">
<i class="icon-share" ng-click=""></i>
</span>
</div>
</div>
<div class="page-body ">
<!-- ngIf: view.code.avatar --><div class="avatar-container avatar-square ng-scope" ng-if="view.code.avatar" ng-style="setAvatarExtra()" style="background: url("//s3.eu-central-1.amazonaws.com/qrcgappcdn/mp3-solution/header.png") 0% 0% / 100% rgb(255, 255, 255);"></div><!-- end ngIf: view.code.avatar -->
<div id="card-body">
<div class="card-title mb-10 ng-binding">
Stars
</div>
<div class="channel-label ng-binding">
The Reluctant
</div>
<div class="play-container">
<div class="htmlAudioPlayer"><audio id="music" preload="true" data-time="354.404425"><source src="https://cdn.qr-code-generator.com/account37697268/48823209_1.mp3?Expires=1727241372&Signature=U1KbmHyKdVhnfccJ8FxU32yARuBo3eeKaYj8Bf6vuZivHbevpjjbBtD4YLn1k3CVOlm9NmunrSzAPaDm1K2w-Ud95lsx93odDTbxx6zklgcWoNHOfV4~JtCCdp5jPfk4OE1DsZgp9JIhLZxVQniX1R2WKMXQUT5Hlx~OQZ~okgn3VwSv8U~454bW673BWG1cpB7vnyw-M3n~DDh4~j64yVrRcvJd1J4KK5bywYPbX18RSw8oTcy6F7a~ZzB6GIQotvKArao88BmI1V2W4nhAGDSe8T82zf0cm0seN099dAEEL6EmAYZLVk5-QXf8Gqbir8Wo0KLJxzTtGdmeDudqLw__&Key-Pair-Id=KKMPOJU8AYATR" type="audio/mpeg"></audio></div>
<div id="audioplayer">
<i id="pButton" class="icon-play" style="background:#544f71;color:#fff;" ng-click="play($event)"></i>
<div id="timeline">
<div id="playhead" ng-style="{background: isColorLight(view.code.color2) ? 'rgba(0, 0, 0, 0.54)' : view.code.color2}" style="background: rgb(84, 79, 113); margin-left: 0px;"></div>
<div id="playedBar" ng-style="{background: isColorLight(view.code.color2) ? 'rgba(0, 0, 0, 0.54)' : view.code.color2}" style="background: rgb(84, 79, 113); width: 0px;"></div>
<div class="times">
<span class="pull-left ng-binding">00:00</span>
<span class="pull-right ng-binding">05:54</span>
</div>
</div>
</div>
</div>
<div class="mt-30 ng-hide" ng-show="view.code.button.label">
<a class="sh-button ng-binding" ng-style="{borderColor: isColorLight(view.code.color2) ? 'rgba(0, 0, 0, 0.54)' : view.code.color2, color: isColorLight(view.code.color2) ? 'rgba(0, 0, 0, 0.54)' : view.code.color2}" ng-click="callAction($event, 'callToAction')" style="border-color: rgb(84, 79, 113); color: rgb(84, 79, 113);">
</a>
</div>
<div class="solution-website" ng-style="{position: view.code.button.label ? 'absolute' : 'relative'}" style="position: relative;">
<a href="http://www.thereluctant.com" target="_blank" class="ng-binding">www.thereluctant.com</a>
</div>
</div><div id="redirectTo">
<div class="fixed-blur-bgd">
<div class="dialog-container">
<div class="fab-body">
<div class="event-title">
Open browser? </div>
<div class="dialog-body">
Continue? You will be directed to another website. </div>
<a class="event-slim-button ripplelink mt-10 pull-right" ng-style="{color: isColorLight(view.code.color2) ? 'black' : view.code.color2}" ng-click="dialogRedirectCallback(false)" style="color: rgb(84, 79, 113);">
No </a>
<a class="event-slim-button ripplelink mt-10 pull-right" ng-style="{color: isColorLight(view.code.color2) ? 'black' : view.code.color2}" ng-click="dialogRedirectCallback(true)" style="color: rgb(84, 79, 113);">
Yes </a>
</div>
</div>
</div>
</div>
<div id="gotIt">
<div class="fixed-blur-bgd">
<div class="dialog-container">
<div class="fab-body">
<div class="event-gotIt-button">
</div>
<div class="dialog-body pull-left ng-binding">
</div>
<a class="text-regular-blue mt-20" ng-click="closeDialog()">
Got it </a>
</div>
</div>
</div>
</div>
<div class="fabs" id="shareFab">
<div class="fixed-blur-bgd">
<div class="chat">
<div class="fab-body">
<div class="icon-fab-close"></div>
<div class="fab-header" ng-style="{'color': isColorLight(view.color2) ? 'black' : view.color2}">Share</div>
<ul class="ssk-block ssk-md" data-url="https://qrco.de/bfQL0e?trackSharing=1" data-text="">
<li>
<i class="iconFab icon-fab-share-facebook"></i>
<a href="" class="ssk ssk-text ssk-facebook">Facebook</a>
</li>
<li>
<i class="iconFab icon-fab-share-x"></i>
<a href="" class="ssk ssk-text ssk-twitter">X</a>
</li>
<li>
<i class="iconFab icon-fab-share-whatsapp"></i>
<a href="whatsapp://send?text=https://qrco.de/bfQL0e?trackSharing=1" class="ssk ssk-whatsapp">Whatsapp</a>
</li>
<li>
<i class="iconFab icon-fab-share-email"></i>
<a href="mailto:?body=https://qrco.de/bfQL0e?trackSharing=1" target="_blank">Email</a>
</li>
<li>
<i class="iconFab icon-fab-share-message"></i>
<input id="shortUrl" value="https://qrco.de/bfQL0e" readonly="">
<button id="copyButton">Copy</button>
<div class="ifCopySucceed ng-hide" ng-show="ifCopySucceed">
Text copied to the clipboard. </div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/public/lib/jquery/dist/jquery.min.js?v=a4b96120de920e7fbd5ebfd0eb32701338a8a557"></script>
<script type="text/javascript" src="/js/build/angular.rendering.min.js?v=a4b96120de920e7fbd5ebfd0eb32701338a8a557"></script>
<script type="text/javascript">
/*<![CDATA[*/
/**
* Angular connection
*/
app.loadBasePreviewController();
/**
* Return escape value of param
*
* @param input - string
* */
app.filter('escape', function () {
return function (input) {
if (input) {
return escape(input);
} else
return ' ';
};
});
/**
* Return domain of input
* */
app.filter('domain', function () {
return function (input) {
if (input) {
if (input.indexOf('://') >= 0) {
return input.split('/')[2]
}
return input.split('/')[0]
}
return input;
};
});
/**
* The QR service for the app.
* */
app.service('qr', function () {
/**
* Scroll page from bottom to top
* */
this.scrollFromBottomtoTop = function (loadDemo) {
setTimeout(function () {
if (loadDemo == true) {
if ($('.solution-website').offset() != undefined) {
$("html, body").animate({
scrollTop: $('.solution-website').offset().top
}, 0)
;$("html, body").animate({
scrollTop: 0
}, 1000);
}
}
}, 0)
}
});
/**
* Directive
*
* When image is loaded fadeout welcome screen
* */
app.directive('imageonload', ['qr', '$cookies', function (qr, $cookies) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('load', function () {
$("#welcomeImg").fadeIn(1000);
window.setTimeout(function () {
$(".loading-welcome.welcome-screen").fadeOut();
scope.welcomeScreenScrollWindow++;
if (scope.welcomeScreenScrollWindow == 1) {
qr.scrollFromBottomtoTop(scope.loadDemo)
}
}, 2000);
});
element.bind('error', function () {
});
}
};
}]);
app.filter('secondsToDateTime', [function () {
return function (seconds) {
const date = new Date((seconds || 0) * 1000).toISOString();
const showHours = seconds >= 3600;
return date.slice(showHours? 11: 14, 19);
};
}]);
//Override the base preview controller
app.controller('ComplexController', function ($rootScope, $scope, $controller, $filter, previewService, $window, $sce) {
$scope.oldUrl = false;
$scope.welcomeScreenScrollWindow = 0;
$scope.includeDesktopTemplate = false;
$scope.includeMobileTemplate = false;
var screenWidth = $window.innerWidth;
if (screenWidth < 700) {
$scope.includeMobileTemplate = true;
} else {
$scope.includeDesktopTemplate = true;
}
/**
* Check if device is mobile
* */
$scope.mobilecheck = function () {
var check = false;
(function (a) {
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
})(navigator.userAgent || navigator.vendor || window.opera);
return check;
};
$scope.mobilecheck();
/**
* Set solid background for the header based on the title section height
* */
$scope.setSolidBgd = function () {
if ($scope.view.code) {
var titleSectionHeight = 142;
setTimeout(function () {
if ($scope.view.code.teaser) {
titleSectionHeight = $('.event-content-container').parent().outerHeight() + 60 + 128
}
else
titleSectionHeight = $('.event-content-container').parent().outerHeight() + 60;
$('.solid-bgd').css({
'background-color': $scope.view.code.color1 ? $scope.view.code.color1 : '#447fb6',
'height': !$scope.view.code.avatar ? titleSectionHeight + 'px' : '420px'
})
}, 0);
}
};
/**
* Open the dialog popup
* Event is for getting the current target element
* Target:
* - shareAction: Button with got it information
* - channelAction: Button with got it information
*
* @param event - string
* @param target - string
* */
$scope.callAction = function (event, target) {
switch (target) {
case 'callToAction':
event.preventDefault();
if ($scope.loadDemo) {
$scope.gotItText = 'Name this optional button as you want and link to any website of your choice.';
$scope.toggleDialog('gotIt', $(event.currentTarget));
} else {
$scope.toggleDialog('redirectTo');
}
break;
case 'shareAction':
if ($scope.loadDemo) {
$scope.gotItText = 'Users can tap this button to share your page.';
$scope.toggleDialog('gotIt', $(event.currentTarget));
$('#gotIt .share-icon').css({'background': $scope.view.code.color1})
}
break;
case 'downloadAction':
if ($scope.loadDemo) {
$scope.gotItText = 'Users can tap this button to download your mp3.';
$scope.toggleDialog('gotIt', $(event.currentTarget));
$('#gotIt .download-mp3').css({'background': $scope.view.code.color1})
}
break;
}
};
/**
* Toggle dialog
*
* @param id - string
* @param element - current target
* */
$scope.toggleDialog = function (id, element) {
if (element) {
var elem = element.context.outerHTML;
$('#' + id + ' .dialog-container .event-gotIt-button').html(elem);
}
$($('#' + id).parent()).toggleClass('fabOnTop');
$('#' + id + ' .dialog-container').toggleClass('is-visible');
$('#prime.fab').toggleClass('disabledClick');
$('#' + id + ' .fixed-blur-bgd').toggle();
};
/**
* Callback of the dialog yes/no buttons
* Can close the dialog or it can redirect to a url and close the dialog
* If the url is not defined it will use the targetUrl from the callAction button
*
* @param proceed - string
* @param url - current target
* */
$scope.dialogRedirectCallback = function (proceed, url) {
if (proceed) {
if (url) {
$window.open(url, '_blank');
} else {
if ($scope.view.code.button.url.indexOf('http') < 0)
$window.open('//' + $scope.view.code.button.url, '_blank');
else
$window.open($scope.view.code.button.url, '_blank');
}
$scope.closeDialog();
} else {
$scope.closeDialog();
}
};
/**
* Close dialog
*
* */
$scope.closeDialog = function () {
$('.dialog-container').removeClass('is-visible');
$('#prime.fab').toggleClass('disabledClick');
$('.event-gotIt-button').html('');
$('.fixed-blur-bgd').hide();
};
/**
* Set position of the fab Button
*If we have only one fab you have to use bottom 5px!!! else use 75px as default
* */
$scope.setPosition = function () {
if ($(window).innerWidth() < 667) {
var bottom = '5px',
right = '0px';
if ($(window).innerWidth() < 321)
right = '-25px';
return {
'position': 'fixed',
'bottom': bottom,
'right': right,
'width': '80px'
}
}
return '';
};
//Inherrit from basePreviewController
angular.extend(this, $controller('BasePreviewController', {$scope: $scope}));
$scope.loadDemo = parent && typeof parent.ImHere === "function";
//Get the json data form the file
json_data = {"form":[{"section_mp3":{"fold":false}},{"section_design":{"fold":false}},{"section_basic_info":{"fold":false}},{"section_welcome_screen":[]}],"code":{"color1":"#ff7f72","color2":"#544f71","mp3":{"name":"AUD-20240121-WA0007.mp3","type":"audio\/mpeg","size":14415793,"progress":100,"url":"https:\/\/cdn.qr-code-generator.com\/account37697268\/48823209_1.mp3?Expires=1727241372&Signature=U1KbmHyKdVhnfccJ8FxU32yARuBo3eeKaYj8Bf6vuZivHbevpjjbBtD4YLn1k3CVOlm9NmunrSzAPaDm1K2w-Ud95lsx93odDTbxx6zklgcWoNHOfV4~JtCCdp5jPfk4OE1DsZgp9JIhLZxVQniX1R2WKMXQUT5Hlx~OQZ~okgn3VwSv8U~454bW673BWG1cpB7vnyw-M3n~DDh4~j64yVrRcvJd1J4KK5bywYPbX18RSw8oTcy6F7a~ZzB6GIQotvKArao88BmI1V2W4nhAGDSe8T82zf0cm0seN099dAEEL6EmAYZLVk5-QXf8Gqbir8Wo0KLJxzTtGdmeDudqLw__&Key-Pair-Id=KKMPOJU8AYATR"},"title":"Stars","info":"The Reluctant","website":"www.thereluctant.com","avatar":"\/\/s3.eu-central-1.amazonaws.com\/qrcgappcdn\/mp3-solution\/header.png","avatar_extra":{"zoom":100,"background":"#ffffff"},"welcome_extra":{"zoom":50,"background":"#ffffff"},"button":{"url":""},"downloadMp3":true},"showPreview":0,"welcome_screen":"\/\/s3.eu-central-1.amazonaws.com\/qrcgappcdn\/mp3-solution\/welcome.png"};
previewService.pushData(json_data);
function setAvatarBackgroundImage() {
if ($scope.view.code) {
if ($scope.view.code.avatar)
return {
'background': 'url(' + $scope.view.code.avatar + ')'
};
else return {
'height': '0px',
'background': 'none'
}
}
}
/**
* Set avatar background with extra options like zoom and background color
* */
$scope.setAvatarExtra = function () {
var style = {};
if ($scope.view.code) {
if ($scope.view.code.avatar)
style = {
'background': 'url(' + $scope.view.code.avatar + ')',
'background-size': '100%',
'background-color': '#ffffff'
};
else
style = {
'height': '0px',
'background': 'none'
};
if ($scope.view.code.avatar_extra) {
style['background-size'] = $scope.view.code.avatar_extra.zoom + '%';
style['background-color'] = $scope.view.code.avatar_extra.background;
}
}
return style;
};
/**
* Watch avatarExtra values and set the css
* */
$scope.$watch('view.code.avatar_extra', function (newVal) {
if (newVal) {
$('.avatar-container').css({
'background-size': newVal.zoom + '%!important',
'background-color': newVal.background,
'background-position': 'center center'
});
}
});
function getBackgroundColor() {
if ($scope.view.code) {
return {
"background": $scope.view.code.color1 || '#3866b8'
};
}
}
/**
* Get the URL of the MP3 file
*/
$scope.getMP3Url = function () {
if ($scope.view.code && $scope.view.code.mp3) {
return $sce.trustAsResourceUrl($scope.view.code.mp3.url);
}
else
return "//"
};
$scope.getBackgroundColor = getBackgroundColor;
$scope.setAvatarBackgroundImage = setAvatarBackgroundImage;
/**
* Watch showPreview value
*
* @param p1 - new value
* @param p2 - old value
* */
$scope.$watch("view.showPreview", function (p1, p2, p3) {
if (p1 != undefined && p1 == 'infinite') {
setTimeout(function () {
$(".loading-welcome.welcome-screen").show();
$("#welcomeImg").fadeIn(1000);
}, 500)
} else if (p1 == undefined && p2 != undefined && p2 == 'infinite') {
$("#welcomeImg").hide();
$(".loading-welcome").fadeOut();
} else if ((p1 != undefined && p2 != undefined && p1 != p2) || (p1 != undefined && p1 != 0 && p2 == undefined && p1 != p2)) {
setTimeout(function () {
$(".loading-welcome.welcome-screen").show();
$("#welcomeImg").hide();
$("#welcomeImg").fadeIn(1000);
setTimeout(function () {
$(".loading-welcome").fadeOut();
}, 2000)
}, 500)
}
});
/**
* Convert hex color to rgbA
*
* @param hex - color
* @param opacity - value between 0-1
* */
$scope.hexToRgbA = function (hex, opacity) {
var c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c = hex.substring(1).split('');
if (c.length == 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = '0x' + c.join('');
return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
}
};
/**
* Set text color based on the background
*
* @param color - background color
* */
$scope.isColorLight = function (color) {
var c;
if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(color)) {
c = color.substring(1).split('');
if (c.length == 3) {
c = [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c = '0x' + c.join('');
var r = (c >> 16) & 255,
g = (c >> 8) & 255,
b = c & 255;
// Counting the perceptive luminance
// human eye favors green color...
var a = 1 - (0.240 * r + 0.470 * g + 0.150 * b) / 255;
return (a < 0.4);
}
};
/**
* Copy short ulr to clipboard
*
* @param elem - input element with the link
* */
$scope.ifCopySucceed = false;
$scope.copyLinkToClipboard = function (elem) {
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch (e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
$scope.$apply(function () {
$scope.ifCopySucceed = succeed;
});
setTimeout(function () {
$scope.$apply(function () {
$scope.ifCopySucceed = false;
});
}, 1500)
};
/**
* Determine the mobile operating system.
* This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
*
* @returns {String}
*/
$scope.getMobileOperatingSystem = function () {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
// Windows Phone must come first because its UA also contains "Android"
if (/windows phone/i.test(userAgent)) {
return "Windows Phone";
}
if (/android/i.test(userAgent)) {
return "Android";
}
// iOS detection from: http://stackoverflow.com/a/9039885/177710
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return "iOS";
}
return "unknown";
};
$scope.returnPlayColor = function () {
if ($scope.view && $scope.view.code) {
var textColor = $scope.isColorLight($scope.view.code.color2) ? "#000" : "#fff";
var pauseColor = $scope.isColorLight($scope.view.code.color2) ? "#000" : $scope.view.code.color2;
if ($('#pButton').hasClass('icon-pause'))
return "background:none;" + "color:" + pauseColor + ";border: 1px solid " + pauseColor + ";";
else
return "background:" + $scope.view.code.color2 + ";color:" + textColor + ";";
}
};
$scope.$watch('view.code.mp3.url', function (newVal, oldVal, scope) {
if (newVal) {
if ($scope.view.code.downloadMp3 == undefined)
$scope.view.code.downloadMp3 = true;
var htmlAudioPlayer = $(".play-container .htmlAudioPlayer");
switch (scope.view.code.mp3.type) {
case 'audio/wav':
htmlAudioPlayer.html('<audio id="music" preload="true">' +
'<source src="' + $scope.getMP3Url() + '" type="audio/wav">' +
'</audio>');
break;
case 'audio/ogg':
htmlAudioPlayer.html('<audio id="music" preload="true">' +
'<source src="' + $scope.getMP3Url() + '" type="audio/ogg">' +
'</audio>');
break;
default:
htmlAudioPlayer.html('<audio id="music" preload="true">' +
'<source src="' + $scope.getMP3Url() + '" type="audio/mpeg">' +
'</audio>');
}
setTimeout(function () {
var music = undefined;
music = document.getElementById('music'); // id for audio element
$scope.$apply(function () {
$scope.currentMusic = music;
})
var duration = music.duration; // Duration of audio clip, calculated here for embedding purposes
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var playedBar = document.getElementById('playedBar'); // playhead
var timeline = document.getElementById('timeline'); // timeline
playhead.style.marginLeft = 0 + "px";
playedBar.style.width = 0 + "px";
// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;
// play button event listenter
//pButton.addEventListener("click", play);
// timeupdate event listener
music.addEventListener("timeupdate", timeUpdate, false);
// makes timeline clickable
timeline.addEventListener("click", function (event) {
moveplayhead(event);
if (!isNaN(duration))
music.currentTime = parseFloat(duration * clickPercent(event));
$scope.$apply(function () {
$scope.duration = duration;
$scope.currentTime = music.currentTime;
});
}, false);
// returns click as decimal (.77) of the total timelineWidth
function clickPercent(event) {
return (event.clientX - getPosition(timeline)) / timelineWidth;
}
// makes playhead draggable
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
// Boolean value so that audio position is updated only when the playhead is released
var onplayhead = false;
// mouseDown EventListener
function mouseDown() {
onplayhead = true;
window.addEventListener('mousemove', moveplayhead, true);
music.removeEventListener('timeupdate', timeUpdate, false);
}
// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(event) {
if (onplayhead == true) {
moveplayhead(event);
window.removeEventListener('mousemove', moveplayhead, true);
// change current time
if (!isNaN(duration))
music.currentTime = parseFloat(duration * clickPercent(event));
$scope.$apply(function () {
$scope.currentTime = duration;
});
music.addEventListener('timeupdate', timeUpdate, false);
}
onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(event) {
var newMargLeft = event.clientX - getPosition(timeline);
if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
playhead.style.marginLeft = newMargLeft + "px";
playedBar.style.width = newMargLeft + "px";
}
if (newMargLeft < 0) {
playhead.style.marginLeft = "0px";
playedBar.style.width = "0px";
}
if (newMargLeft > timelineWidth) {
playhead.style.marginLeft = timelineWidth + "px";
playedBar.style.width = timelineWidth + "px";
}
}
// timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
var playPercent = timelineWidth * (music.currentTime / duration);
playhead.style.marginLeft = playPercent + "px";
playedBar.style.width = playPercent + "px";
$scope.$apply(function () {
$scope.currentTime = music.currentTime;
});
if (music.currentTime == duration) {
pButton.className = "";
pButton.className = "icon-play";
pButton.style = $scope.returnPlayColor();
$('.avatar-square').removeClass('playZoom');
}
}
// Gets audio file duration
music.addEventListener("canplaythrough", function () {
duration = music.duration;
$scope.$apply(function () {
$scope.duration = duration;
})
}, false);
// getPosition
// Returns elements left position relative to top-left of viewport
function getPosition(el) {
return el.getBoundingClientRect().left;
}
music.addEventListener('loadedmetadata', function () {
music.setAttribute('data-time', music.duration);
$scope.$apply(function () {
$scope.currentTime = "0.00";
$scope.duration = music.duration;
});
}, false);
}, 0)
}
})
$scope.play = function (event) {
// start music
var pButton = event.currentTarget;
if ($scope.currentMusic.paused) {
$('.avatar-square').addClass('playZoom');
$scope.currentMusic.play();
// remove play, add pause
pButton.className = "";
pButton.className = "icon-pause";
} else { // pause music
$('.avatar-square').removeClass('playZoom');
$scope.currentMusic.pause();
// remove pause, add play
pButton.className = "";
pButton.className = "icon-play";
}
}
$(document).ready(function () {
/**
* To work, function 'copyLinkToClipboard' needs to be called from an event listener on the copy button
* */
document.getElementById("copyButton").addEventListener("click", function () {
$scope.copyLinkToClipboard(document.getElementById("shortUrl"));
});
setTimeout(function () {
$scope.thumbnailWidth = $('.thumbnail-container').innerWidth();
$scope.thumbnailHeight = $('.thumbnail-container').innerHeight();
}, 0)
});
}
);
if (parent && typeof parent.ImHere === "function") {
parent.ImHere();
} else {
//Only load this on standalone pages not inframe working
SocialShareKit.init();
}
/**
* Toggle fab
*
* @param id - id of the fab
*/
function toggleFab(id) {
$(id + ' .prime').toggleClass('is-active');
$(id + ' #prime').toggleClass('is-float');
$($(id).parent()).toggleClass('fabOnTop');
$('#prime.fab').toggleClass('disabledClick');
$(id + ' .fixed-blur-bgd').toggle();
$(id + ' .chat').toggleClass('is-visible');
}
$(document).ready(function () {
$('#share-fab-button').click(function () {
toggleFab('#shareFab');
});
/**
* On window resize if width is bigger then tablet remove calendar and share mobile style
* */
$(window).resize(function () {
if (window.innerWidth >= 667) {
$('.follow-scroll.calendar-container').removeAttr('style');
$('.follow-scroll.share-container').removeAttr('style');
} else {
var bottom = '5px',
right = '0px';
if ($(window).innerWidth() < 321)
right = '-25px';
$('.follow-scroll.share-container').css({
'position': 'fixed',
'bottom': bottom,
'right': right,
'width': '80px'
});
}
});
/**
* Close fab from close icon
* */
$('#prime, .icon-fab-close').click(function () {
var id = $($(this).closest('.fabs')).attr('id');
toggleFab('#' + id);
});
/**
* Close fab on blur bgd click
* */
$('.fixed-blur-bgd').click(function () {
if (event.target == $(this)[0]) {
$($("#prime.is-float").parent().parent()).removeClass('fabOnTop');
$('.prime').removeClass('is-active');
$('#prime').removeClass('is-float');
$('#prime.fab').removeClass('disabledClick');
$('.chat, .dialog-container').removeClass('is-visible');
$(this).hide();
}
});
/**
* Ripple effect on element
*/
var ink, d, x, y;
$(".ripplelink").click(function (e) {
if ($(this).find(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({height: d, width: d});
}
x = e.pageX - $(this).offset().left - ink.width() / 2;
y = e.pageY - $(this).offset().top - ink.height() / 2;
ink.css({top: y + 'px', left: x + 'px'}).addClass("animate");
});
});
/*]]>*/
</script>
</body></html>