-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_mobile.html
139 lines (127 loc) · 9.39 KB
/
index_mobile.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Homepage of Subhransu Sekhar Bhattacharjee, PhD Student at the Australian National University.">
<meta name="keywords" content="Subhransu Sekhar Bhattacharjee, PhD Student, Australian National University, Intelligent Systems Cluster, Research, Publications">
<meta name="author" content="Subhransu S. Bhattacharjee">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Subhransu Sekhar Bhattacharjee - Mobile">
<meta property="og:description" content="Homepage of Subhransu Sekhar Bhattacharjee, PhD Student at the Australian National University.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://1ssb.github.io/">
<meta property="og:image" content="https://1ssb.github.io/favicon.ico?v=2">
<title>Subhransu Sekhar Bhattacharjee - Mobile</title>
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></noscript>
<link rel="icon" type="image/x-icon" href="https://1ssb.github.io/favicon.ico?v=2">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" media="print" onload="this.media='all'" onerror="this.onload=null; this.remove();">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/1.9.1/css/academicons.min.css">
<!-- Minified CSS -->
<style>:root{--light-bg:url('BGs/light.jpg') no-repeat center center / cover;--light-color:#333;--dark-bg:url('BGs/dark.jpg') no-repeat center center / cover;--dark-color:#fff;--primary-color:#007bff;--hover-color:#FFD700;--border-radius:5px;--transition:0.3s}html,body{width:100%;margin:0;padding:0;overflow-x:hidden;font-family:'Lato',sans-serif;background:var(--light-bg);color:var(--light-color);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;transition:background-color var(--transition),color var(--transition)}.wrapper{width:100%;max-width:100%;margin:0 auto;padding:20px;box-sizing:border-box}header{padding:5px}header h1{font-size:24px;margin-bottom:10px}header h3{font-size:18px;margin-bottom:5px}header h3 a{color:inherit;text-decoration:underline}.update-container{display:none;padding:10px;margin:10px 0;border-radius:var(--border-radius);border:1px solid var(--light-color);background:rgba(255,255,255,0.5);width:60%;margin:10px auto;text-align:left}.update-container h2{margin-top:0}.update-container p{margin:0;font-size:16px}.update-container a{color:var(--light-color);text-decoration:underline}.update-container h2{text-align:center}.separator{width:60%;height:2px;background:var(--light-color);margin:10px auto}.icons{margin:20px 0;display:flex;justify-content:center;gap:20px}.icons a{text-decoration:none;color:var(--light-color);font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:color var(--transition)}.icons a:hover{color:var(--primary-color)}.dark-mode .icons a:hover{color:var(--hover-color)}nav ul{list-style-type:none;padding:0;margin:20px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}nav ul li{flex:1 1 calc(50% - 20px);max-width:200px;box-sizing:border-box}nav ul li a{text-decoration:none;color:var(--light-color);padding:10px 20px;border-radius:var(--border-radius);border:1px solid var(--light-color);display:block;transition:background var(--transition),color var(--transition);font-size:18px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nav ul li a:hover{background:var(--light-color);color:var(--dark-color)}footer{margin-top:20px;font-size:12px;padding:10px}.theme-toggle{position:fixed;top:10px;right:10px;cursor:pointer;font-size:30px;color:var(--light-color);transition:color var(--transition)}.dark-mode{background:var(--dark-bg);color:var(--dark-color)}.dark-mode .theme-toggle{color:var(--dark-color)}.dark-mode .update-container{border:1px solid var(--dark-color);color:var(--dark-color)}.dark-mode .update-container a{color:var(--dark-color);text-decoration:underline}.dark-mode .separator{background:var(--dark-color)}.dark-mode a{color:var(--dark-color)}.dark-mode .icons a{color:var(--dark-color)}.dark-mode nav ul li a{border:1px solid var(--dark-color)}.dark-mode nav ul li a:hover{background:var(--dark-color);color:var(--light-color)}.dark-mode header h3 a{color:var(--dark-color);text-decoration:underline}</style>
</head>
<body>
<div class="wrapper">
<br>
<header>
<h1>Subhransu S. Bhattacharjee</h1>
<h3>Ph.D. Student @ ANU</h3>
</header>
<div class="update-container" id="updateBox">
<h2>UPDATES</h2>
<p>Loading content...</p>
</div>
<div class="separator" id="separator"></div>
<div class="icons">
<a href="./Resume.pdf" title="Curriculum Vitae" class="ai ai-cv"></a>
<a href="https://github.com/1ssb" title="GitHub" target="_blank" class="fab fa-github"></a>
<a href="https://www.linkedin.com/in/1ssb/" target="_blank" title="LinkedIn" class="fab fa-linkedin-in"></a>
<a href="https://scholar.google.com.au/citations?hl=en&pli=1&user=Ngk4emsAAAAJ" title="Publications" target="_blank" class="ai ai-google-scholar"></a>
</div>
<nav>
<ul>
<li><a href="https://1ssb.github.io/bio/">ABOUT ME</a></li>
<li><a href="https://1ssb.github.io/exp/">EXPERIENCES</a></li>
<li><a href="https://1ssb.github.io/contact/">CONTACT</a></li>
</ul>
</nav>
<footer>
<p>© S. S. Bhattacharjee | Last Updated: <span id="lastUpdated"></span></p>
</footer>
</div>
<div class="theme-toggle" id="toggleTheme">
<i class="fas fa-moon"></i>
</div>
<script type="module">
import { SHOW_UPDATE_BOX } from './constants.js';
// Function to control the visibility of updates
function showUpdates() {
const updateBox = document.getElementById('updateBox');
const separator = document.getElementById('separator');
if (SHOW_UPDATE_BOX) {
updateBox.style.display = 'block';
separator.style.display = 'none';
} else {
updateBox.style.display = 'none';
separator.style.display = 'block';
}
}
// Function to fetch and insert content from the external file
async function loadUpdateContent() {
try {
const response = await fetch('update-box.html');
const text = await response.text();
// Insert the fetched text into the update-box div
document.getElementById('updateBox').innerHTML = text;
} catch (error) {
console.error('Error loading update content:', error);
}
}
document.addEventListener('DOMContentLoaded', function() {
// Update the last modified date
var lastMod = new Date(document.lastModified);
// Get the month name and truncate it to the first 4 letters
var options = { year: 'numeric', month: 'long' };
var formattedDate = lastMod.toLocaleDateString('en-US', options);
var month = lastMod.toLocaleString('en-US', { month: 'long' }).slice(0, 3);
// Replace the full month name with the truncated version
document.getElementById('lastUpdated').textContent = month + ' ' + lastMod.getFullYear();
const toggleThemeButton = document.getElementById('toggleTheme');
const themeIcon = toggleThemeButton.querySelector('i');
// Check local storage for theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.classList.toggle('dark-mode', savedTheme === 'dark');
if (savedTheme === 'dark') {
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
}
// Toggle theme and save preference to local storage
toggleThemeButton.addEventListener('click', function() {
const isDarkMode = document.body.classList.toggle('dark-mode');
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
if (isDarkMode) {
themeIcon.classList.remove('fa-moon');
themeIcon.classList.add('fa-sun');
} else {
themeIcon.classList.remove('fa-sun');
themeIcon.classList.add('fa-moon');
}
});
// Display updates if applicable
showUpdates();
// Load the content once the DOM is fully loaded
loadUpdateContent();
});
</script>
</body>
</html>