-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpanopto.html
150 lines (144 loc) · 5.64 KB
/
panopto.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panopto Custom Speed</title>
<link rel="stylesheet" href="assets/panopto/styles.css">
<link rel="icon" type="image/png" href="assets/panopto/icon.ico">
<!-- Include the Source Serif 4 font to match index.html -->
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img src="assets/panopto/icon.png" width="100px" height="100px">
<div>
<h1>Panopto Custom Speed</h1>
<img src="https://img.shields.io/chrome-web-store/users/fnoppdfnaklabgfllejlefomclegmnam" alt="Users">
<img src="https://img.shields.io/chrome-web-store/stars/fnoppdfnaklabgfllejlefomclegmnam" alt="Rating">
<br>Speed up or slow down your Panopto videos easily.<br>
<a href="https://chromewebstore.google.com/detail/panopto-custom-speed/fnoppdfnaklabgfllejlefomclegmnam" class="download-btn" target="_blank">
Add to Chrome
</a>
</div>
</header>
<div class="container">
<!-- Features Section restructured into a two-column layout -->
<h2>Features</h2>
<div class="features-container">
<div class="features-list">
<div class="feature-item">
<img src="assets/panopto/icon.png" alt="Easy Setup">
<div>
<h3>Easy Setup</h3>
<p>Install and activate the extension with just a click.</p>
</div>
</div>
<div class="feature-item">
<img src="assets/panopto/speed.png" alt="Custom Speed Options">
<div>
<h3>Custom Speed Options</h3>
<p>Select which speed you want to use, and whether you want the speed to be saved for the next video you watch.</p>
</div>
</div>
<div class="feature-item">
<img src="assets/panopto/settings.png" alt="User-Friendly Interface">
<div>
<h3>User-Friendly Interface</h3>
<p>A simple slider to change the speeds, but also allowing you to enter a specific speed if you want.</p>
</div>
</div>
</div>
<div class="live-demo" style="max-width: 325px;">
<h2>Live Demo</h2>
<div class="iframe-container">
<iframe id="extensionFrame" src="assets/panopto/extension/popup.html"></iframe>
</div>
</div>
</div>
<h2>Watch The Demo</h2>
<!-- Replace VIDEO_ID with the actual YouTube video ID -->
<iframe src="https://www.youtube.com/embed/DJ8a1dYxs5I"
title="YouTube video"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
style="width: 100%; height: 60%;"></iframe>
<br><br><br>
<!-- Reviews Carousel Section -->
<section class="reviews-carousel">
<h2>User Reviews</h2>
<div class="carousel">
<div class="carousel-track-container">
<ul class="carousel-track">
<li class="review-item">
<p>"Great extension! It makes watching Panopto videos so much easier."</p>
<div class="star-rating">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div><br>
<span>- S.H</span>
</li>
<li class="review-item">
<p>No review was provided.</p>
<div class="star-rating">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
<span>- M.N</span>
</li>
<!-- <span>☆</span> -->
<!-- <li class="review-item">
<p>"Simple, effective, and user friendly."</p>
<div class="star-rating">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>☆</span>
</div>
<span>- User C</span>
</li> -->
</ul>
</div>
<!-- Navigation buttons for the carousel -->
<button class="carousel-button left">‹</button>
<button class="carousel-button right">›</button>
</div>
</section>
<br><br><br>
</div>
<footer>
<img src="https://img.icons8.com/ios11/512/FFFFFF/github.png" style="height: 23px; width: 23px; vertical-align: middle;">
GitHub: <a href="https://github.com/harvey/Panopto-Extension">Panopto-Extension</a>
</footer>
<script>
// Dynamically adjust the iframe's height based on its content.
function resizeIframe() {
const iframe = document.getElementById('extensionFrame');
try {
// Access the document inside the iframe.
const doc = iframe.contentDocument || iframe.contentWindow.document;
if (doc) {
// Adjust the iframe's height to match the scrollHeight of its content.
iframe.style.height = doc.documentElement.scrollHeight + 'px';
}
} catch (e) {
console.error("Could not resize iframe:", e);
}
}
// Run resize once on window load and repeatedly thereafter.
window.addEventListener('load', function() {
resizeIframe();
setInterval(resizeIframe, 250);
});
</script>
<!-- Carousel JavaScript for Reviews -->
<script src="assets/panopto/carousel.js"></script>
</body>
</html>