343 lines
12 KiB
Plaintext
343 lines
12 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>SheetCommerce</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,700,900" rel="stylesheet">
|
|
<link rel="stylesheet" href="fonts/icomoon/style.css">
|
|
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/jquery-ui.css">
|
|
<link rel="stylesheet" href="css/owl.carousel.min.css">
|
|
<link rel="stylesheet" href="css/owl.theme.default.min.css">
|
|
<link rel="stylesheet" href="css/owl.theme.default.min.css">
|
|
|
|
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
|
|
|
|
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
|
|
|
|
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
|
|
|
|
<link rel="stylesheet" href="css/aos.css">
|
|
|
|
<link rel="stylesheet" href="css/style.css">
|
|
|
|
</head>
|
|
|
|
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
|
|
|
|
<div class="site-wrap">
|
|
|
|
<div class="site-mobile-menu site-navbar-target">
|
|
<div class="site-mobile-menu-header">
|
|
<div class="site-mobile-menu-close mt-3">
|
|
<span class="icon-close2 js-menu-toggle"></span>
|
|
</div>
|
|
</div>
|
|
<div class="site-mobile-menu-body"></div>
|
|
</div>
|
|
|
|
|
|
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
|
|
|
|
<div class="container-fluid">
|
|
<div class="d-flex align-items-center">
|
|
<div class="site-logo mr-auto w-25"><a href="/">SheetCommerce</a></div>
|
|
|
|
<div class="mx-auto text-center">
|
|
<nav class="site-navigation position-relative text-right" role="navigation">
|
|
<ul class="site-menu main-menu js-clone-nav mx-auto d-none d-lg-block m-0 p-0">
|
|
<!---<li><a href="#home-section" class="nav-link">Home</a></li>-->
|
|
<!---<li><a href="#courses-section" class="nav-link">Courses</a></li>
|
|
<li><a href="#programs-section" class="nav-link">Programs</a></li>
|
|
<li><a href="#teachers-section" class="nav-link">Teachers</a></li>-->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div class="intro-section" id="home-section">
|
|
|
|
<div class="slide-1"
|
|
style="background-image: url('https://images.pexels.com/photos/196644/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"
|
|
data-stellar-background-ratio="0.4">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-12">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 mb-4">
|
|
<h1 data-aos="fade-up" data-aos-delay="100">Generate a basic website</h1>
|
|
<p class="mb-4" data-aos="fade-up" data-aos-delay="200">Anyone can make an e-commerce website now in
|
|
under 5 minutes</p>
|
|
<p data-aos="fade-up" data-aos-delay="300"><a href="/#create-section"
|
|
class="btn btn-black py-3 px-5 btn-pill">Create one now</a></p>
|
|
|
|
</div>
|
|
|
|
<!---<div class="col-lg-5 ml-auto" data-aos="fade-up" data-aos-delay="500">
|
|
<form action="" method="post" class="form-box">
|
|
<h3 class="h4 text-black mb-4">Create a basic one</h3>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Email Addresss">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" placeholder="Company name">
|
|
</div>
|
|
<div class="form-group mb-4">
|
|
<input type="text" class="form-control" placeholder="Company Logo URL">
|
|
</div>
|
|
<div class="form-group mb-4">
|
|
<input type="text" class="form-control" placeholder="Dashboard image URL">
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="submit" class="btn btn-primary btn-pill" value="Generate Website">
|
|
</div>
|
|
</form>
|
|
|
|
</div>-->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="site-section bg-light" id="create-section">
|
|
<div class="container">
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-7">
|
|
|
|
|
|
|
|
<h2 class="section-title mb-3">Create an simple e-commerce website now</h2>
|
|
<p class="mb-5"></p>
|
|
|
|
<!-- enctype="multipart/form-data" -->
|
|
<form id="site-form" enctype="multipart/form-data" method="post" action="/generate" data-aos="fade">
|
|
<div class="form-group row">
|
|
<div class="col-md-6 mb-3 mb-lg-0">
|
|
<input name="firstName" type="text" class="form-control" placeholder="First name" id="firstName">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input name="lastName" type="text" class="form-control" placeholder="Last name" id="lastName">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-12">
|
|
<input name="companyName" type="text" class="form-control" placeholder="Company name" id="companyName">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-12">
|
|
<input name="logoUrl" type="text" class="form-control" placeholder="Company Logo URL" id="logoUrl">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-12">
|
|
<input name="bannerUrl" type="text" class="form-control" placeholder="Banner image URL" id="bannerUrl">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-12">
|
|
<input name="email" type="email" class="form-control" placeholder="Email" id="email">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-md-12">
|
|
<input name="template" type="hidden" class="form-control" value="Colo_Shop" id="template">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-md-12">
|
|
<textarea name="description" class="form-control" id="description" cols="30" rows="10" placeholder="Description"
|
|
id="description"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-md-6 mb-3 mb-lg-0">
|
|
<br>
|
|
<h5>Add CSV file </h5>
|
|
<input name="csv" type="file" accept=".csv" id="csv" required />
|
|
</div>
|
|
<div class="col-md-6">
|
|
<br>
|
|
<h5>Download this template CSV file edit it and add it</h5>
|
|
<br>
|
|
<input type="button" class="btn btn-green py-3 px-5 btn-block btn-pill" value="Download CSV template"
|
|
onclick="window.location.href='/csv/template.csv'" />
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
|
|
<!--Hidden input only for testing purposes-->
|
|
<!--<input type="text" name="template" class="form-control" value="Colo_shop">-->
|
|
|
|
<div class="form-group row">
|
|
<div class="col-md-6">
|
|
<input type="button" class="btn btn-black py-3 px-5 btn-block btn-pill" value="Deploy Website" onClick="getCsv()"
|
|
/>
|
|
<!-- onClick="generate_website()" -->
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer class="footer-section bg-white">
|
|
<div class="container">
|
|
|
|
<div class="row pt-5 mt-5 text-center">
|
|
<div class="col-md-12">
|
|
<div class="border-top pt-5">
|
|
<p>
|
|
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
|
Copyright ©
|
|
<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made
|
|
with <i class="icon-heart" aria-hidden="true"></i> by <a href="https://colorlib.com"
|
|
target="_blank">Colorlib</a>
|
|
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
|
|
</div> <!-- .site-wrap -->
|
|
|
|
<!--Local JS code-->
|
|
<script>
|
|
|
|
function getCsv() {
|
|
//access files property of input elemeent
|
|
const c = $('#csv').prop('files')[0]
|
|
|
|
if(c){
|
|
const fReader = new FileReader();
|
|
fReader.readAsDataURL(c)
|
|
fReader.onloadend = function(event){
|
|
//remove preffix for data
|
|
var file = event.target.result.replace('data:text/csv;base64,','')
|
|
//decode base64 to string and send all data to server
|
|
sendData(atob(file))
|
|
}
|
|
} else{
|
|
alert('Please upload a csv')
|
|
}
|
|
|
|
|
|
}
|
|
//validation function not done yet.
|
|
function validateData(){
|
|
const firstName = $('#firstName').val();
|
|
const lastName = $('#lastName').val();
|
|
const companyName = $('#companyName').val();
|
|
const logoUrl = $('#logoUrl').val();
|
|
const bannerUrl = $('#bannerUrl').val();
|
|
const email = $('#email').val();
|
|
const description = $('#description').val();
|
|
//do something here
|
|
}
|
|
|
|
function sendData(sheetcsv){
|
|
const form = document.getElementById('site-form');
|
|
const formData = new FormData(form);
|
|
const firstName = formData.get('firstName');
|
|
const lastName = formData.get('lastName');
|
|
const companyName = formData.get('companyName');
|
|
const logoUrl = formData.get('logoUrl');
|
|
const bannerUrl = formData.get('bannerUrl');
|
|
const email = formData.get('email');
|
|
const description = formData.get('description');
|
|
const template = formData.get('template');
|
|
|
|
const csv = sheetcsv
|
|
const json = { firstName, lastName, companyName, logoUrl, bannerUrl, email, description,template, csv }
|
|
|
|
fetch('/generate', {
|
|
method:"POST",
|
|
body: JSON.stringify(json),
|
|
headers: {
|
|
'content-type': 'application/json'
|
|
}
|
|
})
|
|
.then(response=>response.json())
|
|
.then(data => {
|
|
console.log(data.directory);
|
|
window.location.href = "/pages/"+data.directory;
|
|
})
|
|
.catch(err=>{
|
|
console.log(err, 'fetch error')
|
|
})
|
|
}
|
|
|
|
|
|
// function csvJSON(csv) {
|
|
|
|
// var lines = csv.split("\n");
|
|
// var result = [];
|
|
|
|
// var headers = lines[0].split(",");
|
|
|
|
// for (var i = 1; i < lines.length; i++) {
|
|
|
|
// var obj = {};
|
|
// var currentline = lines[i].split(",");
|
|
|
|
// for (var j = 0; j < headers.length; j++) {
|
|
// obj[headers[j]] = currentline[j];
|
|
// }
|
|
|
|
// result.push(obj);
|
|
|
|
// }
|
|
|
|
// //return result; //JavaScript object
|
|
// return JSON.stringify(result); //JSON
|
|
// }
|
|
</script>
|
|
|
|
<script src="js/jquery-3.3.1.min.js"></script>
|
|
<script src="js/jquery-migrate-3.0.1.min.js"></script>
|
|
<script src="js/jquery-ui.js"></script>
|
|
<script src="js/popper.min.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/owl.carousel.min.js"></script>
|
|
<script src="js/jquery.stellar.min.js"></script>
|
|
<script src="js/jquery.countdown.min.js"></script>
|
|
<script src="js/bootstrap-datepicker.min.js"></script>
|
|
<script src="js/jquery.easing.1.3.js"></script>
|
|
<script src="js/aos.js"></script>
|
|
<script src="js/jquery.fancybox.min.js"></script>
|
|
<script src="js/jquery.sticky.js"></script>
|
|
|
|
<!--For reading csv file-->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.4/jquery.csv.js"></script>
|
|
<script src="js/main.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |