2018-09-21 16:05:03 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
<!-- Web App Config -->
< title > Snapdrop< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no" >
< meta name = "theme-color" content = "#3367d6" >
<!-- Descriptions -->
< meta property = "og:title" content = "Snapdrop" >
< meta property = "og:type" content = "article" >
< meta property = "og:url" content = "https://snapdrop.net/" >
< meta property = "og:author" content = "https://facebook.com/RobinLinus" >
< meta name = "twitter:author" content = "@RobinLinus" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:description" content = "Instantly share images, videos, PDFs, and links with people nearby. Peer2Peer and Open Source. No Setup, No Signup." >
< meta name = "og:description" content = "Instantly share images, videos, PDFs, and links with people nearby. Peer2Peer and Open Source. No Setup, No Signup." >
<!-- Icons -->
< link rel = "icon" sizes = "96x96" href = "images/favicon-96x96.png?" >
< link rel = "shortcut icon" href = "images/favicon-96x96.png?" >
< link rel = "apple-touch-icon" href = "images/apple-touch-icon.png" >
< meta name = "msapplication-TileImage" content = "images/mstile-150x150.png" >
< link rel = "fluid-icon" type = "image/png" href = "images/android-chrome-192x192.png" >
< meta name = "twitter:image" content = "https://snapdrop.net/images/twitter-stream.jpg" >
< meta property = "og:image" content = "https://snapdrop.net/images/twitter-stream.jpg" >
<!-- Resources -->
< link rel = "stylesheet" type = "text/css" href = "styles.css" >
< link rel = "manifest" href = "manifest.json" >
< / head >
< body >
2018-09-24 13:14:11 +02:00
< header class = "row-reverse" >
< a href = "#about" class = "icon-button" title = "About Snapdrop" >
< svg class = "icon" >
< use xlink:href = "#info-outline" / >
< / svg >
< / a >
< a href = "#" id = "notification" class = "icon-button" title = "Enable Notifications" hidden >
< svg class = "icon" >
< use xlink:href = "#notifications" / >
< / svg >
< / a >
< / header >
2018-09-21 16:05:03 +02:00
<!-- Peers -->
< x-peers class = "center" > < / x-peers >
< x-no-peers >
< h2 > Open Snapdrop on other devices to send files.< / h2 >
< div class = "font-body1" > Short link: < a href = "http://yg.gl" > yg.gl< / a > < / div >
< / x-no-peers >
< x-instructions desktop = "Click to send files or right click to send a message." mobile = "Tap to send files or long tap to send a message." > < / x-instructions >
<!-- Footer -->
< footer class = "column" >
< svg class = "icon logo" >
< use xlink:href = "#wifi-tethering" / >
< / svg >
< div > The easiest way to transfer data across devices.< / div >
< div class = "font-body2" > Allow me to be discovered by: Everyone in this network.< / div >
< / footer >
<!-- Receive Dialog -->
< x-dialog id = "receiveDialog" >
< x-background class = "full center" >
< x-paper shadow = "2" >
< h3 > File Received< / h3 >
< div class = "font-subheading" id = "fileName" > Filename< / div >
< div class = "font-body2" id = "fileSize" > < / div >
< div class = "row-reverse" >
< a class = "button" close id = "download" title = "Download File" autofocus > Download< / a >
< button class = "button" close > Ignore< / button >
< / div >
< / x-paper >
< / x-background >
< / x-dialog >
<!-- Send Text Dialog -->
< x-dialog id = "sendTextDialog" >
< form action = "#" >
< x-background class = "full center" >
< x-paper shadow = "2" >
< h3 > Send a Message< / h3 >
< input id = "textInput" placeholder = "Send a message" autocomplete = "off" autofocus >
< div class = "row-reverse" >
< button class = "button" type = "submit" close > Send< / button >
< a class = "button" close > Cancel< / a >
< / div >
< / x-paper >
< / x-background >
< / form >
< / x-dialog >
<!-- Receive Text Dialog -->
< x-dialog id = "receiveTextDialog" >
< x-background class = "full center" >
< x-paper shadow = "2" >
< h3 > Message Received< / h3 >
< div class = "font-subheading" id = "text" > < / div >
< div class = "row-reverse" >
< button class = "button" id = "copy" close autofocus > Copy< / button >
< button class = "button" close > Close< / button >
< / div >
< / x-paper >
< / x-background >
< / x-dialog >
<!-- Toast -->
< div class = "toast-container full center" >
< x-toast class = "row" shadow = "1" id = "toast" > File Transfer Completed< / x-toast >
< / div >
2018-09-24 13:14:11 +02:00
<!-- About Page -->
< x-about id = "about" class = "full center column" >
< section class = "center column fade-in" >
< header class = "row-reverse" >
< a href = "#" class = "close icon-button" >
< svg class = "icon" >
< use xlink:href = "#close" / >
< / svg >
< / a >
< / header >
< svg class = "icon logo" >
< use xlink:href = "#wifi-tethering" / >
2018-09-21 16:05:03 +02:00
< / svg >
2018-09-24 13:14:11 +02:00
< h1 > Snapdrop< / h1 >
< div class = "font-subheading" > The easiest way to transfer files across devices.< / div >
< div class = "row" >
< a class = "icon-button" target = "_blank" href = "https://github.com/RobinLinus/snapdrop" title = "Snapdrop on Github" >
< svg class = "icon" >
< use xlink:href = "#github" / >
< / svg >
< / a >
< a class = "icon-button" target = "_blank" href = "https://twitter.com/intent/tweet?text=https://snapdrop.net%20by%20@robin_linus%20&" title = "Tweet about Snapdrop" >
< svg class = "icon" >
< use xlink:href = "#twitter" / >
< / svg >
< / a >
< a class = "icon-button" target = "_blank" href = "https://github.com/RobinLinus/snapdrop#frequently-asked-questions" title = "Frequently asked questions" >
< svg class = "icon" >
< use xlink:href = "#help-outline" / >
< / svg >
< / a >
< / div >
< / section >
< x-background > < / x-background >
< / x-about >
2018-09-21 16:05:03 +02:00
<!-- SVG Icon Library -->
< svg style = "display: none;" >
< symbol id = wifi-tethering viewBox = "0 0 24 24" >
< path d = "M12 11c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 2c0-3.31-2.69-6-6-6s-6 2.69-6 6c0 2.22 1.21 4.15 3 5.19l1-1.74c-1.19-.7-2-1.97-2-3.45 0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.48-.81 2.75-2 3.45l1 1.74c1.79-1.04 3-2.97 3-5.19zM12 3C6.48 3 2 7.48 2 13c0 3.7 2.01 6.92 4.99 8.65l1-1.73C5.61 18.53 4 15.96 4 13c0-4.42 3.58-8 8-8s8 3.58 8 8c0 2.96-1.61 5.53-4 6.92l1 1.73c2.99-1.73 5-4.95 5-8.65 0-5.52-4.48-10-10-10z" > < / path >
< / symbol >
< symbol id = desktop-mac viewBox = "0 0 24 24" >
< path d = "M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7l-2 3v1h8v-1l-2-3h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 12H3V4h18v10z" > < / path >
< / symbol >
< symbol id = phone-iphone viewBox = "0 0 24 24" >
< path d = "M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z" > < / path >
< / symbol >
< symbol id = tablet-mac viewBox = "0 0 24 24" >
< path d = "M18.5 0h-14C3.12 0 2 1.12 2 2.5v19C2 22.88 3.12 24 4.5 24h14c1.38 0 2.5-1.12 2.5-2.5v-19C21 1.12 19.88 0 18.5 0zm-7 23c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7.5-4H4V3h15v16z" > < / path >
< / symbol >
< symbol id = info-outline viewBox = "0 0 24 24" >
< path d = "M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z" > < / path >
< / symbol >
< symbol id = close viewBox = "0 0 24 24" >
< path d = "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" > < / path >
< / symbol >
< symbol id = help-outline viewBox = "0 0 24 24" >
< path d = "M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" > < / path >
< / symbol >
< symbol id = "twitter" >
< path d = "M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z" / >
< / symbol >
< symbol id = "github" >
< path d = "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" / >
< / symbol >
< g id = "notifications" >
< path d = "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" / >
< / g >
< / svg >
<!-- Scripts -->
2018-09-24 13:14:11 +02:00
< script src = "scripts/network.js" > < / script >
< script src = "scripts/ui.js" > < / script >
2018-09-21 16:05:03 +02:00
<!-- Sounds -->
< audio id = "blop" preload = "auto" autobuffer = "true" >
< source src = "/sounds/blop.mp3" type = "audio/mpeg" >
< source src = "/sounds/blop.ogg" type = "audio/ogg" >
< / audio >
<!-- no script -->
< noscript >
< x-noscript class = "full center column" >
< h1 > Enable Javascript< / h1 >
< h3 > Snapdrop works only with Javascript.< / h3 >
< / x-noscript >
< style >
x-noscript {
background: #599cfc;
color: white;
z-index: 2;
}
a[href="#info"] {
color: white;
}
< / style >
< / noscript >
< / body >
