1
0
Fork 0
mirror of https://github.com/anyproto/anytype-ts.git synced 2025-06-09 17:45:02 +09:00
anytype-ts/dist/challenge/index.html
2025-01-17 09:58:47 +01:00

70 lines
No EOL
2.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Anytype</title>
<style type="text/css">
* { margin: 0px; box-sizing: border-box; }
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400;
src: url('../font/inter/regular.woff2') format('woff2');
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 700;
src: url('../font/inter/bold.woff2') format('woff2');
}
html, body { height: 100%; -webkit-app-region: drag; }
/*html.dark body { background-color: #171717; color: #a09f92; }*/
body { font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px; background-color: #fff; color: #252525; }
.content { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 16px; height: 100%; }
.title { font-size: 18px; line-height: 26px; letter-spacing: -0.28px; font-weight: 700; margin: 0px 0px 4px 0px; text-align: center; }
.description { font-size: 14px; line-height: 22px; letter-spacing: -0.28px; font-weight: 400; margin: 0px 0px 24px 0px; text-align: center; }
#challenge { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 0px 8px; }
#challenge .number { background-color: #f2f2f2; border-radius: 12px; font-weight: 700; font-size: 36px; line-height: 40px; padding: 12px; }
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="content">
<div id="title" class="title"></div>
<div id="description" class="description"></div>
<div id="challenge"></div>
</div>
<script type="text/javascript">
$(() => {
const win = $(window);
const html = $('html')
const title = $('#title');
const description = $('#description');
const challengeEl = $('#challenge');
window.Electron.on('challenge', (e, data) => {
const { challenge, theme, lang } = data;
const numbers = String(challenge || '').split('');
challengeEl.html('');
for (const i in numbers) {
challengeEl.append(`<span class="number">${numbers[i]}</span>`);
};
html.attr({ class: theme });
$.ajax({
url: `../lib/json/lang/${lang}.json`,
method: 'GET',
contentType: 'application/json',
success: data => {
title.text(data.challengeTitle);
description.text(data.challengeDescription);
},
});
});
});
</script>
</body>
</html>