Hugging Face's logo

Spaces:
enzostvs
/
deepsite
Running

App Files Community
300
deepsite
File size: 4,938 Bytes 
afa9e42
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
---
import '../styles/global.css';

export interface Props {
  title: string;
  description?: string;
  lang?: string;
}

const { title, description = "Blueprint Engineering Consultancy - Professional engineering services in Ras Al Khaimah", lang = "ar" } = Astro.props;

const isRtl = lang === 'ar' || lang === 'ur' || lang === 'ps';
---

<!DOCTYPE html>
<html lang={lang} dir={isRtl ? 'rtl' : 'ltr'} class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <meta name="generator" content={Astro.generator} />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content={Astro.url} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content="/og-image.jpg" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content={Astro.url} />
    <meta property="twitter:title" content={title} />
    <meta property="twitter:description" content={description} />
    <meta property="twitter:image" content="/og-image.jpg" />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    
    <!-- AOS CSS -->
    <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
    
    <title>{title}</title>
  </head>
  <body class="bg-white dark:bg-blueprint-primary text-blueprint-dark dark:text-white">
    <!-- Loading Screen -->
    <div class="loading-overlay" id="loading">
      <div class="blueprint-logo-loading">
        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
          <rect x="10" y="10" width="80" height="60" stroke-width="3" fill="none"/>
          <rect x="20" y="20" width="25" height="20" stroke-width="2" fill="none"/>
          <rect x="55" y="20" width="25" height="20" stroke-width="2" fill="none"/>
          <rect x="20" y="45" width="60" height="15" stroke-width="2" fill="none"/>
          <circle cx="25" cy="85" r="3"/>
          <circle cx="50" cy="85" r="3"/>
          <circle cx="75" cy="85" r="3"/>
        </svg>
      </div>
    </div>

    <slot />
    
    <!-- AOS JavaScript -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js" is:inline></script>
    
    <script is:inline>
      // Initialize AOS
      AOS.init({
        duration: 800,
        easing: 'ease-out-cubic',
        once: true,
        offset: 50
      });

      // Loading screen
      window.addEventListener('load', () => {
        const loading = document.getElementById('loading');
        if (loading) {
          setTimeout(() => {
            loading.classList.add('fade-out');
            setTimeout(() => {
              loading.style.display = 'none';
            }, 500);
          }, 1500);
        }
      });

      // Smooth scrolling for anchor links
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          const target = document.querySelector(this.getAttribute('href'));
          if (target) {
            target.scrollIntoView({
              behavior: 'smooth',
              block: 'start'
            });
          }
        });
      });

      // Auto-detect browser language and redirect if needed
      function detectAndRedirectLanguage() {
        const currentPath = window.location.pathname;
        const supportedLangs = ['ar', 'en', 'zh', 'ja', 'ru', 'hi', 'ur', 'bn', 'ml', 'fr', 'fil', 'es', 'ta', 'ne', 'ps', 'si', 'id', 'te'];
        const browserLang = navigator.language.split('-')[0];
        
        // Check if we're on the root path and browser language is supported but not Arabic
        if (currentPath === '/' && supportedLangs.includes(browserLang) && browserLang !== 'ar') {
          // Don't redirect automatically, let user choose
          return;
        }
      }

      // Run language detection
      detectAndRedirectLanguage();

      // Add scroll-based header effects
      let lastScrollY = window.scrollY;
      const header = document.querySelector('header');
      
      window.addEventListener('scroll', () => {
        const currentScrollY = window.scrollY;
        
        if (header) {
          if (currentScrollY > 100) {
            header.classList.add('bg-blueprint-primary/95');
          } else {
            header.classList.remove('bg-blueprint-primary/95');
          }
        }
        
        lastScrollY = currentScrollY;
      });
    </script>
  </body>
</html>