97 lines
5.8 KiB
HTML
97 lines
5.8 KiB
HTML
<!-- Bannière Huawei Cloud V2 - Professional -->
|
||
<div id="huawei-banner-v2" style="background:linear-gradient(135deg,#e94560 0%,#c13349 100%);color:white;padding:0;position:relative;z-index:999;box-shadow:0 4px 20px rgba(233,69,96,0.3);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif">
|
||
<div style="max-width:1200px;margin:0 auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap">
|
||
|
||
<!-- Logo + Texte -->
|
||
<div style="display:flex;align-items:center;gap:1rem;flex:1;min-width:300px;justify-content:center">
|
||
<svg style="width:44px;height:44px;fill:white;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15))" viewBox="0 0 24 24">
|
||
<path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"/>
|
||
</svg>
|
||
<div style="text-align:center">
|
||
<div style="font-weight:800;font-size:1.1rem;letter-spacing:-0.02em;line-height:1.2">
|
||
<span class="banner-lang" data-lang="fr">🏆 Partenaire Certifié Huawei Cloud</span>
|
||
<span class="banner-lang" data-lang="en" style="display:none">🏆 Certified Huawei Cloud Partner</span>
|
||
</div>
|
||
<div style="font-size:0.85rem;opacity:0.95;font-weight:500;margin-top:0.3rem;letter-spacing:0.01em">
|
||
<span class="banner-lang" data-lang="fr">Infrastructure Cloud • IA & Data • Haute Disponibilité • Accompagnement Expert</span>
|
||
<span class="banner-lang" data-lang="en" style="display:none">Cloud Infrastructure • IA & Data • High Availability • Expert Support</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Boutons d'action -->
|
||
<div style="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap;justify-content:center">
|
||
<!-- Bouton Catalogue -->
|
||
<a href="/products/huawei-cloud.html" style="padding:0.7rem 1.5rem;background:white;color:#e94560;border-radius:8px;font-weight:700;text-decoration:none;font-size:0.9rem;white-space:nowrap;transition:all 0.3s;display:flex;align-items:center;gap:0.5rem;box-shadow:0 4px 12px rgba(0,0,0,0.15)" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 20px rgba(0,0,0,0.25)'" onmouseout="this.style.transform='';this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)'">
|
||
<span>📋</span>
|
||
<span class="banner-lang" data-lang="fr">Voir le catalogue</span>
|
||
<span class="banner-lang" data-lang="en" style="display:none">View catalog</span>
|
||
</a>
|
||
|
||
<!-- Bouton Console -->
|
||
<a href="https://www.huaweicloud.com/intl/en-us/" target="_blank" rel="noopener" style="padding:0.7rem 1.5rem;background:rgba(255,255,255,0.15);border:2px solid white;color:white;border-radius:8px;font-weight:700;text-decoration:none;font-size:0.9rem;white-space:nowrap;transition:all 0.3s;display:flex;align-items:center;gap:0.5rem;backdrop-filter:blur(10px)" onmouseover="this.style.background='white';this.style.color='#e94560'" onmouseout="this.style.background='rgba(255,255,255,0.15)';this.style.color='white'">
|
||
<span>☁️</span>
|
||
<span class="banner-lang" data-lang="fr">Accéder au Cloud</span>
|
||
<span class="banner-lang" data-lang="en" style="display:none">Access Cloud</span>
|
||
</a>
|
||
|
||
<!-- Sélecteur langue -->
|
||
<button onclick="toggleBannerLang()" style="padding:0.5rem 0.8rem;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);color:white;border-radius:6px;font-weight:600;cursor:pointer;font-size:0.85rem;transition:all 0.3s;backdrop-filter:blur(10px)" onmouseover="this.style.background='rgba(255,255,255,0.3)'" onmouseout="this.style.background='rgba(255,255,255,0.2)'">
|
||
<span id="lang-toggle">🌐 EN</span>
|
||
</button>
|
||
|
||
<!-- Bouton fermer -->
|
||
<button onclick="document.getElementById('huawei-banner-v2').style.display='none'" style="background:rgba(255,255,255,0.15);border:none;color:white;font-size:1.4rem;cursor:pointer;padding:0.3rem 0.6rem;border-radius:6px;transition:all 0.3s;line-height:1;backdrop-filter:blur(10px)" onmouseover="this.style.background='rgba(255,255,255,0.25)'" onmouseout="this.style.background='rgba(255,255,255,0.15)'" title="Fermer" aria-label="Fermer">×</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Toggle langue bannière
|
||
let currentBannerLang = 'fr';
|
||
function toggleBannerLang() {
|
||
currentBannerLang = currentBannerLang === 'fr' ? 'en' : 'fr';
|
||
const elements = document.querySelectorAll('.banner-lang');
|
||
elements.forEach(el => {
|
||
el.style.display = el.getAttribute('data-lang') === currentBannerLang ? '' : 'none';
|
||
});
|
||
document.getElementById('lang-toggle').textContent = currentBannerLang === 'fr' ? '🌐 EN' : '🌐 FR';
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* Responsive mobile bannière */
|
||
@media (max-width: 768px) {
|
||
#huawei-banner-v2 > div {
|
||
padding: 1rem !important;
|
||
flex-direction: column !important;
|
||
gap: 1rem !important;
|
||
}
|
||
#huawei-banner-v2 svg {
|
||
width: 32px !important;
|
||
height: 32px !important;
|
||
}
|
||
#huawei-banner-v2 .banner-lang[data-lang] {
|
||
font-size: 0.9rem !important;
|
||
}
|
||
#huawei-banner-v2 a, #huawei-banner-v2 button {
|
||
font-size: 0.85rem !important;
|
||
padding: 0.6rem 1.2rem !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
#huawei-banner-v2 > div {
|
||
padding: 0.8rem !important;
|
||
}
|
||
#huawei-banner-v2 > div > div:last-child {
|
||
width: 100% !important;
|
||
flex-direction: column !important;
|
||
}
|
||
#huawei-banner-v2 a {
|
||
width: 100% !important;
|
||
justify-content: center !important;
|
||
}
|
||
}
|
||
</style>
|