Admin/Kobelly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

better css

Browse Source
This commit is contained in:
KobePurraxxus
2025-07-15 21:08:55 +02:00
parent 5a26f565ab
commit 033d0337fd
4 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
static/css/main.969004bb.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

10
static/css/main.css
View File

@ -921,10 +921,7 @@ body.page-loaded > *:not(.navbar) {
padding-right: 0 !important;
}
.feature-icon-wrapper {
margin-left: 0 !important;
margin-right: 0 !important;
}
.feature-icon {
font-size: 3rem;
@ -1671,7 +1668,7 @@ body.page-loaded > *:not(.navbar) {
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5rem;
margin-right: 1.75rem;
position: relative;
overflow: hidden;
}
@ -1701,6 +1698,7 @@ body.page-loaded > *:not(.navbar) {
.feature-content {
flex-grow: 1;
padding-left: 0.5rem;
}
/* Counter Animation */
@ -2216,7 +2214,7 @@ body.page-loaded > *:not(.navbar) {
}
.feature-icon-wrapper {
margin-right: 0 !important;
margin-bottom: 1rem !important;
margin-bottom: 1.5rem !important;
}
.feature-content {
width: 100%;

2
static/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
static/js/main.0f42b3c1.min.js vendored Normal file
View File

@ -0,0 +1,14 @@
function setTheme(theme){document.documentElement.setAttribute('data-theme',theme);localStorage.setItem('theme',theme);var icon=document.getElementById('theme-icon');var iconDesktop=document.getElementById('theme-icon-desktop');if(icon)icon.className=theme==='dark'?'fas fa-sun':'fas fa-moon';if(iconDesktop)iconDesktop.className=theme==='dark'?'fas fa-sun':'fas fa-moon';}
function toggleTheme(){const current=document.documentElement.getAttribute('data-theme')||'light';setTheme(current==='light'?'dark':'light');}
var themeToggle=document.getElementById('theme-toggle');if(themeToggle)themeToggle.addEventListener('click',toggleTheme);var themeToggleDesktop=document.getElementById('theme-toggle-desktop');if(themeToggleDesktop)themeToggleDesktop.addEventListener('click',toggleTheme);(function(){let theme=localStorage.getItem('theme');if(!theme){theme=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}
setTheme(theme);})();window.addEventListener('DOMContentLoaded',function(){document.body.classList.add('page-loaded');var fadeEls=document.querySelectorAll('.fade-in-up');fadeEls.forEach(function(el,i){setTimeout(function(){el.classList.add('visible');},200+i*180);});const counters=document.querySelectorAll('.counter');const animateCounters=()=>{counters.forEach(counter=>{const target=parseInt(counter.getAttribute('data-target'));const count=parseInt(counter.innerText);const increment=target/100;if(count<target){counter.innerText=Math.ceil(count+increment)+'<span class="plus">+</span>';setTimeout(animateCounters,20);}else{counter.innerText=target;}});};const observerOptions={threshold:0.5,rootMargin:'0px 0px -100px 0px'};const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){animateCounters();observer.unobserve(entry.target);}});},observerOptions);const aboutStats=document.querySelector('.about-stats');if(aboutStats){observer.observe(aboutStats);}});document.addEventListener('DOMContentLoaded',function(){var mapDiv=document.getElementById('map');if(mapDiv){var map=L.map('map',{center:[50.77989716345206,4.048368809494087],zoom:13,zoomControl:true,attributionControl:false});var maptilerKey='fyG4fxsIMwJnhJ9hQ1wj';var light=L.tileLayer('https://api.maptiler.com/maps/streets-v2-pastel/{z}/{x}/{y}.png?key='+maptilerKey,{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>',tileSize:512,zoomOffset:-1});var dark=L.tileLayer('https://api.maptiler.com/maps/streets-v2-dark/{z}/{x}/{y}.png?key='+maptilerKey,{attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>',tileSize:512,zoomOffset:-1});var isDark=document.documentElement.getAttribute('data-theme')==='dark';var currentLayer=isDark?dark:light;currentLayer.addTo(map);L.marker([50.77989716345206,4.048368809494087]).addTo(map).bindPopup('Kobelly Web Solutions<br>1755 Oetingen, Pajottegem').openPopup();var observer=new MutationObserver(function(mutations){mutations.forEach(function(mutation){if(mutation.type==='attributes'&&mutation.attributeName==='data-theme'){var newTheme=document.documentElement.getAttribute('data-theme');if(newTheme==='dark'){map.removeLayer(light);dark.addTo(map);}else{map.removeLayer(dark);light.addTo(map);}}});});observer.observe(document.documentElement,{attributes:true});}});document.addEventListener('DOMContentLoaded',function(){var startDate=new Date('2014-01-01');var now=new Date();var years=now.getFullYear()-startDate.getFullYear();if(now.getMonth()<startDate.getMonth()||(now.getMonth()===startDate.getMonth()&&now.getDate()<startDate.getDate())){years--;}
var hoursCoded=years*2000;var statItems=document.querySelectorAll('.stat-item h3');statItems.forEach(function(statEl){var statText=statEl.textContent;if(statText.includes('Years Experience')||statText.includes('8+')||statText.includes('5+')||statText.includes('10+')){statEl.textContent=years+'+';}
if(statText.includes('Hours Coded')||statText.includes('15,000+')||statText.includes('1000+')){statEl.textContent=hoursCoded.toLocaleString()+'+';}});var yearsEl=document.getElementById('years-experience');var hoursEl=document.getElementById('hours-coded');if(yearsEl)yearsEl.textContent=years+'+';if(hoursEl)hoursEl.textContent=hoursCoded.toLocaleString()+'+';var textElements=document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span, div');textElements.forEach(function(element){if(element.textContent.includes('{years}')){element.textContent=element.textContent.replace(/{years}/g,years);}});});document.addEventListener('DOMContentLoaded',function(){const designCards=document.querySelectorAll('.design-card');const resetButton=document.getElementById('reset-theme');const previewContainer=document.getElementById('theme-preview');const previewContent=document.querySelector('.theme-preview-content');const themes={'modern-minimal':{name:'Modern Minimal',description:'Clean, spacious design with subtle animations and modern typography.',colors:{primary:'#6c757d',secondary:'#f8f9fa',accent:'#e9ecef'},features:['Clean Typography','Subtle Animations','Minimal Layout']},'bold-vibrant':{name:'Bold & Vibrant',description:'Eye-catching design with bold colors and dynamic elements.',colors:{primary:'#ff6b6b',secondary:'#4ecdc4',accent:'#45b7d1'},features:['Bold Colors','Dynamic Elements','High Contrast']},'elegant-professional':{name:'Elegant Professional',description:'Sophisticated design with premium styling and professional appeal.',colors:{primary:'#2c3e50',secondary:'#34495e',accent:'#95a5a6'},features:['Premium Styling','Professional Appeal','Sophisticated Layout']},'tech-startup':{name:'Tech Startup',description:'Modern tech-focused design with innovative layouts and animations.',colors:{primary:'#3498db',secondary:'#2ecc71',accent:'#f39c12'},features:['Innovative Layout','Tech-focused','Modern Animations']},'creative-agency':{name:'Creative Agency',description:'Artistic design with creative layouts and expressive visual elements.',colors:{primary:'#9b59b6',secondary:'#e74c3c',accent:'#f1c40f'},features:['Creative Layout','Artistic Elements','Expressive Design']},'ecommerce':{name:'E-commerce',description:'Optimized design for online stores with product-focused layouts.',colors:{primary:'#e67e22',secondary:'#27ae60',accent:'#8e44ad'},features:['Product-focused','Shopping Optimized','Conversion-driven']}};function applyTheme(themeName){const theme=themes[themeName];if(!theme)return;const miniWebsite=document.getElementById('mini-website');const previewContainer=document.querySelector('.theme-preview-container');if(!miniWebsite)return;miniWebsite.classList.remove('theme-modern-minimal','theme-bold-vibrant','theme-elegant-professional','theme-tech-startup','theme-creative-agency','theme-ecommerce');miniWebsite.classList.add(`theme-${themeName}`);miniWebsite.style.setProperty('--bs-primary',theme.colors.primary);miniWebsite.style.setProperty('--bs-primary-rgb',hexToRgb(theme.colors.primary));if(previewContainer){previewContainer.setAttribute('data-theme',themeName);}
designCards.forEach(card=>card.classList.remove('active'));const activeCard=document.querySelector(`[data-theme="${themeName}"]`);if(activeCard)activeCard.classList.add('active');previewContainer.classList.add('active');if(previewContainer){const previewTop=previewContainer.offsetTop;window.scrollTo({top:previewTop-100,behavior:'smooth'});}}
function resetTheme(){const miniWebsite=document.getElementById('mini-website');const previewContainer=document.querySelector('.theme-preview-container');if(miniWebsite){miniWebsite.classList.remove('theme-modern-minimal','theme-bold-vibrant','theme-elegant-professional','theme-tech-startup','theme-creative-agency','theme-ecommerce');miniWebsite.style.removeProperty('--bs-primary');miniWebsite.style.removeProperty('--bs-primary-rgb');}
if(previewContainer){previewContainer.removeAttribute('data-theme');}
designCards.forEach(card=>card.classList.remove('active'));previewContainer.classList.remove('active');}
function hexToRgb(hex){const result=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);return result?`${parseInt(result[1],16)},${parseInt(result[2],16)},${parseInt(result[3],16)}`:'0, 0, 0';}
designCards.forEach(card=>{card.addEventListener('click',function(){const themeName=this.getAttribute('data-theme');applyTheme(themeName);});});if(resetButton){resetButton.addEventListener('click',resetTheme);}
const style=document.createElement('style');style.textContent=`.color-swatch{width:30px;height:30px;border-radius:50%;border:2px solid#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);}.preview-mockup{width:200px;height:150px;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.2);margin:0 auto;}.mockup-header{height:30px;}.mockup-content{padding:20px;height:120px;}.mockup-title{height:20px;border-radius:4px;margin-bottom:15px;width:80%;}.mockup-text{height:12px;background:rgba(255,255,255,0.3);border-radius:4px;margin-bottom:8px;width:100%;}.mockup-text:last-child{width:60%;}`;document.head.appendChild(style);});document.addEventListener('DOMContentLoaded',function(){const contactForm=document.querySelector('.contact-form');const submitBtn=document.querySelector('.contact-submit-btn');if(contactForm){contactForm.addEventListener('submit',function(e){e.preventDefault();const formData={firstName:document.getElementById('firstName').value,lastName:document.getElementById('lastName').value,email:document.getElementById('email').value,phone:document.getElementById('phone').value,company:document.getElementById('company').value,service:document.getElementById('service').value,budget:document.getElementById('budget').value,message:document.getElementById('message').value};if(submitBtn){submitBtn.disabled=true;submitBtn.innerHTML='<i class="fas fa-spinner fa-spin me-2"></i>Sending...';}
fetch('/contact',{method:'POST',headers:{'Content-Type':'application/json',},body:JSON.stringify(formData)}).then(response=>response.json()).then(data=>{if(data.success){showNotification(data.message,'success');contactForm.reset();}else{showNotification(data.message,'error');}}).catch(error=>{console.error('Error:',error);showNotification('An error occurred. Please try again.','error');}).finally(()=>{if(submitBtn){submitBtn.disabled=false;submitBtn.innerHTML='<i class="fas fa-paper-plane me-2"></i>Send Message';}});});}});function showNotification(message,type='info'){const existingNotifications=document.querySelectorAll('.notification');existingNotifications.forEach(notification=>notification.remove());const notification=document.createElement('div');notification.className=`notification notification-${type}`;notification.innerHTML=`<div class="notification-content"><i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'} me-2"></i><span>${message}</span><button class="notification-close"onclick="this.parentElement.parentElement.remove()"><i class="fas fa-times"></i></button></div>`;document.body.appendChild(notification);setTimeout(()=>{notification.classList.add('show');},100);if(type!=='error'){setTimeout(()=>{notification.classList.remove('show');setTimeout(()=>{if(notification.parentElement){notification.remove();}},300);},5000);}}