-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
233 lines (205 loc) · 9.22 KB
/
index.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
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
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" as="style" type="text/css" crossorigin>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#157878">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/page-header.css">
<style>
body {
margin: 0;
padding: 0;
}
.main-content {
width: 100%;
}
.page-header {
width: 100%;
margin: 0;
padding: 20px; /* Add padding if needed */
background-color: #1A1A1A; /* Set a background color if needed */
color: #fff; /* Set the text color to white or your preferred color */
text-align: center; /* Center the text horizontally */
background-image: url('/assets/graphics/toolfig.png');
background-position: center;
background-size: contain; /* You can adjust this property */
background-repeat: no-repeat;
}
.page-header .project-name {
color: #ffffff;
}
.page-header .project-tagline {
color: #ffffff;
}
.block {
text-align: center;
color: #fff; /* Set text color */
text-decoration: none; /* Remove underlines from links */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%; /* Set width to 100% */
margin-top: 5%;
padding-bottom: 0%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
}
.block h1 {
text-align: center; /* Center the text horizontally */
color: #fff;
z-index: 2;
}
.block a {
text-decoration: none; /* Remove underlines from links */
color: inherit; /* Inherit text color from the parent */
z-index: 2;
}
.block a:hover {
/* text-decoration: none; Add underline on hover */
color: #d3d3d3; /* Change color on hover */
cursor: pointer;
}
#block1 {
background-image: url('/assets/graphics/thermopack.png');
}
#block2 {
background-image: url('/assets/graphics/kingas.png');
}
#block3 {
background-image: url('/assets/graphics/surfpack.png');
}
.block-description {
display: none; /* Hidden by default */
}
.block.expanded .block-description{
display: block;
z-index: 2;
}
.block.expanded {
position: relative; /* Set position to relative for absolute positioning of the overlay */
}
.block .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent grey background */
display: none; /* Hide the overlay by default */
z-index: 0; /* Place the overlay above other content */
border-radius: 15px;
}
.block.expanded .overlay {
display: block; /* Show the overlay when the block is expanded */
}
.button-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
gap: 10px; /* Adjust this value for spacing between buttons */
z-index: 2;
}
.button-container button {
font-size: 1.5rem; /* Adjust this value to make the text larger */
background-color: rgba(51, 51, 51, 0.0); /* Customize the button background color */
color: #fff; /* Customize the text color */
border: none; /* Remove the default button border */
padding: 10px 20px; /* Add padding to adjust button size */
cursor: pointer; /* Add pointer cursor for interactivity */
/* margin-right: 10px; Add margin between buttons */
margin-bottom: 10px;
}
.button-container button:hover {
color: #d3d3d3; /* Customize the text color */
}
.text-container {
background-color: rgba(51, 51, 51, 0.5); /* Add an opaque background */
padding: 5px; /* Add padding to create space between text and background */
border-radius: 5px; /* Add border radius for rounded corners */
margin-top: 0px; /* Add margin to separate it from the header */
margin-bottom: 10px;
display: flex; /* Use flex display */
justify-content: center; /* Horizontally center the content */
text-align: center;
}
</style>
<script>
// JavaScript to toggle the expanded class on button click
function toggleBlock(blockId) {
const block = document.getElementById(blockId);
block.classList.toggle('expanded');
}
</script>
</head>
<body>
<header class="page-header" role="banner">
<h1 class="project-name">ThermoTools</h1>
<h2 class="project-tagline">Free, Open Source Thermodynamic and Transport property Software</h2>
</header>
<main id="content" class="main-content" role="main">
<div class="block" id="block1">
<div class="overlay"></div>
<a href="https://thermotools.github.io/thermopack/">
<h1 style="font-size: 3rem;" id="thermopack"> ThermoPack</h1>
</a>
<div class="button-container"><button onclick="toggleBlock('block1')">About</button> </div>
<div class="block-description">
ThermoPack is a thermodynamic library for mulitcomponent, multi-phase thermodynamics developed at SINTEF Energy
Research and NTNU Department of Chemistry. The Software implements a generic, user-friendly interface to a large
selection of equations of state. Most of these equations of state have been developed by other research groups
around the world, but some of them have been developed by us. Thermopack has for years been a much-appreciated
powerhouse, now forming the core of ThermoTools.
</div>
<div class="button-container">
<a href="https://thermotools.github.io/thermopack/"> <button>Home</button> </a>
<a href="https://github.com/thermotools/thermopack"> <button>GitHub</button> </a>
<a href="https://pypi.org/project/thermopack/"> <button>PyPI</button> </a>
</div>
</div>
<div class="block" id="block2">
<div class="overlay"></div>
<a href="https://thermotools.github.io/KineticGas/">
<h1 style="font-size: 3rem;" id="kineticgas">KineticGas</h1>
</a>
<div class="button-container"><button onclick="toggleBlock('block2')">About</button></div>
<div class="block-description">
KineticGas is an implementation of Revised Enskog Theory (RET) for spherical potentials, the most notable of which
is RET-Mie, Revised Enskog Theory for Mie fluids, which can be used to reliably predict transport coefficients
such as viscosities, diffusion coefficients, thermal diffusion coefficients and thermal conductivities up to
the critical density for a variety of pure gases, mixtures and supercritical fluids.
</div>
<div class="button-container">
<a href="https://thermotools.github.io/KineticGas/"> <button>Home</button> </a>
<a href="https://github.com/thermotools/kineticgas"> <button>GitHub</button> </a>
<a href="https://pypi.org/project/pykingas/"> <button>PyPI</button> </a>
</div>
</div>
<div class="block" id="block3">
<div class="overlay"></div>
<a href="https://thermotools.github.io/SurfPack/">
<h1 style="font-size: 3rem;" id="surfpack">SurfPack</h1>
</a>
<div class="button-container"><button onclick="toggleBlock('block3')">About</button></div>
<div class="block-description">
SurfPack is a library for computation of interfacial properties of fluids, and the properties of fluids at
interfaces and in confined systems. The library includes an interface to Classical Density Functional theory,
with implementations of several SAFT-based functionals.
Being the newest addition to ThermoTools, SurfPack is still under active development, and new features can
be expected to be released relatively rapidly.
</div>
<div class="button-container">
<a href="https://thermotools.github.io/SurfPack/"> <button>Home</button> </a>
<a href="https://github.com/thermotools/SurfPack"> <button>GitHub</button> </a>
<a href="https://pypi.org/project/surfpack/"> <button>PyPI</button> </a>
</div>
</div>
</main>
</body>
</html>