[DOCS] Add newsletter form (#18605)

* Add newsletter modal
This commit is contained in:
bstankix 2023-07-18 14:46:42 +02:00 committed by GitHub
parent 144c1ffd7b
commit 8a49cf14ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 88 additions and 31 deletions

View File

@ -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,27 +110,29 @@ ul#navbar-main-elements > li:hover {
transform: rotate(0deg);
}
/* Footer */
/* =================================================== */
footer iframe {
background-color: white;
width: 100%;
border: none;
height: 60px;
height: 70px;
}
@media screen and (min-width: 860px) {
footer iframe {
height: 45px;
height: 60px;
}
}
@media screen and (max-width: 520px) {
@media screen and (max-width: 596px) {
footer iframe {
height: 85px;
}
}
/* Doc version dropdown formatting override */
/* =================================================== */
[aria-labelledby="version-selector"] {
@ -956,11 +968,12 @@ table#model-accuracy-and-perf-int8-fp32-table td.data {
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);
/* background: white;
box-shadow: 0 0 40px 40px rgba(255,255,255,1); */
padding: 10px;
max-width: 600px;
width: 90%;
@ -1009,17 +1022,17 @@ table#model-accuracy-and-perf-int8-fp32-table td.data {
.newsletter-input.failed:focus {
outline: 0;
box-shadow: 0 0 5px 2px #c90000;
box-shadow: 0 0 5px 2px #a8a8a8;
}
.newsletter-btn,
.newsletter-btn:focus {
background: #c4c000;
color: white;
background: #cdedff;
color: rgba(0, 104, 181, 1);
border: 0;
position: absolute;
top: 1px;
right: 1px;
top: 1.5px;
right: 1.5px;
padding: 0 .8rem;
transition: .4s;
@ -1032,12 +1045,14 @@ table#model-accuracy-and-perf-int8-fp32-table td.data {
.newsletter-btn:hover,
.newsletter-btn:active {
background: #a3a000;
background: #00A3F6;
color: white;
outline: none;
}
.newsletter-btn:disabled {
background: #c90000;
background: #a8a8a8;
color: white;
}
.newsletter-btn:before {
@ -1046,6 +1061,15 @@ table#model-accuracy-and-perf-int8-fp32-table td.data {
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;
@ -1055,6 +1079,24 @@ table#model-accuracy-and-perf-int8-fp32-table td.data {
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;
}
@ -1071,6 +1113,10 @@ table#model-accuracy-and-perf-int8-fp32-table td.data {
animation-delay: .3s;
}
.animation-delay--long {
animation-delay: .5s;
}
@keyframes fade-up-anim {
from {
opacity: 0;
@ -1090,3 +1136,7 @@ table#model-accuracy-and-perf-int8-fp32-table td.data {
opacity: 1;
}
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

View File

@ -4,11 +4,11 @@
<span class="modal-close">&times;</span>
<div class="newsletter-header">
<h3 class="newsletter-heading">Newsletter</h3>
<p class="newsletter-text">Register for the OpenVINO newsletter!</p>
<p class="newsletter-text">Be among the first to learn about everything new with the Intel® Distribution of OpenVINO™ toolkit.</p>
</div>
<form id="newsletterForm" class="animated fade-up animation-delay">
<input type="hidden" name="elqSiteID" value="edit me!">
<input type="hidden" name="elqFormName" value="edit me!">
<input type="hidden" name="elqSiteID" value="334284386">
<input type="hidden" name="elqFormName" value="C-MKA-30146_T-MKA-36922">
<div class="form-group">
<select id="newsletterCountry" name="country" class="newsletter-input">
<option value="Afghanistan">Afghanistan </option>
@ -263,11 +263,14 @@
</select>
</div>
<div class="form-group">
<input type="text" class="newsletter-input" name="email" id="newsletterEmail" placeholder="Enter your email" required>
<input type="text" class="newsletter-input" name="emailAddress" id="newsletterEmail" placeholder="Enter your email" required>
<button class="newsletter-btn" type="submit">SUBMIT </button>
</div>
</form>
<div class="message-box animated fade-up"></div>
<div class="newsletter-footer animated fade-in animation-delay--long">
<p class="newsletter-footer-text">By submitting this form, you are confirming you are an adult 18 years or older and you agree to share your personal information with Intel to use for this business request. You also agree to subscribe to stay connected to the latest Intel technologies and industry trends by email and telephone. You may unsubscribe at any time. Intel's web sites and communications are subject to our <a href="https://intel.com/content/www/us/en/privacy/intel-privacy-notice.html" target="_blank"> Privacy Notice </a> and <a href="https://intel.com/content/www/us/en/legal/terms-of-use.html" target="_blank"> Terms of Use.</a></p>
</div>
</div>
</div>
</div>

View File

@ -1,4 +1,7 @@
const eloquaUrl = 'https://httpbingo.org/post'
const eloquaUrl = 'https://s334284386.t.eloqua.com/e/f2'
// debug url
// const eloquaUrl = 'https://httpbingo.org/post'
$(document).ready(function () {
@ -32,14 +35,15 @@ $(document).ready(function () {
$.post(eloquaUrl, $(this).serialize())
.done(function(data) {
// ---------- debug request data
// console.log(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]}`);
}
// 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');
})
@ -74,22 +78,22 @@ $(document).ready(function () {
$('#newsletterForm').hide();
let message = '';
const messageBox = $('.message-box');
const icon = $('<div class="fa-stack fa-2x">');
const iconBackground = $('<i class="fas fa-square fa-stack-2x">');
const iconMain = $('<i class="fas fa-stack-1x fa-inverse">');
const icon = $('<div class="fa-stack fa-2x newsletter-icon">');
const iconBackground = $('<i class="fas fa-square fa-stack-2x newsletter-icon-background">');
const iconMain = $('<i class="fas fa-stack-1x">');
icon.append(iconBackground);
icon.append(iconMain);
messageBox.css({'height': boxHeight + 16, 'display': 'flex'});
switch(status) {
case 'pass':
icon.css('color', '#708541');
iconMain.addClass('fa-check-square');
messageBox.addClass('newsletter-submit--success')
message = 'REGISTRATION SUCCESSFUL'
break;
case 'error':
icon.css('color', '#C81326');
iconMain.addClass('fa-window-close');
iconMain.addClass('newsletter-submit--failure')
switch(errorCode) {
case 400:
message = 'ALREADY REGISTERED';