2025-06-07 08:51:21 +02:00
|
|
|
<head>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js" type="text/javascript"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.2.0/css/pro.min.css">
|
|
|
|
|
<link rel="stylesheet" href="styles.css" type="text/css">
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
|
|
|
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
|
|
|
<script src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflJJaNgk/www-widgetapi.js"></script>
|
|
|
|
|
<script src="https://www.youtube.com/iframe_api"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css">
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div class="full-screen">
|
|
|
|
|
<div class="infonotify-container" id="infonotifyshow">
|
|
|
|
|
<div class="infonotifytext">Text</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bumpercarsbuy-container" id="bumpercarsbuyshow">
|
|
|
|
|
<img class="closebumpercarsbuy" src="img/close.png" style="width:25px;height:25px" alt="closebumpercarsbuy"/>
|
|
|
|
|
<div class="logobumpercars">
|
|
|
|
|
<img id="logobumpercars" src="img/bumpercarslogo.png" style="width:220px;height:120px" alt="Logo">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bumpercarstimelengthtextmain">length of ride</div>
|
|
|
|
|
<div class="bumpercarstimesliderline">
|
|
|
|
|
</div>
|
|
|
|
|
<input type="range" min="1" max="15" value="1" class="bumpercarstimeslider" id="bumpercarstimesliderdata" onchange="bumpercarstimesliderupdate(this)">
|
|
|
|
|
<div class="bumpercarstimelengthtext"><span id="bumpercarstimeminutedata">1</span> minutes</div>
|
|
|
|
|
<div class="bumpercarspricetext">Current price<br>$<span id="bumpercarspricedata">100</span></div>
|
|
|
|
|
<div class="bumpercarsbuybutton">Pay for a ride</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bumpercarmain-container" id="bumpercarmainshow">
|
|
|
|
|
<div class="bumpercartimetext" id="bumpercartimetextshow"><span id="bumpercartimetextdata">100</span> seconds remaining</div>
|
|
|
|
|
<div class="bumpercarleavetext">Press <span id="bumpercarleavetextkey">E</span> to exit the bumper car</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ferrismain-container" id="ferrisshow">
|
|
|
|
|
<div class="ferrisanimtext">Press <span id="ferrisanimtextkey">E</span> to change the animation</div>
|
|
|
|
|
<div class="ferrisleavetext">Press <span id="ferrisleavetextkey">F</span> to exit the ferris wheel</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="shooter-container" id="shootershow">
|
|
|
|
|
<div class="shootershottext">Shoots: <span id="shootershottextdata">0</span></div>
|
|
|
|
|
<div class="shootermissestext">Misses: <span id="shootermissestextdata">0</span></div>
|
|
|
|
|
<div class="shootertimetext"><span id="shootertimetextdata">0</span> seconds left</div>
|
|
|
|
|
<div class="shootertexthit" id="shootertexthitshow">You <span id="shootertexthitdata">hit</span> target</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="shooterend-container" id="shooterendshow">
|
|
|
|
|
<div class="shooterendmaintext">Shooting Range</div>
|
|
|
|
|
<div class="shooterendtext">Game Over</div>
|
|
|
|
|
<div class="shooterendshootstext">Shoots: <span id="shooterendshootstextdata">0</span></div>
|
|
|
|
|
<div class="shooterendmissestext">Misses: <span id="shooterendmissestextdata">0</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkbuy-container" id="parkbuyshow">
|
|
|
|
|
<div class="headerparkbuy">
|
|
|
|
|
<div class="headerparkbuytext">THEME PARK</div>
|
|
|
|
|
<img class="closeparkbuy" src="img/close.png" style="width:25px;height:25px"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkbuytext">THEME PARK PRICE</div>
|
|
|
|
|
<div class="parkbuytextprice">$<span id="parkbuytextpricedata">100</span></div>
|
|
|
|
|
<div class="buttonparkbuy">BUY THEME PARK</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkmanagmentmain-container" id="parkmanagmentmainshow">
|
|
|
|
|
<div class="parkmanagmentmaincontainer">
|
|
|
|
|
<div id="showownerparkmain">
|
|
|
|
|
<div class="parkmanagmentownershiptext">Theme Park OWNERSHIP</div>
|
|
|
|
|
<div class="parkmanagmentownershiptextinfo">Setting up ownership of your theme park</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="showsellpark">
|
|
|
|
|
<div class="parkmanagmentownershipsellbutton">SELL PARK</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="showtransferpark">
|
|
|
|
|
<div class="parkmanagmentownershipstransferbutton">TRANSFER PARK</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkmanagmentsettingstext">Theme Park SETTINGS</div>
|
|
|
|
|
<div class="parkmanagmentsettingstextinfo">Setting up your theme park attraction</div>
|
|
|
|
|
<div class="parkmanagmentsettingsbutton">Settings</div>
|
|
|
|
|
<div class="parkmanagmentwithdrawtext">Theme Park Balance</div>
|
|
|
|
|
<div class="parkmanagmentwithdrawmoneytext">$<span id="parkmanagmentwithdrawmoneytextdata">100</span></div>
|
|
|
|
|
<div class="parkmanagmentwithdrawbutton">Withdraw</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkmanagment-container" id="parkmanagmentshow">
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction1">
|
|
|
|
|
<div class="parkattractionname">G-Force</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata1">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
2025-08-04 20:19:07 +02:00
|
|
|
</div>
|
2025-06-07 08:51:21 +02:00
|
|
|
<div class="parkattraction" id="parkmanagmentattraction2">
|
|
|
|
|
<div class="parkattractionname">Top Scan</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata2">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
2025-08-04 20:19:07 +02:00
|
|
|
</div>
|
2025-06-07 08:51:21 +02:00
|
|
|
<div class="parkattraction" id="parkmanagmentattraction3">
|
|
|
|
|
<div class="parkattractionname">Roller coaster</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata3">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
2025-08-04 20:19:07 +02:00
|
|
|
</div>
|
2025-06-07 08:51:21 +02:00
|
|
|
<div class="parkattraction" id="parkmanagmentattraction4">
|
|
|
|
|
<div class="parkattractionname">Shooting Range</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata4">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
2025-08-04 20:19:07 +02:00
|
|
|
</div>
|
2025-06-07 08:51:21 +02:00
|
|
|
<div class="parkattraction" id="parkmanagmentattraction5">
|
|
|
|
|
<div class="parkattractionname">Shooting Range</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata5">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction6">
|
|
|
|
|
<div class="parkattractionname">Bumper Cars</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata6">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction7">
|
|
|
|
|
<div class="parkattractionname">Vortex</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata7">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction8">
|
|
|
|
|
<div class="parkattractionname">Ferris wheel</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata8">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
2025-08-04 20:19:07 +02:00
|
|
|
</div>
|
2025-06-07 08:51:21 +02:00
|
|
|
<div class="parkattraction" id="parkmanagmentattraction9">
|
|
|
|
|
<div class="parkattractionname">Detonator</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata9">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
2025-08-04 20:19:07 +02:00
|
|
|
</div>
|
2025-06-07 08:51:21 +02:00
|
|
|
<div class="parkattraction" id="parkmanagmentattraction10">
|
|
|
|
|
<div class="parkattractionname">Boat</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata10">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
2025-08-04 20:19:07 +02:00
|
|
|
<div class="parkattraction" id="parkmanagmentattraction11">
|
|
|
|
|
<div class="parkattractionname">Prater</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata11">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction12">
|
|
|
|
|
<div class="parkattractionname">Break Dance</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata12">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction13">
|
|
|
|
|
<div class="parkattractionname">Slingshot</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata13">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction14">
|
|
|
|
|
<div class="parkattractionname">Carousel</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata14">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction15">
|
|
|
|
|
<div class="parkattractionname">Extasy</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata15">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction16">
|
|
|
|
|
<div class="parkattractionname">Spinride</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata16">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
2025-06-07 08:51:21 +02:00
|
|
|
</div>
|
2025-08-04 20:19:07 +02:00
|
|
|
<div class="parkattraction" id="parkmanagmentattraction17">
|
|
|
|
|
<div class="parkattractionname">Hauntedhouse</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata17">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction18">
|
|
|
|
|
<div class="parkattractionname">Rollercoaster 2</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata18">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction" id="parkmanagmentattraction19">
|
|
|
|
|
<div class="parkattractionname">Cannon</div>
|
|
|
|
|
<div class="parkattractiontextclose">Close</div>
|
|
|
|
|
<div class="parkattractiontextopen">Open</div>
|
|
|
|
|
<label class="parkattractionopeninput">
|
|
|
|
|
<input type="checkbox" id="parkattractionopendata19">
|
|
|
|
|
<span class="parkattractionopeninputslider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
2025-06-07 08:51:21 +02:00
|
|
|
</div>
|
|
|
|
|
<div class="attractionbuyticket-container" id="attractionbuyticketshow">
|
|
|
|
|
<img class="closeattractionbuyticket" src="img/close2.png" style="width:25px;height:25px" alt="attractionbuyticket"/>
|
|
|
|
|
<div class="logobuyticket">
|
|
|
|
|
<img id="logobuyticket" src="img/pierlogo.png" style="width:350px;height:180px" alt="Logo">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attractionbuytickettextpricemain">Ticket Price</div>
|
|
|
|
|
<div class="attractionbuytickettextprice">$<span id="attractionpricedata">1000</span></div>
|
|
|
|
|
<div class="attractionbuyticketbutton">
|
|
|
|
|
<div class="attractionbuytickettext">BUY TICKET</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="iteminhand-container" id="iteminhandshow">
|
|
|
|
|
<div class="iteminhandtextgive">Press <span id="iteminhandtextgivekey">F</span> to throw the item</div>
|
|
|
|
|
<div class="iteminhandtextthrow">Press <span id="iteminhandtextthrowkey">G</span> to pass the item to the player</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attraction-container" id="attractionshow">
|
2025-08-04 20:19:07 +02:00
|
|
|
<div class="attractioncamtext2" id="attractioncamtextshow2">Press <span id="attractioncamtextkey">B</span> to change the camera</div>
|
|
|
|
|
<div class="attractioncamtext" id="attractioncamtextshow">Press <span id="attractioncamtextkey">B</span> to change the camera</div>
|
2025-06-07 08:51:21 +02:00
|
|
|
<div class="attractionanimtext" id="attractionanimtextshow">Press <span id="attractionanimtextkey">E</span> to change the animation</div>
|
|
|
|
|
<div class="attractionleavetext">Press <span id="attractionleavetextkey">F</span> to exit the attraction</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="parkattraction-container" id="parkattractionshow">
|
|
|
|
|
<img class="closeparkattractionmenu" src="img/close.png" style="width:25px;height:25px" alt="closeattractionmenu"/>
|
|
|
|
|
<div class="parkattractioncontroltext">VORTEX</div>
|
|
|
|
|
<div id="parkshowmusic">
|
|
|
|
|
<div class="parkattractioncontrolmusictext">CURRENT MUSIC</div>
|
|
|
|
|
<div class="parkattractioncontrolmusictextdata"></div>
|
|
|
|
|
<div class="parkattractioncontrolmusicvolumetext">VOLUME</div>
|
|
|
|
|
<div class="volumeslidercontainer">
|
|
|
|
|
<div class="volumeicon1"><i class="fas fa-volume-down" id="pinkcolortv"></i></div>
|
|
|
|
|
<div class="volumeicon2"><i class="fas fa-volume-up" id="pinkcolortv"></i></div>
|
|
|
|
|
<div class="volumeslideline">
|
|
|
|
|
</div>
|
|
|
|
|
<input type="range" min="1" max="100" value="100" class="volumeslider" id="volumesliderdata" onchange="volumechange(this)">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="buttonmusicplay">PLAY MUSIC</div>
|
|
|
|
|
<div class="buttonmusicstop">STOP MUSIC</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="parkshowsmoke">
|
|
|
|
|
<div class="parkattractioncontrolsmokecolortext">SMOKE COLOR</div>
|
|
|
|
|
<div class="colorchanger">
|
|
|
|
|
<input class="pickercolor" id="color-picker" value="#ff66ff"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="buttonsmokestart">START SMOKE</div>
|
|
|
|
|
<div class="buttonsmokestop">STOP SMOKE</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="parkshowturn">
|
|
|
|
|
<div class="buttonstartattraction">START ATTRACTION</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="attractionurl-container" id="attractionurlshow">
|
|
|
|
|
<img class="closemusicurl" src="img/close.png" style="width:22px;height:20px" alt="closemusicmenu"/>
|
|
|
|
|
<input id="musicinputdata" class="musicinput" placeholder="MUSIC URL" type="text">
|
|
|
|
|
<div class="musicurlmaintext">ATTRACTION MUSIC</div>
|
|
|
|
|
<div class="buttonplaynewmusic">PLAY MUSIC</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="jquery.connections.js" type="text/javascript"></script>
|
|
|
|
|
<script src="scripts.js" type="text/javascript"></script>
|
|
|
|
|
<script src="sound.js" type="text/javascript"></script>
|
|
|
|
|
<script src="debounce.min.js" type="text/javascript"></script>
|
|
|
|
|
</body>
|
