Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
8 lines (7 loc) · 12.3 KB
/
Copy pathindex.html
File metadata and controls
8 lines (7 loc) · 12.3 KB
1
2
3
4
5
6
7
8
<!doctype html> <html class="theme-default typo-default" lang=en> <head> <meta charset=utf-8> <meta content="width=device-width" name=viewport> <meta content=#aa1e1e name=theme-color> <base href=/ > <link href=global.css rel=stylesheet> <link href=prism.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.png rel=icon type=image/png> <style>main.svelte-hpyrv2{position:relative;margin:0 auto;padding:var(--nav-h) var(--side-nav) 0 var(--side-nav);overflow-x:hidden}.design-attribution.svelte-hpyrv2{color:#aaa;font-size:1.2rem;padding:.5rem 1rem}header.svelte-pkbmi6{position:fixed;display:flex;align-items:center;justify-content:space-between;width:100vw;height:var(--nav-h);padding:0 var(--side-nav);margin:0 auto;background-color:#fff;box-shadow:0 -.4rem .9rem .2rem rgba(0,0,0,.5);font-family:var(--font);z-index:10;user-select:none;transform:translate(0,calc(-100% - 1rem));transition:transform .2s}header.visible.svelte-pkbmi6{transform:none}nav.svelte-pkbmi6{position:fixed;top:0;left:0;width:100vw;height:var(--nav-h);padding:0 var(--side-nav) 0 var(--side-nav);display:flex;align-items:center;justify-content:space-between;background-color:transparent;transform:none;transition:none;box-shadow:none}h2.svelte-pkbmi6{display:block;text-transform:uppercase;font-weight:300;font-size:2.8rem;letter-spacing:.12em;line-height:1;margin:0;top:.1rem}.primary.svelte-pkbmi6{list-style:none;font-family:var(--font);margin:0;line-height:1}li.svelte-pkbmi6{display:block;display:none}li.active.svelte-pkbmi6{display:block}ul.svelte-pkbmi6{position:relative;padding:0 2em 0 0;background:url(/icons/chevron.svg) calc(100% - 1em) .05em no-repeat;background-size:1em 1em}ul.svelte-pkbmi6::after{position:absolute;content:'';width:100%;height:100%;left:0;top:0}ul.open.svelte-pkbmi6{padding:0 2em 1em 2em;background:#fff;border-left:1px solid #eee;border-right:1px solid #eee;border-bottom:1px solid #eee;border-radius:0 0 var(--border-r) var(--border-r);align-self:start}ul.open.svelte-pkbmi6 li.svelte-pkbmi6{display:block;text-align:right}ul.open.svelte-pkbmi6::after{display:none}ul.svelte-pkbmi6 li a.svelte-pkbmi6{font-size:var(--h6);padding:0 .8rem}ul.open.svelte-pkbmi6 li a.svelte-pkbmi6{padding:2.3rem .7rem 0 .8rem;display:block}.primary.svelte-pkbmi6 svg{width:2rem;height:2rem}.home.svelte-pkbmi6{position:relative;top:0;width:18rem;color:var(--second);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;z-index:11;padding:.5rem 0 .3rem 4.2rem;background:url(/logo.svg) 0 50% no-repeat;background-size:auto 100%}.active.svelte-pkbmi6{color:var(--prime)}@media(min-width:768px){ul.svelte-pkbmi6{padding:0;background:0 0}ul.open.svelte-pkbmi6{padding:0;background:#fff;border:none;align-self:initial}ul.open.svelte-pkbmi6 li.svelte-pkbmi6{display:inline;text-align:left}ul.open.svelte-pkbmi6 li a.svelte-pkbmi6{font-size:var(--h6);padding:0 .8rem;display:inline}ul.svelte-pkbmi6::after{display:none}li.svelte-pkbmi6{display:inline!important}.hide-if-desktop.svelte-pkbmi6{display:none!important}}.icon.svelte-1gsl016{position:relative;overflow:hidden;vertical-align:middle;-o-object-fit:contain;object-fit:contain;-webkit-transform-origin:center center;transform-origin:center center;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}.container.svelte-zdm2bj{position:relative;margin:10rem auto;max-width:120rem}.container.svelte-zdm2bj ul.svelte-zdm2bj{list-style:none}li.svelte-zdm2bj:not(.box)>p.svelte-zdm2bj{max-width:var(--linemax)}.back-light{--text:hsl(36, 3%, 44%)}.logo.svelte-zdm2bj{position:absolute;left:-120px;top:-120px;width:80vmin;height:80vmin;opacity:.1;will-change:transform}.hero.svelte-zdm2bj h1.svelte-zdm2bj{text-align:center;margin:2rem 0;font-size:6rem;color:var(--heading);font-weight:100;letter-spacing:.12em;text-transform:uppercase}.hero.svelte-zdm2bj h2.svelte-zdm2bj{text-align:center;display:block;position:relative;font-size:3.2rem;text-align:center;width:100%;text-transform:lowercase;font-weight:300;opacity:.7}.box.svelte-zdm2bj{padding:2em;display:flex;flex-direction:column}.box.svelte-zdm2bj>h2.svelte-zdm2bj{padding:0;margin:0 0 .5em 0;font-size:var(--h2);color:#fff;text-align:left}.box.svelte-zdm2bj>p.svelte-zdm2bj{font-size:var(--h5)}.box.svelte-zdm2bj a.svelte-zdm2bj{position:relative;text-align:right;margin-top:auto;padding:0 1.2em 0 0;font-family:Roboto,sans-serif;font-size:1.6rem}.box.svelte-zdm2bj a.svelte-zdm2bj:hover{color:#fff;text-decoration:underline}.box.svelte-zdm2bj a.svelte-zdm2bj::after,.cta.svelte-zdm2bj::after{content:'';position:absolute;display:block;right:0;top:.25em;width:1em;height:1em;background:url(/icons/arrow-right.svg)}.cta.svelte-zdm2bj::after{right:.5em;top:.6em}a.cta.svelte-zdm2bj{background-color:var(--prime);padding:.5em 1.8em .5em 1em;border-radius:var(--border-r);color:#fff;position:relative}@media screen and (min-width:870px){.hero.svelte-zdm2bj h1.svelte-zdm2bj{position:relative;top:-.8rem;font-size:10rem;margin:2rem 2rem 0 1rem}}</style> <noscript id=sapper-head-start></noscript><title>Svelte Native • The Svelte Mobile Development Experience</title><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <svg style=display:none> <symbol class=icon id=arrow-left viewBox="0 0 24 24"> <line x1=19 x2=5 y1=12 y2=12></line> <polyline points="12 19 5 12 12 5"></polyline> </symbol> <symbol class=icon id=arrow-right viewBox="0 0 24 24"> <line x1=5 x2=19 y1=12 y2=12></line> <polyline points="12 5 19 12 12 19"></polyline> </symbol> <symbol class=icon id=arrow-up viewBox="0 0 24 24"> <line x1=12 x2=12 y1=19 y2=5></line> <polyline points="5 12 12 5 19 12"></polyline> </symbol> <symbol class=icon id=arrow-down viewBox="0 0 24 24"> <line x1=12 x2=12 y1=5 y2=19></line> <polyline points="19 12 12 19 5 12"></polyline> </symbol> <symbol class=icon id=check viewBox="0 0 24 24"> <polyline points="20 6 9 17 4 12"></polyline> </symbol> <symbol class=icon id=close viewBox="0 0 24 24"> <line x1=18 x2=6 y1=6 y2=18></line> <line x1=6 x2=18 y1=6 y2=18></line> </symbol> <symbol class=icon id=download viewBox="0 0 24 24"> <path d="M21 15V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V15"></path> <polyline points="7 10 12 15 17 10"></polyline> <line x1=12 x2=12 y1=15 y2=3></line> </symbol> <symbol class=icon id=edit viewBox="0 0 24 24"> <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path> <polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon> </symbol> <symbol class=icon id=github viewBox="0 0 24 24"> <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path> </symbol> <symbol class=icon id=git-branch viewBox="0 0 24 24"> <line x1=6 x2=6 y1=3 y2=15></line> <circle cx=18 cy=6 r=3></circle> <circle cx=6 cy=18 r=3></circle> <path d="M18 9a9 9 0 0 1-9 9"></path> </symbol> <symbol class=icon id=log-in viewBox="0 0 24 24"> <path d="M15 3H19A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H15"></path> <polyline points="10 17 15 12 10 7"></polyline> <line x1=15 x2=3 y1=12 y2=12></line> </symbol> <symbol class=icon id=maximize viewBox="0 0 24 24"> <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path> </symbol> <symbol class=icon id=maximize-2 viewBox="0 0 24 24"> <polyline points="15 3 21 3 21 9"></polyline> <polyline points="9 21 3 21 3 15"></polyline> <line x1=21 x2=14 y1=3 y2=10></line> <line x1=3 x2=10 y1=21 y2=14></line> </symbol> <symbol class=icon id=menu viewBox="0 0 24 24"> <line x1=3 x2=21 y1=12 y2=12></line> <line x1=3 x2=21 y1=6 y2=6></line> <line x1=3 x2=21 y1=18 y2=18></line> </symbol> <symbol class=icon id=message-square viewBox="0 0 24 24"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> </symbol> <symbol class=icon id=minus viewBox="0 0 24 24"> <line x1=5 x2=19 y1=12 y2=12></line> </symbol> <symbol class=icon id=plus viewBox="0 0 24 24"> <line x1=12 x2=12 y1=5 y2=19></line> <line x1=5 x2=19 y1=12 y2=12></line> </symbol> <symbol class=icon id=save viewBox="0 0 24 24"> <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path> <polyline points="17 21 17 13 7 13 7 21"></polyline> <polyline points="7 3 7 8 15 8"></polyline> </symbol> <symbol class=icon id=link viewBox="0 0 24 24"> <path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"></path> <path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"></path> <path d=M7,12L17,12></path> </symbol> <symbol class=icon id=chevron viewBox="0 0 24 24"> <path d="M2,7 L12,17 L20,7"></path> </symbol> </svg> <header class="svelte-pkbmi6 visible"> <nav class=svelte-pkbmi6> <a href=. class="svelte-pkbmi6 home" rel=prefetch title=Homepage> <h2 class=svelte-pkbmi6>Native</h2> </a> <ul class="svelte-pkbmi6 primary"> <li class="svelte-pkbmi6 active hide-if-desktop"><a href=. class=svelte-pkbmi6 rel=prefetch>Home</a></li> <li class=svelte-pkbmi6><a href=tutorial class=svelte-pkbmi6 rel=prefetch>Tutorial</a></li> <li class=svelte-pkbmi6><a href=docs class=svelte-pkbmi6 rel=prefetch>API Docs</a></li> <li class=svelte-pkbmi6><a href=blog class=svelte-pkbmi6 rel=prefetch>Blog</a></li> <li class=svelte-pkbmi6><a href=https://v3.svelte.technology/ class=svelte-pkbmi6>Svelte</a></li> <li class=svelte-pkbmi6><a href=https://docs.nativescript.org/start/introduction class=svelte-pkbmi6>NativeScript</a></li> <li class=svelte-pkbmi6> <a href=https://github.com/halfnelson/svelte-native class=svelte-pkbmi6 title="Github Repo"> <svg class="icon svelte-1gsl016" height=20 width=20> <use xlink:href=#github></use> </svg> </a> </li> </ul> </nav> </header> <main class=svelte-hpyrv2> <img alt="Svelte logo" class="svelte-zdm2bj logo" src=logo.svg style=transform:translate(0,0)> <section class="svelte-zdm2bj container hero"> <h1 class=svelte-zdm2bj>Svelte Native</h1> <h2 class=svelte-zdm2bj>The Svelte Mobile Development Experience</h2> </section> <section class="svelte-zdm2bj container"> <ul class="svelte-zdm2bj grid stretch"> <li class="svelte-zdm2bj box white bg-prime"> <h2 class=svelte-zdm2bj style="padding:2.4rem 0 0 0">Write less code</h2> <p class=svelte-zdm2bj>Build boilerplate-free mobile applications using languages you already know — HTML, CSS and JavaScript </p> <a href="" class=svelte-zdm2bj>learn more</a> </li> <li class="svelte-zdm2bj box white bg-flash"> <h2 class=svelte-zdm2bj style="padding:2.4rem 0 0 0">No virtual DOM</h2> <p class=svelte-zdm2bj>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p> <a href="" class=svelte-zdm2bj>learn more</a> </li> <li class="svelte-zdm2bj box white bg-second"> <h2 class=svelte-zdm2bj style="padding:2.4rem 0 0 0">Truly reactive</h2> <p class=svelte-zdm2bj>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p> <a href="" class=svelte-zdm2bj>learn more</a> </li> </ul> </section> <section class="svelte-zdm2bj container grid half"> <div class=linkify> <p>Svelte Native is a new approach to building mobile applications using NativeScript. Where other JS-Native frameworks like React-Native and Nativescript-Vue do the bulk of their work on the <em>mobile device</em>, Svelte Native shifts that work into a <em>compile step</em> that happens when you build your app.</p> <p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the native view widgets when the state of your app changes.</p> </div> <div> <pre class=language-bash>
npm install -g nativescript
npx degit halfnelson/svelte-native-template my-mobile-app
cd my-mobile-app
npm install
tns run android --bundle
</pre> <p class=linkify>See the <a href="">quickstart guide</a> for more information.</p> <p><a href=guide class="svelte-zdm2bj cta" rel=prefetch>Learn Svelte Native</a></p> </div> </section> </main> <footer class="svelte-hpyrv2 design-attribution"> Website design thanks to the Svelte project. </footer></div> <script>__SAPPER__={baseUrl:"",preloaded:[void 0,{}]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/client/client.f6d186ec.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/client/shimport@0.0.14.js";s.setAttribute("data-main","/client/client.f6d186ec.js")}document.head.appendChild(s)</script>