git-final/index.html at main · harshisrai/git-final · 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechSummit 2025 - Shaping Tomorrow with Innovation Today</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Poppins:wght@600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <!-- <link rel="stylesheet" type="text/css" href="css/styles.css">  -->
</head>
<body>
    <header>
        <nav>
            <div class="logo">
                <img src="logo.svg" alt="TechSummit 2025 Logo">
            </div>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#domains">Domains</a></li>
                <li><a href="#speakers">Speakers</a></li>
                <li><a href="#schedule">Schedule</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="hero">
            <div id="main-container" style="opacity: 1;">
                <div id="start-screen">
                  <div id="cta-container">
                    <div id="start-button-container">
                      <button id="start-button" style="display: hidden;">Here</button>
                    </div>
                  </div>
                </div>
                <div id="hud">
                  <div id="mute-button" class="hud-button" style="display:none;"></div>
                  <div id="vr-button" class="hud-button" style="display:none;"></div>
                </div>
                <div id="hud-tooltip">Lorem Ipsum</div>
                <div>
                <h1>TechSummit 2025</h1>
                <p>Shaping Tomorrow with Innovation Today</p>
                </div>
                <div class="hero-background"><canvas id="backgroundCanvas"></canvas></div>
              </div>
        </section>

        <section id="domains">
            <h2>Explore Our Domains</h2>
            <div class="domain-cards">
                <div class="domain-card" data-domain="ai">
                    <h3>Artificial Intelligence</h3>
                    <div class="domain-visual"></div>
                </div>
                <div class="domain-card" data-domain="robotics">
                    <h3>Robotics</h3>
                    <div class="domain-visual"></div>
                </div>
                <div class="domain-card" data-domain="quant">
                    <h3>Quantitative Analysis</h3>
                    <div class="domain-visual"></div>
                </div>
                <div class="domain-card" data-domain="coding">
                    <h3>Advanced Coding</h3>
                    <div class="domain-visual"></div>
                </div>
            </div>
        </section>

        <section id="speakers">
            <h2>Featured Speakers</h2>
            <div class="speaker-grid">
                <div class="speaker-card">
                    <img src="speaker1.jpg" alt="Dr. Jane Smith">
                    <h3>Dr. Jane Smith</h3>
                    <p>AI Research Lead, TechCorp</p>
                </div>
                <div class="speaker-card">
                    <img src="speaker2.jpg" alt="Prof. John Doe">
                    <h3>Prof. John Doe</h3>
                    <p>Robotics Pioneer, RoboTech Institute</p>
                </div>
                <div class="speaker-card">
                    <img src="speaker3.jpg" alt="Dr. Emily Chen">
                    <h3>Dr. Emily Chen</h3>
                    <p>Quantum Computing Expert, QuantumLab</p>
                </div>
                <div class="speaker-card">
                    <img src="speaker4.jpg" alt="Mr. Alex Johnson">
                    <h3>Mr. Alex Johnson</h3>
                    <p>Senior Software Architect, CodeMasters Inc.</p>
                </div>
            </div>
        </section>

        <section id="schedule">
            <h2>Event Schedule</h2>
            <div class="schedule-timeline">
                <div class="timeline-item" data-domain="ai">
                    <span class="time">09:00 AM</span>
                    <h3>Opening Keynote: The Future of AI</h3>
                    <p>Dr. Jane Smith | Main Hall</p>
                </div>
                <div class="timeline-item" data-domain="robotics">
                    <span class="time">11:00 AM</span>
                    <h3>Robotics in Healthcare</h3>
                    <p>Prof. John Doe | Room A</p>
                </div>
                <div class="timeline-item" data-domain="quant">
                    <span class="time">02:00 PM</span>
                    <h3>Quantum Computing: A New Era</h3>
                    <p>Dr. Emily Chen | Room B</p>
                </div>
                <div class="timeline-item" data-domain="coding">
                    <span class="time">04:00 PM</span>
                    <h3>Advanced Coding Techniques Workshop</h3>
                    <p>Mr. Alex Johnson | Coding Lab</p>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <div class="contact-info">
                <h3>Contact Us</h3>
                <p>Email: info@techsummit2025.com</p>
                <p>Phone: +1 (555) 123-4567</p>
            </div>
            <div class="social-links">
                <a href="#" class="social-icon" aria-label="Facebook">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                </a>
                <a href="#" class="social-icon" aria-label="Twitter">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
                </a>
                <a href="#" class="social-icon" aria-label="LinkedIn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
                </a>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2025 TechSummit. All rights reserved.</p>
        </div>
    </footer>

    <audio id="audio" src="audio/implant-128kbps.mp3" loop></audio>
    <button id="muteButton" class="mute-btn" onclick="toggleMute()">🔊</button>
    <script>
   // Get the audio element
const audio = document.getElementById('audio');

// Flag to track if the audio has started
let audioStarted = false;

// Function to start the audio
function startAudio() {
  if (!audioStarted) {
    audio.play()
      .then(() => {
        console.log('Audio started successfully!');
        audioStarted = true; // Set the flag to true
      })
      .catch((error) => {
        console.error('Error playing audio:', error);
      });
  }
}

// Add event listeners for different types of interactions

// For touch devices (smartphones)
document.addEventListener('touchstart', startAudio, { once: true });

// For non-touch devices (laptops/desktops)
document.addEventListener('mouseover', startAudio, { once: true });
document.addEventListener('click', startAudio, { once: true });

// Optional: Add keyboard interaction for accessibility
document.addEventListener('keydown', startAudio, { once: true });

// Function to handle page visibility change
function handleVisibilityChange() {
  if (document.hidden) {
    audio.pause(); // Pause audio when the page is hidden
    console.log("Audio paused due to page visibility change.");
  } else {
    if (audioStarted && audio.paused) {
      audio.play(); // Resume audio when the page becomes visible
      console.log("Audio resumed due to page visibility change.");
    }
  }
}

// Set up event listener for visibility change
if (document.addEventListener) {
  document.addEventListener('visibilitychange', handleVisibilityChange, false);
}

console.log("Event listeners set up for audio and page visibility.");

function toggleMute() {
    const audioPlayer = document.getElementById('audio');
    const muteButton = document.getElementById('muteButton');

    if (audioPlayer.muted) {
        // Unmute the audio and update the button icon
        audioPlayer.muted = false;
        muteButton.textContent = '🔊'; // Unmute icon
    } else {
        // Mute the audio and update the button icon
        audioPlayer.muted = true;
        muteButton.textContent = '🔇'; // Mute icon
    }
}
    </script>
    <script src="js/sample.js"></script>
    <script src="script.js"></script>
</body>
</html>