/
index.html
192 lines (162 loc) · 10.3 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
<!DOCTYPE html>
<html data-bs-theme="light" lang="en" style="font-family: 'Helveltica';">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TMPC - MOOC</title>
<link rel="alternate" type="application/atom+xml" title="TMPC - MOOC" href="/TMPC_MOOC_rss_feed.rss.xml">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap">
<link rel="stylesheet" href="assets/fonts/fontawesome4-overrides.min.css">
<link rel="stylesheet" href="./css/mooc_theme.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean.css">
<link rel="icon" href="./resources/favicon.png">
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
document.getElementById('open_modal_button').click();
}
</script>
<style type="text/css">
#mynetwork {
margin-left: 0;
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
<script>
function overlayHelp(isShow){
var elm = document.getElementById('overlayHelp')
if (isShow) {
elm.style.display = 'block';
} else {
elm.style.display = 'none';
}
}
function openHelp() {
overlayHelp(true);
document.getElementById('HelpWindow').style.display = 'block';
}
function closeHelp() {
overlayHelp(false);
document.getElementById('HelpWindow').style.display = 'none';
}
function overlay(isShow){
var elm = document.getElementById('overlay')
if (isShow) {
elm.style.display = 'block';
} else {
elm.style.display = 'none';
}
}
function openNav() {
overlay(true);
// document.getElementById('mySidenav').style.width="250px";
document.getElementById('mySidenav').classList.add('sidenav_sz_open');
document.getElementById('mySidenav').classList.remove('sidenav_sz_close');
document.getElementById('sm_arrow').style.color="#111";
document.getElementById("notebook").style.marginLeft = "250px";
document.body.style.backgroundColor = "white";
}
function closeNav() {
overlay(false);
// document.getElementById('mySidenav').style.width="15px"
document.getElementById('mySidenav').classList.add('sidenav_sz_close');
document.getElementById('mySidenav').classList.remove('sidenav_sz_open');
document.getElementById("notebook").style.marginLeft = "0";
document.getElementById('sm_arrow').style.color="grey";
document.body.style.backgroundColor = "white";
}
</script>
<img class="logoGEMM" src="./resources/logo.png" height="60px">
<img class="logoUFSCar" src="./resources/ufscar.png" height="60px">
<!-- Navigation Bar -->
<div class="topnav">
<!-- <a class="active" href="index.html"><i class="fas fa-home"></i> Home</a> -->
<a class="feedback" href="./feedback.html"><i class="fas fa-comments"></i> Feedback</a>
</div>
</head>
<body style="overflow-x: auto; overflow-y:auto; background-color: white; margin-top: 30px; color: black;">
<br>
<h1 style='font-size: 42px; text-align:center; margin-top:5px; margin-bottom: 5px;' class="nocount" > Mechanical and Thermomechanical Properties of Ceramics</h1>
<img style="display: block; margin-left: auto; margin-right: auto; width: 30%; border: 2px solid #222; box-shadow: 6px 6px 12px #000000;;" src="./resources/cover.jpg" width="100px">
<br>
<button class="btn btn-primary d-none" id="open_modal_button" type="button" data-bs-target="#modal-1" data-bs-toggle="modal">Button</button>
<div class="container container-content">
<div class="modal fade" role="dialog" tabindex="-1" id="modal-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="text-align: center; align-items: start;">
<div><h4 class="modal-title" style="color: black; font-size:32px">🚧 We are under construction 🚧</h4>
<h4>Are you interested in the MTPC-MOOC? Want to be the first to known when new content is added?</h4></div><button class="btn-close text-start d-xxl-flex justify-content-xxl-end" type="button" aria-label="Close" data-bs-dismiss="modal" style="padding-bottom: 8px;margin-right: 0px;margin-left: 0px;"></button>
</div>
<div class="modal-body">
<div id="mc_embed_signup">
<form action="https://github.us17.list-manage.com/subscribe/post?u=656456e3d25272cb4477f9e61&id=e429431aa7&f_id=00af78e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<div id="mc_embed_signup_scroll"><h4 class="nocount" style="margin-top: 5px; text-align:center;">Subscribe to the MTPC-MOOC! Also, keep in mind that the larger the subscription numbers, the larger the priority to add new content ;)</h2>
<div style="display:flex; flex-direction: column; align-items: center; justify-content: center;">
<div style="display:flex; flex-direction:column; align-content: left; justify-content: left;">
<div class="mc-field-group" style="font-size: 18px; margin-top: 10px"><label for="mce-EMAIL">Email Address (required) </label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""><span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span></div><div class="mc-field-group" style="font-size: 18px; display: flex; flex-direction: row; justify-content: space-between; margin-top: 10px"><label for="mce-FNAME">First Name (optional) </label><input type="text" name="FNAME" class=" text" id="mce-FNAME" value=""></div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div aria-hidden="true" style="position: absolute; left: -5000px;">
/* real people should not fill this in and expect good things - do not remove this or risk form bot signups */
<input type="text" name="b_656456e3d25272cb4477f9e61_b9650cc6ef" tabindex="-1" value="">
</div>
<div class="optionalParent">
<div class="clear foot" style="display:flex; flex-direction:row; justify-content: right;">
<input type="submit" style="font-size: 18px; margin-top: 10px; border-radius: 10px; color:white; background-color: #167ac6" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div>
<button class="btn btn-primary d-none" id="open_modal_button" type="button" data-bs-target="#modal-1" data-bs-toggle="modal">Button</button>
<p style='font-size: 18px'>This is the Massive Open Online Course of Mechanical and Thermomechanical Properties of Ceramics. The course derives from over 30 years of experience from Professor Pandolfelli. The main objective is to provide a solid fundamental basis to concepts that directly impacts the processing and performance of ceramics materials. Througout the course numerous examples of diverse matrial classes are also presented, making this a unique oportunity to connect multiple concepts. The course is divided in 11 lessons as follows: </p>
<ol>
<li style='font-size: 22px; font-weight: regular'><a class="active" href='./lesson_1.html'><b>Theoretical Stregth and Stress Concentrations</a></b></li>
<li style='font-size: 22px; font-weight: regular'><a class="active" href='./lesson_2.html'><b>Irwin Failure Criteria and Fracture Toughness</a></b></li>
<li style='font-size: 22px; font-weight: regular'><a class="active" href='./lesson_3.html'><b>Aluminum Oxide - Production, Phases, Properties and Selection</a></b></li>
<li style='font-size: 22px; font-weight: regular'><p class="deactive" href='./lesson_x.html'><b>Processing-Mechanical Properties of Ceramics Correlation</p></b></li>
<li style='font-size: 22px; font-weight: regular'><p class="deactive" href='./lesson_x.html'><b>The Grifth Failure Criterion</p></b></li>
<li style='font-size: 22px; font-weight: regular'><p class="deactive" href='./lesson_x.html'><b>Probability Applied to Ceramics - The Weibull Analysis</p></b></li>
<li style='font-size: 22px; font-weight: regular'><p class="deactive" href='./lesson_x.html'><b>Fracture Energy and Toughnening Mechanisms</p></b></li>
<li style='font-size: 22px; font-weight: regular'><p class="deactive" href='./lesson_x.html'><b>Examples of Toughening Mechanisms</p></b></li>
<li style='font-size: 22px; font-weight: regular'><p class="deactive" href='./lesson_x.html'><b>Subcritical Crack Propagation and Aplication to Bioceramics</a></b></li>
<li style='font-size: 22px; font-weight: regular'><p class="deactive" href='./lesson_x.html'><b>Thermal Shock - Concept and Evaluation</p></b></li>
<li style='font-size: 22px; font-weight: regular'><p class="deactive" href='./lesson_x.html'><b>Unified Theory of Thermal Shock and Toughening Mechanisms Application</p></b></li>
</ol>
</div>
</div>
<footer style="margin-top: 20px;color: black;">
<div class="text-center d-xxl-flex justify-content-xxl-center" style="font-family: 'IBM Plex Mono';color: black;"><div><footer class="footer">
<p style="font-family: 'IBM Plex Mono'; font-weight:'bold';"> <i class="far fa-copyright"></i> <a href="https://murilohmoreira.github.io/">Murilo Henrique Moreira</a> –
<script language="javascript">
months = ['January', 'Febraury', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var theDate = new Date(document.lastModified);
theDate.setTime((theDate.getTime()+(5000*60*60)) )
with (theDate) {
document.write("Last updated "+getDate()+' '+months[getMonth()]+' '+getFullYear()+' '+ ("0" +getHours()).slice(-2) +':'+("0" +getMinutes()).slice(-2)+" GMT")
}
</script>
</p>
</footer>
</div></div>
</footer>
</div>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
</body>
</html>