-
Notifications
You must be signed in to change notification settings - Fork 6
/
how_to_cite.html
144 lines (131 loc) · 6.67 KB
/
how_to_cite.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
<!-- Import 3Dmol, jQuery, and Bootstrap libaries -->
<!DOCTYPE html>
<html>
<head>
<script src="libraries/3Dmol-min.js">
</script>
<script src="libraries/jquery-3.4.1.min.js">
</script>
<script src="libraries/bootstrap.min.js">
</script>
<script src="libraries/3Dmol-min.js">
</script><!-- Import CSS -->
<link href="libraries/bootstrap.min.css" rel="stylesheet">
<link href="libraries/bootstrap_custom.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- This last css file gives the download button for the citation (the one with the arrow). -->
<!-- Set up styles -->
<!-- Custom CSS code is placed within the <style> tag: -->
<style>
.my-pre{
font-size: 16px;
border: 2px solid grey;
width: 100%;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
/* Fixed line height */
line-height: 24px;
/* Use linear-gradient for background image */
background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
/* Size background so that the height is 2x line-height */
background-size: 100% 48px;
/* Offset the background along the y-axis by top padding */
background-position: 0 14px;
}
.dropdown-item {
font-size: 18px;
}
body {
/* The font to be used everywhere */
font-family: Arial, Helvetica, sans-serif;
color: black;
font-size: 16px;
}
</style><!-- Empty head section: place meta tags and favicon here -->
<title>MOFSimplify</title>
</head>
<body>
<!-- The following code creates a navbar. Each navbar item is in a list entry of class "nav-item". -->
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="../" style='font-size: 30px; padding-right: 30px;'>MOFSimplify</a> <button aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarResponsive" data-toggle="collapse" type='button'><span class="navbar-toggler-icon"><!-- Toggle navbar --></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive" style='font-size: 20px;'>
<ul class="navbar-nav">
<li class="nav-item dropdown" style='padding-right: 30px;'>
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdownMenuLink" role="button">Property prediction</a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="../">Solvent/Thermal</a>
<a class="dropdown-item" href="water_stability_prediction.html">Water/Acid</a>
<a class="dropdown-item" href="C2_uptake_prediction.html">C2 uptake</a>
</div>
</li>
<li class="nav-item" style='padding-right: 30px;'>
<a class="nav-link" href="stable_MOFs.html">Stable MOFs</a>
</li>
<li class="nav-item" style='padding-right: 30px;'>
<a class="nav-link" href="how_to_cite.html">How to Cite</a>
</li>
<li class="nav-item dropdown" style='padding-right: 30px;'>
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdownMenuLink">Code</a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="https://github.com/hjkgrp/MOFSimplify">Source Code</a> <a class="dropdown-item" href="https://github.com/hjkgrp/molSimplify/tree/master/molSimplify/Informatics/MOF">MOF Code</a>
</div>
</li>
</ul>
</div><button class='btn btn-primary round_button' id='dark_mode' style='font-size:22px; width:20%;' type='button'>Dark mode</button>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h1 class='zebra'>Thank you for using MOFSimplify.</h1>
<h4 class='zebra'>If you used MOFSimplify for MOF stability predictions, please cite the following manuscript: <a href='ris_files/MOFSimplify_citation.ris'><button class="btn zebra"><i class="fa fa-download"></i> Download RIS</button></a></h4>
<pre class='my-pre'><code>@Article {MOFSimplify,
author = {Nandy, Aditya and Terrones, Gianmarco and Arunachalam, Naveen and Duan, Chenru and Kastner, David W. and Kulik, Heather J.},
title = {MOFSimplify, machine learning models with extracted stability data of three thousand metal-organic frameworks},
journal = {Scientific Data},
volume = {9},
number = {74},
url = {https://doi.org/10.1038/s41597-022-01181-0},
doi = {10.1038/s41597-022-01181-0},
year = {2022},
}</code></pre>
</div>
</div>
</div>
<h4 class='zebra'>If you used the website to apply <a href='https://pubs.acs.org/doi/full/10.1021/jacs.1c07217'>solvent/thermal</a>, <a href='https://pubs.acs.org/doi/full/10.1021/jacs.4c05879'>water/acid</a>, or <a href='https://pubs.acs.org/doi/10.1021/acsami.4c14131'>C2 uptake</a> models, or to search the <a href='https://www.cell.com/matter/fulltext/S2590-2385(23)00111-X'>ultrastable MOF data set</a>, please also cite the corresponding article.</h4>
</div>
<div class="navbar navbar-expand-lg relative navbar-dark bg-primary" style="margin-top: 50px; font-size: 24px;">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link disabled">Site developed and maintained by the Kulik Group at MIT<br>
Contact: [email protected]</a>
</li>
</ul>
</div>
</div>
<!-- Begin JavaScript section -->
<script>
// When the "Dark mode" button is clicked:
black = '#000000'
white = '#FFFFFF'
$('#dark_mode').click(function () { // change background and button text depending on button state
button_text = document.getElementById('dark_mode').textContent
if (button_text == 'Dark mode') { // make background dark and text white
$('body').css("background-color", black);
document.getElementById('dark_mode').textContent = 'Light mode';
$('.zebra').css('color', white)
$('#header_background').css('background-image', 'url(\'banner_dark\')')
}
else { // Button says Light mode; make background white and text black
$('body').css("background-color", white);
document.getElementById('dark_mode').textContent = 'Dark mode';
$('.zebra').css('color', black)
$('#header_background').css('background-image', 'url(\'banner_light\')')
}
})
</script>
</body>
</html>