114 lines
3.6 KiB
HTML
114 lines
3.6 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="data/japji-nihung-timings.json" type="text/javascript">
|
|
parsed=JSON.parse(data);
|
|
</script -->
|
|
<script src="scripts/japji.cljs" type="application/x-scittle"></script>
|
|
</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 type="application/x-scittle">
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="popup"></div>
|
|
<h1><span class="gurmukhi" lang="pa">ਜਪੁਜੀ ਸਾਹਿਬ</span> <span class="en-GB" lang="en-GB">(Japji Sahib)</span></h1>
|
|
<p><span class="gurmukhi" lang="pa">ਸੁਣਨ ਲਈ ਸ਼ਬਦ ਚੁਣੋ। ਪੂਰੀ ਲਾਈਨ ਸੁਣਨ ਲਈ ਬੁਲੇਟ • ਚੁਣੋ। ਆਪਣੀ ਆਵਾਜ਼ ਰਿਕਾਰਡ ਕਰਨ ਲਈ ਤਿੰਨ ਬਿੰਦੀਆਂ ਚੁਣੋ ...।</span> </p>
|
|
<p class="en-GB" lang="en-GB">(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>
|
|
<span class="gurmukhi" lang="pa">ਪੇਜ ਸਕ੍ਰਿਪਟਾਂ ਕਾਪੀਰਾਈਟ ਸਾਈਮਨ ਬਰੂਕ ਅਤੇ ਲੂਸੀ ਫਾਈਫ 2025</span> <span class="en-GB" lang="en-GB">Page scripts copyright © Simon Brooke and Lucy Fyfe 2025</span><br>
|
|
<span class="gurmukhi" lang="pa">ਨਾਲ ਬਣਾਇਆ ਗਿਆ</span> <span class="en-GB" lang="en-GB">Made with</span> <a href="https://babashka.org/scittle/">Scittle</a>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |