formfacade / templates / home.php

home.php in FormFacade – Embed Google Forms in your website 1.3.2, at templates/home.php

186 lines 5.6 KB

Raw Download Zip

1	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
2	<nav class="navbar navbar-expand-lg navbar-light bg-light" style="border-bottom:1px solid #e1e1e1;">
3	<a class="navbar-brand" href="#">
4	<img src="https://formfacade.com/logo.png" class="navbar-icon logo" alt="icon">
5	Formfacade
6	</a>
7	</nav>
8	<div class="content">
9	<div class="row">
10	<div class="col-md-12 col-lg-6 mr-auto ml-auto">
11	<h1 style="margin-top:60px;">Embed Google Forms In Your Wordpress</h1>
12	<p> From startups to corporates. 2500+ companies trust us. </p>
13	<a href="<?php echo admin_url('admin.php?page=embed_google_forms');?>" class="button">Try It Free</a>
14
15	</div>
16	</div>
17	<div class="col-md-12 col-lg-6 mr-auto ml-auto" style="margin-top:50px;">
18	<div class="animation-content" style="text-align:center;">
19	<img src="https://formfacade.com/banner/embed/embed.png" class="lazyAnimate img-fluid hero-image" alt="Google Forms without esign"
20	data-json-src="https://cdn.neartail.com/public/embed.json">
21	<div id="lottie-container" style="display:none"> </div>
22	</div>
23	</div>
24	</div>
25
26
27	<script>
28	function loadVideoPromise(src) {
29	return new Promise((resolve, reject) => {
30	const video = document.createElement('video');
31	video.preload = 'auto';
32	video.autoplay = true;
33	video.loop = false;
34	video.muted = true;
35	video.style.width = '100%';
36	const source = document.createElement('source');
37	source.src = src;
38	source.type = 'video/webm';
39	video.appendChild(source);
40
41	video.addEventListener('canplaythrough', () => {
42	resolve(video);
43	}, { once: true });
44
45	video.addEventListener('ended', function() {
46	setTimeout(function() {
47	video.currentTime = 0;
48	video.play();
49	}, 3000);
50	});
51
52	video.addEventListener('error', (error) => {
53	reject(error);
54	});
55	});
56	}
57
58	function loadLottiePromise(src) {
59	return new Promise(function(resolve, reject) {
60	var anim = lottie.loadAnimation({
61	container: document.getElementById('lottie-container'),
62	renderer: "svg",
63	loop: false,
64	autoplay: false, // Autoplay set to false initially
65	path: src,
66	rendererSettings: { progressiveLoad: true },
67	});
68
69	anim.addEventListener('data_ready', function() {
70	resolve(anim);
71	});
72
73	anim.addEventListener('data_failed', function(error) {
74	reject(error);
75	});
76
77	anim.addEventListener("complete", function () {
78	// Pause the animation for 3 seconds
79	setTimeout(function () {
80	anim.goToAndPlay(0); // Go to the beginning and play
81	}, 3000); // 3000 milliseconds = 3 seconds
82	});
83	});
84	}
85
86	function loadScript(src) {
87	return new Promise(function(resolve, reject) {
88	var script = document.createElement('script');
89	script.src = src;
90	script.onload = resolve;
91	script.onerror = reject;
92	document.head.appendChild(script);
93	});
94	}
95
96	document.addEventListener("DOMContentLoaded", function() {
97	const delayPromise = new Promise((resolve) => {
98	setTimeout(() => { resolve(); }, 3000);
99	});
100
101	loadScript('https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js').then(function() {
102	const img = document.querySelector('.lazyAnimate');
103	if(img && img.dataset.jsonSrc) {
104	const jsonSrc = img.dataset.jsonSrc;
105	// Animate video once video is ready & dom is ready after 3 sec
106	Promise.all([loadLottiePromise(jsonSrc), delayPromise]).then((rs) => {
107	var lottieAnimation = rs[0];
108	document.querySelector('.lazyAnimate').remove();
109	document.getElementById('lottie-container').style.display = 'block';
110	lottieAnimation.play();
111	}).catch((error) => {
112	console.error('Error:', error);
113	});
114	}
115	});
116	});
117	</script>
118
119	<style>
120	.animation-content { display:flex; justify-content: center;}
121	.logo { width: 50px; }
122	body {
123	font-family: Arial, sans-serif;
124	margin: 0;
125	padding: 0;
126	display: flex;
127	flex-direction: column;
128	align-items: center;
129	justify-content: center;
130	background-color: #f5f5f5;
131	color: #333;
132	}
133	.header {
134	background-color: #fff;
135	width: 100%;
136	padding: 20px 0;
137	display: flex;
138	align-items: center;
139	justify-content: center;
140	border-bottom: 1px solid #eee;
141	}
142	.header img {
143	height: 30px;
144	}
145	.content {
146	text-align: center;
147	margin: 0px 0px;
148	}
149	.content h1 {
150	font-size: 2em;
151	margin-bottom: 20px;
152	}
153	.content p {
154	font-size: 1.2em;
155	margin-bottom: 40px;
156	}
157	.content .button {
158	padding: 8px 30px;
159	font-size: 1em;
160	background-color: #5D33FB;
161	color: #fff;
162	border: none;
163	border-radius: 5px;
164	cursor: pointer;
165	font-size: 18px;
166	}
167	.content button:hover {
168	background-color: #0056b3;
169	}
170	.images {
171	display: flex;
172	justify-content: center;
173	align-items: center;
174	gap: 20px;
175	}
176	.images img {
177	width: 300px;
178	border-radius: 10px;
179	}
180	.footer {
181	margin-top: 40px;
182	font-size: 1em;
183	color: #666;
184	}
185
186	</style>