Skip to content

Commit cd48280

Browse files
Masterjun3Masterjun3
committed
test og type website with video
1 parent f60b674 commit cd48280

File tree

1 file changed

+172
-0
lines changed

1 file changed

+172
-0
lines changed

‎opengraphtests2.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<html>
2+
3+
<head>
4+
<link rel="shortcut icon" type="image/png" href="favicon.png" />
5+
<style>
6+
body {
7+
font-family: Arial, Helvetica, sans-serif;
8+
background: linear-gradient(#87CEEB, #FFE0B2);
9+
background-repeat: no-repeat;
10+
background-color: #FFE0B2;
11+
background-size: 100% 1000px;
12+
margin: auto;
13+
max-width: 700px;
14+
padding: 10px 10px;
15+
border-left: 1px solid #C0C0C0;
16+
border-right: 1px solid #C0C0C0;
17+
font-size: 16px;
18+
}
19+
20+
div.div1 {
21+
text-align: center;
22+
}
23+
</style>
24+
<meta charset="UTF-8">
25+
<meta name="viewport" content="width=device-width,initial-scale=1">
26+
<title>Masterjun | Open Graph Tests</title>
27+
<meta property="og:site_name" content="TASVideos" />
28+
<meta property="og:title" content="#4156: Masterjun's SNES Super Mario World &quot;arbitrary code execution, playaround&quot; in 02:25.19" />
29+
<meta property="og:type" content="website" />
30+
<meta property="og:url" content="https://tasvideos.org/4156S" />
31+
<meta property="og:image" content="https://i.ytimg.com/vi/OPcV9uIY5i4/hqdefault.jpg" />
32+
<meta property="og:description" content="Submission #4156 from 2014-01-06" />
33+
<meta property="og:video:url" content="https://www.youtube.com/embed/OPcV9uIY5i4">
34+
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/OPcV9uIY5i4">
35+
<meta property="og:video:type" content="text/html">
36+
<meta property="og:video:width" content="960">
37+
<meta property="og:video:height" content="720">
38+
</head>
39+
40+
<body>
41+
<a href=".">&lt Back</a><br>
42+
<div class="div1">
43+
<h1>Open Graph Tests</h1>
44+
<table>
45+
<tr>
46+
<td><span>Site Name:</span></td>
47+
<td><input id="input_sitename" oninput="change()" style="width: 63.5ch;" /></td>
48+
</tr>
49+
<tr>
50+
<td><span>Title:</span></td>
51+
<td><input id="input_title" oninput="change()" style="width: 63.5ch;" /></td>
52+
</tr>
53+
<tr>
54+
<td><span>Description:</span></td>
55+
<td><textarea id="input_description" oninput="change()" cols="60" rows="6"></textarea></td>
56+
</tr>
57+
<tr>
58+
<td><span>Image:</span></td>
59+
<td><input id="input_image" oninput="change()" style="width: 63.5ch;" /></td>
60+
</tr>
61+
</table>
62+
<style>
63+
.container {
64+
background-color: #313338;
65+
padding: 78px;
66+
}
67+
68+
.grid {
69+
text-align: left;
70+
display: grid;
71+
padding: .5rem 1rem 1rem .75rem;
72+
color: rgb(219, 222, 225);
73+
background-color: rgb(43, 45, 49);
74+
max-width: 516px;
75+
border-radius: 4px;
76+
}
77+
78+
.gridelement {
79+
margin-top: 8px;
80+
}
81+
82+
.sitename {
83+
grid-column: 1/1;
84+
font-size: 0.75rem;
85+
font-weight: 400;
86+
}
87+
88+
.title {
89+
grid-column: 1/1;
90+
color: rgb(0, 168, 252);
91+
font-size: 1rem;
92+
font-weight: 600;
93+
}
94+
95+
.title:not(:hover) {
96+
text-decoration: none;
97+
}
98+
99+
.description {
100+
grid-column: 1/1;
101+
font-size: 0.875rem;
102+
font-weight: 400;
103+
}
104+
105+
.image {
106+
grid-row: 1/8;
107+
grid-column: 2/2;
108+
margin-left: 16px;
109+
}
110+
</style>
111+
<div class="container">
112+
<div class="grid">
113+
<div class="gridelement sitename"><span id="sitename"></span></div>
114+
<div class="gridelement"><a class="title" href="#" id="title"></a></div>
115+
<div class="gridelement description"><span id="description"></span></div>
116+
<div class="gridelement image"><img style="width: 80px; cursor: pointer;" id="image" /></div>
117+
</div>
118+
</div>
119+
<script>
120+
let input_sitename = document.getElementById('input_sitename');
121+
let input_title = document.getElementById('input_title');
122+
let input_description = document.getElementById('input_description');
123+
let input_image = document.getElementById('input_image');
124+
let sitename = document.getElementById('sitename');
125+
let title = document.getElementById('title');
126+
let description = document.getElementById('description');
127+
let image = document.getElementById('image');
128+
function toBase64(s) {
129+
return btoa(Array.from(new TextEncoder().encode(s), (x) => String.fromCodePoint(x)).join("")).replaceAll("=", "").replaceAll("+", "-").replaceAll("/", "_");
130+
}
131+
function fromBase64(s) {
132+
return new TextDecoder().decode(Uint8Array.from(atob(s.replaceAll("-", "+").replaceAll("_", "/")), (m) => m.codePointAt(0)));
133+
}
134+
function change() {
135+
sitename.innerText = input_sitename.value;
136+
title.innerText = input_title.value;
137+
description.innerText = input_description.value;
138+
image.src = input_image.value;
139+
if (title.innerText.length > 60) {
140+
title.innerText = title.innerText.substring(0, 60 - 3) + "...";
141+
}
142+
if (description.innerText.length > 350) {
143+
description.innerText = description.innerText.substring(0, 350 - 3) + "...";
144+
}
145+
let query = [input_sitename.value, input_title.value, input_description.value, input_image.value];
146+
let url = new URL(window.location);
147+
url.searchParams.set("q", toBase64(JSON.stringify(query)));
148+
window.history.replaceState({}, null, url);
149+
}
150+
function fill() {
151+
let url = new URL(window.location);
152+
let q = url.searchParams.get("q");
153+
if (q) {
154+
query = JSON.parse(fromBase64(q));
155+
input_sitename.value = query[0];
156+
input_title.value = query[1];
157+
input_description.value = query[2];
158+
input_image.value = query[3];
159+
} else {
160+
input_sitename.value = "TASVideos";
161+
input_title.value = "Post by Masterjun";
162+
input_description.value = "Encoders' corner → [Guide] Creating a quick HD encode in BizHawk";
163+
input_image.value = "https://i.imgur.com/xljvuh5.png";
164+
}
165+
change();
166+
}
167+
fill();
168+
</script>
169+
</div>
170+
</body>
171+
172+
</html>

0 commit comments

Comments
 (0)