CINXE.COM
Online Device Emulators - Small Business - Cisco
<!DOCTYPE html> <html xmlns:fb="//www.facebook.com/2008/fbml" xmlns:og="//opengraphprotocol.org/schema/" lang="en" xml:lang="en" class="no-touch no-js"> <head> <meta charset="utf-8"> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="rei" content="3/2/2022 10.39am est" /> <script tyle="text/javascript" src="/content/dam/cdc/j/cdcrSwitch.js"></script> <script type="text/javascript"> if (typeof cdc === "undefined"){ cdc = {}; } cdc.localizedLang="en/us"; if (window.cdcext === undefined) { window.cdcext = {}; } cdcext.customEnvironment = "prod"; if (window.cdclocale === undefined) { window.cdclocale = {}; } cdclocale.locale = cdc.localizedLang=="en/us"?"en_us":cdc.localizedLang; </script> <script src="/c/dam/cdc/t/ctm-core.js"></script> <script> window['adrum-start-time'] = new Date().getTime(); window.environ = "prod" ; </script> <script> if (window.cpe === undefined) { window.cpe = {}; } cpe.accountName = "prod"; cpe.config = ["cinf","dsc","pps"]; cpe.hideMethod = "elements"; window.targetGlobalSettings = JSON.parse('{\x22timeout\x22:4000}'); window.targetPageParamsAll = () => JSON.parse('{\x22entity\x22:\x22{\\\x22id\\\x22:\\\x221549300094575315\\\x22,\\\x22categoryId\\\x22:\\\x22\\\x22}\x22}'); const bullseyeLibrary = `/etc.clientlibs/cisco-cdc/clientlibs/clientlib-external/resources/external/bullseye.js`; import(bullseyeLibrary); </script> <script src="/etc.clientlibs/cisco-cdc/clientlibs/clientlib-external/resources/regional-mbox/regional-mbox.js"></script> <title> Online Device Emulators - Small Business - Cisco</title> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <meta name="description" content="The Online Device Emulators page for Small Business Devices" /> <meta name="title" content="Online Device Emulators - Small Business" /> <meta name="templateName" content="marketing" /> <meta property="fb:app_id" content="156494687694418" /> <meta name="ioContentSource" content="WEM" /> <meta name="contentType" content="cisco.com#US#preSales" /> <meta name="locale" content="US" /> <meta name="language" content="en" /> <meta name="country" content="US" /> <meta name="CCID_Page" content="cc001784" /> <meta name="date" content="Fri Oct 11 08:39:23 PDT 2024" /> <meta name="accessLevel" content="Customer" /> <meta name="accessLevel" content="Guest" /> <meta name="accessLevel" content="Partner" /> <meta name="entitlementExpression" content="contains( "0,1,2,3,4,7" , $profileField[3] )" /> <meta property="og:site_name" content="Cisco" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Online Device Emulators - Small Business" /> <meta property="og:description" content="The Online Device Emulators page for Small Business Devices" /> <meta property="og:url" content="https://www.cisco.com/c/en/us/support/smb/product-support/small-business/Device-Emulators-Small-Business.html" /> <link rel="canonical" href="https://www.cisco.com/c/en/us/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="x-default" href="https://www.cisco.com/c/en/us/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="pt-br" href="https://www.cisco.com/c/pt_br/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="es-mx" href="https://www.cisco.com/c/es_mx/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="ko-kr" href="https://www.cisco.com/c/ko_kr/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="it-it" href="https://www.cisco.com/c/it_it/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="ja-jp" href="https://www.cisco.com/c/ja_jp/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="de-de" href="https://www.cisco.com/c/de_de/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="fr-ca" href="https://www.cisco.com/c/fr_ca/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="ar-ae" href="https://www.cisco.com/c/ar_ae/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="nl-nl" href="https://www.cisco.com/c/nl_nl/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="zh-tw" href="https://www.cisco.com/c/zh_tw/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="zh-cn" href="https://www.cisco.com/c/zh_cn/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <link rel="alternate" hreflang="en-us" href="https://www.cisco.com/c/en/us/support/smb/product-support/small-business/Device-Emulators-Small-Business.html"/> <script src="/etc.clientlibs/clientlibs/granite/jquery.min.js"></script> <script src="/etc.clientlibs/clientlibs/granite/utils.min.js"></script> <script src="/etc.clientlibs/clientlibs/granite/jquery/granite.min.js"></script> <script src="/etc.clientlibs/foundation/clientlibs/jquery.min.js"></script> <script src="/etc.clientlibs/foundation/clientlibs/shared.min.js"></script> <script src="/etc.clientlibs/cq/personalization/clientlib/underscore.min.js"></script> <script src="/etc.clientlibs/cq/personalization/clientlib/personalization/kernel.min.js"></script> <script src="/etc.clientlibs/cq/personalization/clientlib/personalization/kernel.min.js"></script> <script type="text/javascript"> $CQ(function() { CQ_Analytics.SegmentMgr.loadSegments("\/etc\/segmentation"); CQ_Analytics.ClientContextUtils.init("\/c\/dnc\/etc\/clientcontext\/default", "\/content\/en\/us\/support\/smb\/product\u002Dsupport\/small\u002Dbusiness\/Device\u002DEmulators\u002DSmall\u002DBusiness"); }); </script> <link rel="stylesheet" href="/etc/designs/cdc/clientlibs/responsive/css/cisco-sans.min.css" type="text/css"> <script src="/etc/designs/cdc/clientlibs/responsive/js/foundation.min.js"></script> <link rel="stylesheet" href="/etc/designs/cdc/clientlibs/responsive/css/responsive.min.css" type="text/css"> <script> sessionStorage.setItem("logOutIntermediateMessage", 'You are being logged out.'); </script> <!-- Custom JSON LD For Products Type --> <script type="application/ld+json"> [ { "@context": "http://www.schema.org", "@type": "WebPage", "name": "Online Device Emulators - Small Business", "url": "https://www.cisco.com/c/en/us/support/smb/product-support/small-business/Device-Emulators-Small-Business.html", "description": "The Online Device Emulators page for Small Business Devices", "publisher": { "@type": "Corporation", "name": "Cisco" } }] </script> <!-- End Custom JSON LD For Products Type --> <!-- Video JSON LD --> <!-- End Video JSON LD --> <script>!function(e){var n="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,n="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="GKZXC-NS3SU-A7VFH-HKBHM-U7LKH",function(){function e(){if(!o){var e=document.createElement("script");e.id="boomr-scr-as",e.src=window.BOOMR.url,e.async=!0,i.parentNode.appendChild(e),o=!0}}function t(e){o=!0;var n,t,a,r,d=document,O=window;if(window.BOOMR.snippetMethod=e?"if":"i",t=function(e,n){var t=d.createElement("script");t.id=n||"boomr-if-as",t.src=window.BOOMR.url,BOOMR_lstart=(new Date).getTime(),e=e||d.body,e.appendChild(t)},!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./))return window.BOOMR.snippetMethod="s",void t(i.parentNode,"boomr-async");a=document.createElement("IFRAME"),a.src="about:blank",a.title="",a.role="presentation",a.loading="eager",r=(a.frameElement||a).style,r.width=0,r.height=0,r.border=0,r.display="none",i.parentNode.appendChild(a);try{O=a.contentWindow,d=O.document.open()}catch(_){n=document.domain,a.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",O=a.contentWindow,d=O.document.open()}if(n)d._boomrl=function(){this.domain=n,t()},d.write("<bo"+"dy onload='document._boomrl();'>");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"GKZXC-NS3SU-A7VFH-HKBHM-U7LKH";var i=document.currentScript||document.getElementsByTagName("script")[0],o=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!o)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),i.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="bdpnbeqxgy4r2z2g4faq-f-1e5efdfc1-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"61004","ak.ai":parseInt("271834",10),"ak.ol":"0","ak.cr":3,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"2b0f685","ak.r":37669,"ak.a2":n,"ak.m":"dsca","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":51208,"ak.gh":"23.53.33.212","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732698433","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==eybNyAAWX14HFT/I1d0qjDxjzdu9s+j+Nzg0tkgSM1/zOnUn8a/kIDy7jjZMZZUnIFQTVDWr/SuzL8Qy+NDInVK+k9ER8511thQqPrgnPpy9EEeIhjEmogEgKk+SuAfmfn7+/voTWua1+IUGff4Exu5IBqzhJkKjEET7hBYuEFMAApa74Uq5H/SpbhoKti6f/tfAS+sU3G7w3Rko23FShFNfknT5zgFykzg3SQZPWxc6FJkqqwM5LKL2QFGmVzC7uLVCuks+X5/KhGXFZAKGXOaKM3eOJJRLE8U2RBxjvaEI5UPwugJiPKB+5b/wbfoXBorRAx++EwsJEENr9ukIrZGbmAouhbQoxmFojmm7Sp975uj9/nTHJ31SUol48LVGJ1j3ZprKRwm7u6tew1CbFW0C3nixXjTzDQqrY3udSuo=","ak.pv":"517","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head> <body id="wcq" class="fw-res cdc-transform"> <div id="fw-skiplinks"> <ul class="container"> <li><a id="skiplink-content" href="#fw-content">Skip to content</a></li> <li><a id="skiplink-search" href="#">Skip to search</a></li> <li><a id="skiplink-footer" href="#fw-footer-v2" class="last">Skip to footer</a></li> </ul> </div> <script type="module" src="/site/web-components/us/en/cdc-header.js"></script> <cdc-header></cdc-header> <nav class="fw-c-header__seo-links" aria-hidden="true" style="display:none"> <ul> <li><a tabindex="-1" href="https://www.cisco.com/site/us/en/index.html">Cisco.com Worldwide</a></li> <li><a tabindex="-1" href="/c/en/us/products/index.html">Products and Services</a></li> <li><a tabindex="-1" href="https://www.cisco.com/site/us/en/solutions/index.html">Solutions</a></li> <li><a tabindex="-1" href="/c/en/us/support/index.html">Support</a></li> <li><a tabindex="-1" href="/c/en/us/training-events.html">Learn</a></li> <li><a tabindex="-1" href="//www.cisco.com/c/en/us/about/sitemap.html">Explore Cisco</a></li> <li><a tabindex="-1" href="/c/en/us/buy.html">How to Buy</a></li> <li><a tabindex="-1" href="https://www.cisco.com/site/us/en/partners/index.html?dtid=odicdc001129">Partners Home</a></li> <li><a tabindex="-1" href="https://www.cisco.com/site/us/en/partners/cisco-partner-program/index.html?ccid=cc000864&dtid=odiprc001129">Partner Program</a></li> <li><a tabindex="-1" href="https://www.cisco.com/site/us/en/partners/support-help/index.html">Support</a></li> <li><a tabindex="-1" href="https://www.cisco.com/site/us/en/partners/tools/index.html?dtid=odiprc001129">Tools</a></li> <li><a tabindex="-1" href="https://locatr.cloudapps.cisco.com/WWChannels/LOCATR/pf/index.jsp#/">Find a Cisco Partner</a></li> <li><a tabindex="-1" href="https://www.cisco.com/site/us/en/partners/connect-with-a-partner/index.html?ccid=cc000864&dtid=odiprc001129">Meet our Partners</a></li> <li><a tabindex="-1" href="https://www.cisco.com/site/us/en/partners/index.html?dtid=odicdc001129">Become a Cisco Partner</a></li> </ul> </nav> <div id="fw-content" class="container grid" data-owner="ID"> <div class="row full" data-owner="ID"> <div class="col full "> <nav id="fw-breadcrumb" class="data-based user-driven-nav" aria-label="breadcrumbs" data-owner="ID"> <ul itemscope itemtype="//schema.org/BreadcrumbList"> <li aria-hidden="true"><a href='#' class="skip"><span></span></a></li> <li itemprop='itemListElement' itemscope itemtype='//schema.org/ListItem'><a itemprop='item' href='/c/en/us/support/index.html'><span itemprop='name'>Support</span><meta itemprop='position' content='1' /></a><span class='caret'></span></li><li itemprop='itemListElement' itemscope itemtype='//schema.org/ListItem'><a itemprop='item' href='/c/en/us/support/all-products.html'><span itemprop='name'>Product Support</span><meta itemprop='position' content='2' /></a><span class='caret'></span></li><li itemprop='itemListElement' itemscope itemtype='//schema.org/ListItem'><a itemprop='item' href='/c/en/us/support/smb/product-support/small-business.html'><span itemprop='name'>Cisco Business</span><meta itemprop='position' content='3' /></a><span class='caret'></span></li> </ul> </nav> <script> if (window.cdc === undefined) { window.cdc = {}; } if (cdc.breadcrumb === undefined) { cdc.breadcrumb = (function () { let clone = document.querySelector('#fw-breadcrumb').cloneNode(true); let appendClone = function () { let hasBreadcrumb = document.querySelector('#fw-breadcrumb') !== null, firstMarquee = document.querySelectorAll('.dmc-mq')[0]; if (!hasBreadcrumb && firstMarquee !== undefined) { firstMarquee.querySelector('.frame .inset').insertBefore(this.clone, firstMarquee.querySelector('.frame .inset').firstElementChild); } }; return { clone: clone, appendClone: appendClone } }()); } //DE380224 var anchorChild = document.getElementsByTagName("a"); for(var i=0; i<anchorChild.length; i++){ if(anchorChild[i].getAttribute("itemprop")=="item") { if ( anchorChild[i].href.includes("%3Clocale%3E") ){ let anchorChildHREF = anchorChild[i].href; let docLocale = document.querySelector('meta[name="locale"]').getAttribute('content'); let docLanguage = document.querySelector('meta[name="language"]').getAttribute('content'); var docSeparator; if ((docLocale.toLowerCase() == "us") && (docLanguage.toLowerCase() == "en")) { docSeparator="/"; } else { docSeparator="_"; } let anchorURLReplace = docLanguage.toLowerCase() + docSeparator + docLocale.toLowerCase(); anchorChildHREF = anchorChildHREF.replace("%3Clocale%3E", anchorURLReplace); anchorChild[i].setAttribute('href', anchorChildHREF); } } } </script> <h1 id="fw-pagetitle" class="" data-owner="ID">Device Emulators</h1> </div> </div> <div class="row full" data-owner="ID"> <div class="col full"> <script src="/etc/designs/cdc/dmr/libs/u.min.js"></script> <script src="/etc/designs/cdc/dmr/libs/nmsp.min.js"></script> <script src="/etc/designs/cdc/dmr/libs/log.min.js"></script> <script src="/etc/designs/cdc/dmr/libs/metrics.min.js"></script> <!-- DM:components/html/htmlblob:V1.2.6 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Emulator Page for Cisco Small Business Devices</title> <style> @font-face { font-family: 'CiscoSansTT'; src: url(/fonts/CiscoSansTTRegular.ttf) format('truetype'); font-display: swap; } @font-face { font-family: 'CiscoSansTTMedium'; src: url(/fonts/CiscoSansTT-Medium.ttf) format('truetype'); font-display: swap; } @font-face { font-family: 'CiscoSansThin'; src: url(/fonts/CiscoSansTTThin.ttf) format('truetype'); font-display: swap; } @font-face { font-family: 'CiscoSansTTBold'; src: url(/fonts/CiscoSansTTBold.ttf) format('truetype'); font-display: swap; } @font-face { font-family: 'CiscoSansTTBoldOblique'; src: url(/fonts/CiscoSansTTBoldOblique.ttf) format('truetype'); font-display: swap; } @font-face { font-family: 'CiscoSansTTHeavy'; src: url(/fonts/CiscoSansTTHeavy.ttf) format('truetype'); font-display: swap; } :root { --query-xs: < 576px; --query-sm: >=768px; --query-md: >=992px; --query-lg: >=1200px; --query-xl: >=1400px; } /* @media (min-width: 300px) { :root { font-size: var(--query-xs); } } @media (max-width:768px){ :root { font-size: var(--query-sm); } } @media (min-width: 768px) { :root { font-size: var(--font-size-md); } } @media (min-width: 992px) { :root { font-size: var(--font-size-lg); } } @media (min-width: 1200px) { :root { font-size: var(--font-size-xl); } } */ :root { --cisco-blue: #00bceb; --cisco-dark-blue: #1e4471; --cisco-midnight-blue: #0d274d; --cisco-ocean-blue: #0b2750; --step-blue-shade: #0051af; --cisco-dark-gray: #414344; --cisco-gray: #9e9ea2; --border-gray: #d2d2d2; --border-gray-2: #e2e2e2; --menu-background-gray: #f5f5f5; --btn-gray-1: #d9d9d9; --btn-hover-color-gray: #b2b8bf; --btn-blue-1: #3862be; --btn-hover-main: #0060ad; --text-white-1: #fff; --cisco-blue-hover: #52dcff; --font-gray: #495057; --text-color-black1: #000; --text-color-black2: #333; --text-color-black3: #525252; --theme-success: #74bf4b; --theme-danger: #e3241b; --theme-warning: #fbab2c; --theme-warning-alt: #eed202; --theme-dark: #495057; --theme-light: #ced4da; --white: white; } /* Fluid font size variables, for browsers that support clamp */ @supports (font-size: clamp(1rem, 1vw, 1rem)) { :root { --font-size-sm: clamp(0.7rem, 0.09vw + 0.68rem, 0.75rem); --font-size-base: clamp(0.88rem, 0.23vw + 0.82rem, 1rem); --font-size-md: clamp(1.09rem, 0.43vw + 0.98rem, 1.33rem); --font-size-lg: clamp(1.37rem, 0.74vw + 1.18rem, 1.78rem); --font-size-xl: clamp(1.71rem, 1.2vw + 1.41rem, 2.37rem); --font-size-xxl: clamp(2.14rem, 1.86vw + 1.67rem, 3.16rem); --font-size-xxxl: clamp(2.67rem, 2.8vw + 1.97rem, 4.21rem); } } /* Fallback variables for browsers that don't support clamp */ @supports not (font-size: clamp(1rem, 1vw, 1rem)) { :root { --font-size-sm: 0.7rem; --font-size-base: 0.88rem; --font-size-md: 1.09rem; --font-size-lg: 1.37rem; --font-size-xl: 1.71rem; --font-size-xxl: 2.14rem; --font-size-xxxl: 2.67rem; } @media screen and (min-width: 1280px) { :root { --font-size-sm: 0.75rem; --font-size-base: 1rem; --font-size-md: 1.33rem; --font-size-lg: 1.78rem; --font-size-xl: 2.37rem; --font-size-xxl: 3.16rem; --font-size-xxxl: 4.21rem; } } } * { box-sizing: border-box; border: 0; font: inherit; vertical-align: baseline; } html { font-family: 'CiscoSansTT', sans-serif; -webkit-text-size-adjust: 100%; height: 100vh; } body { margin: 0; } h2 { font-size: var(--font-size-xl) } .deviceSelector { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; /* height: 50px; */ background-color: #f1f1f1; padding: 1em 0.5em; margin-top: 9em; } .deviceSelector button { border: #0051af 1px solid; border-radius: 27px; padding: 10px 20px; } .deviceSelector button:hover { background-color: #0051af; color: white; } .header { /* background-image: url("/header.svg"); */ background-image: url("https://cisco.com/c/dam/en/us/support/docs/smb/modules/Brand-Modules/cdt-emulators-header.svg"); background-repeat: no-repeat; background-size: cover; /* background-color: #cccccc; */ max-height: 300px; z-index: 10; padding-bottom: 8em; } .routers { /* background-color: #3862be; */ min-height: 250px; width: 100%; padding: 2em 1em; /* margin-top: 6em; */ } .switches { /* background-color: #52dcff; */ min-height: 250px; width: 100%; padding: 2em 1em; } .wireless { /* background-color: #74bf4b; */ min-height: 250px; width: 100%; padding: 2em 1em; } .mpp { /* background-color: #fbab2c; */ min-height: 250px; width: 100%; padding: 2em 1em; } /* Content card section */ p { font-size: var(--font-size-md); margin-top: 0; flex: 1; } @media (max-width: 576px) { .deviceSelector { flex-direction: column; align-items: center; justify-content: center; margin-top: 0; } #content-card-compact { grid-template-columns: 0.5fr 2fr; width: calc(100vw - 20px); max-height: 180px; min-height: 150px; border-radius: 0; } #content-card-header-logo-compact { width: 100px; height: 100%; margin: 0; /* margin:0 1em 0 0; */ } div#content-card-header-text-compact { width: 100%; min-height: 100px; display: flex; justify-content: center; flex-direction: column; /* margin:0 0 0 1em; */ padding: 0.5em; } } div#content-card-header-text-compact { width: 100%; min-height: 110px; display: flex; justify-content: center; flex-direction: column; /* margin:0 0 0 1em; */ padding: 0.5em; } /* Dropping in card css content, semi-unsorted */ .content-card-header-logo img { width: 40px; } .mediaCategory { color: var(--font-gray); font-size: 0.95em; } div.content-card-header-text { width: 200px; min-height: 100px; max-height: 150px; height: 100px; display: flex; justify-content: center; flex-flow: column nowrap; align-items: flex-start; } .content-card { display: grid; place-items: center; width: 230px; min-height: 225px; max-height: 300px; height: 300px; border-radius: 16px; background-color: var(--white); border: 1px solid var(--border-gray); transition: all 0.5s ease-in-out; /* scroll-snap-align: start; */ cursor: pointer; } .content-card:hover { box-shadow: 0px 4px 20px rgb(0 0 0 / 15%); transition: all 0.5s ease-in-out; } .views-icon { width: 12px; height: 12px; } .content-card-anchor { text-decoration: none; color: var(--cisco-dark-blue) !important; display: grid !important; align-items: stretch; } .content-card-header-logo { display: grid; place-items: center; width: 200px; height: 100px; margin-top: 0.75em; aspect-ratio: 6 / 2; background-color: #00bceb29; } .device { display: grid; grid-auto-flow: column; gap: 1em; padding-bottom: 2em; overflow-y: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; justify-content: start; scroll-behavior: smooth; scroll-snap-align: start; } /* ::-webkit-scrollbar{ width: 1.125rem!important; height: 1.125rem!important; } */ .content-card:hover { box-shadow: 0px 4px 20px rgb(0 0 0 / 15%); transition: all 0.5s ease-in-out; /* transform: scale(1.05); */ } main { position: relative; } /* Lightbox warning for mobile users */ @media only screen and (max-width: 767px) { /* Lightbox container */ .lightbox::before { content: ""; display: block; position: absolute; z-index: 5000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } /* Lightbox message */ .lightbox::after { content: "These emulators are intended for desktop viewing only, they will not appear correctly when viewed on mobile devices"; display: block; position: absolute; z-index: 5000; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); max-width: 80%; font-size: 1.2rem; line-height: 1.5; text-align: center; } } </style> <script>!function(e){var n="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,n="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="GKZXC-NS3SU-A7VFH-HKBHM-U7LKH",function(){function e(){if(!o){var e=document.createElement("script");e.id="boomr-scr-as",e.src=window.BOOMR.url,e.async=!0,i.parentNode.appendChild(e),o=!0}}function t(e){o=!0;var n,t,a,r,d=document,O=window;if(window.BOOMR.snippetMethod=e?"if":"i",t=function(e,n){var t=d.createElement("script");t.id=n||"boomr-if-as",t.src=window.BOOMR.url,BOOMR_lstart=(new Date).getTime(),e=e||d.body,e.appendChild(t)},!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./))return window.BOOMR.snippetMethod="s",void t(i.parentNode,"boomr-async");a=document.createElement("IFRAME"),a.src="about:blank",a.title="",a.role="presentation",a.loading="eager",r=(a.frameElement||a).style,r.width=0,r.height=0,r.border=0,r.display="none",i.parentNode.appendChild(a);try{O=a.contentWindow,d=O.document.open()}catch(_){n=document.domain,a.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",O=a.contentWindow,d=O.document.open()}if(n)d._boomrl=function(){this.domain=n,t()},d.write("<bo"+"dy onload='document._boomrl();'>");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"GKZXC-NS3SU-A7VFH-HKBHM-U7LKH";var i=document.currentScript||document.getElementsByTagName("script")[0],o=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!o)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),i.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="bdpnbeqxgy4r2z2g4faq-f-1e5efdfc1-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"61004","ak.ai":parseInt("271834",10),"ak.ol":"0","ak.cr":3,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"2b0f685","ak.r":37669,"ak.a2":n,"ak.m":"dsca","ak.n":"essl","ak.bpcip":"8.222.208.0","ak.cport":51208,"ak.gh":"23.53.33.212","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732698433","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==eybNyAAWX14HFT/I1d0qjDxjzdu9s+j+Nzg0tkgSM1/zOnUn8a/kIDy7jjZMZZUnIFQTVDWr/SuzL8Qy+NDInVK+k9ER8511thQqPrgnPpy9EEeIhjEmogEgKk+SuAfmfn7+/voTWua1+IUGff4Exu5IBqzhJkKjEET7hBYuEFMAApa74Uq5H/SpbhoKti6f/tfAS+sU3G7w3Rko23FShFNfknT5zgFykzg3SQZPWxc6FJkqqwM5LKL2QFGmVzC7uLVCuks+X5/KhGXFZAKGXOaKM3eOJJRLE8U2RBxjvaEI5UPwugJiPKB+5b/wbfoXBorRAx++EwsJEENr9ukIrZGbmAouhbQoxmFojmm7Sp975uj9/nTHJ31SUol48LVGJ1j3ZprKRwm7u6tew1CbFW0C3nixXjTzDQqrY3udSuo=","ak.pv":"517","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head> <body> <script> function openUrlInNewWindow(url) { let popup = window.open(url, '_blank'); popup.focus(); } function openSelectedValue() { const selectEl = this.querySelector('select'); const selectedValue = selectEl.options[selectEl.selectedIndex].value; let popup = window.open(selectedValue, '_blank'); popup.focus(); } const selectEls = document.querySelectorAll('.content-card select'); selectEls.forEach(selectEl => { selectEl.addEventListener('click', event => { event.stopPropagation(); }); }); </script> <main class="lightbox"> <div class="header"> <p style="color:transparent;margin:0;">text</p> <div class="deviceSelector"> <h3 style="margin:0;">Emulators Filter:</h3> <button>Wireless</button> <button>Switches</button> <button>Routers</button> <button>All</button> </div> </div> <div class="routers device"> <h2 style="display:block;width:100px;">Routers</h2> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/router-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> RV345 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/RV345_Emulators/RV345_Emulator_v1-0-03-15/index.html#/GettingStarted"> RV345 v.1.0.03.15</option> <option value="https://www.cisco.com/assets/sol/sb/RV345_Emulators/RV345_Emulator_v1-0-0-33_20170420/index.html#/GettingStarted"> RV345 v.1.0.0.33</option> <option value="https://www.cisco.com/assets/sol/sb/RV345_Emulators/RV345_Emulator_v1-0-01-17/index.html#/GettingStarted"> RV345 v.1.0.00.17</option> <option value="https://www.cisco.com/assets/sol/sb/RV345P_Emulators/RV345P_Emulator_v1-0-03-15/index.html#/GettingStarted"> RV345P v.1.0.03.15</option> <option value="https://www.cisco.com/assets/sol/sb/RV345P_Emulators/RV345P_Emulator_v1-0-02-16/index.html#/GettingStarted"> RV345P v.1.0.02.16</option> <option value="https://www.cisco.com/assets/sol/sb/RV345P_Emulators/RV345P_Emulator_v1-0-01-17/index.html#/GettingStarted"> RV345P v.1.0.01.17</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/router-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> RV340 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/RV340_Emulators/RV340_Emulator_v1-0-03-15/index.html#/GettingStarted"> RV340 v.1.0.03.15</option> <option value="https://www.cisco.com/assets/sol/sb/RV340_Emulators/RV340_Emulator_v1-0-02-16/index.html#/GettingStarted"> RV340 v.1.0.02.16</option> <option value="https://www.cisco.com/assets/sol/sb/RV340_Emulators/RV340_Emulator_v1-0-01-17/index.html#/GettingStarted"> RV340 v.1.0.01.17</option> <option value="https://www.cisco.com/assets/sol/sb/RV340W_Emulators/RV340W_Emulator_v1-0-03-15/index.html#/GettingStarted"> RV340W v.1.0.03.15</option> <option value="https://www.cisco.com/assets/sol/sb/RV340W_Emulators/RV340W_Emulator_v1-0-02-16/index.html#/GettingStarted"> RV340W v.1.0.02.16</option> <option value="https://www.cisco.com/assets/sol/sb/RV340W_Emulators/RV340W_Emulator_v1-0-01-17/index.html#/GettingStarted"> RV340W v.1.0.01.17</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/router-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> RV260 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/RV260_Emulators/RV260_Emulator_v1-0-00-14/index.htm#/systemSummary"> RV260 v.1.0.00.14</option> <option value="https://www.cisco.com/assets/sol/sb/RV260P_Emulators/RV260P_Emulator_v1-0-00-14/index.htm#/systemSummary"> RV260P v.1.0.00.14</option> <option value="https://www.cisco.com/assets/sol/sb/RV260W_Emulators/RV260W_Emulator_v1-0-00-14/index.htm#/systemSummary"> RV260W v.1.0.00.14</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/router-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> RV160 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/RV160_Emulators/RV160_Emulator_v1-0-00-14/index.htm#/systemSummary"> RV160 v.1.0.00.14</option> <option value="https://www.cisco.com/assets/sol/sb/RV160W_Emulators/RV160W_Emulator_v1-0-00-14/index.htm#/systemSummary"> RV160W v.1.0.00.14</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/router-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> RV130 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/RV132W_Emulators/RV132W_Emulator_v1-0-0-17/default.htm"> RV132W v.1.0.0.17</option> <option value="https://www.cisco.com/assets/sol/sb/RV134W_Emulators/RV134W_Emulator_v1-0-0-21/default.htm"> RV134W v.1.0.0.21</option> </select> </div> </div> </div> </div> </div> <div class="switches device"> <h2 style="display:block;width:100px;">Switches</h2> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> Cisco Catalyst 1300 Series </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/switch/catalyst/c1300-24mgp-4x/html/cat1k/config/log_off_page.htm?moduleType=2241"> Catalyst 1300 v.4.1</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> Cisco Catalyst 1200 Series </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/switch/catalyst/c1200-24fp-4x/html/cat1k/config/log_off_page.htm?moduleType=2231"> Catalyst 1200 v.4.1</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> Cisco Business Switching 350 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/switch/cbs/cbs350/cbs350-24mgp-4x-3-3/html/cbs/config/log_off_page.htm?moduleType=2146"> CBS350 v.3.3</option> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/switch/cbs/cbs350/cbs350-48fp-4x/html/cbs/config/log_off_page.html?moduleType=2138"> CBS350 v.3.0.0.69</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> Cisco Business Switching 250 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/switch/cbs/cbs250/cbs250-48p-4g-3-3/html/cbs/config/log_off_page.htm?moduleType=2129"> CBS250 v.3.3 </option> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/switch/cbs/cbs250/cbs250-8fp/html/cbs/config/log_off_page.html?moduleType=2138"> CBS250 v.3.0.0.69 </option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> Cisco Business Switching 220 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/switch/cbs/cbs220/2-0-0-17/index.html#!/M_Port"> CBS220 v.2.0.0.17 </option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SG550XG Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/Switches_Emulators_v2_3_5_xx/sg550xg-48t/html/home.htm?moduleType=154"> SG550XG-48T v.2.3.5.63 </option> <option value="https://www.cisco.com/assets/sol/sb/Switches_Emulators_v2_2_015/config/home_sg_550xg-48t_2_2.htm?simpDisp"> SG550XG-48T v.2.2.0.63 </option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SG500X Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/SG500X_Emulators/SG500X_Emulator_v1-2-9/config/home_SG_500x-48P_1_2_9.htm"> SG500X-48P v.1.2.9</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SG500 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/SG500_Emulators/SG500_Emulator_v1-2-9/config/home_SG_500-52P_1_2_9.htm"> SG500-52P v.1.2.9 </option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SG350X Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/Switches_Emulators_v2_3_5_xx/sg350x-24p/html/home.htm?moduleType=154"> SG350X-24P v.2.3.5.59</option> <option value="https://www.cisco.com/assets/sol/sb/Switches_Emulators_v2_2_015/config/home_sg_350x-24p_2_2.htm"> SG350X-24P v.2.2.0.63</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SG350 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/Switches_Emulators_v2_3_5_xx/sg350-10p/html/home.htm?moduleType=154"> SG350-10P v.2.3.5.60</option> <option value="https://www.cisco.com/assets/sol/sb/Switches_Emulators_v2_2_015/config/home_sg_350-10p_2_2.htm?simpDisp"> SG350-10P v.2.2.0.63</option> </select> </div> </div> </div> <!-- <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo" /> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SG300 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/Nikola_GUI/SG_300-28P_v1_1/config/home.htm">SG300-28P v.1.1</option> <option value="https://www.cisco.com/assets/sol/sb/SG300_Emulators/SG300_Emulator_v1-2-9/config/home_SG_300-52_1_2_9.htm">SG300-52 v.1.2.9</option> </select> </div> </div> </div> --> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SF250 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/Switches_Emulators_v2_3_5_xx/sf250-48p/html/home.htm?moduleType=154"> SF250-48HP v.2.3.5.56</option> <option value="https://www.cisco.com/assets/sol/sb/Switches_Emulators_v2_2_015/config/home_sf_250-48p_2_2.htm?simpDisp "> SF250-48HP v.2.2.0.63</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SG220 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/SG220_Emulators/SG220_Emulator_v1-0-0-18_20140626/home.html"> SG220-50P v.1.0.0.18</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/switch-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> SG200 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/SG200_Emulators/SG200_Emulator_v1-2-9/config/home_SG_200-50P_1_2_9.htm"> SG200-50P v.1.2.9</option> <option value="https://www.cisco.com/assets/sol/sb/Nikola_GUI/SG_200-50P_v1_1/config/home_sx200.htm"> SG200-50P v. 1.1</option> </select> </div> </div> </div> </div> <div class="wireless device"> <h2 style="display:block;width:100px;">Wireless</h2> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/wireless-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> Cisco Business Wireless AX Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/wireless/AX-10-0-2-0/index.html"> CBW AX v.10.0.2.0</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/wireless-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> Cisco Business Wireless AC Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/web/fw/tools/cisco-business/emulators/wireless/10-7-1-0/index.html"> CBW AC v.10.7.1</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/wireless-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> WAP581 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/WAP581_Emulators/WAP581_Emulator_v1-0-1-3/main.htm"> WAP581 v.1.0.1.3</option> <option value="https://www.cisco.com/assets/sol/sb/WAP581_Emulators/WAP581_Emulator_v1-0-0-4/main.htm"> WAP581 v.1.0.0.4</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/wireless-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> WAP571 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/WAP571_Emulators/WAP571_Emulator_v1-1-0-3/main_en.html"> WAP571 v.1.1.0.3</option> <option value="https://www.cisco.com/assets/sol/sb/WAP571_Emulators/WAP571_Emulator_v1-0-0-14/main_en.html"> WAP571 v.1.0.0.14</option> <option value="https://www.cisco.com/assets/sol/sb/WAP571E_Emulators/WAP571E_Emulator_v1-1-0-3/main_en.html"> WAP571E v.1.1.0.3</option> <option value="https://www.cisco.com/assets/sol/sb/WAP571E_Emulators/WAP571E_Emulator_v1-0-0-14/main_en.html"> WAP571E v.1.0.0.14</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/wireless-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> WAP361 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/WAP361_Emulators/WAP361_Emulator_v1-0-0-16/main.htm"> WAP361 v1.0.0.16</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/wireless-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> WAP150 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/WAP150_Emulators/WAP150_Emulator_v1-0-0-16-20160307/main.htm"> WAP150 v1.0.0.16</option> </select> </div> </div> </div> <div class="content-card" onclick="openSelectedValue.call(this)"> <div class="content-card-header-logo"> <img src="https://www.cisco.com/web/fw/tools/cisco-business/Chatbot/images/wireless-icon-blue.svg" alt="Cisco Logo"/> </div> <div class="content-card-header-text"> <p style="font-size: var(--font-size-lg); flex: 1;"> WAP125 Product Family </p> <div style="font-size: var(--font-size-sm); display: flex; align-items: center;" class="mediaCategory"> <span> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_1697_852)"> <path d="M12.0075 3.03201L19.0858 10.1105C19.7691 10.7939 19.7691 11.902 19.0857 12.5854L12.5849 19.0862C11.9015 19.7696 10.7934 19.7696 10.11 19.0862L3.03177 12.0077C2.74542 11.7214 2.56725 11.3446 2.52762 10.9416L1.81865 3.73171C1.71068 2.63365 2.63345 1.71088 3.73151 1.81886L10.9413 2.52782C11.3444 2.56745 11.7212 2.74564 12.0075 3.03201Z" stroke="black" stroke-width="0.5" /> <circle cx="5.12109" cy="5.12132" r="1.5" transform="rotate(45 5.12109 5.12132)" fill="#D9D9D9" /> </g> <defs> <clipPath id="clip0_1697_852"> <rect width="20" height="20" fill="white" /> </clipPath> </defs> </svg> </span> <select style="font-size: var(--font-size-md); " style="font-size: var(--font-size-sm); " onclick="event.stopPropagation()"> <option value="https://www.cisco.com/assets/sol/sb/WAP125_Emulators/WAP125_Emulator_v1-0-1-5/main.htm"> WAP125 v1.0.1.5</option> <option value="https://www.cisco.com/assets/sol/sb/WAP125_Emulators/WAP125_Emulator_v1-0-0-03/main.htm"> WAP125 v1.0.0.03</option> </select> </div> </div> </div> </div> <div class="mpp device"></div> </main> <script> // if a user clicks one of the buttons in deviceSelector it will filter the main divs to show only the ones that match the button clicked // if a user clicks the same button again it will show all the divs again // if a user clicks a different button it will show the divs that match the button clicked and hide the ones that don't let deviceSelector = document.querySelector('.deviceSelector'); let device = document.querySelectorAll('.device'); deviceSelector.addEventListener('click', e => { let target = e.target; console.log(target.innerHTML) // switch case statement for the buttons switch (target.innerHTML) { case "Routers": console.log('routers be clicked'); // show only the routers div device.forEach(e => { if (e.classList.contains('routers')) { e.style.display = 'grid'; } else { e.style.display = 'none'; } }); break; case "Switches": console.log('switches be clicked'); // show only the routers div device.forEach(e => { if (e.classList.contains('switches')) { e.style.display = 'grid'; } else { e.style.display = 'none'; } }); break; case "Wireless": console.log('wireless be clicked'); device.forEach(e => { if (e.classList.contains('wireless')) { e.style.display = 'grid'; } else { e.style.display = 'none'; } }); break; case "All": console.log('mpp be clicked'); device.forEach(e => { e.style.display = 'grid'; }); break; } }); const selectElsarrow = document.querySelectorAll('.content-card select'); selectElsarrow.forEach(selectEl => { if (selectEl.options.length === 1) { selectEl.style.appearance = 'none'; // Hide the arrow selectEl.style.paddingLeft = '0.25em'; } }); </script> </body> </html> </div> </div> <div class="row wide-narrow" data-owner="ID"> <div class="col wide"> </div> <div class="col narrow"> <!-- DM:components/html/htmlblob:V1.2.6 --> <div> <ul class="dm0 extra-ol-feedback" style="padding-top: 10.0px;"> <li> <a href="javascript:void(0);" onclick="window.open('https://ciscocx.qualtrics.com/jfe/form/SV_2gAQDPastWsR6ke?Ref=' + location.href + '&resize=false', 'feedback', 'width=650, height=460, scrollbars=1, menubar=1, resizable=1'); return false;" style="font-size: 14px;"><img id="rr_feedback_img" title="Feedback" src="//www.cisco.com/c/dam/cdc/i/Feedback_OceanBlue.png" alt="Feedback"> Feedback</a> </li> </ul> </div> </div> </div> <!-- end: responsive fat footer re-use wrapper--> </div> <script type="module" src="/site/web-components/us/en/cdc-footer.js"></script> <cdc-footer></cdc-footer> <script type="text/javascript"> if(document.querySelector('#privacy-manager')!=null){ document.querySelector('#privacy-manager').href='#cookies'; } </script> <div id="fw-overlay"></div> <script src="/etc/designs/cdc/clientlibs/responsive/js/responsive.min.js"></script> <script src="/etc/designs/cdc/fw/m/res_marketing_metrics_rules.js" type="text/javascript"></script> <!-- SiteCatalyst code version: H.24.4. --> <noscript><img src="//cisco.112.2o7.net/b/ss/cisco-mobile/5/12345" width="2" height="2" border="0" alt=""/></noscript> </body> </html>