japji/resources/public/index.html
2025-09-01 13:16:14 +01:00

113 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!-- Copyright: Simon Brooke and Lucy Fyfe 2025 -->
<title>Japji Sahib</title>
<style>
@font-face {
font-family: Bulara;
src: url(fonts/bulara_5.ttf);
font-weight: normal;
}
@font-face {
font-family: 'Noto Sans Gurmukhi';
src: url(fonts/NotoSansGurmukhi-Medium.ttf);
font-weight: normal;
}
body {
/* colours taken from
* https://www.sikhiwiki.org/index.php/File:Guru_Granth_Sahib_By_Bhai_Pratap_Singh_Giani.jpg */
background-color: #f8e1cf;
color: #331f16;
padding: 5% 20%;
font-size: x-large;
font-family: sans-serif;
}
footer {
border-top: thin solid #331f16;
font-size: medium;
padding: 4em 0 0.5em 0;
text-align: center;
}
/* #popup {
position: absolute;
display: none;
background-color: whitesmoke;
z-index: 10;
} */
#popup-phrase {
text-align: center;
margin: 0;
font-size: 2em;
}
#popup-close-box {
float: right;
text-align: right;
}
#popup-record-stop,
#popup-close-box {
color: red;
}
.gurmukhi {
font-family: "Noto Sans Gurmukhi", Bulara;
}
.play-control {
font-family: sans-serif;
}
.popup-launcher {
float: right;
}
@media all and (max-device-width: 768px) {
body {
margin: 0 5%;
}
}
</style>
<meta charset="UTF-8">
<meta Content-Language="pa, en-GB">
<script src="scripts/scittle.js" type="text/javascript"></script>
<script src="scripts/jquery-3.7.1.slim.min.js" type="text/javascript">
</script>
<!-- Have to pull react and react-dom from CDN during development because of obnoxious
Cross Origin Request nonsense. Makes me wonder whether we should seek not to use them
at all, since we don't use them much! -->
<script crossorigin src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="scripts/scittle.reagent.js" type="text/javascript"></script>
</script>
<script type="application/x-scittle">
</script>
</head>
<body>
<div id="popup"></div>
<h1><span class="en-GB" lang="en-GB">Japji Sahib</span></h1>
<p>Select words to hear them. Select the bullet • to hear the whole line. Select three dots ... to record your own
voice.</p>
<audio id="japji-bindranwale" controls src="audio/japji_bindranwale.mp3"></audio>
<div id="content"><span class="gurmukhi" lang="pa">ਕ੍ਰਿਪਾ ਕਰਕੇ ਉਡੀਕ ਕਰੋ...</span></div>
<footer>
Page scripts copyright &copy; Simon Brooke and Lucy Fyfe 2025 <br>
Made with <a href="https://babashka.org/scittle/">Scittle</a>
</footer>
</body>
</html>