| Server IP : 157.230.181.24 / Your IP : 216.73.217.11 Web Server : Apache/2.4.58 (Ubuntu) System : Linux conductive 6.8.0-117-generic #117-Ubuntu SMP PREEMPT_DYNAMIC Tue May 5 19:26:24 UTC 2026 x86_64 User : ( 1000) PHP Version : 8.3.31 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/vhosts/dev/public/regal/ |
Upload File : |
<html>
<head>
<title>Regal Boats Model Test</title>
<style>
html {
background: #FFF;
transition: all 0.25s ease-out;
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.1));
}
#main {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#boat svg {
width: 900px;
margin-bottom: 20px;
}
#boat * {
transition: all 0.25s ease-out;
}
.swatch {
width: 64px;
height: 64px;
cursor: pointer;
}
.swatch--aqua { background: #20B3B7; }
.swatch--red { background: #c90d33; }
.swatch--green { background: #0a0; }
.swatch--black { background: #222; }
.swatch--blue { background: #4192af; }
.swatch--white { background: #f2f2f2; }
.swatch--gray { background: #766b6b; }
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var scheme = 'classic';
$('.scheme').bind('click', function(event) {
scheme = $(this).attr('data-scheme');
$('#boat #classic, #boat #premier, #boat #custom').css('opacity', 0);
$('#boat #' + scheme).css('opacity', 1);
});
$('.swatch').bind('click', function(event) {
var fill = $(this).attr('data-fill');
if($(this).attr('data-target') === 'stripe') {
$('#boat #classic #stripe, #boat #premier #stripe, #boat #custom #stripe').css('fill', fill);
}
else {
$('#boat #classic #hull, #boat #premier #hull, #boat #custom #hull').css('fill', fill);
$('html').css('background-color', fill);
}
});
$('#boat #classic *, #boat #premier *, #boat #custom *').css('fill', $('.swatch').first().attr('data-fill'));
$('.powertower').bind('click', function(event) {
if($(this).attr('data-powertower') === 'none') {
$('#boat #Tower').css('opacity', 0);
}
else {
$('#boat #Tower').css('opacity', 1);
$('#boat #Tower #tower-fill').css('fill', $(this).attr('data-powertower'));
}
});
});
</script>
</head>
<body>
<div id="main">
<div>
<div id="boat">
<?= file_get_contents('regal_2500-forCaleb.svg') ?>
</div>
<button class="scheme" data-scheme="classic">Classic</button>
<button class="scheme" data-scheme="custom">Custom</button>
<button class="scheme" data-scheme="premier">Premier</button>
<br/><br/><br/>
<button class="swatch swatch--aqua" data-target="stripe" data-fill="#20B3B7"></button>
<button class="swatch swatch--red" data-target="stripe" data-fill="#c90d33"></button>
<!-- <button class="swatch swatch--green" data-target="stripe" data-fill="#00aa00"></button> -->
<button class="swatch swatch--black" data-target="stripe" data-fill="#222222"></button>
<button class="swatch swatch--blue" data-target="stripe" data-fill="#4192af"></button>
<button class="swatch swatch--white" data-target="stripe" data-fill="#f2f2f2"></button>
<button class="swatch swatch--gray" data-target="stripe" data-fill="#766b6b"></button>
<br/><br/><br/>
<button class="swatch swatch--aqua" data-target="schema" data-fill="#20B3B7"></button>
<button class="swatch swatch--red" data-target="schema" data-fill="#c90d33"></button>
<!-- <button class="swatch swatch--green" data-target="schema" data-fill="#00aa00"></button> -->
<button class="swatch swatch--black" data-target="schema" data-fill="#222222"></button>
<button class="swatch swatch--blue" data-target="schema" data-fill="#4192af"></button>
<button class="swatch swatch--white" data-target="schema" data-fill="#f2f2f2"></button>
<button class="swatch swatch--gray" data-target="schema" data-fill="#766b6b"></button>
<br/><br/><br/>
<button class="powertower" data-powertower="none">No Tower</button>
<button class="powertower" data-powertower="#222222">Black Tower</button>
<button class="powertower" data-powertower="#F2F2F0">White Tower</button>
</div>
</div>
</body>
</html>