122 lines
3.4 KiB
Mathematica
122 lines
3.4 KiB
Mathematica
|
|
fun page(title, style, content)
|
|
<html>
|
|
<head>
|
|
<title>CN - \title</title>
|
|
<style>
|
|
body {
|
|
line-height: 200%;
|
|
font-family: monospace;
|
|
max-width: 800px;
|
|
margin: 20px auto;
|
|
}
|
|
nav {
|
|
overflow: auto;
|
|
background: #5780C9;
|
|
color: #6E93D4;
|
|
padding: 5px 10px;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
nav div {
|
|
float: left
|
|
}
|
|
nav div:last-child {
|
|
float: right
|
|
}
|
|
nav a {
|
|
font-size: 14px;
|
|
color: #1D2B42;
|
|
}
|
|
nav a.current {
|
|
font-weight: bold;
|
|
}
|
|
main {
|
|
padding: 5px 10px;
|
|
background: #F7E6C0;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
footer {
|
|
padding: 5px 10px;
|
|
}
|
|
</style>
|
|
\(style)
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div>
|
|
<a href="/new" class="current">new</a>
|
|
|
|
|
<a href="">hot</a>
|
|
</div>
|
|
\if $login_username == none:
|
|
<div>
|
|
<a href="/login">log-in</a>
|
|
|
|
|
<a href="/signup">sign-up</a>
|
|
</div>
|
|
else
|
|
<div>
|
|
<a href="">settings</a>
|
|
|
|
|
<a href="/logout">log-out</a>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
\content
|
|
</main>
|
|
<footer>
|
|
Made with love by cozis
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
|
|
let posts = [
|
|
{ title: "Show HN: Kitten TTS - 25MB CPU-Only, Open-Source TTS Model", date: "3 hours ago", num_comments: 127, link: "https://github.com/KittenML/KittenTTS" },
|
|
{ title: "Open models by OpenAI", date: "15 hours ago", num_comments: 651, link: "https://openai.com/open-models/" },
|
|
{ title: "Anthropic rejects the main developer of the library they use", date: "40 minutes ago", num_comments: 437, link: "https://grell.dev/blog/ai_rejection" },
|
|
]
|
|
|
|
let style =
|
|
<style>
|
|
.item {
|
|
overflow: auto;
|
|
border-bottom: 1px solid #E8D4A9;
|
|
font-size: 14px;
|
|
}
|
|
.item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
.item span {
|
|
color: #7A5F2A;
|
|
text-decoration: none;
|
|
}
|
|
.item div {
|
|
color: #E8D4A9;
|
|
float: left
|
|
}
|
|
.item div:first-child {
|
|
width: calc(100% - 250px);
|
|
}
|
|
.item div:last-child {
|
|
width: 250px;
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
|
|
let content =
|
|
<div>
|
|
\for post in posts:
|
|
<div class="item">
|
|
<div>
|
|
<a href=post.link>\post.title</a>
|
|
</div>
|
|
<div>
|
|
<span>\post.date</span> | <span><a href="/thread">\post.num_comments comments</a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
page("new", style, content)
|