ResponsiveWebApp/main.js at main · Allistair-create/ResponsiveWebApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// Service/Product Flipcards Data
const servicesData = [
    {
        title: 'Web Development',
        icon: 'fa-code',
        description: 'Custom web solutions for your business',
        link: '#'
    },
    {
        title: 'Mobile Apps',
        icon: 'fa-mobile-alt',
        description: 'Native and cross-platform mobile applications',
        link: '#'
    },
    {
        title: 'UI/UX Design',
        icon: 'fa-paint-brush',
        description: 'User-centered design solutions',
        link: '#'
    },
    {
        title: 'Cloud Services',
        icon: 'fa-cloud',
        description: 'Scalable cloud infrastructure',
        link: '#'
    },
    {
        title: 'SEO Optimization',
        icon: 'fa-search',
        description: 'Improve your online visibility',
        link: '#'
    },
    {
        title: 'Content Marketing',
        icon: 'fa-pen',
        description: 'Engaging content strategy',
        link: '#'
    },
    {
        title: 'Data Analytics',
        icon: 'fa-chart-bar',
        description: 'Data-driven insights',
        link: '#'
    },
    {
        title: 'Cybersecurity',
        icon: 'fa-shield-alt',
        description: 'Protect your digital assets',
        link: '#'
    },
    {
        title: 'AI Solutions',
        icon: 'fa-brain',
        description: 'Artificial Intelligence integration',
        link: '#'
    },
    {
        title: 'Consulting',
        icon: 'fa-comments',
        description: 'Expert technical consulting',
        link: '#'
    }
];

// Create Flipcards
function createFlipcards() {
    const servicesGrid = document.querySelector('.services-grid');
    servicesGrid.innerHTML = '';

    servicesData.forEach(service => {
        const flipcard = `
            <div class="flipcard">
                <div class="flipcard-inner">
                    <div class="flipcard-front">
                        <h3>${service.title}</h3>
                        <i class="fas ${service.icon} fa-3x"></i>
                    </div>
                    <div class="flipcard-back">
                        <h3>${service.title}</h3>
                        <p>${service.description}</p>
                        <a href="${service.link}" class="cta-button">Learn More</a>
                    </div>
                </div>
            </div>
        `;
        servicesGrid.innerHTML += flipcard;
    });
}

// Initialize tooltips
function initTooltips() {
    const tooltipElements = document.querySelectorAll('[title]');
    tooltipElements.forEach(element => {
        element.addEventListener('mouseenter', showTooltip);
        element.addEventListener('mouseleave', hideTooltip);
    });
}

// Show tooltip
function showTooltip(event) {
    const tooltip = document.createElement('div');
    tooltip.className = 'tooltip';
    tooltip.textContent = event.target.getAttribute('title');
    document.body.appendChild(tooltip);

    const rect = event.target.getBoundingClientRect();
    tooltip.style.top = rect.bottom + 5 + 'px';
    tooltip.style.left = rect.left + (rect.width - tooltip.offsetWidth) / 2 + 'px';
}

// Hide tooltip
function hideTooltip() {
    const tooltip = document.querySelector('.tooltip');
    if (tooltip) {
        tooltip.remove();
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    createFlipcards();
    initTooltips();
});