PageSourceSearch

https://andreabelcher.com/securecheckout.html

html andreabelcher.com collected 2026-09-26 20:14:50 UTC 35,387 bytes, 1,046 lines download raw bytes

1<!doctype html>
2
3
4
5
6
7
8
9
10
11
12
13<html class="no-js c2-html" lang="en-US">
14
15<head>
16	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
17	
18
19	<title>Checkout</title>	
20	
21
22	
23
24	<meta http-equiv="Content-Language" content="en-US">
25	<meta charset="UTF-8">
26	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
27	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
28
29
30	<meta name="distribution" content="global">
31	<meta name="robots" content="ALL">
32	<meta name="copyright" content="Pictorem">
33	<meta name="rating" content="general">
34	<meta name="revisit-after" content="7 days">
35	<meta name="DC.Title" content="Checkout" />
36	<meta property="og:title" content="Checkout" />
37	<meta itemprop="name" content="Checkout">
38	<meta property="og:description" content="Checkout " />
39	<meta itemprop="description" content="Checkout" />
40
41
42	
43	<meta property="og:locale" content="en" />
44	<meta property="og:type" content="website" />
45	<meta property="og:site_name" content="Pictorem.com" />
46	<link rel="schema.DC" href="http://purl.org/DC/elements/1.0/" />
47	<meta name="DC.Creator" content="pictorem" />
48	<meta name="DC.Type" content="home page" />
49	<meta name="DC.Format" content="text/html" />
50	<meta name="DC.Language" content="en" />
51
52	<!-- Optimized Google Fonts - Load asynchronously with font-display: swap -->
53	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&family=Montserrat:wght@400;700&family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
54	<noscript>
55		<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&family=Montserrat:wght@400;700&family=Source+Sans+Pro:wght@200;300;400;700&display=swap" rel="stylesheet">
56	</noscript>
57	
58
59	<link rel="stylesheet" href="/javascript/fontawesome/css/font-awesome.min.css">
60	<link rel="stylesheet" href="/javascript/ks/css/sliders/ios/style.css" type="text/css" media="all">
61	<link rel="stylesheet" href="/javascript/ks/css/ks.min.css?aSHA=316a6735d0107d161f893be0243f6616" type="text/css" media="all">
62
63		<link rel="stylesheet" href="/css/cart2.css?aSHA=316a6735d0107d161f893be0243f6616&v=1788210523" type="text/css" media="all">
64<link rel="stylesheet" href="/css/checkout2.css?aSHA=316a6735d0107d161f893be0243f6616&v=1786873187" type="text/css" media="all">
65<link rel="stylesheet" href="/css/express.css?aSHA=316a6735d0107d161f893be0243f6616&v=1786373026" type="text/css" media="all">
66
67		<link rel="stylesheet" href="/css/emailexists.css" type="text/css" media="all">
68
69	
69<script type="text/javascript" src="/javascript/ks/js/modernizr.min.js"></script>
69
70	
70<script type="text/javascript" src="/javascript/ks/js/jquery.js"></script>
70
71
72
73	
73<script src="/javascript/jquery-1.10.2.js"></script>
73
74
75
76	<style type="text/css">
77		body {
78			background-color: #f5f5f5;
79		}
80
81		.hiddenName {
82			top: 124;
83			left: 636px;
84			display: none;
85			font: normal 14px verdana;
86		}
87
88		.hotspot {
89			color: #900;
90			padding-bottom: 1px;
91			border-bottom: 1px dotted #900;
92			cursor: pointer
93		}
94
95		#tt {
96			position: absolute;
97			display: block;
98			background: url(/images/tt_left.gif) top left no-repeat
99		}
100
101		#tttop {
102			display: block;
103			height: 5px;
104			margin-left: 5px;
105			background: url(/images/tt_top.gif) top right no-repeat;
106			overflow: hidden
107		}
108
109		#ttcont {
110			display: block;
111			padding: 2px 12px 3px 7px;
112			margin-left: 5px;
113			background: #666;
114			color: #FFF
115		}
116
117		#ttbot {
118			display: block;
119			height: 5px;
120			margin-left: 5px;
121			background: url(/images/tt_bottom.gif) top right no-repeat;
122			overflow: hidden
123		}
124
125		hr.stylecheckout {
126			border: 0;
127			height: 1px;
128			background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
129			background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
130			background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
131			background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
132		}
133	</style>
134	
134<script type="text/javascript">
135		//Create an array
136		var allPageTags = new Array();
137
138		function doSomethingWithClasses(theClass) {
139			//Populate the array with all the page tags
140			var allPageTags = document.getElementsByTagName("*");
141			//Cycle through the tags using a for loop
142			for (var i = 0; i < allPageTags.length; i++) {
143				//Pick out the tags with our class name
144				if (allPageTags[i].className == theClass) {
145					//Manipulate this in whatever way you want
146					allPageTags[i].style.display = 'none';
147				}
148			}
149		}
150
151		function Show(ids) {
152			doSomethingWithClasses('RBtnTab');
153
154			var obj = document.getElementById(ids);
155			if (obj.style.display != 'block') {
156				obj.style.display = 'block';
157			} else {
158				obj.style.display = 'none';
159			}
160		}
161	</script>
161
162
163	
163<script type="text/javascript" src="/javascript/fancyboxsource/jquery.fancybox.js?v=2.1.5"></script>
163
164	<link rel="stylesheet" type="text/css" href="/javascript/fancyboxsource/jquery.fancybox.css?v=2.1.5" media="screen" />
165
166
167	
167<script type="text/javascript">
168		// When the page is restored from the browser back/forward cache it shows stale
169		// session data (e.g. an address picked from the address book): force a refresh
170		window.addEventListener('pageshow', function(e) {
171			if (e.persisted) {
172				window.location.reload();
173			}
174		});
175
176		$(document).ready(function() {
177			$('.fancybox').fancybox({
178			scrolling   : 'yes',
179			});
180
181			$(".fancybox").fancybox({
182    			type: 'iframe',
183    			openEffect: 'fade',
184    			width:'95%',
185    			maxWidth: 1260,
186				"autoScale": false,
187    			afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS "afterClose"
188    				// When an address-book selection already filled the form, skip the
189    				// reload so the freshly filled values are not wiped out
190    				if (window._addrBookApplied) {
191    					window._addrBookApplied = false;
192    					return;
193    				}
194        			window.location.replace("/securecheckout.html");
195    			}
196			});
197			
198			$(".fancybox2").fancybox({
199				type: 'iframe'
200			});
201			$("#priceexception").on('click', function() {
202
203  $.fancybox.open('<div class="message"><h2>Price Exception for Mural & Puzzles</h2>If you selected to sell Mural & Puzzle prints, please take note of the following: <br><br><b>Mural Print:</b><br>To optimize sales on Mural Print, pricing based on dimension is modified to feet insteach of inch ( due to the size of average mural print purchases).<br><br><b>Puzzle Print: </b><br> To make the puzzle purchase more affordable,  pricing based on dimension is reduced to 50% <br><br> ( pricing based in flat price & profit remain unchanged ) </div>');
204
205});
206		});
207	</script>
207  
208
209
210
211
212</head>
213
214<body class="c2-body">
215	
216<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 216-217
216
217<script async src="https://www.googletagmanager.com/gtag/js?id=
217G-LPSV3CSSPD
vendor: 12 bytes, line 217
217"></script>
218<script>
219  
vendor: 134 bytes, lines 219-223
219window.dataLayer = window.dataLayer || [];
220  function gtag(){dataLayer.push(arguments);}
221  gtag('js', new Date());
222
223  gtag('config', '
223G-LPSV3CSSPD
vendor: 4 bytes, line 223
223');
224</script>
224
225
226
227
228
229			<!-- Page Wrapper -->
230			<div id="page_wrapper">
231				<!-- Header style 1 -->
232								<link rel="stylesheet" href="/css/gallery-domain-header.css?aSHA=316a6735d0107d161f893be0243f6616">
233				<header id="header" class="site-header style1 cta_button dmn-header">
234
235					<div class="container">
236						<div class="dmn-bar">
237														<nav class="dmn-bar__links">
238																	<a href="/home.html"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
239																<a href="/cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i> View Cart</a>
240								<a href="/securecheckout.html"><i class="fa fa-lock" aria-hidden="true"></i> Checkout</a>
241							</nav>
242
243														<div class="dmn-bar__meta">
244
245														<link rel="stylesheet" href="/css/currencyswitch.css?aSHA=316a6735d0107d161f893be0243f6616&v=1787608349-4857"><span class="curswitch curswitch--theme">
246    <a rel="nofollow" class="curswitch__opt"
247    href="http://andreabelcher.com/securecheckout.html?currencychange=CDN"
248    title="Show prices in Canadian dollars"
249    aria-label="Show prices in Canadian dollars"
250    >CAD<span class="curswitch__sign"> $</span></a>
251    <a rel="nofollow" class="curswitch__opt is-active"
252    href="http://andreabelcher.com/securecheckout.html?currencychange=USD"
253    title="Show prices in US dollars"
254    aria-label="Show prices in US dollars"
255    aria-current="true">USD<span class="curswitch__sign"> $</span></a>
256</span>
257
258								
259																			<link rel="alternate" href="https://andreabelcher.com/fr/" hreflang="fr" />
260																		<a class="dmn-lang black" href="https://andreabelcher.com/fr/">FRANCAIS</a>
261
262							</div>
263						</div>
264					</div>
265				</header>
266				<div class="c2">
267		<div class="c2-shell">
268
269			
270								<div class="c2-card">
271					<div class="c2-empty">
272						<div class="c2-empty__icon"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i></div>
273						<div class="c2-empty__title">Your shopping cart is empty</div>
274						<p class="c2-empty__text">
275							To complete your order, you need to add at least one product, click on "add to cart" or "buy" on a product details pages.							<br><br>
276							It's also possible that your session has expired, and your information submited to the website has been deleted							Please re-order the item						</p>
277						<div class="c2-empty__actions">
278							<a class="c2-btn-dark" href="/collection.html">Continue Shopping</a>
279							<a class="c2-btn-secondary" href="/contact.html">Contact us</a>
280						</div>
281					</div>
282				</div>
283
284	
285		</div>
286	</div>
287
288	
289	
290
291
292</div>
293<!--/ Page Wrapper -->
294
295
296
297
298
299
300<!-- Bubble-box with notification-box style -->
301<!-- / Bubble-box with notification-box style -->
302
303
304<!-- Login Panel content -->
305<div id="login_panel" class="mfp-hide loginbox-popup auth-popup" style="top:70px;z-index:999 !important;">
306	<div class="inner-container login-panel auth-popup-panel">
307
308
309		<form class="login_panel" name="login_form" method="post" action="/myaccount.html">
310			<input type="hidden" name="login" value="1">
311			<input type="hidden" name="redirecturl" value="http://andreabelcher.com/securecheckout.html">
312			<div class="form-group kl-fancy-form">
313				<input type="text" id="kl-username" name="userid" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="eg: [email protected]">
314				<label class="kl-font-alt kl-fancy-form-label">EMAIL</label>
315			</div>
316			<div class="form-group kl-fancy-form">
317				<input type="password" id="kl-password" name="pwd" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="type password">
318				<label class="kl-font-alt kl-fancy-form-label">PASSWORD</label>
319			</div>
320
321			<input type="submit" id="login" name="submit_button" class="btn zn_sub_button btn-fullcolor btn-md" value="LOG IN">
322
323			<div class="links auth-popup-links">
324				<a href="/newaccount.html" class="create_account auth-popup-createacc auth-popup-link">CREATE AN ACCOUNT</a><span class="sep auth-popup-sep"></span><a href="#forgot_panel" class="kl-login-box auth-popup-link">FORGOT YOUR PASSWORD?</a>
325			</div>
326		</form>
327	</div>
328	<button title="Close (Esc)" type="button" class="mfp-close">×</button>
329</div>
330<div id="register_panel" class="mfp-hide loginbox-popup auth-popup">
331	<div class="inner-container register-panel auth-popup-panel">
332		<h3 class="m_title m_title_ext text-custom auth-popup-title">CREATE ACCOUNT</h3>
333		<form class="register_panel" name="login_form" method="post" action="#">
334			<div class="form-group kl-fancy-form ">
335				<input type="text" id="reg-username" name="user_login" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="type desired username"><label class="kl-font-alt kl-fancy-form-label">USERNAME</label>
336			</div>
337			<div class="form-group kl-fancy-form">
338				<input type="text" id="reg-email" name="user_email" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="[email protected]"><label class="kl-font-alt kl-fancy-form-label">EMAIL</label>
339			</div>
340			<div class="form-group kl-fancy-form">
341				<input type="password" id="reg-pass" name="user_password" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="*****"><label class="kl-font-alt kl-fancy-form-label">PASSWORD</label>
342			</div>
343			<div class="form-group kl-fancy-form">
344				<input type="password" id="reg-pass2" name="user_password2" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="*****"><label class="kl-font-alt kl-fancy-form-label">CONFIRM PASSWORD</label>
345			</div>
346			<div class="form-group">
347				<input type="submit" id="signup" name="submit" class="btn zn_sub_button btn-block btn-fullcolor btn-md" value="CREATE MY ACCOUNT">
348			</div>
349			<div class="links auth-popup-links">
350				<a href="#login_panel" class="kl-login-box auth-popup-link">ALREADY HAVE AN ACCOUNT?</a>
351			</div>
352		</form>
353	</div>
354</div>
355<div id="forgot_panel" class="mfp-hide loginbox-popup auth-popup forgot-popup">
356	<div class="inner-container forgot-panel auth-popup-panel">
357		<h3 class="m_title m_title_ext text-custom auth-popup-title">FORGOT YOUR USER ACCOUNT DETAILS?</h3>
358		<form class="forgot_form" name="login_form" method="post" action="/forgot.html">
359			<div class="form-group kl-fancy-form">
360				<input type="text" id="forgot-email" name="userid" class="form-control inputbox kl-fancy-form-input kl-fw-input" placeholder="...">
361				<label class="kl-font-alt kl-fancy-form-label">USERNAME OR EMAIL</label>
362			</div>
363			<div class="form-group">
364				<input type="submit" id="recover" name="submit" class="btn btn-block zn_sub_button btn-fullcolor btn-md" value="SEND MY DETAILS!">
365			</div>
366			<div class="links auth-popup-links">
367				<a href="#login_panel" class="kl-login-box auth-popup-link">AAH, WAIT, I REMEMBER NOW!</a>
368			</div>
369		</form>
370	</div>
371	<button title="Close (Esc)" type="button" class="mfp-close">×</button>
372</div>
373<!--/ Login Panel content -->
374
375
376<!-- ToTop trigger -->
377<a href="#" id="totop">TOP</a>
378<!--/ ToTop trigger -->
379
380
381<!-- AI CHAT ################ --> 
382<!-- Button Styles -->
383<style>
384.grecaptcha-badge {
385    visibility: hidden;
386}
387
388/* Quick-reply buttons in the chat */
389.chat-option {
390  margin: 5px;
391  padding: 6px 12px;
392  border: 1px solid #de256f;
393  background: white;
394  color: #de256f;
395  border-radius: 5px;
396  font-size: 13px;
397  cursor: pointer;
398}
399.chat-option:hover {
400  background: #de256f;
401  color: white;
402}
403
404/* Floating chat toggle button (bottom-right) */
405#chat-toggle {
406  position: fixed;
407  bottom: 22px;
408  right: 16px;
409  width: 48px;
410  height: 48px;
411  background-color: #de256f;
412  color: white;
413  border-radius: 50%;
414  display: flex;
415  align-items: center;
416  justify-content: center;
417  cursor: pointer;
418  z-index: 10000;
419  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
420  transition: transform 0.2s ease-in-out;
421}
422#chat-toggle:hover {
423  transform: scale(1.1);
424}
425
426/* Chatbox container (hidden by default, shown when .open is added) */
427#chatbox {
428  position: fixed;
429  bottom: 80px;
430  right: 20px;
431  width: 440px;
432  background: rgba(255,255,255,0.7);
433  backdrop-filter: blur(10px);
434  -webkit-backdrop-filter: blur(10px);
435  border: 1px solid rgba(255,255,255,0.3);
436  z-index: 9999;
437  box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 24px;
438  border-radius: 10px;
439  transition: all 0.3s ease;
440  transform: translateY(20px);
441  opacity: 0;
442  visibility: hidden;
443}
444
445/* Messages area inside chatbox */
446#chat-messages {
447  height: 300px;
448  overflow-y: auto;
449  padding: 10px;
450}
451
452/* When chatbox is open */
453#chatbox.open {
454  transform: translateY(0);
455  opacity: 1;
456  visibility: visible;
457}
458
459/* ───────────── */
460/* RESPONSIVE    */
461/* ───────────── */
462
463/* Tablets */
464@media (max-width: 992px) {
465  #chatbox {
466    width: 350px;
467    right: 10px;
468    bottom: 70px;
469  }
470}
471
472/* Mobile phones */
473@media (max-width: 600px) {
474  #chatbox {
475    position: fixed;
476    width: calc(100vw - 20px) !important;
477    left: 10px !important;
478    right: 10px !important;
479    bottom: 80px !important;   /* ⬆️ RAISED from 20px to 80px */
480    border-radius: 12px;
481    max-width: 100% !important;
482    box-sizing: border-box;
483  }
484
485  #chat-messages {
486    height: 200px;
487  }
488}
489
490/* Very small screens */
491@media (max-width: 400px) {
492  #chatbox {
493    width: calc(100vw - 14px) !important;
494    left: 7px !important;
495    right: 7px !important;
496    bottom: 90px !important;   /* even more padding for tiny phones */
497  }
498
499  #chat-messages {
500    height: 170px;
501  }
502}
503
504</style>
505
506<link rel="stylesheet" href="http://andreabelcher.com/css/pictomate-rating.css">
507<span id="pictomate-rating-config"
508      data-url="/chatrating.html"
509      data-helpful="This was helpful"
510      data-unhelpful="This was not helpful"
511      data-thanks="Thanks — noted"></span>
512<script src="http://andreabelcher.com/js/pictomate-rating.min.js"></script>
512
513
514<!-- Chat Toggle Button -->
515<div id="chat-toggle"  role="button" aria-label="Open chat">
516  <i class="fa fa-comments"></i>
517</div>
518
519<!-- Chatbox -->
520<div id="chatbox"
521     style="position:fixed; bottom:80px; right:20px; width:440px; background:rgba(255,255,255,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.3); z-index:9999; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 24px; border-radius:10px;" class="tx2">
522
523  <div id="chat-messages" style="height:300px; overflow-y:auto; padding:10px;"></div>
524
525  <!-- New Flex container for input + button -->
526  <div style="display: flex; align-items: center; padding: 10px;">
527    <input id="chat-input" type="text" placeholder="Ask me anything..." 
528           style="flex: 1; border: 2px solid #de256f; border-radius: 8px; padding: 10px; margin-right: 10px;">
529    <button id="chat-send" style="background-color: #de256f; border: none; color: white; padding: 10px 16px; border-radius: 8px; cursor: pointer;">
530      Send    </button>
531  </div>
532
533</div>
534
535<script>
536// History is keyed by language so a French page never restores an English
537// greeting (and the reverse) after the visitor uses the language switcher.
538const chatLang = "en";
539const chatHistoryKey = 'chat_history_' + chatLang;
540const chatMessages = document.getElementById('chat-messages');
541if (sessionStorage.getItem(chatHistoryKey)) {
542  chatMessages.innerHTML = sessionStorage.getItem(chatHistoryKey);
543} else {
544  chatMessages.innerHTML = `
545  <div style="margin-bottom: 20px;"><b><font color="#de256f">Pictomate<sup>beta</sup>:</font></b> ✨ Art, meet technology. I’m Pictomate — how may I assist you today?<br><br></div>  `;
546  sessionStorage.setItem(chatHistoryKey, chatMessages.innerHTML);
547}
548
549const toggleBtn   = document.getElementById('chat-toggle');
550const nochat      = toggleBtn.dataset.nochat === '1';
551const chatStarted = sessionStorage.getItem('chat_started') === 'true';
552
553// hide the toggle if page has nochat=1 *and* they never started a conversation
554if (nochat && !chatStarted) {
555  toggleBtn.style.display = 'none';
556}
557
558// Important: Restore open/closed chatbox after page reload
559const chatbox = document.getElementById('chatbox');
560const icon = toggleBtn.querySelector('i');
561
562// *** FIX *** Open chatbox if user had it open previously
563if (sessionStorage.getItem('chatbox_open') === 'true') {
564  chatbox.classList.add('open');
565  icon.className = 'fa fa-minus';
566} else {
567  chatbox.classList.remove('open');
568  icon.className = 'fa fa-comments';
569}
570
571document.getElementById('chat-input').addEventListener('keypress', function(e) {
572  if (e.key === 'Enter') {
573    const msg = this.value;
574    sendMessage(msg);
575    this.value = "";
576  }
577});
578
579document.getElementById('chat-send').addEventListener('click', function() {
580  const input = document.getElementById('chat-input');
581  const msg = input.value.trim();
582  if (msg !== '') {
583    sendMessage(msg);
584    input.value = "";
585  }
586});
587
588function sendMessage(msg) {
589  // mark chat started
590  sessionStorage.setItem('chat_started', 'true');
591  // ensure the toggle is visible
592  document.getElementById('chat-toggle').style.display = 'flex';
593  const chat = document.getElementById('chat-messages');
594  chat.innerHTML += "<div><b>You:</b> " + msg + "</div>";
595  sessionStorage.setItem(chatHistoryKey, chat.innerHTML);
596  
597  // Scroll immediately after user message
598  chat.scrollTop = chat.scrollHeight;
599
600  const currentPage = window.location.href;
601
602  fetch('/chatgpthandler.html', {
603    method: 'POST',
604    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
605    body: 'message=' + encodeURIComponent(msg) + '&page=' + encodeURIComponent(currentPage)
606  })
607  .then(response => response.json())
608  .then(data => {
609    // The handler returns { reply, logid }. The bare-string form is still
610    // accepted so a cached page cannot break on the response shape.
611    let content = (typeof data === 'string') ? data : (data.reply || '');
612    const logId = (typeof data === 'object' && data.logid) ? data.logid : 0;
613
614    // Make URLs clickable
615    content = content.replace(
616  /(https?:\/\/[^\s<]+?)(?=[.,?!:;]?(?:[\s<]|$))/g,
617  '<a href="$1" target="_blank" style="color:#de256f;">$1</a>'
618);
619
620
621    // Format line breaks
622    content = content.replace(/\r?\n\r?\n/g, "<br><br>").replace(/\r?\n/g, "<br>");
623
624    // Replace email
625    content = content.replace(/support@pictorem\.com/gi, '<a href="/contact.html">[email protected]</a>');
626
627    chat.innerHTML += `
628      <div style="margin-bottom: 20px; margin-top: 10px;">
629        <b><font color="#de256f">Pictomate<sup>beta</sup>:</font></b> ${content}
630        <div style="text-align: right; font-size: 14px; color: #aaa; margin-top: 5px;">
631          ${pictomateRatingHtml(logId)}
632          Need help?  
633          <a href="/contact.html" style="color:#aaa;text-decoration:underline;" target="_blank">Contact us</a> |
634          <a href="/faq.html" style="color:#aaa;text-decoration:underline;" target="_blank">FAQ</a>
635        </div>
636      </div>
637    `;
638
639    // Scroll after assistant response too
640    chat.scrollTop = chat.scrollHeight;
641    sessionStorage.setItem(chatHistoryKey, chat.innerHTML);
642  })
643  .catch(error => {
644    chat.innerHTML += "<div><b>Error:</b> " + error + "</div>";
645  });
646}
647
648document.querySelectorAll('.chat-option').forEach(button => {
649  button.addEventListener('click', function () {
650    const msg = this.dataset.msg;
651    const isStatic = this.dataset.static === "true";
652    const chat = document.getElementById('chat-messages');
653
654    chat.innerHTML += "<div><b>You:</b> " + this.textContent + "</div>";
655
656    if (isStatic) {
657      chat.innerHTML += `
658        <div style="margin-bottom: 20px; margin-top: 10px;">
659          <b><font color="#de256f">Pictorem:</font></b> ${msg}
660          <div style="text-align: right; font-size: 14px; color: #aaa; margin-top: 5px;">
661            Need help?  
662            <a href="/contact.html" style="color:#aaa;text-decoration:underline;" target="_blank">Contact us</a> |
663            <a href="/faq.html" style="color:#aaa;text-decoration:underline;" target="_blank">FAQ</a>
664          </div>
665        </div>
666      `;
667      chat.scrollTop = chat.scrollHeight;
668      sessionStorage.setItem(chatHistoryKey, chat.innerHTML);
669    } else {
670      sendMessage(msg);
671    }
672  });
673});
674
675toggleBtn.addEventListener('click', function () {
676  const isOpen = chatbox.classList.contains('open');
677  if (isOpen) {
678    chatbox.classList.remove('open');
679    sessionStorage.setItem('chatbox_open', 'false');
680    icon.className = 'fa fa-comments';
681  } else {
682    chatbox.classList.add('open');
683    sessionStorage.setItem('chatbox_open', 'true');
684    icon.className = 'fa fa-minus';
685  }
686});
687</script>
687
688
689<!-- END AI CHAT BOX --> 
690
691
692
693
694
695
696<!-- JS FILES // These should be loaded in every page -->
697<script type="text/javascript" src="/javascript/ks/js/bootstrap.min.js"></script>
697
698
699<script type="text/javascript" src="/javascript/ks/js/kl-plugins.js"></script>
699
700
701<!-- JS FILES // Loaded on this page -->
702<!-- Requried js script for Slideshow Scroll effect -->
703<script type="text/javascript" src="/javascript/ks/js/plugins/scrollme/jquery.scrollme.js"></script>
703
704
705<!-- Required js script for iOS Slider -->
706<script type="text/javascript" src="/javascript/ks/js/plugins/_sliders/ios/jquery.iosslider.min.js"></script>
706
707
708<!-- Required js trigger for iOS Slider -->
709<script type="text/javascript" src="/javascript/ks/js/trigger/slider/ios/kl-ios-slider.js"></script>
709
710
711<!-- CarouFredSel - Required js script for Screenshot box / Partners Carousel -->
712<script type="text/javascript" src="/javascript/ks/js/plugins/_sliders/caroufredsel/jquery.carouFredSel-packed.js"></script>
712
713
714<!-- Required js trigger for Screenshot Box Carousel -->
715<script type="text/javascript" src="/javascript/ks/js/trigger/kl-screenshot-box.js"></script>
715
716
717<!-- Required js trigger for Partners Carousel -->
718<script type="text/javascript" src="/javascript/ks/js/trigger/kl-partners-carousel.js"></script>
718
719
720<!-- Custom Kallyas JS codes -->
721
722<script type="text/javascript" src="/javascript/ks/js/kl-scripts.js"></script>
722
723
724<!-- Custom user JS codes -->
725
726
727
728<!-- Facebook Pixel Code -->
729<script>
vendor: 488 bytes, lines 729-748
729
730	! function(f, b, e, v, n, t, s) {
731		if (f.fbq) return;
732		n = f.fbq = function() {
733			n.callMethod ?
734				n.callMethod.apply(n, arguments) : n.queue.push(arguments)
735		};
736		if (!f._fbq) f._fbq = n;
737		n.push = n;
738		n.loaded = !0;
739		n.version = '2.0';
740		n.queue = [];
741		t = b.createElement(e);
742		t.async = !0;
743		t.src = v;
744		s = b.getElementsByTagName(e)[0];
745		s.parentNode.insertBefore(t, s)
746	}(window,
747		document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
748	fbq('init', '
7481848197278792372
vendor: 4 bytes, line 748
748'); 
748// Insert your pixel ID here.
749	fbq('track', 'PageView');
750</script>
750
751<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1848197278792372&ev=PageView&noscript=1" /></noscript>
752<!-- DO NOT MODIFY -->
753<!-- End Facebook Pixel Code -->
754
755
756<!-- start preloader-->
757<style>
758	.preloaderCss {
759		background: none repeat scroll 0 0 black;
760		position: fixed;
761		display: block;
762		opacity: 0.5;
763		z-index: 1000001; /* or, higher */
764		left: 0;
765		top: 0;
766		height: 100%;
767		width: 100%;
768		color: #FFF;
769	}
770</style>
771
772<div id="preloadDiv" style="display:none;" class="preloaderCss">
773	<center>
774		<p style="margin:320px;">
775
776			<img src="/images/loading4.gif" border=0 width=48>
777			<bR><br>
778
779			Please wait...		</p>
780	</center>
781</div>
782
783<script>
784	function preloadDiv(redirect_url) {
785		$('#preloadDiv').show();
786		$.ajax({
787			url: redirect_url,
788			method: "GET",
789			success: function(result) {
790				$('#preloadDiv').hide();
791				$("body").html(result);
792			}
793		});
794	}
795</script>
795
796<!-- end preloader-->
797
798
799		
799<script type="text/javascript" src="/js/checkout2.min.js?aSHA=316a6735d0107d161f893be0243f6616&v=1786284688"></script>
799
800
801	
801<script>
802		$(document).ready(function() {
803			$("#shipnabutton").click(function() {
804				$("#shipna").slideToggle();
805			});
806		});
807	</script>
807
808
809
810	
810<script type="text/javascript">
811		function addLoadEvent(func) {
812			var oldonload = window.onload;
813			if (typeof window.onload != 'function') {
814				window.onload = func;
815			} else {
816				window.onload = function() {
817					if (oldonload) {
818						oldonload();
819					}
820					func();
821				}
822			}
823		}
824		addLoadEvent(function() {
825			showHideOthers();
826			showHideDOthers();
827		})
828	</script>
828
829
830	<!-- Facebook Conversion Code for Checkouts -  Pictorem Sale -->
831	
831<script>
832		(function() {
833			var _fbq = window._fbq || (window._fbq = []);
834			if (!_fbq.loaded) {
835				var fbds = document.createElement('script');
836				fbds.async = true;
837				fbds.src = '//connect.facebook.net/en_US/fbds.js';
838				var s = document.getElementsByTagName('script')[0];
839				s.parentNode.insertBefore(fbds, s);
840				_fbq.loaded = true;
841			}
842		})();
843		window._fbq = window._fbq || [];
844		window._fbq.push(['track', '6021072693228', {
845			'value': '0.00',
846			'currency': 'CAD'
847		}]);
848	</script>
848
849	<noscript><img alt="Canvas print" height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6021072693228&amp;cd[value]=0.00&amp;cd[currency]=CAD&amp;noscript=1" /></noscript>
850		
850<script>
851		// This example displays an address form, using the autocomplete feature
852		// of the Google Places API to help users fill in the information.
853
854		// This example requires the Places library. Include the libraries=places
855		// parameter when you first load the API. For example:
856		// 
856<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
857
858		var placeSearch2, autocomplete2;
859		var componentForm2 = {
860			locality: 'long_name',
861			provinceList: 'short_name',
862			postal_code: 'short_name'
863		}; // country: 'long_name',
864		var address_components_arr2 = [];
865		var address_components_state_arr2 = [];
866		var sel2 = document.getElementById('dcountry');
867		var opt2;
868
869		var placeSearch, autocomplete;
870		var componentForm = {
871			locality: 'long_name',
872			provinceList: 'short_name',
873			postal_code: 'short_name'
874		}; // country: 'long_name',
875		var address_components_arr = [];
876		var address_components_state_arr = [];
877		var sel = document.getElementById('req_Country');
878		var opt;
879
880		function initAutocomplete() {
881			// Create the autocomplete object, restricting the search to geographical
882			// location types.
883			autocomplete = new google.maps.places.Autocomplete(
884				// Set initial restrict to the greater list of countries.
885				/** @type {!HTMLInputElement} */
886				(document.getElementById('autocomplete')), {
887					types: ['geocode']
888				});
889			// When the user selects an address from the dropdown, populate the address
890			// fields in the form.
891			autocomplete.addListener('place_changed', fillInAddress);
892
893			// Create the autocomplete object, restricting the search to geographical
894			// location types.
895			autocomplete2 = new google.maps.places.Autocomplete(
896				// Set initial restrict to the greater list of countries.
897				/** @type {!HTMLInputElement} */
898				(document.getElementById('autocomplete_shipping')), {
899					types: ['geocode']
900				});
901
902			// When the user selects an address from the dropdown, populate the address
903			// fields in the form.
904			autocomplete2.addListener('place_changed', fillInAddress2);
905		}
906
907		function fillInAddress() {
908			// Get the place details from the autocomplete object.
909			var place = autocomplete.getPlace();
910			/*console.log("place", JSON.parse(JSON.stringify(place)));
911			console.log("vicinity => ", place.vicinity)
912			console.log("name => ", place.name)*/
913			if (place.name != '' && typeof place.name != 'undefined' && place.name != null) {
914				document.getElementById('autocomplete').value = place.name; //set value of name parameter  from place
915			}
916
917			for (var component in componentForm) {
918				document.getElementById(component).value = '';
919				document.getElementById(component).disabled = false;
920			}
921
922			// Get each component of the address from the place details
923			// and fill the corresponding field on the form.
924			address_components_arr = ['0'];
925			address_components_state_arr = ['0'];
926			for (var i = 0; i < place.address_components.length; i++) {
927				address_components_arr.push(place.address_components[i].long_name.toUpperCase()); // create address components name array for country
928				p = place.address_components[i].long_name;
929				address_components_state_arr.push(p.replace(/é/gi, 'e')); // create address components name array  for state
930				var addressType = place.address_components[i].types[0];
931				if (componentForm[addressType]) {
932					var val = place.address_components[i][componentForm[addressType]];
933					//console.log(addressType+' => '+val);
934					//if(addressType!='country' && addressType!='provinceList')
935					document.getElementById(addressType).value = val;
936				}
937			}
938
939			//console.log('address_components_arr',address_components_arr);
940			//console.log('address_components_state_arr',address_components_state_arr);
941			//mark selected country name and state within address
942			if (address_components_arr.length > 0) {
943				var no_match = 0;
944				for (var i = 0, len = sel.options.length; i < len; i++) {
945					opt = sel.options[i].text;
946					//console.log('opt',opt);
947					if (address_components_arr.includes(opt)) {
948						//console.log('ans=>',opt);
949						sel.options[i].selected = true;
950						showHideOthers();
951						no_match = 0;
952						break;
953					} else {
954						no_match = 1;
955					}
956				}
957				if (no_match === 1) {
958					//console.log('no_match');
959					document.getElementById('req_Country').options[0].selected = true;
960					showHideOthers();
961				}
962			}
963		}
964
965
966
967		function geolocate() {
968			// add this line to hide the autocomplete
969			$("#autocomplete").attr("autocomplete", "new-password");
970		}
971
972		function geolocate_shipping() {
973			// add this line to hide the autocomplete
974			$("#autocomplete_shipping").attr("autocomplete", "new-password");
975		}
976
977		function fillInAddress2() {
978			// Get the place details from the autocomplete object.
979			var place = autocomplete2.getPlace();
980
981			/*console.log("place", JSON.parse(JSON.stringify(place)));
982			console.log("vicinity => ", place.vicinity)
983			console.log("name => ", place.name)*/
984			if (place.name != '' && typeof place.name != 'undefined' && place.name != null) {
985				document.getElementById('autocomplete_shipping').value = place.name; //set value of name parameter  from place
986			}
987
988			for (var component in componentForm2) {
989				document.getElementById('d' + component).value = '';
990				document.getElementById('d' + component).disabled = false;
991			}
992
993			// Get each component of the address from the place details
994			// and fill the corresponding field on the form.
995			address_components_arr2 = ['0'];
996			address_components_state_arr2 = ['0'];
997			for (var i = 0; i < place.address_components.length; i++) {
998				address_components_arr2.push(place.address_components[i].long_name.toUpperCase()); // create address components name array for country
999				p = place.address_components[i].long_name;
1000				address_components_state_arr2.push(p.replace(/é/gi, 'e')); // create address components name array  for state
1001				var addressType = place.address_components[i].types[0];
1002				if (componentForm2[addressType]) {
1003					var val = place.address_components[i][componentForm2[addressType]];
1004					//console.log(addressType+' => '+val);
1005					//if(addressType!='country' && addressType!='provinceList')
1006					document.getElementById('d' + addressType).value = val;
1007				}
1008			}
1009
1010			//console.log('address_components_arr',address_components_arr);
1011			//console.log('address_components_state_arr',address_components_state_arr);
1012			//mark selected country name and state within address
1013			if (address_components_arr2.length > 0) {
1014				var no_match = 0;
1015				for (var i = 0, len = sel2.options.length; i < len; i++) {
1016					opt2 = sel2.options[i].text;
1017					//console.log('opt',opt);
1018					if (address_components_arr2.includes(opt2)) {
1019						//console.log('ans=>',opt);
1020						sel2.options[i].selected = true;
1021						showHideDOthers();
1022						no_match = 0;
1023						break;
1024					} else {
1025						no_match = 1;
1026					}
1027				}
1028				if (no_match === 1) {
1029					//console.log('no_match');
1030					document.getElementById('dcountry').options[0].selected = true;
1031					showHideDOthers();
1032				}
1033			}
1034		}
1035	</script>
1035
1036
1037	
1038		
1038<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDiok6UtWVaOhWdaTx1Hs6WE533aZ7Uybg&libraries=places&callback=initAutocomplete" async defer></script>
1038
1039	
1040	
1040<script type="text/javascript" src="/javascript/ks/js/plugins/sparkles.js"></script>
1040
1041	
1041<script type="text/javascript" src="/javascript/ks/js/jquery-migrate.min.js"></script>
1041
1042
1043
1044</body>
1045
1046</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.