У меня есть сайт, размещенный на Heroku (https://steadysolescheckoutsim.herokuapp.com/), и когда сайт загружен, таймер должен автоматически запуститься, и когда вы нажмете кнопку «Купить», должна появиться поддельная касса. Все это работает на локальном хосте, но не на Heroku.
Вот индекс. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Steady Soles</title>
<meta name="description" content="Checkout sim || open source">
<meta name="author" content="@jxcvby">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="./files/jquery-3.3.1.js.download"></script>
<link rel="stylesheet" media="screen" href="./files/style.css">
<link rel="stylesheet" type="text/css" href="./files/bootstrap.min.css">
<link rel="stylesheet" href="./files/font-awesome.min.css">
<link rel="stylesheet" href="./files/animate.css">
<script src="./files/wow.min.js.download"></script>
<link href="./files/css" rel="stylesheet">
<script src="./files/v3"></script>
<script>
new WOW().init();
</script>
</head>
<body onload="myFunction()" style="margin:0;">
<div id="loader-wrapper" class="wrapper-loader" style="display: none;">
<div class="container">
<div class="col-12">
<div id="loader">
</div>
</div>
</div>
</div>
<div class="mainpage" id="mainpage">
<nav class="nav-bar">
<div class="logo-nav">
<img src="./files/logo.png" class="logo-nav-image">
</div>
<div class="right-nav">
<div class="col-nav">
<p align="center"><span style="color:#fff;;">Features</span></p>
</div>
<div class="col-nav">
<p align="center"><span style="color:#fff;">Retailers</span></p>
</div>
<div class="col-nav">
<p align="center"><span style="color:#fff;">App</span></p>
</div>
<div class="col-nav">
<p align="center"><span style="color:#fff;">Success</span></p>
</div>
<div class="col-nav">
<p align="center"><span style="color:#fff;">FAQ</span></p>
</div>
<div class="col-nav">
<p align="center"><span style="color:#fff;">Help</span></p>
</div>
<div class="col-nav">
<p align="center"><button class="dashboard">Dashboard</button></p>
</div>
</div>
</nav>
<br>
<h1 style="color:#fff;">00:00:00</h1>
<button id="start" class="dashboard">start</button>
<button id="clear" class="dashboard">clear</button>
<div id="pop_checkout" class="login-container hide">
<p align="center" class="title-checkout">
<img src="./files/logo.png" class="logo-checkout">
</p>
<p align="center">
<input type="text" class="email" placeholder="Email">
</p>
<div class="stripe-elements">
<div id="CardNumberHolder" class="cardnumber StripeElement StripeElement--empty">
<div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame5" allowpaymentrequest="true" src="./files/elements-inner-card-454fa437f26b2584d8ab85e3bac96af2.html" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; height: 14.4px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div>
</div>
<div id="CardExpireHolder" class="cardexpiry StripeElement StripeElement--empty">
<div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame6" allowpaymentrequest="true" src="./files/elements-inner-card-454fa437f26b2584d8ab85e3bac96af2(1).html" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; height: 14.4px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div>
</div>
<div id="CardCvvHolder" class="ccv StripeElement StripeElement--empty">
<div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame7" allowpaymentrequest="true" src="./files/elements-inner-card-454fa437f26b2584d8ab85e3bac96af2(2).html" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; height: 14.4px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div>
</div>
</div>
<p></p>
<p align="center" class="button">
<button class="login" id="stop">
Purchase
</button>
</p>
</div>
<div class="container" id="closepop">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p align="center" class="title"><span class="whitelarge"><b>Steady Soles Restock Simulator</b></span></p>
<p align="center" class="grey"><span class="medium">Need to better your skills in catching restocks?<br>Best place to do it, for our members only.</span></p>
<p align="center"><button class="dashboard" id="PurchaseBtn">Purchase</button></p>
</div>
</div>
<div class="container-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
</div>
</div>
</div>
<script type="text/javascript">
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 800);
}
function showPage() {
document.getElementById("loader-wrapper").style.display = "none";
var element = document.getElementById("mainpage");
element.classList.remove("hide");
}
</script>
<script src="./files/index.js.download"></script><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeController1" allowpaymentrequest="true" src="./files/controller-89bb338e439a55d87e8fb37a06ff881e.html" aria-hidden="true" tabindex="-1" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; visibility: hidden !important; position: fixed !important; height: 1px !important; pointer-events: none !important; user-select: none !important;"></iframe>
<script src="./files/jquery.min.js.download"></script>
<script src="./files/bootstrap.min.js.download"></script>
<iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeMetricsController0" allowpaymentrequest="true" src="./files/outer.html" aria-hidden="true" tabindex="-1" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; visibility: hidden !important; position: fixed !important; height: 1px !important; pointer-events: none !important; user-select: none !important;"></iframe>
</body>
</html>
Я запускаю его как приложение PHP, и я включил индексный файл. php, который выглядит следующим образом:
<?php include_once("index.html"); ?>
Пожалуйста, дайте мне знать, если вам нужно увидеть другие файлы, такие как css, et c.