Skip to content

Commit

Permalink
index updates to match static
Browse files Browse the repository at this point in the history
  • Loading branch information
@bramses
bramses committed Apr 2, 2024
1 parent 0e697a8 commit 27af91f
Showing 1 changed file with 81 additions and 81 deletions.
162 changes: 81 additions & 81 deletions public/sindex.html → public/index.html
View file
Expand Up @@ -3,112 +3,100 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js" integrity="sha512-vLs5rAqfvmv/IpN7JustROkGAvjK/L+vgVDFe7KpdtLztqF8mZDfleK2MZj/xuOrWjma0pW+lPCMcBbPKJVC7g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:wght@100..900&display=swap" rel="stylesheet">
<title>Quote Animation</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
background-color: #f0f0f0;
height: 100vh;
}
.highlight {
background-color: #ffff99;
}
/* Controls in top left corner buttons in a row */
#controls {
position: absolute;
top: 0;
left: 0;
padding: 20px;
}
#parent-container {

#container {
display: flex;
flex-direction: row; /* side-by-side for main content and cover */
justify-content: space-between; /* space between main content and cover */
align-items: flex-start; /* align to top */
width: 100%;
margin: 0 auto; /* centering the container */
flex-wrap: wrap; /* wrap for smaller screens */
height: 60%;
}
.main-content {
display: flex; /* for vertical stack of reasoning, quote, transcript */
flex-direction: column;
height: 100%;
}
.box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
align-items: stretch; /* stretch children to fill the column width */
width: 66.666%; /* two-thirds of parent container */
overflow: hidden;
/* outline: 1px solid red; */
}
#quote-container {
flex-grow: 2; /* quote takes double the space */
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
font-size: 1em;
.box1,
.box2 {
height: 80vh;
/* outline: 1px solid red; */
}
.container {
flex-grow: 1; /* reasoning and transcript take equal space */
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
.box1 {
font-family: "EB Garamond", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
width: 66vw;
padding: 10px;
}
#cover-container {
width: 33.333%; /* one-third of parent container */
.box2 {
width: 33vw;
display: flex;
justify-content: center;
align-items: center;
/* max-width: 400px; adjust accordingly */
}
.highlight {
font-weight: bold;
background-color: #ffff99;
}
/* Controls in top left corner buttons in a row */
#controls {
position: absolute;
top: 0;
left: 0;
padding: 20px;
}
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
#parent-container {
flex-direction: column;
}
.container,
#cover-container {
margin-right: 0;
max-width: 100%;
}
.box3,
.box4 {
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
font-variation-settings:
"slnt" 0;
height: 10vh;
padding-left: 1%;
padding-right: 1%;
/* outline: 1px solid red; */
}
</style>
</head>
<body>
<div id="controls">
<button id="play-btn">Play</button>
</div>
<div id="parent-container">
<div class="main-content">
<div id="reasoning-container" class="container">
<h2>Reasoning</h2>
<div id="container">
<div id="controls">
<button id="play-btn">Play</button>
</div>
<div id="reasoning-container" class="box3">
<p id="reasoning"></p>
</div>
<div id="quote-container">
<h2>Quote</h2>
<p id="quote-text"></p>
<p id="quote-author"></p>
<div class="box">
<div id="quote-container" class="box1">
<p id="quote-text"></p>
<p id="quote-author"></p>
</div>
<div id="cover-container" class="box2">
<img src="" alt="Book cover" style="max-width: 80%; max-height: 80%" />
</div>
</div>
<div id="transcript-container" class="container">
<h2>Transcript</h2>

<div id="transcript-container" class="box4">
<p id="transcript"></p>
</div>
</div>
<div id="cover-container">
<img
src=""
alt="Book cover"
style="max-width: 80%; max-height: 80%"
/>
</div>

</div>
<script>
let quoteData = null;
Expand Down Expand Up @@ -221,7 +209,7 @@ <h2>Transcript</h2>
coverContainer.innerHTML = `<img src="${quoteData.cover}" alt="Book cover" style="max-width: 80%; max-height: 80%;" />`;
quoteText.textContent = "";

const quoteAuthor = document.getElementById("quote-author");
// const quoteAuthor = document.getElementById("quote-author");

const plaintext = quoteData.text.replace(/\*\*/g, "");
const highlights = findHighlights(quoteData.text);
Expand All @@ -233,15 +221,26 @@ <h2>Transcript</h2>
quoteText.appendChild(span);
i++;
}

textFit(document.getElementsByClassName('box1'))


animateHighlights(quoteText, highlights, 12);

// animateText(quoteText, plaintext, animationDelay, () => {
// animateHighlights(quoteText, highlights, 12);
// });

quoteAuthor.textContent = `- ${quoteData.author}, "${quoteData.title}"`;
// quoteAuthor.textContent = `- ${quoteData.author}, "${quoteData.title}"`;
reasoning.textContent = quoteData.reasoning;

// italicize reasoning
reasoning.style.fontStyle = "italic";

transcript.textContent = quoteData.transcript;

textFit(document.getElementsByClassName('box3'), {multiLine: true})
textFit(document.getElementsByClassName('box4'), {multiLine: true})
}

function animateTranscript() {
Expand Down Expand Up @@ -294,7 +293,8 @@ <h2>Transcript</h2>
}

document.getElementById("play-btn").addEventListener("click", () => {
console.log("Play button clicked");
// hide the play button
document.getElementById("play-btn").style.display = "none";
const log_file_path =
"transcriber/logs/log-2df246e9-6f04-444d-97ad-b58b799838e9.json";
const timestamp_file_path = "transcriber/transcript-timers.json";
Expand Down

0 comments on commit 27af91f

Please sign in to comment.