DomFico.github.io/index.html at main · DomFico/DomFico.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to DomFico.github.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            background-color: #333; /* Initial dark background */
            color: white; /* Initial white text */
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .container {
            padding: 20px;
            flex: 1;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #444; /* Slightly lighter background for the footer */
        }
        .color-picker {
            display: flex;
            align-items: center;
        }
        .color-picker label {
            margin-right: 5px;
        }
        .directory, .files {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .directory > li {
            margin-left: 1rem;
            padding-bottom: 10px; /* Add padding between initial folders */
        }
        .directory-name {
            font-weight: bold;
            cursor: pointer;
            font-size: 1.2em; /* Increase font size of the folders */
        }
        .files {
            padding-left: 20px;
        }
        .folder > span, .file > span {
            border-bottom: 1px solid;
            border-left: 1px solid;
            height: 1.5rem;
            width: 2rem;
            display: inline-block;
            margin-bottom: 0.3rem;
            margin-left: 1rem;
        }
        .folder > span {
            border-left: 1px solid transparent;
        }
        .fa-folder, .fa-file {
            margin-right: 5px;
        }
        .file a {
            color: inherit; /* Inherit text color from parent */
            text-decoration: none; /* Remove underline */
        }
        .file a:hover {
            text-decoration: underline; /* Underline on hover for clarity */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>My Work</h1>
        <ul class="directory">
            <li><span></span><i class="fas fa-folder" onclick="toggleFiles('coding-projects-files')"></i> <span class="directory-name">Coding Projects</span>
                <ul class="files" id="coding-projects-files" style="display: none;">
                    <!-- Coding Projects Start -->
                    <li class="file"><span></span><i class="fas fa-file"></i> <a href="Coding Projects/test.txt" target="_blank">test.txt</a></li>
                <!-- Coding Projects End -->
                </ul>
            </li>
            <li><span></span><i class="fas fa-folder" onclick="toggleFiles('research-files')"></i> <span class="directory-name">Research</span>
                <ul class="files" id="research-files" style="display: none;">
                    <!-- Research Start -->
                    <li class="folder">
                        <span></span><i class="fas fa-folder" onclick="toggleFiles('research-posters')"></i> Posters
                        <ul class="files" id="research-posters" style="display: none;">
                            <!-- research-posters Start -->
                                                <li class="file"><span></span><i class="fas fa-file"></i> <a href="Research/Posters/Conference_Poster_0(1).pptx" target="_blank">Conference_Poster_0(1).pptx</a></li>
                            <!-- research-posters End -->
                        </ul>
                    </li>
                    <li class="folder">
                        <span></span><i class="fas fa-folder" onclick="toggleFiles('research-trajectory-analysis-scripts')"></i> Trajectory Analysis Scripts
                        <ul class="files" id="research-trajectory-analysis-scripts" style="display: none;">
                            <!-- research-trajectory-analysis-scripts Start -->
                                                <li class="file"><span></span><i class="fas fa-file"></i> <a href="Research/Trajectory Analysis Scripts/find_frame.py" target="_blank">find_frame.py</a></li>
                    <li class="file"><span></span><i class="fas fa-file"></i> <a href="Research/Trajectory Analysis Scripts/get_protonation_states_of_frame.py" target="_blank">get_protonation_states_of_frame.py</a></li>
                            <!-- research-trajectory-analysis-scripts End -->
                        </ul>
                    </li>
                <!-- Research End -->
                </ul>
            </li>
        </ul>
    </div>
    <div class="footer">
        <div class="color-picker">
            <label for="background-color">Background Color:</label>
            <input type="color" id="background-color" name="background-color" value="#333">
            <label for="text-color">Text Color:</label>
            <input type="color" id="text-color" name="text-color" value="#ffffff">
        </div>
        <div style="display: flex; align-items: center;">
            Created by Dominic Fico
        </div>
    </div>
    <script>
        // JavaScript to handle color changes
        document.getElementById('background-color').addEventListener('input', function(event) {
            document.body.style.backgroundColor = event.target.value;
        });

        document.getElementById('text-color').addEventListener('input', function(event) {
            document.body.style.color = event.target.value;
            const links = document.querySelectorAll('.file a');
            links.forEach(link => {
                link.style.color = event.target.value;
            });
        });

        function toggleFiles(folderId) {
            const filesDiv = document.getElementById(folderId);
            // Toggle the display state of file list
            if (filesDiv.style.display === 'none' || filesDiv.style.display === '') {
                filesDiv.style.display = 'block';
            } else {
                filesDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>