wynfirdolf.github.io/index.html at main · wynfirdolf/wynfirdolf.github.io · 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
<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="index.css">
  <title>Wynfirdolf's Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
  <div class="content">
    <div class="button-container">
      <button id="color-scheme-button" class="dark-mode">Switch to Dark Mode</button>
      <a href="credits.html">
        <button id="Menu" class="menu-button">About Me</button>
      </a>
    </div>
    <main>
      <h1>Welcome to Wynfirdolf's Website</h1>
      <p>This is where you can learn about Wynfirdolf and the purpose of this site.</p>

      <section>
        <h2>Who is Wynfirdolf</h2>
        <p>Wynfirdolf is a literature student that's learning about web design. </p>
      </section>

      <section>
        <h2>The Purpose of This Site</h2>
       <p>The purpose of this site is for me to learn about HTML, CSS and JavaScript.</p>
      </section>
    </main>
    <p id="device-info" class="device-info-text"> </p>
    <p id="time-info" class="user-time"></p>
    <p id="timezone-info" class="time-zone" ></p>
    <button id="time-format-button" class="time-switch-button">Switch to 24-hour format</button>
    <input type="range" min="0" max="255" value="128" class="slider" id="bg-slider">
    <div class="scrolling-text-box">
    <p class="scrolling-text">This is some scrolling text!</p>
      </div>
      <footer>
        <p>© Made in 2023 by Wynfirdolf.</p>
        <div class="social-media">
          <a href="https://instagram.com/benyigitd" target="_blank">
            <i class="fa-brands fa-instagram social-icon"></i>
          </a>
          <a href="https://linkedin.com/in/benyigitd" target="_blank">
            <i class="fa-brands fa-linkedin social-icon"></i>
          </a>
          <a href="https://steamcommunity.com/id/benyigitd" target="_blank">
            <i class="fa-brands fa-steam-symbol social-icon"></i>
          </a>
        </div>
      </footer>
</body>
<script src="https://kit.fontawesome.com/67e13a64e8.js" crossorigin="anonymous">
</script>
<script>
var deviceInfo = document.getElementById('device-info');
var timeInfo = document.getElementById('time-info'); // Assuming you have an element with id 'time-info' to display the time
var userAgent = navigator.userAgent;
var customText = "You are visiting my site from ";

if (navigator.userAgent.match(/Android/i)) {
    deviceInfo.textContent = customText + "an Android device ";
} else if (navigator.userAgent.match(/webOS/i)) {
    deviceInfo.textContent = customText + "a webOS device";
} else if (navigator.userAgent.match(/iPhone/i)) {
    deviceInfo.textContent = customText + "an iPhone";
} else if (navigator.userAgent.match(/iPad/i)) {
    deviceInfo.textContent = customText + "an iPad";
} else if (navigator.userAgent.match(/iPod/i)) {
    deviceInfo.textContent = customText + "an iPod";
} else if (navigator.userAgent.match(/BlackBerry/i)) {
    deviceInfo.textContent = customText + "a BlackBerry";
} else if (navigator.userAgent.match(/Windows Phone/i)) {
    deviceInfo.textContent = customText + "an Windows Phone";
} else {
    // If device cannot be detected, display the browser information
    if (userAgent.indexOf("Chrome") > -1) {
        deviceInfo.textContent = customText + "Google Chrome";
    } else if (userAgent.indexOf("Safari") > -1) {
        deviceInfo.textContent = customText + "Apple Safari";
    } else if (userAgent.indexOf("Firefox") > -1) {
        deviceInfo.textContent = customText + "Mozilla Firefox";
    } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident") > -1) {
        deviceInfo.textContent = customText + "Microsoft Internet Explorer";
    } else {
        deviceInfo.textContent = customText + "Unknown browser";
    }
}
// Get user's local time
var timeFormat = '12h'; // Default time format
var timeZoneInfo = document.getElementById('timezone-info');


function updateTime() {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    var amOrPm = '';
    if (timeFormat === '12h') {
        amOrPm = hours >= 12 ? ' PM' : ' AM';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
    }
    minutes = minutes < 10 ? '0'+minutes : minutes;
    seconds = seconds < 10 ? '0'+seconds : seconds;

    var strTime = hours + ':' + minutes + ':' + seconds + amOrPm;
    var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    timeInfo.textContent = "Your local time is " + strTime;
    timeZoneInfo.textContent = "Your timezone is " + timeZone;
}

// Update the time immediately, then every second
updateTime();
setInterval(updateTime, 1000);

// Add event listener to the button to switch time format
document.getElementById('time-format-button').addEventListener('click', function() {
    if (timeFormat === '12h') {
        timeFormat = '24h';
        this.textContent = 'Switch to 12-hour format';
    } else {
        timeFormat = '12h';
        this.textContent = 'Switch to 24-hour format';
    }
    updateTime(); // Update the time immediately when the format is changed
});
var isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var deviceInfo = document.getElementById('device-info');
var timeInfo = document.getElementById('time-info');
var socialIcons = document.getElementsByClassName('social-icon');

function updateColorScheme() {
    var textColor = isDarkMode ? "#ffffff" : "#000000";
    document.body.style.backgroundColor = isDarkMode ? "#333333" : "#ffffff";
    document.body.style.color = textColor;
    deviceInfo.style.color = textColor;
    timeInfo.style.color = textColor;
    for (var i = 0; i < socialIcons.length; i++) {
        socialIcons[i].style.color = textColor;
    }
}

// Update the color scheme immediately
updateColorScheme();

// Add event listener to the button to switch color scheme
document.getElementById('color-scheme-button').addEventListener('click', function() {
    isDarkMode = !isDarkMode; // Toggle the color scheme
    updateColorScheme(); // Update the color scheme immediately when it is changed
    this.textContent = isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode';
});
var slider = document.getElementById('bg-slider');
var scrollingText = document.querySelector('.scrolling-text');
slider.max = 360; // Set the maximum value of the slider to 360
slider.addEventListener('input', function() {
    var hue = this.value;
    var color = 'hsl(' + hue + ', 100%, 50%)';
    scrollingText.style.color = color;
});
window.onblur = function() {
  console.log('User has left or unfocused the window.');
  document.title = 'Bored Already?';
};
window.onfocus = function() {
  console.log('User has returned to the window.');
  document.title = 'Wynfirdolf\'s Website';
};
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("Latitude: " + position.coords.latitude);
    console.log("Longitude: " + position.coords.longitude);
  }, function(error) {
    console.log("Error occurred. Error code: " + error.code);
    // error.code can be:
    // 0: unknown error
    // 1: permission denied
    // 2: position unavailable (error response from location provider)
    // 3: timed out
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}
</script>
</html>