Skip to content

Commit

Permalink
Support dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@blokhin
blokhin committed Apr 29, 2024
1 parent 89dabb8 commit 82cb274
Showing 1 changed file with 38 additions and 4 deletions.
42 changes: 38 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,16 +108,19 @@
#landing_box{width:590px;margin:0 auto;height:170px;padding:20px 0;}
#logo_l{float:left;width:230px;margin-left:15px;font-size:3em;text-align:right;padding-top:38px;letter-spacing:24px;color:#555;font-weight:normal;}
#logo{float:left;width:140px;height:130px;background:url(https://tutorial.mpds.io/mpds.png) center center no-repeat;background-size:85%;}
body.darkmode--activated #logo{filter:invert(100%);}
#logo a{display:block;width:100%;height:100%;border:0;}
#logo_r{float:left;width:175px;margin-left:15px;font-size:1.2em;line-height:1.3em;text-align:left;font-weight:normal;padding-top:42px;color:#555;}
#motto{clear:both;width:100%;height:33px;text-align:left;padding-top:20px;padding-left:80px;letter-spacing:0.5px;font-size:0.95em;color:#333;}
#motto a{text-decoration:none;color:#333;border-bottom:1px solid #333;}

div.darkmode-layer{z-index:9999;}

/* FOOTER */
/* HEIGHT 32px */

#footer{width:100%;height:24px;padding-top:8px;text-align:center;font-size:0.85em;color:#888;background:#f6f6f6;border-top:1px solid #888;}
#footer a{text-decoration:none;color:#888;border-bottom:1px solid #888;}
#footer{width:100%;height:24px;padding-top:8px;text-align:center;font-size:0.85em;color:#333;background:#f6f6f6;border-top:1px solid #333;}
#footer a, #footer span{text-decoration:none;color:#333;border-bottom:1px solid #333;cursor:pointer;}

/* MEDIA-QUERIES */

Expand Down Expand Up @@ -184,8 +187,9 @@
</style>
<script type="text/javascript" src="https://developer.mpds.io/webassets/js/jquery.min.js"></script>
<script type="text/javascript" src="https://developer.mpds.io/webassets/js/jquery.nearest.min.js"></script>
<script type="text/javascript" src="https://developer.mpds.io/webassets/js/darkmode.js"></script>
<script type="text/javascript">
if (!window.console) window.console = {log: function(){}, error: function(){}};
"use strict";

window.formulae_ex = ["Ag&#x2082;S", "Ag&#x2082;Te", "AgI", "Al&#x2082;O&#x2083;", "Al[PO&#x2084;]", "AlAs", "AlF&#x2083;", "AlN", "Ba&#x2082;Cu&#x2083;ErO&#x2087;", "Ba&#x2082;Cu&#x2083;GdO&#x2087;", "Ba&#x2082;Cu&#x2083;PrO&#x2087;", "Ba&#x2082;Cu&#x2083;YO&#x2086;", "Ba&#x2082;Cu&#x2083;YO&#x2087;", "Ba&#x2082;Cu&#x2084;YO&#x2088;", "BaFe&#x2081;&#x2082;O&#x2081;&#x2089;", "BaFe&#x2082;As&#x2082;", "BaTiO&#x2083;", "Bi&#x2082;Se&#x2083;", "Bi&#x2082;Te&#x2083;", "C&#x2086;&#x2080;", "Ca&#x2080;.&#x2085;La&#x2080;.&#x2085;MnO&#x2083;", "Ca&#x2080;.&#x2085;Pr&#x2080;.&#x2085;MnO&#x2083;", "CaF&#x2082;", "CaO", "CdI&#x2082;", "CdS", "CdSe", "CdTe", "CeO&#x2082;", "CeRu&#x2082;Si&#x2082;", "CoO", "CoSb&#x2083;", "Cu&#x2082;CeSi&#x2082;", "Cu&#x2082;O", "Cu&#x2086;Ce", "CuAl&#x2082;", "CuCe&#x2080;.&#x2082;Nd&#x2081;.&#x2088;O&#x2084;", "CuCl", "CuI", "CuLa&#x2082;O&#x2084;", "CuO", "Fe&#x2080;.&#x2085;Ni&#x2080;.&#x2085;", "Fe&#x2082;CoO&#x2084;", "Fe&#x2082;NiO&#x2084;", "Fe&#x2082;O&#x2083;", "Fe&#x2082;P", "Fe&#x2083;C", "Fe&#x2083;O&#x2084;", "FeAl", "FeBiO&#x2083;", "FeS", "FeS&#x2082;", "FeSe", "FeSi", "FeTe&#x2080;.&#x2085;Se&#x2080;.&#x2085;", "GaAs", "GaN", "GaP", "GaSb", "GaSe", "GeO&#x2082;", "GeTe", "H&#x2082;K[PO&#x2084;]", "HfO&#x2082;", "HgTe", "In&#x2082;Se&#x2083;", "InAs", "InP", "InSb", "K&#x2080;.&#x2085;Ba&#x2080;.&#x2085;Fe&#x2082;As&#x2082;", "KCl", "La&#x2082;O&#x2083;", "LaCoO&#x2083;", "LaMnO&#x2083;", "Mg&#x2080;.&#x2082;&#x2081;Ti&#x2080;.&#x2083;&#x2086;Nb&#x2080;.&#x2084;&#x2083;PbO&#x2083;", "MgAl&#x2082;O&#x2084;", "MgB&#x2082;", "MgO", "MnNi&#x2082;Ga", "MnO", "MnSi", "Na&#x2080;.&#x2087;&#x2085;CoO&#x2082;", "NaCl", "NaF", "Nb&#x2083;Sn", "NbSe&#x2082;", "Nd&#x2082;Fe&#x2081;&#x2084;B", "Ni&#x2083;Al", "NiAl", "NiO", "PbS", "PbSe", "PbTe", "Sb&#x2082;Te&#x2083;", "SiC", "SiO&#x2082;", "SnSe", "SnTe", "Sr&#x2080;.&#x2081;CuLa&#x2081;.&#x2089;O&#x2084;", "Sr&#x2080;.&#x2084;La&#x2080;.&#x2086;MnO&#x2083;", "Sr&#x2080;.&#x2085;La&#x2080;.&#x2085;CoO&#x2083;", "Sr&#x2080;.&#x2086;CuLa&#x2081;.&#x2084;O&#x2084;", "Sr&#x2081;.&#x2086;Ca&#x2081;.&#x2083;Cu&#x2082;Bi&#x2082;.&#x2082;O&#x2088;", "Sr&#x2082;Ca&#x2081;.&#x2087;Cu&#x2083;Pb&#x2080;.&#x2083;Bi&#x2082;O&#x2081;&#x2080;", "Sr&#x2082;CaCu&#x2082;Bi&#x2082;O&#x2088;", "Sr&#x2082;LaMn&#x2082;O&#x2087;", "Sr&#x2082;MoFeO&#x2086;", "SrFe&#x2082;As&#x2082;", "SrRuO&#x2083;", "SrTiO&#x2083;", "TaS&#x2082;", "TaSe&#x2082;", "Ti&#x2083;Al", "TiAl", "TiAl&#x2083;", "TiC&#x2080;.&#x2089;&#x2085;", "TiCr&#x2082;", "TiNi", "TiO&#x2082;", "TiPbO&#x2083;", "UO&#x2082;", "UPt&#x2083;", "URu&#x2082;Si&#x2082;", "V&#x2082;O&#x2083;", "V&#x2083;Si"];

