https://bestcoast.fm/donorbox.html

1<!DOCTYPE html>
2<html lang="en" class="no-js">
3
4<head>
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>bestcoast.fm</title>
7  <link rel="stylesheet" href="css/animate.css">
8  <link rel="stylesheet" href="css/site.css">
9  <link rel="stylesheet" type="text/css" href="css/component.css" />
10  

10<script src="js/modernizr.custom.js"></script>

10
11</head>
12
13<body class="donatePage">
14  <div class="donateBackground"></div>
15  <div class="container">
16    <div class="main">
17      <div class="contentOuter">
18        <div class="logo">
19          <a href="index.html" class="logo1"><img src="images/logo.png" alt="logo"></a>
20          <a href="index.html" id="logo" style="display: none;"><img src="images/logo.png" alt="logo"></a>
21        </div>
22        <div class="footerText">
23          <div id="donateOption" class="donateOption">
24            <div>
25              <p>
26                <span class="donate_bubble">donate*</span> <a href="javascript:void(0);" class="montylyPayment">monthly</a> or <a href="javascript:void(0);" class="paymentOnce">once</a> </p>
27              <div class="surviveCircle wow fadeInUp">
28                <h4>bestcoast.fm is all about the music: no commercials, no talking, no self-promoting hosts - just music!</h4>
29                <p>Your donation will help to keep this non-profit radio station alive and covers for server maintenance, website hosting, internet bandwidth, royalties and, and, and&hellip;</p>
30                <p>Last but not least: bestcoast.fm's music is manually curated and not generated from an algorithm - we are not robots!</p>
31                <p>A BIG thank you to everyone for tuning in, donating or even both!</p>
32              </div>
33            </div>
34          </div>
35          <input type="hidden" name="payment_type" value="">
36          

36<script src="https://donorbox.org/widget.js" paypalExpress="true"></script>

36
37          <iframe id="donorbox_frame" src="https://donorbox.org/embed/donorbox-compaign" height="685px" width="100%" style="max-width:500px; min-width:310px; max-height:none!important;display: none;" seamless="seamless" name="donorbox" frameborder="0" scrolling="no" allowpaymentrequest></iframe>
38        </div>
39      </div>
40    </div>
41  </div>
42  

42<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

42
43  

43<script src="https://public.radio.co/playerapi/jquery.radiocoplayer.min.js"></script>

43
44  

44<script type="text/javascript" src="js/main.js" async></script>

44
45  

45<script type="text/javascript">
46    function donorbox() {
47      var $iframe = $("#donorbox_frame");
48      if ($iframe.length) {
49        $query_string = "";
50        if ($("input[name='payment_type']").val() == "m") {
51          $query_string = $query_string + "?default_interval=m";
52        }
53        $iframe_url = $iframe.attr('src');
54        $url = $iframe_url + $query_string;
55        $iframe.attr('src', $url);
56        setTimeout(function () {
57          $iframe.show();
58        }, 1000);
59      }
60    }
61
62    $(window).on('load', function () {
63      setTimeout(function () {
64
65        /* $(".heartSmall").one("click", function(){
66           $('.logo1').css('display','none');
67           $('#logo').css('display','block');
68         }); */
69        $('#logo').click(function (e) {
70          e.preventDefault();
71          if (clicks == 0) {
72
73          } else {
74            $process_status = $(".footerText").attr("data-process");
75            if ($process_status == "started") {
76              $('.donateBtn').css('animation', '');
77              $('.heartSmall,#logo').css('animation', '');
78              $("#slideshow").show();

79              $(".donateBackground").hide();
80              $(".donateBackgroundTitle").hide();
81              $("#donateOption").hide();
82              $('.logo1').css('display', 'block');
83              $('#logo').css('display', 'none');
84
85              $("#donorbox_frame").hide();
86
87              $(".footerText").attr("data-process", "stop");
88            } else if ($process_status == "stop") {
89              $("#slideshow").hide();
90              $(".donateBackground").show();
91              $(".donateBackgroundTitle").show();
92              $("#donateOption").show();
93              $('.logo1').css('display', 'none');
94              $('#logo').css('display', 'block');
95
96              $(".footerText").attr("data-process", "started");
97            }
98          }
99          clicks++;
100        });
101      }, 30000);
102    });
103
104    var clicks = 0;
105    $(function () {
106      var cards = $('.donateBtn');
107      for (var i = 0; i < cards.length; i++) {
108        var target = Math.floor(Math.random() * cards.length - 1) + 1;
109        var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
110        cards.eq(target).before(cards.eq(target2));
111      }
112
113      $(".donate_bubble").hover(function () {
114        $(".surviveCircle").css('display', 'flex');
115      }, function () {
116        $(".surviveCircle").hide();
117      });
118
119      $('#donorbox_frame .copyright a').css('opacity', '0');
120      $('#donorbox_frame .copyright').css('opacity', '0');
121      $(".montylyPayment").click(function () {
122        $('.donateBtn').css('animation-play-state', 'paused');
123        $('.heartSmall,#logo').css('animation-play-state', 'paused');
124        $("input[name='payment_type']").val("m");
125        $("#donateOption").hide();
126        donorbox();
127      });
128
129      /*donate once*/
130      $(".paymentOnce").click(function () {
131        $('.donateBtn').css('animation-play-state', 'paused');
132        $('.heartSmall,#logo').css('animation-play-state', 'paused');
133        $("#donateOption").hide();
134        donorbox();
135      });
136
137      /*donate once end*/
138      $("#monthlyDonateAmount input,#donateOnce input").focus(function () {
139        $(".donateAmount").hide();
140      });
141
142    });
143    //initialise the plugin with the element
144    var player = $('.radioplayer').radiocoPlayer();
145    $('#radio_co').on('click', function () {
146      player.playToggle();
147    });
148
149    player.event('audioPlay', function (e) {
150      $("#radio_co").attr("src", "images/play_new1.gif");
151      $(".track_name").show();
152    })
153
154    player.event('audioPause', function (e) {
155      $("#radio_co").attr("src", "images/pause.png");
156      $(".track_name").hide();
157    })
158  </script>

158
159</body>
160
161</html>