-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
134 lines (129 loc) · 9.67 KB
/
Copy pathindex.html
File metadata and controls
134 lines (129 loc) · 9.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cisco‑Themed Laptop Shop (Demo)</title>
<meta name="description" content="Mock Cisco‑themed laptop store page for demos with plug‑and‑play chatbot widget." />
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root{ --cisco-blue:#00BCEB; --cisco-deep:#006E96; --cisco-teal:#1BB6A4; --ink:#0b1f2b; }
.brand-gradient{background: linear-gradient(135deg,var(--cisco-deep),var(--cisco-blue));}
.chip{border:1px solid rgba(255,255,255,.2);}
a{color:inherit}
</style>
</head>
<body class="bg-slate-50 text-slate-900">
<header class="brand-gradient text-white">
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-9 w-9 rounded-xl bg-white/10 grid place-items-center chip">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16" /><path d="M4 6h16" /><path d="M4 18h16" /></svg>
</div>
<h1 class="font-semibold text-lg tracking-wide">Meraki Laptops • Demo Store</h1>
</div>
<nav class="hidden md:flex items-center gap-6 text-white/90">
<a href="#laptops" class="hover:text-white">Laptops</a>
<a href="#about" class="hover:text-white">About</a>
<a href="#contact" class="hover:text-white">Contact</a>
</nav>
<button class="md:hidden px-3 py-2 rounded-lg bg-white/10 chip">Menu</button>
</div>
<div class="max-w-7xl mx-auto px-4 pb-14 pt-10 grid md:grid-cols-2 gap-10 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold leading-tight">Enterprise‑grade laptops for hybrid work</h2>
<p class="mt-4 text-white/90">This is a mock storefront for demos and chat testing, styled with a Cisco‑inspired palette. No payments, no accounts, just a clean page to host a chatbot.</p>
<div class="mt-6 flex flex-wrap gap-3">
<span class="px-3 py-1 rounded-full bg-white/10 chip">Wi‑Fi 6E</span>
<span class="px-3 py-1 rounded-full bg-white/10 chip">Zero‑Touch</span>
<span class="px-3 py-1 rounded-full bg-white/10 chip">SASE‑ready</span>
</div>
<a href="#laptops" class="inline-block mt-6 px-5 py-3 rounded-xl bg-white text-ink font-semibold">Browse models</a>
</div>
<div class="relative">
<div class="absolute -inset-4 rounded-3xl blur-2xl opacity-30" style="background: radial-gradient(600px 200px at 30% 30%, var(--cisco-blue), transparent), radial-gradient(400px 200px at 70% 60%, var(--cisco-teal), transparent);"></div>
<div class="relative bg-white/10 border border-white/20 rounded-3xl p-6 backdrop-blur-lg">
<!-- HERO IMAGE: real laptop -->
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Laptop_on_a_neat_desk_(Unsplash).jpg" alt="Open laptop on neat desk" class="rounded-2xl"/>
</div>
</div>
</div>
</header>
<main id="laptops" class="max-w-7xl mx-auto px-4 py-12">
<h3 class="text-2xl font-bold mb-6">Featured laptops</h3>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<article class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<img class="w-full h-44 object-cover" src="https://commons.wikimedia.org/wiki/Special:FilePath/Asus_UX_31_Ultrabook_PC.jpg" alt="Asus UX31 Ultrabook" />
<div class="p-5">
<h4 class="font-semibold">MerakiBook 13 Pro</h4>
<p class="text-sm text-slate-600 mt-1">13.3" QHD, Intel Core Ultra, 32GB, 1TB</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-[var(--cisco-deep)]">$1,699</span>
<button class="px-4 py-2 rounded-xl bg-[var(--cisco-deep)] text-white">Add to cart</button>
</div>
</div>
</article>
<article class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<img class="w-full h-44 object-cover" src="https://commons.wikimedia.org/wiki/Special:FilePath/Toshiba_Ultrabook.jpg" alt="Toshiba Ultrabook" />
<div class="p-5">
<h4 class="font-semibold">Catalyst 15 Dev</h4>
<p class="text-sm text-slate-600 mt-1">15" 3K, Ryzen 9, 64GB, 2TB</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-[var(--cisco-deep)]">$1,999</span>
<button class="px-4 py-2 rounded-xl bg-[var(--cisco-deep)] text-white">Add to cart</button>
</div>
</div>
</article>
<article class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<img class="w-full h-44 object-cover" src="https://commons.wikimedia.org/wiki/Special:FilePath/Laptop_multimedia.jpg" alt="Laptop multimedia" />
<div class="p-5">
<h4 class="font-semibold">Nexus 16 Studio</h4>
<p class="text-sm text-slate-600 mt-1">16" 4K, RTX, 64GB, 4TB</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-[var(--cisco-deep)]">$2,499</span>
<button class="px-4 py-2 rounded-xl bg-[var(--cisco-deep)] text-white">Add to cart</button>
</div>
</div>
</article>
</div>
<section class="mt-12 grid md:grid-cols-3 gap-6">
<div class="p-6 rounded-2xl bg-white border border-slate-200">
<h5 class="font-semibold">Secure by design</h5>
<p class="text-sm text-slate-600 mt-1">TPM 2.0, BIOS locks, and verified boot for enterprise fleets.</p>
</div>
<div class="p-6 rounded-2xl bg-white border border-slate-200">
<h5 class="font-semibold">Remote ready</h5>
<p class="text-sm text-slate-600 mt-1">Wi‑Fi 6E and optional 5G for anywhere productivity.</p>
</div>
<div class="p-6 rounded-2xl bg-white border border-slate-200">
<h5 class="font-semibold">Fleet management</h5>
<p class="text-sm text-slate-600 mt-1">MDM friendly, zero‑touch enrollment, and asset insights.</p>
</div>
</section>
</main>
<footer id="about" class="mt-8 border-t border-slate-200">
<div class="max-w-7xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-8 items-start">
<div>
<h6 class="font-semibold">About this demo</h6>
<p class="text-sm text-slate-600 mt-2">Single‑file static site meant to host a chatbot widget. Image credits in footer.
</p>
</div>
<div>
<h6 class="font-semibold">Contact</h6>
<p class="text-sm text-slate-600 mt-2">Email: demo@example.com<br>Location: Hartville, OH</p>
</div>
<div>
<h6 class="font-semibold">Image credits</h6>
<p class="text-xs text-slate-600 mt-2 leading-relaxed">
Hero: “Laptop on a neat desk (Unsplash)” via Wikimedia Commons. Product images: “Asus UX31 Ultrabook PC”, “Toshiba Ultrabook”, “Laptop multimedia”, all via Wikimedia Commons. Licenses: CC0/CC‑BY‑SA where applicable.
</p>
</div>
</div>
</footer>
<!-- Chatbot embed -->
<div id="divicw" data-bind="C268A2A9-5363-46DA-8B46-EA1F993EECC8" data-org="" data-guid="e198d25e-7bd5-45a2-842c-fdea98545639"></div>
<script>
var i={t:function(t){var e="https://media.imi.chat/widget/js/imichatinit.js";try{var o=new XMLHttpRequest;o.onreadystatechange=function(){if(this.readyState==4){var t=document.getElementById("divicw");if(this.status==0){i.o(t);return}var e=document.createElement("script");e.innerHTML=this.responseText;t.parentNode.insertBefore(e,t.nextSibling)}};o.open("GET",e,true);o.send()}catch(s){console.error(s)}},o:function(t){t.insertAdjacentHTML("afterend",'<iframe id="tls_al_frm" frameborder="0" style="overflow: hidden;height: 208px;width: 394px;position: fixed;display: block;right: 48px;bottom: 12px;z-index: 99999; display:none;"></iframe>');var e=document.getElementById("tls_al_frm");var o=e.contentWindow||(e.contentDocument.document||e.contentDocument);o.document.open();o.document.write('<!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style>body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;color: #99a0b0;font-size: 14px;}.popover__content{background-color: #fbfbfe; padding: 1.5rem; border-radius: 5px; width: 300px; box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.26);position: relative;}.popover__message{font-weight: 600;color:#56627c;font-size: 16px;}.pull-left{float:left;}.clearfix{clear: both;}.hdr-txt{width: 218px; margin-top: 3px;}.para-txt a{text-decoration: none;color: #005cde;}.close-btn{position: absolute;right:15px;top:15px;}.close-btn a{text-decoration: none;font-weight: 400; color: #56627c; font-size: 16px;}</style></head><body><div class="popover__content"><div class="close-btn"><a href="#" onclick="closeTLSAlert();">X<\/a></div><div class="popover__message"><div class="pull-left hdr-txt">This browser version is not supported on LiveChat.</div></div><div class="clearfix"></div><p class="para-txt">Please update your browser to the latest version and re-open the website to access the widget. </p></div><script>function closeTLSAlert(){window.parent.postMessage({key: "close_tls_alert",value: "close_tls_alert",action: "close_tls_alert"}, "*");}<\/script></body></html>');o.document.close();e.style.display="block";window.addEventListener("message",function(t){if(t.data.action=="close_tls_alert"){i.s()}})},s:function(){var t=document.getElementById("tls_al_frm");t.remove()}};i.t(function(t){});
</script>
</body>
</html>