Files
notesnook/apps/web/src/index.html
2025-04-10 10:28:57 +05:00

204 lines
7.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="theme-color" content="#01c352" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!-- <link rel="manifest" href="/manifest.json" /> -->
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<meta name="description" content="Your private note taking space" />
<meta property="og:title" content="Notesnook" />
<meta
property="og:description"
content="A fully open source & end-to-end encrypted note taking alternative to Evernote."
/>
<meta property="og:image" content="https://app.notesnook.com/banner.jpg" />
<meta
property="og:image:alt"
content="A fully open source & end-to-end encrypted note taking alternative to Evernote."
/>
<meta property="og:url" content="https://app.notesnook.com/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Notesnook by Streetwriters LLC" />
<meta name="twitter:card" content="summary_large_image" />
<title>Notesnook</title>
<style id="theme-colors"></style>
<script type="module" src="./index.ts"></script>
<style>
html {
overscroll-behavior: none;
}
html[data-theme="light"] .react-loading-skeleton {
--base-color: var(--background-secondary);
--highlight-color: #var(--background-secondary);
}
html[data-theme="dark"] .react-loading-skeleton {
--base-color: var(--background-secondary);
--highlight-color: var(--background-secondary);
}
#splash {
background-color: var(--background);
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#splash svg {
transform: scale(1);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.9);
}
70% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}
html,
body {
font-size: 16px;
}
@media only screen and (max-width: 480px) {
html,
body {
font-size: 18px;
background-color: var(--background);
}
}
:root,
body,
#root {
margin: 0 !important;
height: 100%;
overflow: hidden;
}
#root {
display: flex;
flex-direction: column;
}
/* svg {
width: 1.5rem;
} */
.ReactModal__Overlay {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.ReactModal__Overlay--after-open {
opacity: 1;
}
.ReactModal__Overlay--before-close {
opacity: 0;
}
.slide {
background-color: transparent !important;
}
.carousel.carousel-slider {
display: flex;
flex-direction: row;
}
</style>
</head>
<body class="theme-scope-base">
<noscript>You need to enable JavaScript to run this app.</noscript>
<!-- <script src="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
-->
<div id="root"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
style="height: 0; width: 0; z-index: -1; position: absolute"
>
<symbol id="full-logo" viewBox="0 0 1000 1000">
<rect
width="1000"
height="1000"
rx="30%"
ry="30%"
style="fill: var(--heading)"
/>
<g transform="translate(275,176.95254)">
<path
style="fill: var(--background)"
d="M437.985 493.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.313999-35.85-134.763-76.498C18.916 525.898.006 474.347 0 421.064v-110.25l79.121001 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237C100.735 500.176 113.276 517.037 128.925 530.707c2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM450 225v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V225c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164003-61.735-43.168003-99.389-44.660003-37.655-1.492-74.426 11.644-102.611 36.657003-28.185999 25.013-45.599999 59.962-48.593999 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L0 240.637V0h225c59.674 0 116.903 23.705 159.099 65.901C426.295 108.097 450 165.326 450 225Z"
/>
</g>
</symbol>
<symbol id="themed-logo" viewBox="0 0 450 646.09491">
<path
style="fill: var(--heading)"
d="M437.985 493.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.313999-35.85-134.763-76.498C18.916 525.898.006 474.347 0 421.064v-110.25l79.121001 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237C100.735 500.176 113.276 517.037 128.925 530.707c2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM450 225v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V225c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164003-61.735-43.168003-99.389-44.660003-37.655-1.492-74.426 11.644-102.611 36.657003-28.185999 25.013-45.599999 59.962-48.593999 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L0 240.637V0h225c59.674 0 116.903 23.705 159.099 65.901C426.295 108.097 450 165.326 450 225Z"
/>
</symbol>
</svg>
<div id="splash" class="hidden">
<svg style="height: 120px">
<use href="#themed-logo" />
</svg>
<span
style="
margin-top: 10px;
font-family: Hack, Consolas, 'Andale Mono', 'Lucida Console',
'Liberation Mono', 'Courier New', Courier, monospace;
color: var(--paragraph);
font-size: 0.8rem;
"
>
Starting up the engines
</span>
</div>
<div id="dialogContainer"></div>
<div id="floatingViewContainer"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>