cs50/index.html

322 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- https://aws.amazon.com/ -->
<link href="https://a0.awsstatic.com/main/images/site/fav/favicon.ico" rel="icon">
<!-- https://getbootstrap.com/ -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<!-- https://jquery.com/ -->
<!-- https://www.jsdelivr.com/package/npm/jquery?tab=files&path=dist -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- https://momentjs.com/ -->
<!-- https://www.jsdelivr.com/package/npm/moment?path=min&tab=files -->
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment-with-locales.min.js" integrity="sha256-QwcluVRoJ33LzMJ+COPYcydsAIJzcxCwsa0zA5JRGEc=" crossorigin="anonymous"></script>
<script>
$(function() {
// When Size is clicked, display bytes instead (and ignore further clicking)
$('.readable.Size').click(function() {
$(this).removeClass('readable').text($(this).attr('data-Size')).off();
});
// When LastModified is clicked, display localized ISO 8601
$('.readable.LastModified').click(function() {
$(this).removeClass('readable').text(moment($(this).attr('data-LastModified')).format()).off();
});
// Display LastModified as relative time by default
$('.readable.LastModified').each(function(index, element) {
$(this).text(moment($(this).attr('data-LastModified')).fromNow());
});
});
</script>
<style>
/* Wrap long strings */
* {
word-break: break-all;
}
/* Underline links on hover */
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Muted */
.download, .highlight, .view, .Size, .LastModified {
color: #ccc;
font-size: smaller;
}
/* Small thumbnails */
.img-thumbnail {
height: 240px;
}
/* Make ../ easier to click */
.parent {
letter-spacing: .4em;
}
/* Draw attention to clickability of Size and LastModified */
.readable.Size:hover, .readable.LastModified:hover {
cursor: zoom-in;
}
/* Right-align Size and LastModified */
.Size, .LastModified {
text-align: right;
}
/* Add padding to cells */
.table > :not(caption) > * > * {
padding: .75rem;
}
/* Hide all secondary text except Size on small screens */
@media only screen and (max-width: 640px) {
.download, .highlight, .view, .Size, .LastModified {
display: none;
}
}
/* Move search to own line on small screens */
@media only screen and (max-width: 640px) {
input[type="search"] {
display: block;
margin-top: .5rem;
}
}
</style>
<title>CS50 CDN</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">CS50 CDN</a>
</div>
</nav>
<main>
<table class="table">
<thead>
<tr>
<th colspan="3" scope="col">
<nav aria-label="breadcrumb">
<a href="./../../../../../">cdn.cs50.net</a><span class="text-primary">/</span><a href="./../../../../">2021</a><span class="text-primary">/</span><a href="./../../../">fall</a><span class="text-primary">/</span><a href="./../../">lectures</a><span class="text-primary">/</span><a href="./../">9</a><span class="text-primary">/</span><a aria-current="page" href="./">src9</a><span class="text-primary">/</span><input autocomplete="off" autofocus class="d-inline form-control form-control-sm ms-1 w-auto" placeholder="Search" type="search">
</nav>
</th>
</tr>
</thead>
<tbody>
<tr data-basename="../">
<td colspan="3">
<a class="parent" href="../">..</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="froshims0/">
<td colspan="3">
<a href="froshims0/">froshims0</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="froshims1/">
<td colspan="3">
<a href="froshims1/">froshims1</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="froshims2/">
<td colspan="3">
<a href="froshims2/">froshims2</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="froshims3/">
<td colspan="3">
<a href="froshims3/">froshims3</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="froshims4/">
<td colspan="3">
<a href="froshims4/">froshims4</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="froshims5/">
<td colspan="3">
<a href="froshims5/">froshims5</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="hello0/">
<td colspan="3">
<a href="hello0/">hello0</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="hello1/">
<td colspan="3">
<a href="hello1/">hello1</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="hello2/">
<td colspan="3">
<a href="hello2/">hello2</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="hello3/">
<td colspan="3">
<a href="hello3/">hello3</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="hello4/">
<td colspan="3">
<a href="hello4/">hello4</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="login/">
<td colspan="3">
<a href="login/">login</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="shows0/">
<td colspan="3">
<a href="shows0/">shows0</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="shows1/">
<td colspan="3">
<a href="shows1/">shows1</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="shows2/">
<td colspan="3">
<a href="shows2/">shows2</a><span class="text-primary">/</span>
</td>
</tr>
<tr data-basename ="store/">
<td colspan="3">
<a href="store/">store</a><span class="text-primary">/</span>
</td>
</tr>
</tbody>
</table>
<script>
// Populate input's value from hash
$('input').val(window.location.hash.substring(1));
// Filter rows
$('input').on('keyup search', function() {
// Get input's value
const value = $(this).val().trim().toLowerCase();
// Store input's value in hash
if (value) {
window.location.hash = value;
}
else {
window.location.hash = '';
}
// Iterate over rows with basenames
$('tr[data-basename]').each(function(index, element) {
// Show if matched
if (!value || $(this).attr('data-basename').toLowerCase().indexOf(value) !== -1) {
$(this).show();
}
// Hide if not matched
else {
$(this).hide();
}
});
// Re-stripe table
// https://stackoverflow.com/a/52553884/5156190
$('tbody tr:visible').each(function(index) {
$(this).css('background-color', !!(index & 1) ? 'rgba(0,0,0,0)' : 'rgba(0,0,0,.05)');
});
}).trigger('search');
</script>
</main>
</body>
</html>