diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css index 8a6e30ed4eb..be803a07a0e 100644 --- a/docs/_static/css/custom.css +++ b/docs/_static/css/custom.css @@ -10,7 +10,7 @@ main img { .doxyrest-title-code-block { margin-bottom: 0; -} +} main .searchForm { margin-bottom: 2rem; @@ -21,23 +21,30 @@ pre { white-space: pre-wrap; word-wrap: break-word; } + + /* cookie wap requirement */ a#wap_dns {display: none;} + + /* Sphinx-design tabs override */ .sd-tab-set>input:checked+label { border-color: var(--sd-color-tabs-underline-inactive); color: var(--sd-color-info-text)!important; background-color: rgb(0 104 181)!important; } + .sd-tab-set>input:checked+label:hover { color: --sd-color-info-text; background-color: rgb(0,74,134)!important; } + .sd-tab-set>input:not(:checked)+label:hover { color: var(--sd-color-black)!important; background-color: rgb(245, 245, 245)!important; border-color: var(--sd-color-card-header)!important; } + .sd-tab-set>label { border-bottom: 0.125rem solid transparent; margin-right: 10px!important; @@ -52,11 +59,13 @@ a#wap_dns {display: none;} width: auto; z-index: 1; } + .sd-tab-content { box-shadow:none!important; border-top: solid 2px var(--sd-color-tabs-overline)!important; } + /* Navigation panels override */ /* =================================================== */ /* Hide home item in the top bar */ @@ -79,6 +88,7 @@ ul#navbar-main-elements > li:hover { #bd-docs-nav > div > ul > li { padding-bottom: 15px; } + #bd-docs-nav > div > ul > li > a { color: #000000; font-weight: bold; @@ -100,26 +110,6 @@ ul#navbar-main-elements > li:hover { transform: rotate(0deg); } -/* Footer */ -/* =================================================== */ -footer iframe { - background-color: white; - width: 100%; - border: none; - height: 60px; -} - -@media screen and (min-width: 860px) { - footer iframe { - height: 45px; - } -} - -@media screen and (max-width: 520px) { - footer iframe { - height: 85px; - } -} /* Doc version dropdown formatting override */ /* =================================================== */ @@ -942,3 +932,196 @@ table#model-accuracy-and-perf-int8-fp32-table td.data { display: none; padding-left: 30px; } + + +/* Newsletter */ +/* =================================================== */ +#newsletterModal { + position: fixed; + z-index: 5000; + width: 100%; + height: 100%; + bottom: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + background: rgba(255, 255, 255, .7); +} + +.newsletter-shadow { + /* background: white; + box-shadow: 0 0 40px 40px rgba(255,255,255,1); */ + padding: 10px; + max-width: 600px; + width: 90%; + box-sizing: border-box; +} + +.newsletter-box { + max-width: 530px; + padding: 10px; + margin: auto; +} + +.newsletter { + background: rgba(0, 104, 181, 1); + box-shadow: 0 0 20px 10px #a9a9a9c0; + width: 100%; + padding: 10px; +} + +.newsletter-heading { + color: white; + margin: 0 0 1rem; +} + +.newsletter-text { + color: white; +} + +.form-group { + position: relative; +} + +.newsletter-input { + box-sizing: border-box; + border: 1px solid white; + width: 100%; + transition: .4s; + line-height: 1.65rem; + height: 30px; +} + +.newsletter-input:focus { + outline: 0; + box-shadow: 0 0 5px 2px white; +} + +.newsletter-input.failed:focus { + outline: 0; + box-shadow: 0 0 5px 2px #a8a8a8; +} + +.newsletter-submit-btn, +.newsletter-submit-btn:focus { + background: #cdedff; + color: rgba(0, 104, 181, 1); + border: 0; + position: absolute; + top: 1.5px; + right: 1.5px; + padding: 0 .8rem; + transition: .4s; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 31%; + outline: none; +} + +.newsletter-submit-btn:hover, +.newsletter-submit-btn:active { + background: #00A3F6; + color: white; + outline: none; +} + +.newsletter-submit-btn:disabled { + background: #a8a8a8; + color: white; +} + +.newsletter-submit-btn:before { + font-family: "Font Awesome 5 Free"; + content: "\f0e0\00a0"; + font-size: 1rem; +} + +.newsletter-footer-text { + color: #76CEFF; + font-size: 0.7rem; +} + +.newsletter-footer-text a { + color: #B4F0FF; +} + +.message-box { + justify-content: center; + align-items: center; + font-size: 1.2rem; + text-align: center; + display: none; + color: white; +} + +.newsletter-icon { + margin-left: -31px; +} + +.newsletter-icon-background { + color: white; + top: 20px; + font-size: .9em; +} + +.newsletter-submit--success { + color: #B1D272; +} + +.newsletter-submit--failure { + color: #C81326; +} + +.animated { + opacity: 0; +} + +.fade-up { + animation: fade-up-anim .2s forwards; +} + +.fade-in { + animation: fade-in-anim .2s forwards; +} + +.animation-delay { + animation-delay: .3s; +} + +.animation-delay--long { + animation-delay: .5s; +} + +@keyframes fade-up-anim { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fade-in-anim { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +input:-webkit-autofill { + -webkit-box-shadow: 0 0 0px 1000px white inset; +} + + +/* Splide carousel */ +.splide__slide { + margin-right: 2rem; + overflow: hidden; +} diff --git a/docs/_static/css/homepage_style.css b/docs/_static/css/homepage_style.css index 6b9e81c3f3b..e76b61374d2 100644 --- a/docs/_static/css/homepage_style.css +++ b/docs/_static/css/homepage_style.css @@ -3,6 +3,7 @@ #openvino-documentation > h1 { display: none; } + h1 { /*font-size: var(--pst-font-size-h2);*/ /*margin-bottom: 3rem;*/ @@ -13,12 +14,14 @@ h1 { #ov-homepage-banner, .openvino-diagram, .ov-homepage-higlight-grid { margin-bottom: 90px!important; } + #ov-homepage-banner { padding: 2rem; background-color: #76CEFF; background-image: linear-gradient(346deg, #728EFA 0%, #76CEFF 50%, #BBE8BD 100%); border-bottom: 5px solid #0068b5; } + #ov-homepage-banner p:first-of-type { margin-top: 0; margin-bottom: 1rem; @@ -30,64 +33,92 @@ h1 { line-height: 1em; text-align: left; } + #ov-homepage-banner .line-block { + line-height: 1.5; text-align: left; color: #000000; } + .ov-homepage-banner-btn { transition: 0.7s; font-weight: bold; background-color: #0068b5; color: #ffffff !important; } + .ov-homepage-banner-btn:hover { background-color: white!important; color: var(--sd-color-primary)!important; } + #ov-homepage-banner > p:nth-child(3) { margin-bottom: 0; } + +#ov-homepage-banner a, +#ov-homepage-banner a:visited { + text-decoration: none; + color: #00A3F6; + transition: .7s; + font-weight: 600; +} + +#ov-homepage-banner a:hover { + color: #653171; +} + .openvino-diagram { width: 65%; margin-bottom: 3rem; } + @media (max-width: 720px) { .openvino-diagram { width: 90%; } } + .ov-homepage-higlight-grid { padding: 0; } + .ov-homepage-higlight-grid > div { justify-content:space-evenly; row-gap: 20px; } + .ov-homepage-higlight-grid > div > div.sd-col { width: 230px; min-height: 300px; padding: 0; margin-inline: 5px; } + .ov-homepage-higlight-grid .sd-card { box-shadow: 0 0 20px 5px #f3f3f3!important; transition: 0.5s; overflow: hidden; } + .ov-homepage-higlight-grid .sd-card-hover:hover { border-color: var(--sd-color-card-border)!important; transform: scale(1.00)!important; } + .ov-homepage-higlight-grid .sd-shadow-sm:hover { box-shadow: 0 0 10px 2px rgba(108,36,240,0.3) !important; } + .ov-homepage-higlight-grid .sd-card-title { height: 52.781px; margin-bottom: 2rem; } + .ov-homepage-higlight-grid .sd-card-text { font-size: 0.9rem; } + .ov-homepage-higlight-grid .sd-card::after { align-self: flex-end; display: block; @@ -101,19 +132,24 @@ h1 { height: 3rem; background-color: #CDEDFF; } + .ov-homepage-feature-grid .sd-col { padding: 0; max-width: 48%; } + .ov-homepage-feature-grid .sd-card { border: none; box-shadow: 0 0 20px 2px #f3f3f3!important; /* box-shadow: none!important; */ } + .ov-homepage-feature-grid .sd-row { gap: 1rem; justify-content: center; } + + /* =================================================================== */ /* @media screen and (min-width: 720px) { main.col-xl-7.bd-content { @@ -121,6 +157,7 @@ h1 { max-width: 75%!important; } }*/ + @media screen and (max-width: 535px) { .ov-homepage-feature-grid .sd-row { flex-direction: column; @@ -129,4 +166,4 @@ h1 { .ov-homepage-feature-grid .sd-col { max-width: 100%; } -} \ No newline at end of file +} diff --git a/docs/_static/html/newsletter.html b/docs/_static/html/newsletter.html new file mode 100644 index 00000000000..3283d54a43e --- /dev/null +++ b/docs/_static/html/newsletter.html @@ -0,0 +1,283 @@ +
diff --git a/docs/_static/js/custom.js b/docs/_static/js/custom.js index 63dde7d186c..83282ab3d7f 100644 --- a/docs/_static/js/custom.js +++ b/docs/_static/js/custom.js @@ -34,6 +34,7 @@ function addLegalNotice() { } $(document).ready(function () { + addFooter(); createVersions(); updateTitleTag(); updateLanguageSelector(); @@ -46,6 +47,7 @@ $(document).ready(function () { initBenchmarkPickers(); // included with the new benchmarks page initCollapsibleHeaders(); // included with the new benchmarks page createSphinxTabSets(); + initSplide(); }); // Determine where we'd go if clicking on a version selector option @@ -253,3 +255,26 @@ function initBenchmarkPickers() { $('#performance-information-frequently-asked-questions section p, #performance-information-frequently-asked-questions section table').hide(); } } + +function addFooter() { + const footerAnchor = $('.footer'); + + fetch('../footer.html').then((response) => response.text()).then((text) => { + const footerContent = $(text); + footerAnchor.append(footerContent); + }); +} + +function initSplide() { + const slides = $('.splide__slide'); + const height = (slides.length > 4) ? 96 + ((slides.length - 4) * 16) : 96 + var splide = new Splide('.splide', { + direction : 'ttb', + type : 'loop', + height : `${height}px`, + perPage : 1, + autoplay : true, + arrows : false, + }); + splide.mount(); +} diff --git a/docs/_static/js/newsletter.js b/docs/_static/js/newsletter.js new file mode 100644 index 00000000000..65328bee690 --- /dev/null +++ b/docs/_static/js/newsletter.js @@ -0,0 +1,133 @@ +const eloquaUrl = 'https://s334284386.t.eloqua.com/e/f2' +newsletterFieldPrefix = 'newsletter-' + +// debug url +// const eloquaUrl = 'https://httpbingo.org/post' + + + +$(document).ready(function () { + const waitForElement = async selector => { + while (document.querySelector(selector) === null) { + await new Promise(resolve => requestAnimationFrame(resolve)) + } + return document.querySelector(selector); + }; + + waitForElement('#newsletterTrigger').then((trigger) => { + $(trigger).on('click', showForm); + }) + + // trigger with iframe + // $('iframe').on('load', function() { + // $('iframe').contents().find('#newsletterTrigger').on('click', showForm); + // }); + + function showForm() { + fetch('_static/html/newsletter.html').then((response) => response.text()).then((text) => { + const newsletter = $('