- 扫描 ID：
- 12968037-350a-4f34-aa82-f728dc52620a已完成
- 提交的 URL：
- https://capable-mooncake-048a0b.netlify.app/
- 报告完成时间：
链接 · 找到 15 个
从页面中识别出的传出链接
| 链接 | 文本 |
|---|---|
| https://textual.textualize.io/ | See Docs |
| https://textual.textualize.io/getting_started/ | Get Started |
| https://github.com/textualize/textual-web | Textual-web |
| https://github.com/charles-001/dolphie | See in GitHub |
| https://github.com/darrenburns/elia | See in GitHub |
| https://github.com/tconbeer/harlequin | See in GitHub |
| https://twitter.com/bbonfils/status/1701338377927249951 | asyd@asyd |
| https://twitter.com/hashtag/textualize?src=hashtag_click | #textualize |
| https://twitter.com/rikashore/status/1700828055361515622 | rikasho.re@rikashore |
| https://twitter.com/robertclo4/status/1703197309407015324 | Robert@robertclo4 |
JavaScript 变量 · 找到 13 个
在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量，可以从当前范围内的代码中的任何位置访问
| 名称 | 类型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| addClassOnIntersection | function |
| observeSections | function |
| openModal | function |
| closeModal | function |
| copyToClipboard | function |
| handleHeaderClass | function |
| debounce | function |
控制台日志消息 · 找到 0 条
记录到 Web 控制台的消息
HTML
页面的原始 HTML 正文
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Eleventy v2.0.1">
<meta name="theme-color" content="#0b171d">
<meta property="og:image" content="/static/img/private/Textualize_OpenGraph_1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Textualize Logo">
<meta name="robots" content="index, follow">
<title>Textualize - Home</title>
<link rel="preload" as="font" href="/static/fonts/BerkeleyMono/BerkeleyMono-Regular.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/static/fonts/BerkeleyMono/BerkeleyMono-Bold.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/static/fonts/iAWriter/iAWriterQuattroS-Regular.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="/static/fonts/iAWriter/iAWriterQuattroS-Bold.woff2" type="font/woff2" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,[email protected],400;8..144,700&display=swap" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="/static/img/private/favicon-dark-theme.svg" media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/svg+xml" href="/static/img/private/favicon-light-theme.svg" media="(prefers-color-scheme: light)">
<link href="/stylesheet.css" rel="stylesheet">
<link href="/static/css/prism-okaidia.min.css" rel="stylesheet">
<script src="https://cdn.usefathom.com/script.js" data-site="LNGRGGWS" defer=""></script>
<script async="" defer="" src="/static/js/github-buttons.min.js"></script>
<script defer="">
const observeSectionsThreshold = 0
const modalActiveClass = 'modal--active'
const modalFadeClass = 'modal--fade-in'
const tooltipActiveClass = 'code-snippet__icon-container--active'
const headerScrolledClass = 'header--has-border'
const headerButtonOpenedClass = 'header-button--opened'
const headerOpenedClass = 'header__modal--open'
const debounceDelay = 10
function addClassOnIntersection(entry, observer) {
if (entry.isIntersecting) {
entry.target.classList.add('observed--in-view')
observer.unobserve(entry.target)
}
}
function observeSections(sections) {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
addClassOnIntersection(entry, observer)
})
},
{ threshold: observeSectionsThreshold, rootMargin: "50px", },
)
sections.forEach((section) => {
observer.observe(section)
})
}
function openModal(modalId) {
const modal = document.getElementById(modalId)
modal.classList.add(modalActiveClass)
setTimeout(() => {
modal.classList.add(modalFadeClass)
}, 0)
}
function closeModal(modal) {
modal.classList.remove(modalFadeClass)
setTimeout(() => {
modal.classList.remove(modalActiveClass)
}, 320)
}
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text)
} catch (err) {
console.error('Failed to copy text: ', err)
}
}
function handleHeaderClass(header) {
header.classList.toggle(headerScrolledClass, window.scrollY > 0)
}
function debounce(func, delay) {
let timeoutId
return function (...args) {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}
function wrapLastWordWithSpan(className) {
const paragraphs = document.getElementsByClassName(className)
for (const paragraph of paragraphs) {
const words = paragraph.textContent.trim().split(' ')
if (words.length > 0) {
const lastWord = words.pop()
const restOfText = words.join(' ')
const spanElement = document.createElement('span')
spanElement.textContent = lastWord
spanElement.className = 'cursor-animation'
paragraph.innerHTML = restOfText + ' ' + spanElement.outerHTML
}
}
}
function toggleMenu(button, modal) {
const isOpened = button.classList.contains(headerButtonOpenedClass)
button.classList.toggle(headerButtonOpenedClass, !isOpened)
button.setAttribute('aria-expanded', !isOpened)
modal.classList.toggle(headerOpenedClass, !isOpened)
document.body.classList.toggle('overflow-hidden', !isOpened)
}
const navigationOnClickOption = (select) => {
if (!select) return
select.addEventListener("change", (event) => window.location.pathname = event.target.value );
}
document.addEventListener('DOMContentLoaded', function () {
const yearDate = document.getElementById('footerYear')
const header = document.getElementById('header')
const sectionsToObserve = document.querySelectorAll('.observed')
const openModalButtons = document.querySelectorAll('.open-modal')
const closeModalButtons = document.querySelectorAll('.close-modal')
const modals = document.querySelectorAll('.modal')
const codeBlocks = document.querySelectorAll('.code-snippet')
const headerButton = document.getElementById('headerButton')
const headerModal = document.getElementById('headerModal')
const filterButtons = document.querySelectorAll('[data-filter]')
const blogFiltersSelect = document.querySelector('#blog-filters-select')
wrapLastWordWithSpan('cursor-animation-paragraph')
yearDate.innerHTML = new Date().getFullYear()
observeSections(sectionsToObserve)
filterButtons.forEach((button) => {
button.addEventListener('click', function () {
const selectedFilter = this.getAttribute('data-filter')
filterCards(selectedFilter)
})
})
navigationOnClickOption(blogFiltersSelect)
openModalButtons.forEach((btn) => {
btn.addEventListener('click', () => {
const modalId = btn.getAttribute('data-modal')
openModal(modalId)
})
})
closeModalButtons.forEach((btn) => {
btn.addEventListener('click', () => {
const modal = btn.closest('.modal')
closeModal(modal)
})
})
window.addEventListener('click', (event) => {
modals.forEach((modal) => {
if (event.target === modal) {
closeModal(modal)
}
})
})
headerButton.addEventListener('click', function () {
toggleMenu(headerButton, headerModal)
})
codeBlocks.forEach((codeBlock) => {
const copyButton = codeBlock.querySelector('.code-snippet__copy-button')
const codeElement = codeBlock.querySelector('.code-snippet__code')
const tooltipContainer = codeBlock.querySelector(
'.code-snippet__icon-container',
)
copyButton.addEventListener('click', function () {
const codeText = codeElement.innerText
copyToClipboard(codeText)
tooltipContainer.classList.add(tooltipActiveClass)
setTimeout(() => {
tooltipContainer.classList.remove(tooltipActiveClass)
}, 1600)
})
})
const debouncedScrollHandler = debounce(function () {
handleHeaderClass(header)
}, debounceDelay)
window.addEventListener('scroll', debouncedScrollHandler)
})
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<!-- Logos -->
<symbol id="textualize-logo" fill="currentColor" viewBox="0 0 244 64">
<title>Texualize Logo</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.4619 0H82.8645L76.9229 13.3685L66.0676 19.4747H58.6943L40.7994 55.9037L30.0043 64H18.2411L20.8223 25.2823H5.76508L0 12.3109L8.67098 5.80765H37.1372L47.4619 0ZM36.1175 7.85936L35.254 11.6153H4.34696L9.35488 7.85936H36.1175ZM2.84794 13.667H34.7824L23.6832 61.9483H20.4342L23.0153 23.2306H7.09843L2.84794 13.667ZM25.7884 61.9483L38.2227 7.85936H69.3827L65.1322 17.423H47.0398L28.9716 61.9483H25.7884ZM70.6925 5.80765H41.3221L47.9993 2.05171H77.3697L70.6925 5.80765ZM186.697 52.645V55.4082H202.534V52.645H196.3V36.8749H187.539V39.638H193.268V52.645H186.697ZM192.695 32.966C193.122 33.3479 193.706 33.5389 194.447 33.5389C195.188 33.5389 195.773 33.3479 196.199 32.966C196.626 32.5842 196.84 32.0675 196.84 31.416C196.84 30.7421 196.626 30.2141 196.199 29.8322C195.773 29.4279 195.188 29.2257 194.447 29.2257C193.706 29.2257 193.122 29.4279 192.695 29.8322C192.268 30.2141 192.055 30.7421 192.055 31.416C192.055 32.0675 192.268 32.5842 192.695 32.966ZM175.253 55.4082C174.175 55.4082 173.231 55.1948 172.423 54.7679C171.614 54.3411 170.985 53.7346 170.535 52.9483C170.086 52.162 169.862 51.241 169.862 50.1852V33.5726H163.628V30.8094H172.894V50.1852C172.894 50.949 173.108 51.5555 173.535 52.0048C173.961 52.4316 174.534 52.645 175.253 52.645H181.15V55.4082H175.253ZM107.36 54.1277C108.258 54.9813 109.505 55.4082 111.1 55.4082H116.154V52.645H111.1C109.752 52.645 109.078 51.9374 109.078 50.5221V39.638H116.491V36.8749H109.078V31.6519H106.045V36.8749H100.822V39.638H106.045V50.5221C106.045 52.0722 106.483 53.274 107.36 54.1277ZM66.6464 55.7451C65.1862 55.7451 63.9057 55.4531 62.8049 54.869C61.7266 54.2849 60.8842 53.465 60.2777 52.4091C59.6936 51.3308 59.4016 50.0841 59.4016 48.6688V43.6143C59.4016 42.1765 59.6936 40.9297 60.2777 39.8739C60.8842 38.8181 61.7266 37.9981 62.8049 37.414C63.9057 36.83 65.1862 36.5379 66.6464 36.5379C68.1066 36.5379 69.3758 36.83 70.4541 37.414C71.5549 37.9981 72.3973 38.8181 72.9814 39.8739C73.588 40.9297 73.8912 42.1765 73.8912 43.6143V46.8829H62.3669V48.6688C62.3669 50.129 62.7375 51.2522 63.4789 52.0385C64.2202 52.8023 65.276 53.1842 66.6464 53.1842C67.8145 53.1842 68.7581 52.982 69.4769 52.5776C70.1958 52.1508 70.6339 51.5218 70.7911 50.6906H73.8238C73.6216 52.2407 72.8578 53.4762 71.5324 54.3973C70.2295 55.2958 68.6008 55.7451 66.6464 55.7451ZM70.9259 43.6143V44.5915H62.3669V43.6143C62.3669 42.1541 62.7375 41.0308 63.4789 40.2446C64.2202 39.4583 65.276 39.0652 66.6464 39.0652C68.0392 39.0652 69.095 39.4583 69.8139 40.2446C70.5552 41.0308 70.9259 42.1541 70.9259 43.6143ZM79.438 55.4082L86.0089 45.872L79.8424 36.8749H83.4143L87.0872 42.6034C87.2445 42.8505 87.3905 43.12 87.5253 43.4121C87.6825 43.7041 87.8061 43.94 87.896 44.1197C87.9634 43.94 88.0644 43.7041 88.1992 43.4121C88.3565 43.12 88.5137 42.8505 88.671 42.6034L92.3776 36.8749H95.9158L89.7493 45.9057L96.2865 55.4082H92.7146L88.7384 49.3427C88.5811 49.0956 88.4239 48.8148 88.2666 48.5003C88.1318 48.1633 88.0083 47.8938 87.896 47.6916C87.8061 47.8938 87.6713 48.1633 87.4916 48.5003C87.3344 48.8148 87.1659 49.0956 86.9861 49.3427L82.9762 55.4082H79.438ZM130.26 55.7451C128.126 55.7451 126.419 55.1161 125.138 53.8581C123.858 52.5776 123.218 50.8479 123.218 48.6688V36.8749H126.25V48.6688C126.25 50.0616 126.61 51.1511 127.329 51.9374C128.048 52.7012 129.025 53.0831 130.26 53.0831C131.518 53.0831 132.507 52.7012 133.226 51.9374C133.967 51.1511 134.338 50.0616 134.338 48.6688V36.8749H137.37V48.6688C137.37 50.8479 136.719 52.5776 135.416 53.8581C134.113 55.1161 132.394 55.7451 130.26 55.7451ZM145.276 54.2625C146.399 55.2509 147.938 55.7451 149.892 55.7451C151.622 55.7451 153.004 55.352 154.037 54.5658C154.957 53.8805 155.477 52.9819 155.595 51.87H155.621V55.4082H158.586V42.6707C158.586 40.7837 157.968 39.2898 156.733 38.1891C155.497 37.0883 153.813 36.5379 151.678 36.5379C149.724 36.5379 148.095 37.0097 146.792 37.9532C145.489 38.8967 144.737 40.166 144.535 41.7609H147.567C147.68 40.9747 148.107 40.3569 148.848 39.9076C149.589 39.4358 150.51 39.2 151.611 39.2C152.869 39.2 153.835 39.5145 154.509 40.1435C155.205 40.75 155.554 41.6261 155.554 42.7718V44.6252H149.825C147.916 44.6252 146.399 45.1194 145.276 46.1078C144.153 47.0963 143.591 48.4554 143.591 50.1852C143.591 51.8925 144.153 53.2516 145.276 54.2625ZM154.172 52.2744C153.251 52.9932 152.072 53.3527 150.634 53.3527C149.376 53.3527 148.387 53.0606 147.668 52.4765C146.972 51.87 146.624 51.05 146.624 50.0167C146.624 49.0507 146.916 48.2869 147.5 47.7253C148.084 47.1637 148.882 46.8829 149.892 46.8829H155.554V49.5112C155.554 50.6344 155.093 51.5555 154.172 52.2744ZM208.081 55.4082V52.3755L218.46 39.638H208.351V36.8749H221.863V39.9076L211.282 52.645H222.234V55.4082H208.081ZM232.532 54.869C233.633 55.4531 234.913 55.7451 236.373 55.7451C238.328 55.7451 239.956 55.2958 241.259 54.3973C242.585 53.4762 243.349 52.2407 243.551 50.6906H240.518C240.361 51.5218 239.923 52.1508 239.204 52.5776C238.485 52.982 237.542 53.1842 236.373 53.1842C235.003 53.1842 233.947 52.8023 233.206 52.0385C232.465 51.2522 232.094 50.129 232.094 48.6688V46.8829H243.618V43.6143C243.618 42.1765 243.315 40.9297 242.708 39.8739C242.124 38.8181 241.282 37.9981 240.181 37.414C239.103 36.83 237.834 36.5379 236.373 36.5379C234.913 36.5379 233.633 36.83 232.532 37.414C231.454 37.9981 230.611 38.8181 230.005 39.8739C229.421 40.9297 229.129 42.1765 229.129 43.6143V48.6688C229.129 50.0841 229.421 51.3308 230.005 52.4091C230.611 53.465 231.454 54.2849 232.532 54.869ZM240.653 44.5915V43.6143C240.653 42.1541 240.282 41.0308 239.541 40.2446C238.822 39.4583 237.766 39.0652 236.373 39.0652C235.003 39.0652 233.947 39.4583 233.206 40.2446C232.465 41.0308 232.094 42.1541 232.094 43.6143V44.5915H240.653Z"></path>
</symbol>
<!-- Arrows & Carets -->
<symbol id="arrow-left" fill="currentColor" viewBox="0 0 256 256">
<title>Arrow left icon</title>
<path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
</symbol>
<symbol id="arrow-up-right" fill="currentColor" viewBox="0 0 256 256">
<title>Arrow up-right icon</title>
<path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path>
</symbol>
<symbol id="arrow-right" fill="currentColor" viewBox="0 0 256 256">
<title>Arrow right icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.243 51.7574C145.899 49.4142 142.101 49.4142 139.757 51.7574C137.414 54.1005 137.414 57.8995 139.757 60.2426L201.515 122H40C36.6863 122 34 124.686 34 128C34 131.314 36.6863 134 40 134H201.515L139.757 195.757C137.414 198.101 137.414 201.899 139.757 204.243C142.101 206.586 145.899 206.586 148.243 204.243L220.243 132.243C221.387 131.099 221.972 129.607 221.999 128.108C222 128.072 222 128.036 222 128C222 127.187 221.838 126.412 221.546 125.705C221.253 124.997 220.818 124.333 220.243 123.757L148.243 51.7574Z"></path>
</symbol>
<symbol id="caret-right" fill="currentColor" viewBox="0 0 256 256">
<title>Caret right icon</title>
<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
</symbol>
<symbol id="caret-left" fill="currentColor" viewBox="0 0 256 256">
<title>Caret left icon</title>
<path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
</symbol>
<!-- Devices -->
<symbol id="desktop-tower" fill="currentColor" viewBox="0 0 256 256">
<title>Desktop tower icon</title>
<path d="M24,96v72a8,8,0,0,0,8,8h80a8,8,0,0,1,0,16H96v16h16a8,8,0,0,1,0,16H64a8,8,0,0,1,0-16H80V192H32A24,24,0,0,1,8,168V96A24,24,0,0,1,32,72h80a8,8,0,0,1,0,16H32A8,8,0,0,0,24,96ZM208,64H176a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Zm0,32H176a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Zm40-48V208a16,16,0,0,1-16,16H152a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h80A16,16,0,0,1,248,48ZM232,208V48H152V208h80Zm-40-40a12,12,0,1,0,12,12A12,12,0,0,0,192,168Z"></path>
</symbol>
<symbol id="desktop" fill="currentColor" viewBox="0 0 256 256">
<title>Desktop icon</title>
<path d="M208,40H48A24,24,0,0,0,24,64V176a24,24,0,0,0,24,24h72v16H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16H136V200h72a24,24,0,0,0,24-24V64A24,24,0,0,0,208,40ZM48,56H208a8,8,0,0,1,8,8v80H40V64A8,8,0,0,1,48,56ZM208,184H48a8,8,0,0,1-8-8V160H216v16A8,8,0,0,1,208,184Z"></path>
</symbol>
<!-- Social Media -->
<symbol id="youtube-logo" fill="currentColor" viewBox="0 0 256 256">
<title>Youtube icon</title>
<path d="M164.44,121.34l-48-32A8,8,0,0,0,104,96v64a8,8,0,0,0,12.44,6.66l48-32a8,8,0,0,0,0-13.32ZM120,145.05V111l25.58,17ZM234.33,69.52a24,24,0,0,0-14.49-16.4C185.56,39.88,131,40,128,40s-57.56-.12-91.84,13.12a24,24,0,0,0-14.49,16.4C19.08,79.5,16,97.74,16,128s3.08,48.5,5.67,58.48a24,24,0,0,0,14.49,16.41C69,215.56,120.4,216,127.34,216h1.32c6.94,0,58.37-.44,91.18-13.11a24,24,0,0,0,14.49-16.41c2.59-10,5.67-28.22,5.67-58.48S236.92,79.5,234.33,69.52Zm-15.49,113a8,8,0,0,1-4.77,5.49c-31.65,12.22-85.48,12-86,12H128c-.54,0-54.33.2-86-12a8,8,0,0,1-4.77-5.49C34.8,173.39,32,156.57,32,128s2.8-45.39,5.16-54.47A8,8,0,0,1,41.93,68c30.52-11.79,81.66-12,85.85-12h.27c.54,0,54.38-.18,86,12a8,8,0,0,1,4.77,5.49C221.2,82.61,224,99.43,224,128S221.2,173.39,218.84,182.47Z"></path>
</symbol>
<symbol id="discord-logo" fill="currentColor" viewBox="0 0 256 256">
<title>Discord logo icon</title>
<path d="M104,140a12,12,0,1,1-12-12A12,12,0,0,1,104,140Zm60-12a12,12,0,1,0,12,12A12,12,0,0,0,164,128Zm74.45,64.9-67,29.71a16.17,16.17,0,0,1-21.71-9.1l-8.11-22q-6.72.45-13.63.46t-13.63-.46l-8.11,22a16.18,16.18,0,0,1-21.71,9.1l-67-29.71a15.93,15.93,0,0,1-9.06-18.51L38,58A16.07,16.07,0,0,1,51,46.14l36.06-5.93a16.22,16.22,0,0,1,18.26,11.88l3.26,12.84Q118.11,64,128,64t19.4.93l3.26-12.84a16.21,16.21,0,0,1,18.26-11.88L205,46.14A16.07,16.07,0,0,1,218,58l29.53,116.38A15.93,15.93,0,0,1,238.45,192.9ZM232,178.28,202.47,62s0,0-.08,0L166.33,56a.17.17,0,0,0-.17,0l-2.83,11.14c5,.94,10,2.06,14.83,3.42A8,8,0,0,1,176,86.31a8.09,8.09,0,0,1-2.16-.3A172.25,172.25,0,0,0,128,80a172.25,172.25,0,0,0-45.84,6,8,8,0,1,1-4.32-15.4c4.82-1.36,9.78-2.48,14.82-3.42L89.83,56s0,0-.12,0h0L53.61,61.93a.17.17,0,0,0-.09,0L24,178.33,91,208a.23.23,0,0,0,.22,0L98,189.72a173.2,173.2,0,0,1-20.14-4.32A8,8,0,0,1,82.16,170,171.85,171.85,0,0,0,128,176a171.85,171.85,0,0,0,45.84-6,8,8,0,0,1,4.32,15.41A173.2,173.2,0,0,1,158,189.72L164.75,208a.22.22,0,0,0,.21,0Z"></path>
</symbol>
<symbol id="github-logo" fill="currentColor" viewBox="0 0 256 256">
<title>Github logo icon</title>
<path d="M208.31,75.68A59.78,59.78,0,0,0,202.93,28,8,8,0,0,0,196,24a59.75,59.75,0,0,0-48,24H124A59.75,59.75,0,0,0,76,24a8,8,0,0,0-6.93,4,59.78,59.78,0,0,0-5.38,47.68A58.14,58.14,0,0,0,56,104v8a56.06,56.06,0,0,0,48.44,55.47A39.8,39.8,0,0,0,96,192v8H72a24,24,0,0,1-24-24A40,40,0,0,0,8,136a8,8,0,0,0,0,16,24,24,0,0,1,24,24,40,40,0,0,0,40,40H96v16a8,8,0,0,0,16,0V192a24,24,0,0,1,48,0v40a8,8,0,0,0,16,0V192a39.8,39.8,0,0,0-8.44-24.53A56.06,56.06,0,0,0,216,112v-8A58.14,58.14,0,0,0,208.31,75.68ZM200,112a40,40,0,0,1-40,40H112a40,40,0,0,1-40-40v-8a41.74,41.74,0,0,1,6.9-22.48A8,8,0,0,0,80,73.83a43.81,43.81,0,0,1,.79-33.58,43.88,43.88,0,0,1,32.32,20.06A8,8,0,0,0,119.82,64h32.35a8,8,0,0,0,6.74-3.69,43.87,43.87,0,0,1,32.32-20.06A43.81,43.81,0,0,1,192,73.83a8.09,8.09,0,0,0,1,7.65A41.72,41.72,0,0,1,200,104Z"></path>
</symbol>
<symbol id="twitter-logo" fill="currentColor" viewBox="0 0 32 32">
<title>Twitter logo icon</title>
<path d="M18.7143 13.972L27.293 4H25.2601L17.8113 12.6585L11.8619 4H5L13.9966 17.0932L5 27.5504H7.03298L14.8992 18.4067L21.1821 27.5504H28.044L18.7138 13.972H18.7143ZM15.9299 17.2086L15.0183 15.9048L7.76549 5.5304H10.888L16.7412 13.9029L17.6527 15.2067L25.2611 26.0896H22.1385L15.9299 17.2091V17.2086Z" stroke-width="0.3"></path>
</symbol>
<symbol id="mastodon-logo" fill="currentColor" viewBox="0 0 256 256">
<title>Mastodon logo icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.3416 234.063C92.7253 237.955 106.81 239.906 120.335 239.906C122.984 239.905 125.633 239.833 128.278 239.691C152.873 238.31 166.874 230.777 167.453 230.46C168.218 230.04 168.85 229.415 169.277 228.654C169.705 227.894 169.91 227.029 169.871 226.157L169.068 208.469C169.032 207.754 168.834 207.056 168.486 206.43C168.139 205.804 167.653 205.265 167.066 204.856C166.478 204.447 165.804 204.178 165.096 204.069C164.389 203.961 163.665 204.017 162.982 204.231C162.814 204.287 146.433 209.524 128.4 208.842C107.977 208.124 93.332 206.126 90.8398 187.029L90.8305 186.936C126.365 194.589 156.262 190.651 167.911 189.101L170.179 188.812C197.695 185.452 222.897 168.109 226.36 150.141C230.928 126.409 230.68 93.2992 230.663 91.1101L230.663 91.0382C230.663 42.0348 199.394 27.1751 198.106 26.5871C167.995 12.4741 88.0769 12.4741 57.9655 26.5684C56.6308 27.1751 25.3619 42.0348 25.3619 91.0382L25.3432 99.7935L25.3432 99.7959C25.1939 153.186 25.008 219.633 78.3416 234.063ZM61.8858 35.0437C75.8028 28.5285 101.91 25.271 128.017 25.271C154.143 25.271 180.259 28.5285 194.167 35.0343C195.278 35.557 221.338 48.2793 221.338 91.0756C221.348 91.4116 221.656 125.238 217.203 148.358C214.851 160.623 194.494 176.435 169.059 179.534L166.706 179.832C154.871 181.401 123.443 185.536 86.9382 176.426C86.2496 176.254 85.5309 176.241 84.8368 176.389C84.1426 176.537 83.4914 176.841 82.9325 177.279C82.3736 177.716 81.9218 178.275 81.6115 178.913C81.3012 179.552 81.1406 180.252 81.1418 180.962C81.1318 183.39 81.2846 185.816 81.5992 188.224C85.2953 216.635 111.036 217.551 128.09 218.158L128.092 218.158C141.15 218.559 153.191 216.328 160.014 214.686L160.406 223.432C155.618 225.457 144.296 229.424 127.737 230.357C112.84 231.253 97.0189 229.443 80.7778 225.056C34.3679 212.494 34.5372 152.654 34.6865 99.849L34.6866 99.8215L34.6959 91.0382C34.6959 48.2979 60.7564 35.5757 61.8858 35.0437ZM168.925 155.703H190.804C191.416 155.704 192.023 155.584 192.589 155.35C193.154 155.115 193.668 154.771 194.1 154.337C194.532 153.904 194.874 153.388 195.106 152.822C195.339 152.255 195.456 151.648 195.452 151.036C195.459 142.168 195.506 133.301 195.592 124.434C195.919 87.4526 196.012 76.2892 185.661 64.099C178.474 55.9131 166.946 51.4048 155.484 52.2542C150.23 52.6073 145.132 54.1943 140.606 56.8865C136.08 59.5786 132.252 63.3 129.433 67.7486L128.024 70.1754L126.521 67.5992C120.837 58.6666 111.363 53.0755 100.526 52.2448C89.1477 51.3861 77.5735 55.9131 70.3864 64.099L70.349 64.155C60.0723 76.2145 60.1563 87.4339 60.4643 124.621C60.5297 132.209 60.6044 140.927 60.6044 151.026C60.6044 152.264 61.0961 153.451 61.9713 154.326C62.8465 155.202 64.0336 155.693 65.2713 155.693H87.1782C88.416 155.693 89.603 155.202 90.4783 154.326C91.3535 153.451 91.8452 152.264 91.8452 151.026V96.3106C91.8452 82.2256 103.466 80.4148 108.721 86.6872C111.204 89.6461 112.52 94.1171 112.52 99.6148V129.568C112.52 130.805 113.012 131.992 113.887 132.868C114.762 133.743 115.949 134.235 117.187 134.235H138.907C140.145 134.235 141.332 133.743 142.207 132.868C143.082 131.992 143.574 130.805 143.574 129.568V99.6148C143.574 94.1171 144.89 89.6368 147.373 86.6872C152.637 80.4054 164.258 82.2162 164.258 96.3106V151.036C164.258 152.273 164.75 153.461 165.625 154.336C166.5 155.211 167.687 155.703 168.925 155.703ZM186.137 146.369H173.592L173.602 96.3199C173.602 81.5722 163.969 73.853 154.448 73.853C151.723 73.8822 149.038 74.5092 146.581 75.6898C144.125 76.8704 141.958 78.5757 140.233 80.6855C136.322 85.3525 134.249 91.8956 134.249 99.6148V124.891H121.863V99.6055C121.863 91.8862 119.791 85.3431 115.88 80.6761C112.231 76.3358 107.05 73.8437 101.665 73.8437C92.1439 73.8437 82.5112 81.5629 82.5112 96.3106V146.369H69.9383C69.9197 138.192 69.8637 130.968 69.8077 124.555C69.509 89.1794 69.4343 79.6401 77.4335 70.2314C82.7072 64.239 91.2758 60.9348 99.8164 61.5601C107.816 62.1668 114.508 66.0965 118.559 72.4622L124.001 81.8055C124.415 82.506 125.005 83.0863 125.712 83.4894C126.419 83.8926 127.219 84.1046 128.033 84.1046C128.847 84.1046 129.647 83.8926 130.354 83.4894C131.061 83.0863 131.651 82.506 132.065 81.8055L137.414 72.6209C141.558 66.0965 148.241 62.1762 156.212 61.5695C164.818 60.9254 173.368 64.239 178.605 70.2034C186.656 79.6918 186.576 89.1522 186.278 124.311L186.277 124.359L186.271 125.102C186.216 131.375 186.155 138.414 186.137 146.369Z"></path>
</symbol>
<symbol id="linkedin-logo" fill="currentColor" viewBox="0 0 256 256">
<title>Linkedin logo icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 38C38.8954 38 38 38.8954 38 40V216C38 217.105 38.8954 218 40 218H216C217.105 218 218 217.105 218 216V40C218 38.8954 217.105 38 216 38H40ZM26 40C26 32.268 32.268 26 40 26H216C223.732 26 230 32.268 230 40V216C230 223.732 223.732 230 216 230H40C32.268 230 26 223.732 26 216V40ZM120 106C123.314 106 126 108.686 126 112V114.077C132.121 108.882 139.912 106 148 106C157.017 106 165.665 109.582 172.042 115.958C178.418 122.335 182 130.983 182 140V176C182 179.314 179.314 182 176 182C172.686 182 170 179.314 170 176V140C170 134.165 167.682 128.569 163.556 124.444C159.431 120.318 153.835 118 148 118C142.165 118 136.569 120.318 132.444 124.444C128.318 128.569 126 134.165 126 140V176C126 179.314 123.314 182 120 182C116.686 182 114 179.314 114 176V140V112C114 108.686 116.686 106 120 106ZM94 112C94 108.686 91.3137 106 88 106C84.6863 106 82 108.686 82 112V176C82 179.314 84.6863 182 88 182C91.3137 182 94 179.314 94 176V112ZM98 84C98 89.5229 93.5229 94 88 94C82.4771 94 78 89.5229 78 84C78 78.4771 82.4771 74 88 74C93.5229 74 98 78.4771 98 84Z"></path>
</symbol>
<!-- Other -->
<symbol id="copy-simple" fill="currentColor" viewBox="0 0 256 256">
<title>Copy icon</title>
<path d="M184,64H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H184a8,8,0,0,0,8-8V72A8,8,0,0,0,184,64Zm-8,144H48V80H176ZM224,40V184a8,8,0,0,1-16,0V48H72a8,8,0,0,1,0-16H216A8,8,0,0,1,224,40Z"></path>
</symbol>
<symbol id="info" fill="currentColor" viewBox="0 0 256 256">
<title>Info icon</title>
<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path>
</symbol>
<symbol id="wrench" fill="currentColor" viewBox="0 0 256 256">
<title>Wrench icon</title>
<path d="M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z"></path>
</symbol>
<symbol id="chart-line" fill="currentColor" viewBox="0 0 256 256">
<title>Chart line icon</title>
<path d="M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z"></path>
</symbol>
<symbol id="gear" fill="currentColor" viewBox="0 0 256 256">
<title>Gear icon</title>
<path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"></path>
</symbol>
<symbol id="puzzle" fill="currentColor" viewBox="0 0 256 256">
<title>Puzzle icon</title>
<path d="M220.27,158.54a8,8,0,0,0-7.7-.46,20,20,0,1,1,0-36.16A8,8,0,0,0,224,114.69V72a16,16,0,0,0-16-16H171.78a35.36,35.36,0,0,0,.22-4,36.11,36.11,0,0,0-11.36-26.24,36,36,0,0,0-60.55,23.62,36.56,36.56,0,0,0,.14,6.62H64A16,16,0,0,0,48,72v32.22a35.36,35.36,0,0,0-4-.22,36.12,36.12,0,0,0-26.24,11.36,35.7,35.7,0,0,0-9.69,27,36.08,36.08,0,0,0,33.31,33.6,35.68,35.68,0,0,0,6.62-.14V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V165.31A8,8,0,0,0,220.27,158.54ZM208,208H64V165.31a8,8,0,0,0-11.43-7.23,20,20,0,1,1,0-36.16A8,8,0,0,0,64,114.69V72h46.69a8,8,0,0,0,7.23-11.43,20,20,0,1,1,36.16,0A8,8,0,0,0,161.31,72H208v32.23a35.68,35.68,0,0,0-6.62-.14A36,36,0,0,0,204,176a35.36,35.36,0,0,0,4-.22Z"></path>
</symbol>
<symbol id="play" fill="currentColor" viewBox="0 0 256 256">
<title>Play icon</title>
<path d="M232.4,114.49,88.32,26.35a16,16,0,0,0-16.2-.3A15.86,15.86,0,0,0,64,39.87V216.13A15.94,15.94,0,0,0,80,232a16.07,16.07,0,0,0,8.36-2.35L232.4,141.51a15.81,15.81,0,0,0,0-27ZM80,215.94V40l143.83,88Z"></path>
</symbol>
<symbol id="check" fill="currentColor" viewBox="0 0 256 256">
<title>Check icon</title>
<path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
</symbol>
<symbol id="close" fill="currentColor" viewBox="0 0 256 256">
<title>Close icon</title>
<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
</symbol>
<symbol id="heart" fill="currentColor" viewBox="0 0 256 256">
<title>Heart icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M154.26 26.5947C162.674 23.1083 171.692 21.3139 180.8 21.3139C189.908 21.3139 198.926 23.1083 207.34 26.5947C215.753 30.0804 223.396 35.1891 229.834 41.6291C236.274 48.067 241.386 55.7139 244.872 64.1264C248.358 72.5404 250.153 81.5589 250.153 90.6667C250.153 99.7744 248.358 108.793 244.872 117.207C241.386 125.62 236.277 133.264 229.836 139.702C229.835 139.703 229.837 139.702 229.836 139.702L135.543 233.996C131.377 238.161 124.623 238.161 120.458 233.996L26.1643 139.702C13.1592 126.697 5.85303 109.059 5.85303 90.6667C5.85303 72.2747 13.1592 54.636 26.1643 41.6309C39.1694 28.6258 56.8081 21.3196 75.2001 21.3196C93.5921 21.3196 111.231 28.6258 124.236 41.6309L128 45.3951L131.763 41.6326C131.763 41.632 131.762 41.6332 131.763 41.6326C138.201 35.1918 145.847 30.0807 154.26 26.5947ZM180.8 42.6472C174.495 42.6472 168.251 43.8895 162.426 46.3031C156.601 48.7168 151.309 52.2544 146.851 56.714L135.543 68.0225C131.377 72.1881 124.623 72.1881 120.458 68.0225L109.151 56.7158C100.147 47.7115 87.9342 42.6529 75.2001 42.6529C62.4661 42.6529 50.2536 47.7115 41.2493 56.7158C32.2449 65.7201 27.1864 77.9326 27.1864 90.6667C27.1864 103.401 32.2449 115.613 41.2493 124.618L128 211.368L214.751 124.618C219.211 120.16 222.75 114.866 225.164 109.041C227.577 103.216 228.82 96.972 228.82 90.6667C228.82 84.3613 227.577 78.1178 225.164 72.2927C222.75 66.4676 219.212 61.1751 214.753 56.7176C210.295 52.258 204.999 48.7168 199.174 46.3031C193.349 43.8895 187.105 42.6472 180.8 42.6472Z" fill-opacity="0.6"></path>
</symbol>
<symbol id="envelope" fill="currentColor" viewBox="0 0 256 256">
<title>Envelope icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.5771 51.9457C29.8163 49.503 33.6117 49.338 36.0544 51.5771L128 135.861L219.946 51.5771C222.388 49.338 226.184 49.503 228.423 51.9457C230.662 54.3884 230.497 58.1838 228.054 60.423L132.054 148.423C129.76 150.526 126.24 150.526 123.946 148.423L27.9457 60.423C25.503 58.1838 25.338 54.3884 27.5771 51.9457Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 56C26 52.6863 28.6863 50 32 50H224C227.314 50 230 52.6863 230 56V192C230 195.713 228.525 199.274 225.9 201.9C223.274 204.525 219.713 206 216 206H40C36.287 206 32.726 204.525 30.1005 201.9C27.475 199.274 26 195.713 26 192V56ZM38 62V192C38 192.53 38.2107 193.039 38.5858 193.414C38.9609 193.789 39.4696 194 40 194H216C216.53 194 217.039 193.789 217.414 193.414C217.789 193.039 218 192.53 218 192V62H38Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M114.973 123.946C117.212 126.388 117.047 130.184 114.604 132.423L38.5241 202.163C36.0814 204.402 32.286 204.237 30.0468 201.794C27.8077 199.352 27.9727 195.556 30.4154 193.317L106.495 123.577C108.938 121.338 112.734 121.503 114.973 123.946Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M141.027 123.946C143.266 121.503 147.062 121.338 149.505 123.577L225.585 193.317C228.027 195.556 228.192 199.352 225.953 201.794C223.714 204.237 219.919 204.402 217.476 202.163L141.396 132.423C138.953 130.184 138.788 126.388 141.027 123.946Z"></path>
</symbol>
<symbol id="briefcase" fill="currentColor" viewBox="0 0 256 256">
<title>Briefcase icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M106 112C106 108.686 108.686 106 112 106H144C147.314 106 150 108.686 150 112C150 115.314 147.314 118 144 118H112C108.686 118 106 115.314 106 112Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M40 70C38.8954 70 38 70.8954 38 72V200C38 201.105 38.8954 202 40 202H216C217.105 202 218 201.105 218 200V72C218 70.8954 217.105 70 216 70H40ZM26 72C26 64.268 32.268 58 40 58H216C223.732 58 230 64.268 230 72V200C230 207.732 223.732 214 216 214H40C32.268 214 26 207.732 26 200V72Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.4437 32.4437C92.5695 28.3179 98.1652 26 104 26H152C157.835 26 163.431 28.3179 167.556 32.4437C171.682 36.5694 174 42.1652 174 48V64C174 67.3137 171.314 70 168 70C164.686 70 162 67.3137 162 64V48C162 45.3478 160.946 42.8043 159.071 40.9289C157.196 39.0536 154.652 38 152 38H104C101.348 38 98.8043 39.0536 96.9289 40.9289C95.0536 42.8043 94 45.3478 94 48V64C94 67.3137 91.3137 70 88 70C84.6863 70 82 67.3137 82 64V48C82 42.1652 84.3179 36.5694 88.4437 32.4437Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M229.193 115.305C230.853 118.173 229.873 121.844 227.005 123.503C196.917 140.912 162.761 150.053 128 150C93.241 150.054 59.0854 140.916 28.9961 123.514C26.1276 121.855 25.1471 118.185 26.8061 115.316C28.4652 112.448 32.1354 111.467 35.004 113.126C63.2643 129.471 95.344 138.052 127.99 138H128.009C160.657 138.052 192.737 129.467 220.995 113.117C223.863 111.457 227.534 112.437 229.193 115.305Z"></path>
</symbol>
<symbol id="globe" fill="currentColor" viewBox="0 0 256 256">
<title>Globe icon</title>
<path d="M128 26C107.826 26 88.1056 31.9822 71.3318 43.1901C54.558 54.398 41.4844 70.3282 33.7643 88.9663C26.0441 107.604 24.0242 128.113 27.9599 147.899C31.8956 167.685 41.6101 185.86 55.8751 200.125C70.1401 214.39 88.3147 224.104 108.101 228.04C127.887 231.976 148.396 229.956 167.034 222.236C185.672 214.516 201.602 201.442 212.81 184.668C224.018 167.894 230 148.174 230 128C229.968 100.958 219.212 75.032 200.09 55.9102C180.968 36.7884 155.042 26.0318 128 26ZM218 128C218.011 140.34 215.471 152.548 210.54 163.86L163.85 135.15C162.191 134.107 160.33 133.425 158.39 133.15L135.57 130.08C132.625 129.699 129.635 130.26 127.028 131.682C124.421 133.105 122.332 135.317 121.06 138H111.14C110.764 138 110.396 137.894 110.077 137.694C109.759 137.494 109.504 137.208 109.34 136.87L105.54 129.01C104.617 127.091 103.266 125.409 101.591 124.093C99.9167 122.778 97.9629 121.863 95.88 121.42L85.17 119.12L94.4 103C94.5762 102.695 94.8299 102.442 95.1355 102.266C95.441 102.09 95.7876 101.999 96.14 102H112.85C115.216 102.001 117.542 101.399 119.61 100.25L131.86 93.5C132.799 92.9711 133.678 92.3407 134.48 91.62L161.39 67.29C163.75 65.172 165.317 62.312 165.832 59.1827C166.346 56.0535 165.778 52.8423 164.22 50.08L161 44.25C177.797 50.8935 192.212 62.4294 202.375 77.3623C212.538 92.2952 217.982 109.937 218 128ZM144.6 39.54L153.75 55.93C153.97 56.3259 154.05 56.7848 153.975 57.2317C153.901 57.6786 153.677 58.087 153.34 58.39L126.43 82.72C126.318 82.8251 126.194 82.9158 126.06 82.99L113.81 89.75C113.504 89.9193 113.159 90.0055 112.81 90H96.14C93.6798 89.9973 91.2624 90.6428 89.1311 91.8717C86.9999 93.1006 85.2301 94.8694 84 97L73.18 115.91C73.1052 115.8 73.0415 115.683 72.99 115.56L61.5 84.89C61.3107 84.4148 61.3107 83.8852 61.5 83.41L72.68 57.06C82.7372 49.2018 94.3525 43.5751 106.753 40.5542C119.154 37.5334 132.055 37.1877 144.6 39.54ZM38 128C37.9846 112.676 41.903 97.6056 49.38 84.23C49.3818 85.8936 49.6832 87.5433 50.27 89.1L61.76 119.77C62.5773 121.971 63.937 123.929 65.7131 125.464C67.4892 126.999 69.6242 128.06 71.92 128.55L93.36 133.15C93.6579 133.215 93.937 133.346 94.1762 133.535C94.4154 133.724 94.6082 133.965 94.74 134.24L98.54 142.1C99.6926 144.462 101.484 146.455 103.711 147.851C105.938 149.247 108.512 149.992 111.14 150H115.7L107.21 169C106.096 171.501 105.74 174.275 106.186 176.976C106.632 179.678 107.861 182.19 109.72 184.2L109.82 184.31L129.5 204.57C129.701 204.799 129.847 205.072 129.927 205.367C130.007 205.661 130.018 205.97 129.96 206.27L127.7 218C103.891 217.894 81.0911 208.369 64.2833 191.505C47.4756 174.641 38.0262 151.81 38 128ZM140.08 217.19L141.75 208.59C142.161 206.433 142.061 204.21 141.458 202.098C140.856 199.987 139.767 198.046 138.28 196.43L138.18 196.32L118.5 176.06C118.245 175.773 118.079 175.418 118.02 175.039C117.962 174.659 118.014 174.271 118.17 173.92L131.87 143.19C132.044 142.784 132.347 142.448 132.733 142.233C133.118 142.017 133.563 141.936 134 142L156.82 145.08C157.096 145.115 157.362 145.207 157.6 145.35L205 174.55C198.04 186.045 188.598 195.84 177.366 203.217C166.134 210.595 153.394 215.369 140.08 217.19Z"></path>
</symbol>
<symbol id="branch" fill="currentColor" viewBox="0 0 256 256">
<title>Branch icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M54 64C54 54.0589 62.0589 46 72 46C81.9411 46 90 54.0589 90 64C90 73.9411 81.9411 82 72 82C62.0589 82 54 73.9411 54 64ZM78 93.3999C91.6934 90.6203 102 78.5137 102 64C102 47.4315 88.5685 34 72 34C55.4315 34 42 47.4315 42 64C42 78.5137 52.3066 90.6203 66 93.3999V152V162.6C52.3066 165.38 42 177.486 42 192C42 208.569 55.4315 222 72 222C88.5685 222 102 208.569 102 192C102 177.486 91.6934 165.38 78 162.6V152C78 147.226 79.8964 142.648 83.2721 139.272C86.6477 135.896 91.2261 134 96 134H168C175.956 134 183.587 130.839 189.213 125.213C194.839 119.587 198 111.956 198 104V93.3999C211.693 90.6203 222 78.5137 222 64C222 47.4315 208.569 34 192 34C175.431 34 162 47.4315 162 64C162 78.5137 172.307 90.6203 186 93.3999V104C186 108.774 184.104 113.352 180.728 116.728C177.352 120.104 172.774 122 168 122H96C89.4715 122 83.1624 124.128 78 128V93.3999ZM72 174C62.0589 174 54 182.059 54 192C54 201.941 62.0589 210 72 210C81.9411 210 90 201.941 90 192C90 182.059 81.9411 174 72 174ZM210 64C210 73.9411 201.941 82 192 82C182.059 82 174 73.9411 174 64C174 54.0589 182.059 46 192 46C201.941 46 210 54.0589 210 64Z"></path>
</symbol>
<symbol id="users" fill="currentColor" viewBox="0 0 256 256">
<title>Users icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M69.2655 62.5355C64.5033 61.5538 59.5613 61.927 55.0006 63.613C50.4399 65.2989 46.4434 68.2299 43.4649 72.0732C40.4863 75.9164 38.6452 80.5179 38.1505 85.3549C37.6559 90.192 38.5275 95.0709 40.6665 99.4375C42.8054 103.804 46.126 107.483 50.251 110.058C54.376 112.632 59.1402 113.998 64.0025 114L64.0049 114C64.1594 114 64.3126 114.006 64.4642 114.018C67.5631 114.255 70.0027 116.845 70.0004 120.005C69.9979 123.318 67.3096 126.003 63.9958 126C55.6129 125.994 47.344 127.942 39.8461 131.691C32.3481 135.44 25.8278 140.886 20.8031 147.596C18.8168 150.249 15.0564 150.789 12.404 148.803C9.7515 146.816 9.21142 143.056 11.1977 140.404C17.3409 132.2 25.3126 125.542 34.4795 120.958C36.5746 119.911 38.7189 118.978 40.9028 118.163C36.2554 114.602 32.48 110.004 29.8899 104.716C26.7638 98.3344 25.4898 91.2038 26.2128 84.1342C26.9358 77.0646 29.6267 70.3393 33.9799 64.7223C38.3331 59.1052 44.1742 54.8214 50.8398 52.3574C57.5054 49.8933 64.7284 49.3478 71.6885 50.7827C78.6486 52.2176 85.0668 55.5755 90.2144 60.475C95.3619 65.3745 99.0324 71.6192 100.809 78.5C101.637 81.7085 99.708 84.981 96.4995 85.8095C93.291 86.6379 90.0185 84.7085 89.19 81.5C87.9745 76.7921 85.4631 72.5194 81.9411 69.1671C78.4191 65.8148 74.0276 63.5173 69.2655 62.5355ZM186.734 62.5355C191.497 61.5538 196.439 61.927 200.999 63.613C205.56 65.2989 209.557 68.2299 212.535 72.0732C215.514 75.9164 217.355 80.5179 217.849 85.3549C218.344 90.192 217.472 95.0709 215.334 99.4375C213.195 103.804 209.874 107.483 205.749 110.058C201.624 112.632 196.86 113.998 191.997 114C191.972 114 191.946 114 191.92 114.001C191.533 114.006 191.154 114.047 190.788 114.123C188.054 114.683 185.998 117.104 186 120.005C186.002 122.904 188.06 125.321 190.794 125.879C191.185 125.958 191.589 126 192.004 126L192.005 126C200.387 125.994 208.656 127.942 216.154 131.691C223.652 135.44 230.173 140.886 235.197 147.596C237.184 150.249 240.944 150.789 243.596 148.803C246.249 146.816 246.789 143.056 244.803 140.404C238.66 132.2 230.688 125.542 221.521 120.958C219.426 119.911 217.281 118.978 215.097 118.163C219.745 114.602 223.52 110.004 226.11 104.716C229.236 98.3344 230.51 91.2037 229.787 84.1342C229.064 77.0646 226.373 70.3393 222.02 64.7223C217.667 59.1052 211.826 54.8214 205.16 52.3574C198.495 49.8933 191.272 49.3478 184.311 50.7827C177.351 52.2176 170.933 55.5755 165.786 60.475C160.638 65.3745 156.968 71.6192 155.191 78.5C154.363 81.7085 156.292 84.981 159.5 85.8095C162.709 86.6379 165.982 84.7085 166.81 81.5C168.026 76.7921 170.537 72.5194 174.059 69.1671C177.581 65.8148 181.972 63.5173 186.734 62.5355ZM94 144C94 125.222 109.222 110 128 110C146.778 110 162 125.222 162 144C162 162.778 146.778 178 128 178C109.222 178 94 162.778 94 144ZM128 98C102.595 98 82 118.595 82 144C82 160.157 90.3297 174.368 102.929 182.574C99.4356 183.892 96.0393 185.489 92.7741 187.355C82.0462 193.485 73.1038 202.309 66.8307 212.954C65.1484 215.809 66.0989 219.487 68.9538 221.169C71.8087 222.852 75.4869 221.901 77.1692 219.046C82.382 210.2 89.813 202.868 98.7278 197.774C107.643 192.68 117.732 190 128 190C138.268 190 148.357 192.68 157.272 197.774C166.187 202.868 173.618 210.2 178.831 219.046C180.513 221.901 184.191 222.852 187.046 221.169C189.901 219.487 190.852 215.809 189.169 212.954C182.896 202.309 173.954 193.485 163.226 187.355C159.961 185.489 156.564 183.892 153.071 182.574C165.67 174.368 174 160.157 174 144C174 118.595 153.405 98 128 98Z"></path>
</symbol>
<symbol id="keyhole" fill="currentColor" viewBox="0 0 256 256">
<title>Keyhole icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 128C38 78.2944 78.2944 38 128 38C177.706 38 218 78.2944 218 128C218 177.706 177.706 218 128 218C78.2944 218 38 177.706 38 128ZM128 26C71.667 26 26 71.667 26 128C26 184.333 71.667 230 128 230C184.333 230 230 184.333 230 128C230 71.667 184.333 26 128 26ZM112.733 90.9771C117.178 87.7433 122.533 86.0013 128.03 86.0013C133.526 86.0013 138.882 87.7433 143.326 90.9771C147.771 94.2109 151.076 98.7701 152.768 104C154.459 109.23 154.45 114.861 152.741 120.085C151.032 125.309 147.711 129.858 143.256 133.076C141.029 134.685 140.179 137.601 141.193 140.155L153.047 170H102.957L114.862 140.164C115.882 137.609 115.033 134.688 112.803 133.076C108.348 129.858 105.027 125.309 103.318 120.085C101.609 114.861 101.6 109.23 103.292 104C104.983 98.7701 108.289 94.2109 112.733 90.9771ZM128.03 74.0013C119.996 74.0013 112.169 76.5473 105.673 81.2736C99.1773 85.9999 94.3462 92.6633 91.874 100.307C89.4017 107.95 89.4154 116.181 91.9132 123.816C93.9147 129.935 97.4288 135.419 102.097 139.777L90.7155 168.3C90.1118 169.816 89.8882 171.456 90.0642 173.078C90.2402 174.701 90.8104 176.255 91.7251 177.606C92.6398 178.957 93.8712 180.064 95.312 180.83C96.7527 181.596 98.3589 181.997 99.9905 182H156.009C157.641 181.997 159.247 181.596 160.688 180.83C162.128 180.064 163.36 178.957 164.274 177.606C165.189 176.255 165.759 174.701 165.935 173.078C166.111 171.456 165.888 169.816 165.284 168.3L153.957 139.782C158.628 135.423 162.144 129.937 164.146 123.816C166.644 116.181 166.658 107.95 164.186 100.307C161.713 92.6633 156.882 85.9999 150.386 81.2736C143.89 76.5473 136.063 74.0013 128.03 74.0013Z"></path>
</symbol>
<symbol id="clock" fill="currentColor" viewBox="0 0 256 256">
<title>Clock icon</title>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 128C38 78.2944 78.2944 38 128 38C177.706 38 218 78.2944 218 128C218 177.706 177.706 218 128 218C78.2944 218 38 177.706 38 128ZM128 26C71.667 26 26 71.667 26 128C26 184.333 71.667 230 128 230C184.333 230 230 184.333 230 128C230 71.667 184.333 26 128 26ZM134 72C134 68.6863 131.314 66 128 66C124.686 66 122 68.6863 122 72V128C122 131.314 124.686 134 128 134H184C187.314 134 190 131.314 190 128C190 124.686 187.314 122 184 122H134V72Z"></path>
</symbol>
</svg>
<header class="header" id="header">
<div class="container">
<section class="header__container">
<a href="/">
<svg class="header__logo"><use xlink:href="#textualize-logo"></use></svg>
</a>
<div class="hide-on-mobile hide-on-tablet ml-auto">
<nav>
<ul class="header__nav-list " role="list">
<li>
<a class="header__nav-link small-primary
header__nav-link--selected
" href="/">
Home
</a>
</li>
<li>
<a class="header__nav-link small-primary
" href="/projects/">
Projects
</a>
</li>
<li>
<a class="header__nav-link small-primary
" href="/about-us/">
About us
</a>
</li>
<li>
<a class="header__nav-link small-primary
" href="/blog/">
Blog
</a>
</li>
<li>
<a class="header__nav-link small-primary
" href="/contact/">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div class="hide-on-mobile ml-auto">
<ul class="header__external " role="list">
<li>
<a href="https://textual.textualize.io/" target="_blank" class="button-- button button--icon button--sm">
Docs
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</li>
<li>
<a href="https://textual.textualize.io/getting_started/" target="_blank" class="button--contained button button--icon button--sm">
Get started
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</li>
</ul>
</div>
<button class="header-button hide-on-desktop" id="headerButton" aria-expanded="false">
<svg class="header-button-svg" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
<g>
<path class="header-button__line header-button__line--1" d="M5 8H27" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path class="header-button__line header-button__line--2" d="M5 16H27" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path class="header-button__line header-button__line--3" d="M5 24H27" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
</svg>
</button>
</section>
</div>
<div class="header__modal" id="headerModal">
<div class="header__modal-container">
<nav>
<ul class="header__nav-list header__nav-list--mobile" role="list">
<li>
<a class="header__nav-link h4-primary
header__nav-link--selected
" href="/">
Home
</a>
</li>
<li>
<a class="header__nav-link h4-primary
" href="/projects/">
Projects
</a>
</li>
<li>
<a class="header__nav-link h4-primary
" href="/about-us/">
About us
</a>
</li>
<li>
<a class="header__nav-link h4-primary
" href="/blog/">
Blog
</a>
</li>
<li>
<a class="header__nav-link h4-primary
" href="/contact/">
Contact
</a>
</li>
</ul>
</nav>
<div class="hide-on-tablet">
<ul class="header__external header__external--mobile" role="list">
<li>
<a href="https://textual.textualize.io/" target="_blank" class="button-- button button--icon ">
Docs
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</li>
<li>
<a href="https://textual.textualize.io/getting_started/" target="_blank" class="button--contained button button--icon ">
Get started
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<main>
<section class="home-hero observed observed--in-view">
<div class="container">
<div class="home-hero__top">
<div class="github-buttons mb-base slidein-animation animation-delay-1">
<p>Textual</p>
<span class="color-n-60">+</span>
<span></span>
</div>
<div class="slidein-animation animation-delay-2">
<h1 class="home-hero__title h2-primary cursor-animation-paragraph">Presenting Textual — the lean application <span class="cursor-animation">framework</span></h1>
<p class="subtitle h5-secondary">Build with Python. Deploy anywhere.</p>
</div>
</div>
</div>
<div class="home-hero__image-container slidein-animation animation-delay-3">
<img class="home-hero__image" src="/static/img/hero-home.svg" alt="image of a terminal">
</div>
<div class="container justify-center slidein-animation animation-delay-3">
<button class="button button--outlined button--icon open-modal" data-modal="home-hero-modal">
See Textual in action
<svg class="button__icon"><use xlink:href="#play"></use></svg>
</button>
</div>
<!-- Modal -->
<div id="home-hero-modal" class="modal">
<div class="modal__content">
<video width="100%" controls="">
<source src="/static/videos/textual-splash.mp4" type="video/mp4">
Your browser doesn't support HTML videos
</video>
<button class="modal__close-button close-modal">
<svg class="button__icon"><use xlink:href="#close"></use></svg>
</button>
</div>
</div>
</section>
<section class="get-started">
<div class="container">
<div class="get-started__container observed">
<div class="get-started__wrapper">
<h2 class="get-started__heading h4-primary">
Get started in under
<br>
<span class="h1-primary">1 minute</span>
</h2>
<div class="get-started__content">
<p class="color-n-70">Install Textual with pip:</p>
<div class="code-snippet">
<pre class="code-snippet__pre"><code class="code-snippet__code">pip install textual</code></pre>
<button class="code-snippet__copy-button">
<div class="code-snippet__icon-container">
<svg class="code-snippet__icon code-snippet__icon-copy"><use xlink:href="#copy-simple"></use></svg>
<svg class="code-snippet__icon code-snippet__icon-info"><use xlink:href="#check"></use></svg>
<div class="code-snippet__tooltip">
<small class="code-snippet__tooltip-text small-secondary">Copied!</small>
</div>
</div>
</button>
</div>
<p class="color-n-70">And you’re done! Now run the following to get an impression of what it can do:</p>
<div class="code-snippet">
<pre class="code-snippet__pre"><code class="code-snippet__code">python -m textual</code></pre>
<button class="code-snippet__copy-button">
<div class="code-snippet__icon-container">
<svg class="code-snippet__icon code-snippet__icon-copy"><use xlink:href="#copy-simple"></use></svg>
<svg class="code-snippet__icon code-snippet__icon-info"><use xlink:href="#check"></use></svg>
<div class="code-snippet__tooltip">
<small class="code-snippet__tooltip-text small-secondary">Copied!</small>
</div>
</div>
</button>
</div>
<div class="get-started__actions">
<a class="button button--outlined button--icon" href="https://textual.textualize.io/" target="_blank" rel="noreferrer">
See Docs
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
<a class="button button--contained button--icon" href="https://textual.textualize.io/getting_started/" target="_blank" rel="noreferrer">
Get Started
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</div>
</div>
</div>
<span class="bdc-animation bdc-animation--top-left bdc-animation--top-left--solo"></span>
<span class="bdc-animation bdc-animation--bottom-right"></span>
</div>
</div>
</section>
<section class="section-py overflow-hidden observed">
<div class="container">
<h3 class="title slidein-transition">It starts in the terminal</h3>
<p class="subtitle h5-secondary slidein-transition transition-1">Textual apps run in the terminal and can be deployed on the web</p>
<ul class="features__container observed slidein-transition transition-delay-1" role="list">
<li class="features__item">
<div class="features__wrapper">
<div class="features__inner features__a-side">
<div class="features__a-side-content">
<h5 class="h5-primary">Powered by Python</h5>
</div>
</div>
<div class="features__inner features__b-side">
<p>Use your existing Python skills to build sophisticated apps in a fraction of the time. No need to learn a new web stack every month.</p>
</div>
</div>
<span class="bdc-animation bdc-animation--top-left hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--top-right hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--bottom-left hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--bottom-right hide-on-mobile hide-on-tablet"></span>
</li>
<li class="features__item">
<div class="features__wrapper">
<div class="features__inner features__a-side">
<div class="features__a-side-content">
<h5 class="h5-primary">Textual runs just about everywhere</h5>
</div>
</div>
<div class="features__inner features__b-side">
<p>Textual apps run on macOS, Linux, and Windows — from single board computer to the most powerful server. Locally, or over SSH.</p>
</div>
</div>
<span class="bdc-animation bdc-animation--top-left hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--top-right hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--bottom-left hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--bottom-right hide-on-mobile hide-on-tablet"></span>
</li>
<li class="features__item">
<div class="features__wrapper">
<div class="features__inner features__a-side">
<div class="features__a-side-content">
<h5 class="h5-primary">Deploy on the web</h5>
</div>
</div>
<div class="features__inner features__b-side">
<p>Turn your terminal app in to a web application with no additional code. Share your Textual apps with a URL. Serve your apps from any internet connected device.
<br>
<br>
<a href="https://github.com/textualize/textual-web" target="_blank" class="button--contained button button--icon button--md">
Textual-web
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</p>
</div>
</div>
<span class="bdc-animation bdc-animation--top-left hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--top-right hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--bottom-left hide-on-mobile hide-on-tablet"></span>
<span class="bdc-animation bdc-animation--bottom-right hide-on-mobile hide-on-tablet"></span>
</li>
</ul></div>
</section>
<section class="section-py observed">
<div class="container">
<h3 class="title slidein-transition">A new class of application</h3>
<p class="subtitle h5-secondary slidein-transition transition-delay-1">As straightforward and efficient to use as they are to build</p>
</div>
<ul role="list"><li name="dolphie">
<article class="project__item observed">
<div class="project__content">
<div class="github-buttons mb-lg">
<span></span>
<span></span>
</div>
<h4 class="mb-2xs">Dolphie</h4>
<p class="project__description">An intuitive feature-rich terminal tool for monitoring MySQL in real-time</p>
<a href="https://github.com/charles-001/dolphie" class="button button--outlined button--icon" target="_blank" rel="noreferrer">
See in GitHub
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</div>
<div class="project__visual">
<img class="project__image" src="/static/img/dolphie.png" alt="Screenshot of Dolphie project">
</div>
</article>
</li><li name="elia">
<article class="project__item observed">
<div class="project__content">
<div class="github-buttons mb-lg">
<span></span>
<span></span>
</div>
<h4 class="mb-2xs">Elia</h4>
<p class="project__description">A terminal ChatGPT client built with Textual</p>
<a href="https://github.com/darrenburns/elia" class="button button--outlined button--icon" target="_blank" rel="noreferrer">
See in GitHub
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</div>
<div class="project__visual">
<img class="project__image" src="/static/img/elia.png" alt="Screenshot of Elia project">
</div>
</article>
</li><li name="harlequin-sh">
<article class="project__item observed">
<div class="project__content">
<div class="github-buttons mb-lg">
<span></span>
<span></span>
</div>
<h4 class="mb-2xs">Harlequin.sh</h4>
<p class="project__description">The DuckDB IDE for your terminal</p>
<a href="https://github.com/tconbeer/harlequin" class="button button--outlined button--icon" target="_blank" rel="noreferrer">
See in GitHub
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</div>
<div class="project__visual">
<img class="project__image" src="/static/img/stata-dark.abda9dcd.svg" alt="Screenshot of Harlequin.sh project">
</div>
</article>
</li></ul>
<div class="container justify-center">
<a href="/projects" class="button button--contained">
Explore all apps
</a>
</div>
</section>
<section class="section-py observed">
<div class="container">
<h3 class="title slidein-transition">Build with Textual</h3>
<p class="subtitle h5-secondary slidein-transition transition-delay-1">
Lean text-based applications are ideal for many use-cases
</p>
<ul class="card__container-flex slidein-container observed" role="list">
<li class="card card--no-hover slidein-card">
<div class="card__inner-container">
<div class="card__icon-container">
<svg class="card__icon"><use xlink:href="#wrench"></use></svg>
</div>
<div class="card__content-center">
<h5>Internal Tooling</h5>
<p class="color-n-60 line-h-md">Textual apps can be an entry point into an organisation’s infrastructure, providing an interface to existing processes and tools.</p>
</div>
</div>
</li>
<li class="card card--no-hover slidein-card">
<div class="card__inner-container">
<div class="card__icon-container">
<svg class="card__icon"><use xlink:href="#chart-line"></use></svg>
</div>
<div class="card__content-center">
<h5>Operational Analytics</h5>
<p class="color-n-60 line-h-md">The realtime nature of Textual apps makes them particularly useful for monitoring the running of various processes.</p>
</div>
</div>
</li>
<li class="card card--no-hover slidein-card">
<div class="card__inner-container">
<div class="card__icon-container">
<svg class="card__icon"><use xlink:href="#gear"></use></svg>
</div>
<div class="card__content-center">
<h5>Device Configuration</h5>
<p class="color-n-60 line-h-md">Textual apps can run where other apps can't, which makes them ideal for device configuration.</p>
</div>
</div>
</li>
<li class="card card--no-hover slidein-card">
<div class="card__inner-container">
<div class="card__icon-container">
<svg class="card__icon"><use xlink:href="#puzzle"></use></svg>
</div>
<div class="card__content-center">
<h5>Jupyter Extensions</h5>
<p class="color-n-60 line-h-md">Coming soon: Embed Textual apps in your Jupyter notebooks!</p>
</div>
</div>
</li>
<li class="card card--no-hover slidein-card">
<div class="card__inner-container">
<div class="card__icon-container">
<svg class="card__icon"><use xlink:href="#desktop"></use></svg>
</div>
<div class="card__content-center">
<h5>Back-end Services</h5>
<p class="color-n-60 line-h-md">Textual applications can be embedded within web pages, providing additional services to back-end tools.</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="section-py observed">
<div class="container">
<h3 class="title slidein-transition">Here’s what people are saying about us</h3>
<ul class="card__container-grid slidein-container mb-xl observed" role="list">
<li class="card card--no-hover slidein-card">
<div class="card__inner-container">
<div class="card__header">
<a class="card__header-author" href="https://twitter.com/bbonfils/status/1701338377927249951" target="_blank" rel="noreferrer">
<img class="card__header-avatar" src="/static/img/qxo8mu3v_400x400.jpg" alt="picture of asyd">
<div class="card__header-username">
<p class="heading-tertiary">asyd</p>
<p class="color-n-60 text-tertiary">@asyd</p>
</div>
</a>
<svg class="card__header-logo"><use xlink:href="#twitter-logo"></use></svg>
</div>
<p class="card__content text-tertiary">I wrote TUI for hashicorp vault and nomad with awesome <a href="https://twitter.com/hashtag/textualize?src=hashtag_click">#textualize</a> (and I’m using rich everywhere). Fun facts: I have more code to handle requests and parsing than for the UI</p>
<div class="card__data">
<p class="color-n-60 text-tertiary">9:53 AM - Sep 11, 2023</p>
</div>
<div class="card__footer">
<a href="https://twitter.com/bbonfils/status/1701338377927249951" class="button button--md button--outlined button--icon button--full-width" target="_blank" rel="noreferrer">
See on Twitter
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</div>
</div>
</li>
<li class="card card--no-hover slidein-card">
<div class="card__inner-container">
<div class="card__header">
<a class="card__header-author" href="https://twitter.com/rikashore/status/1700828055361515622" target="_blank" rel="noreferrer">
<img class="card__header-avatar" src="/static/img/bwpdbxuv_400x400.jpg" alt="picture of rikasho.re">
<div class="card__header-username">
<p class="heading-tertiary">rikasho.re</p>
<p class="color-n-60 text-tertiary">@rikashore</p>
</div>
</a>
<svg class="card__header-logo"><use xlink:href="#twitter-logo"></use></svg>
</div>
<p class="card__content text-tertiary"><a href="https://twitter.com/hashtag/textualize?src=hashtag_click">#textualize</a> has become my favourite way to write TUI apps. simple, clean, elegant to use and beautifully documented</p>
<div class="card__data">
<p class="color-n-60 text-tertiary">12:09 PM - Sep 12, 2023</p>
</div>
<div class="card__footer">
<a href="https://twitter.com/rikashore/status/1700828055361515622" class="button button--md button--outlined button--icon button--full-width" target="_blank" rel="noreferrer">
See on Twitter
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</div>
</div>
</li>
<li class="card card--no-hover slidein-card">
<div class="card__inner-container">
<div class="card__header">
<a class="card__header-author" href="https://twitter.com/robertclo4/status/1703197309407015324" target="_blank" rel="noreferrer">
<img class="card__header-avatar" src="/static/img/dgebg7le_400x400.jpg" alt="picture of Robert">
<div class="card__header-username">
<p class="heading-tertiary">Robert</p>
<p class="color-n-60 text-tertiary">@robertclo4</p>
</div>
</a>
<svg class="card__header-logo"><use xlink:href="#twitter-logo"></use></svg>
</div>
<p class="card__content text-tertiary">Textual has the most beautiful Python API that I've ever seen. The expressivity of Python is because the goal is "pseudocode you can execute" and I truly think Textual *gets* it</p>
<div class="card__data">
<p class="color-n-60 text-tertiary">1:00 AM - Sep 17, 2023</p>
</div>
<div class="card__footer">
<a href="https://twitter.com/robertclo4/status/1703197309407015324" class="button button--md button--outlined button--icon button--full-width" target="_blank" rel="noreferrer">
See on Twitter
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</div>
</div>
</li>
</ul>
<a class="button button--icon button--centered" href="https://twitter.com/textualizeio" target="_blank" rel="noreferrer">
Follow us on Twitter
<svg class="button__icon"><use xlink:href="#arrow-up-right"></use></svg>
</a>
</div>
</section>
<section class="section-py observed">
<div class="container">
<h3 class="title slidein-transition">We ♥ Open Source</h3>
<p class="subtitle h5-secondary slidein-transition transition-delay-3">
Connect with the Textualize developers and community
</p>
<ul class="card__container-grid slidein-container observed" role="list">
<li class="slidein-card">
<div class="card">
<a class="card__inner-container" href="https://github.com/Textualize" target="_blank" rel="noreferrer">
<div class="card__icon-container">
<svg class="card__icon"><use xlink:href="#github-logo"></use></svg>
</div>
<div class="card__content-center">
<h5>GitHub</h5>
<p class="color-n-60 line-h-md">Contribute to our projects or report issues on Github.</p>
</div>
<div class="card__link">
Join us on GitHub
<svg class="link__icon"><use xlink:href="#arrow-up-right"></use></svg>
</div>
</a>
</div>
</li>
<li class="slidein-card">
<div class="card">
<a class="card__inner-container" href="https://discord.gg/Enf6Z3qhVr" target="_blank" rel="noreferrer">
<div class="card__icon-container">
<svg class="card__icon"><use xlink:href="#discord-logo"></use></svg>
</div>
<div class="card__content-center">
<h5>Discord</h5>
<p class="color-n-60 line-h-md">Join our Discord to talk to the Textualize devs and community.</p>
</div>
<div class="card__link">
Join us on Discord
<svg class="link__icon"><use xlink:href="#arrow-up-right"></use></svg>
</div>
</a>
</div>
</li>
<li class="slidein-card">
<div class="card">
<a class="card__inner-container" href="https://www.youtube.com/@Textualize-official" target="_blank" rel="noreferrer">
<div class="card__icon-container">
<svg class="card__icon"><use xlink:href="#youtube-logo"></use></svg>
</div>
<div class="card__content-center">
<h5>YouTube</h5>
<p class="color-n-60 line-h-md">Check out the official Textualize channel for tutorials and more!</p>
</div>
<div class="card__link">
Join us on YouTube
<svg class="link__icon"><use xlink:href="#arrow-up-right"></use></svg>
</div>
</a>
</div>
</li>
</ul>
</div>
</section>
<section class="newsletter">
<div class="container">
<div class="newsletter__container observed">
<div class="newsletter__wrapper">
<h3 class="title">Keep in touch</h3>
<p class=" color-n-60 newsletter__subtitle">Join our newsletter for occasional updates on our projects</p>
<div id="mc_embed_shell">
<link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signusp">
<form action="https://textualize.us5.list-manage.com/subscribe/post?u=54502e6fe10e01c3c186d5de1&id=bb8c187ac0&f_id=002e8ae9f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll">
<div class="newsletter__group">
<div class="mc-field-group">
<input type="email" name="EMAIL" class="required newsletter__email" id="mce-EMAIL" placeholder="Email" required="" value="">
</div>
<div hidden=""><input type="hidden" name="tags" value="4049197"></div>
<div aria-hidden="true" style="position: absolute; left: -5000px;"><input type="text" name="b_54502e6fe10e01c3c186d5de1_bb8c187ac0" tabindex="-1" value=""></div>
<div class="clear"><button type="submit" name="subscribe" id="" class="button button--contained">Subscribe</button></div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
</div>
</form>
</div>
</div>
</div>
<span class="bdc-animation bdc-animation--top-left bdc-animation--top-left--solo"></span>
<span class="bdc-animation bdc-animation--bottom-right"></span>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<section class="footer__top">
<a href="/">
<svg class="footer__logo"><use xlink:href="#textualize-logo"></use></svg>
</a>
<p class="footer__subtitle">Move at terminal velocity</p>
</section>
<ul class="footer__social" role="list">
<li class="footer__social-item">
<a href="https://github.com/Textualize" target="_blank" rel="noreferrer">
<svg class="footer__social-icon"><use xlink:href="#github-logo"></use></svg>
</a>
</li>
<li class="footer__social-item">
<a href="https://fosstodon.org/@textualize" target="_blank" rel="noreferrer">
<svg class="footer__social-icon"><use xlink:href="#mastodon-logo"></use></svg>
</a>
</li>
<li class="footer__social-item">
<a href="https://twitter.com/textualizeio" target="_blank" rel="noreferrer">
<svg class="footer__social-icon"><use xlink:href="#twitter-logo"></use></svg>
</a>
</li>
<li class="footer__social-item">
<a href="https://discord.gg/Enf6Z3qhVr" target="_blank" rel="noreferrer">
<svg class="footer__social-icon"><use xlink:href="#discord-logo"></use></svg>
</a>
</li>
<li class="footer__social-item">
<a href="https://www.youtube.com/@Textualize-official" target="_blank" rel="noreferrer">
<svg class="footer__social-icon"><use xlink:href="#youtube-logo"></use></svg>
</a>
</li>
</ul>
<section class="footer__bottom">
<p class="small-secondary color-n-60">©<span id="footerYear">2024</span> Textualize, Inc</p>
<nav>
<ul class="footer__legal" role="list">
<li>
<a class="footer__legal-link small-secondary " href="/privacy-policy/">
Privacy policy
</a>
</li>
<li>
<a class="footer__legal-link small-secondary " href="/terms-of-use/">
Terms of use
</a>
</li>
</ul>
</nav>
</section>
</div>
</footer>
</body></html>