Expand Down Expand Up @@ -275,6 +279,7 @@
}

$(document).ready(function(){

if ($('#menu').is(':visible')){
var menu = '<ul>';
$('h2, h3').each(function(){
Expand Down Expand Up @@ -360,6 +365,32 @@
window.location.href = 'https://mpds.io/#' + url;
}
});

window.darkmode = new Darkmode({saveInCookies: false});
document.getElementById('darkmode_trigger').innerHTML = window.darkmode.isActivated() ? 'enabled' : 'disabled';

// theme switcher
document.getElementById('darkmode_trigger').onclick = function(){
window.darkmode.toggle();
document.getElementById('darkmode_trigger').innerHTML = window.darkmode.isActivated() ? 'enabled' : 'disabled';
document.getElementById('comms').contentWindow.postMessage(JSON.stringify({darkmode: window.darkmode.isActivated() ? 1 : 2}), '*');
}

// cross-site comms
window.addEventListener('message', function(message){
//if (message.origin === 'https://trusted.com') {
var received;
try {
received = JSON.parse(message.data);
} catch (ignore){}
var darkmode = received.darkmode;
if (darkmode !== undefined){
darkmode = (darkmode === 1);
if (darkmode !== window.darkmode.isActivated()) window.darkmode.toggle();
document.getElementById('darkmode_trigger').innerHTML = window.darkmode.isActivated() ? 'enabled' : 'disabled';
}
//}
});
});
</script>
</head>
Expand Down Expand Up @@ -514,12 +545,15 @@ <h2 id="Users">&sect;4. Administrative interface</h2>

<div id="logo_bg"></div>

<div id="footer">Created by <a href="http://paulingfile.com" target="_blank">Materials Phase Data System</a> and <a href="https://tilde.pro" target="_blank">Tilde Materials Informatics</a>.</div>
<div id="footer">Created by <a href="https://mpds.io" target="_blank">Materials Platform for Data Science</a> and <a href="https://tilde.pro" target="_blank">Tilde MI</a>. Dark mode is <span id="darkmode_trigger"></span>.</div>

<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/mpds-io/tutorial" target="_top">See on GitHub</a>
</div>
</div>

<!-- CROSS-SITE COMMS -->
<iframe id="comms" src="https://absolidix.com/comms.html" style="width:0;height:0;border:none;position:absolute;"></iframe>
</body>
</html>

0 comments on commit 82cb274

Please sign in to comment.