PUBLICREADY
index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" href="/css/main.css">
    </head>
    <body>
        <div class="wrap">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container">
		<a class="navbar-brand" href="#">Brand</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarPrimary" aria-controls="navbarPrimary" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarPrimary">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active">
					<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">Link</a>
				</li>
				<li class="nav-item">
					<a class="nav-link disabled" href="#">Disabled</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
					<div class="dropdown-menu" aria-labelledby="dropdown07">
						<a class="dropdown-item" href="#">Action</a>
						<a class="dropdown-item" href="#">Another action</a>
						<a class="dropdown-item" href="#">Something else here</a>
					</div>
				</li>
			</ul>
			<form class="form-inline my-2 my-md-0">
				<input class="form-control" type="text" placeholder="Search" aria-label="Search">
			</form>
		</div>
	</div>
</nav>
            <section class="jumbotron text-center">
	<div class="container">
		<h1 class="jumbotron-heading">Hero headline</h1>
		<p class="lead text-muted">Here is some hero content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore quos omnis magni corrupti amet quas pariatur odio tenetur voluptatum atque, veniam ea accusantium id, ratione unde eos velit officiis expedita.</p>
		<p>
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalWidget">
				Customize Your Product
			</button>
		</p>
	</div>
</section>
<div class="album text-muted">
	<div class="container">
		<div class="row">
			<div class="card">
				<img alt="100%x280" style="height: 280px; width: 100%; display: block;" src="https://placehold.it/356x280/868e96/f8f9fa">
				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
			</div>
			<div class="card">
				<img alt="100%x280" src="https://placehold.it/356x280/868e96/f8f9fa" style="height: 280px; width: 100%; display: block;">
				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
			</div>
			<div class="card">
				<img alt="100%x280" src="https://placehold.it/356x280/868e96/f8f9fa" style="height: 280px; width: 100%; display: block;">
				<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
			</div>
		</div>
	</div>
</div>
<section class="modal fade" id="modalWidget" tabindex="-1" role="dialog" aria-labelledby="modalWidgetLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modalWidgetLabel">Customize your product</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="row">
						<div class="col-sm-6 text-center">
							<img alt="Product Image" :src="url" style="max-width: 100%; height: auto;">
						</div>
						<div class="col-sm-6">
							<div class="form-group">
								<div class="row">
									<div class="col-12">
										<label class="col-form-label" for="productText">Text</label>
										<input type="text" class="form-control" id="productText" placeholder="Text on your image" v-model="text">
									</div>
								</div>
							</div>
							<div class="form-group">
								<label for="productSizeX">Size</label>
								
								<div class="row align-items-center">								
									<div class="col-5">
										<label class="sr-only" for="productSizeX">Width</label>
										<input class="form-control" type="text" id="productSizeX" placeholder="Width" aria-describedby="dimensionsHelp" v-model="size.width">
									</div>
									<div class="col-2">&times;</div>
									
									<div class="col-5">
										<label class="sr-only" for="productSizeY">Height</label>
										<input class="form-control" type="text" id="productSizeY" placeholder="Height" aria-describedby="dimensionsHelp" v-model="size.height">
									</div>
								</div>
								<small id="dimensionsHelp" class="form-text text-muted">
									Maximum width/height: 600 pixels. Minimum: 50 pixels.
								</small>
							</div>
							<div class="form-group">
								<label for="productColorScheme">Color Scheme</label>
								<div class="row">
									<div class="col-12">
										<select class="custom-select" id="productColorScheme" v-model="selectedColorScheme">
											<option value="">Choose a color scheme</option>
											<option v-for="(scheme, schemeName) in colorScheme" :value="schemeName" :selected="schemeName === selectedColorScheme">{{schemeName}}</option>
										</select>
									</div>
								</div>
							</div>
							<div v-if="selectedColorScheme === 'Custom...'" class="form-group">
								<label for="productCustomColorScheme">Custom color scheme</label>
								<div class="row">
									<div class="col-6">
										<input id="productCustomColorScheme" type="color" name="productBGColor" v-model="colorScheme[selectedColorScheme].background" class="form-control p-0">
										<label class="form-text text-muted mt-0" for="productCustomColorScheme"><small>Background</small></label>
									</div>
									<div class="col-6">
										<input id="productTextColor" type="color" name="productTextColor" v-model="colorScheme[selectedColorScheme].text" class="form-control p-0">
										<label class="form-text text-muted mt-0" for="productTextColor"><small>Text</small></label>
									</div>
								</div>
							</div>
							
							<h4 class="mb-0 text-right text-success">$0.00</h4>
						</div>
					</div>
				</form>	
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Reset</button>
				<button type="button" class="btn btn-primary">Add to Cart</button>
			</div>
		</div>
	</div>
</section>
        </div>
        
        <footer class="footer">
	<div class="container">
		<span class="text-muted">&copy; 2017 Brand Name, All Rights Reserved.</span>
	</div>
</footer>
        
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
        <script type="text/javascript" src="/js/manifest.js"></script>
        <script type="text/javascript" src="/js/vendor.js"></script>
        <script type="text/javascript" src="/js/main.js"></script>
        <script type="text/javascript" src="/js/configurator.js"></script>
    </body>
</html>