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 = $('
'); + newsletter.attr('id', 'newsletterModal'); + newsletter.addClass('newsletterContainer'); + + const newsletterContent = $(text); + newsletter.append(newsletterContent); + $('body').prepend(newsletter); + + $('#newsletterEmail').focus(); + + $('.modal-close').on('click', closeForm); + $('#newsletterEmail').on('keyup', validate); + + $("#newsletterForm").submit(function(event) { + event.preventDefault(); + const formHeight = $(this).outerHeight() + $(this).removeClass('animated fade-up') + $(this).animate({opacity: 0}, 200, 'linear', () => { + const currentUrl = window.location.protocol + '//' + window.location.hostname + window.location.pathname + $(this).append(``) + const rawFormData = $(this).serializeArray() + const filteredFormData = []; + for (var entry of rawFormData) { + if (entry['name'].startsWith(newsletterFieldPrefix)) { + entry['name'] = entry['name'].replace(newsletterFieldPrefix, ''); + filteredFormData.push(entry) + } + } + $.post(eloquaUrl, $.param(filteredFormData)) + .done(function(data) { + // ---------- debug request data + + // console.log('#############'); + // console.log('Origin: ' + data.headers['Origin'][0]); + // console.log('Url: ' + data.url); + // console.log('Form data:'); + // for (key in data.form) { + // console.log(`-- ${key}: ${data.form[key]}`); + // } + + // ---------- + displayMessage(formHeight, 'pass'); + }) + .fail(function(error) { + displayMessage(formHeight, 'error', error.status); + }); + }); + }) + }) + } + + function closeForm() { + $('#newsletterModal').animate({opacity: 0}, 200, 'linear', function() { + this.remove(); + }); + } + + function validate() { + let value = $('#newsletterEmail').val(); + const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; + if (emailPattern.test(value)) { + $('#newsletterEmail').removeClass('failed'); + $('.newsletter-submit-btn').prop('disabled', false); + } + else { + $('#newsletterEmail').addClass('failed'); + $('.newsletter-submit-btn').prop('disabled', true); + } + } + + function displayMessage(boxHeight, status, errorCode) { + $('#newsletterForm').hide(); + let message = ''; + const messageBox = $('.message-box'); + const icon = $('
'); + const iconBackground = $('
{% endblock %} - diff --git a/docs/conf.py b/docs/conf.py index 7bd452a8d49..e2592bb2624 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -188,6 +188,6 @@ def setup(app): app.connect('build-finished',replace_index_with_redirect) app.add_js_file('js/custom.js') app.add_js_file('js/graphs.js') + app.add_js_file('js/newsletter.js') app.add_js_file('js/graphs_ov_tf.js') app.add_js_file('js/open_sidebar.js') - \ No newline at end of file diff --git a/docs/home.rst b/docs/home.rst index cf2e1af832e..8523803c3f4 100644 --- a/docs/home.rst +++ b/docs/home.rst @@ -16,8 +16,20 @@ OpenVINO 2023.0 OpenVINO 2023.0 - | An open-source toolkit for optimizing and deploying deep learning models. - | Boost your AI deep-learning inference performance! + .. raw:: html + +
+
+
+
    +
  • An open-source toolkit for optimizing and deploying deep learning models.
    Boost your AI deep-learning inference performance!
  • +
  • Even more integrations in 2023.0!
    Load TensorFlow, TensorFlow Lite, and PyTorch models directly, without manual conversion.
    See the supported model formats...
  • +
  • CPU inference has become even better. ARM processors are supported and thread scheduling is available on 12th gen Intel® Core and up.
    See how to run OpenVINO on various devices...
  • +
  • Post-training optimization and quantization-aware training now in one tool!
    See the new NNCF capabilities...
  • +
+
+
+
.. button-ref:: get_started :ref-type: doc @@ -32,6 +44,7 @@ OpenVINO 2023.0 .. image:: _static/images/ov_homepage_diagram.png :align: center + .. grid:: 2 2 3 3 :class-container: ov-homepage-higlight-grid @@ -113,4 +126,3 @@ Feature Overview MODEL ZOO RESOURCES RELEASE NOTES - diff --git a/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/footer.html b/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/footer.html index c090fdf9a16..02e2ff2b894 100644 --- a/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/footer.html +++ b/docs/openvino_sphinx_theme/openvino_sphinx_theme/templates/footer.html @@ -1,3 +1,2 @@