174 lines
8.6 KiB
HTML
174 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="theme-color" content="#3367d6">
|
||
<meta name="color-scheme" content="dark light">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<title>📤｜ErikrafT Drop｜Transfer Files!!!</title>
|
||
<meta name="description" content="Instantly share images, videos, PDFs, and links with people nearby. Peer2Peer and Open Source. No Setup, No Signup.">
|
||
<meta name="keywords" content="File, Transfer, Share, Peer2Peer">
|
||
<meta name="author" content="schlagmichdoch">
|
||
<meta property="og:title" content="ErikrafT Drop">
|
||
<meta property="og:type" content="article">
|
||
<meta property="og:url" content="https://drop.erikraft.com/">
|
||
<meta property="og:author" content="https://github.com/erikraft">
|
||
<meta name="twitter:author" content="@erikraft">
|
||
|
||
<!-- Favicon and Icons -->
|
||
<link rel="icon" sizes="96x96" href="images/favicon-96x96.png">
|
||
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
||
<link rel="stylesheet" href="styles/styles-main.css" type="text/css">
|
||
<link rel="manifest" href="manifest.json">
|
||
|
||
<!-- Preload resources -->
|
||
<link rel="preload" href="lang/en.json" as="fetch">
|
||
<link rel="preload" href="fonts/OpenSans/static/OpenSans-Medium.ttf" as="font" type="font/ttf" crossorigin>
|
||
|
||
<!-- Scripts -->
|
||
<script src="scripts/localization.js" defer></script>
|
||
<script src="scripts/persistent-storage.js" defer></script>
|
||
<script src="scripts/ui-main.js" defer></script>
|
||
<script src="scripts/main.js" defer></script>
|
||
|
||
<!-- Sounds -->
|
||
<audio id="blop" autobuffer>
|
||
<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>ErikrafT Drop works only with JavaScript</h3>
|
||
</x-noscript>
|
||
</noscript>
|
||
</head>
|
||
|
||
<body translate="no">
|
||
<header class="row-reverse wrap opacity-0">
|
||
<a href="#about" class="icon-button" data-i18n-key="header.about" data-i18n-attrs="title aria-label">
|
||
<svg class="icon"><use xlink:href="#info-outline"></use></svg>
|
||
</a>
|
||
<div id="language-selector" class="icon-button" data-i18n-key="header.language-selector" data-i18n-attrs="title">
|
||
<svg class="icon"><use xlink:href="#icon-language-selector"></use></svg>
|
||
</div>
|
||
|
||
<!-- Theme Selector -->
|
||
<div id="theme-wrapper">
|
||
<div id="theme-auto" class="icon-button selected" data-i18n-key="header.theme-auto" data-i18n-attrs="title">
|
||
<svg class="icon"><use xlink:href="#icon-theme-auto"></use></svg>
|
||
</div>
|
||
<div>
|
||
<div id="theme-light" class="icon-button" data-i18n-key="header.theme-light" data-i18n-attrs="title">
|
||
<svg class="icon"><use xlink:href="#icon-theme-light"></use></svg>
|
||
</div>
|
||
<div id="theme-dark" class="icon-button" data-i18n-key="header.theme-dark" data-i18n-attrs="title">
|
||
<svg class="icon"><use xlink:href="#icon-theme-dark"></use></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notifications and other Icon Buttons (hidden) -->
|
||
<div id="notification" class="icon-button" data-i18n-key="header.notification" data-i18n-attrs="title" hidden>
|
||
<svg class="icon"><use xlink:href="#notifications"></use></svg>
|
||
</div>
|
||
<div id="install" class="icon-button" data-i18n-key="header.install" data-i18n-attrs="title" hidden>
|
||
<svg class="icon"><use xlink:href="#homescreen"></use></svg>
|
||
</div>
|
||
<div id="pair-device" class="icon-button" data-i18n-key="header.pair-device" data-i18n-attrs="title">
|
||
<svg class="icon"><use xlink:href="#pair-device-icon"></use></svg>
|
||
</div>
|
||
<div id="edit-paired-devices" class="icon-button" data-i18n-key="header.edit-paired-devices" data-i18n-attrs="title" hidden>
|
||
<svg class="icon"><use xlink:href="#edit-pair-devices-icon"></use></svg>
|
||
</div>
|
||
<div id="join-public-room" class="icon-button" data-i18n-key="header.join-public-room" data-i18n-attrs="title">
|
||
<svg class="icon"><use xlink:href="#public-room-icon"></use></svg>
|
||
</div>
|
||
<div id="expand" class="icon-button" data-i18n-key="header.expand" data-i18n-attrs="title" hidden>
|
||
<svg class="icon"><use xlink:href="#caret"></use></svg>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<div id="center" class="opacity-0">
|
||
<x-peers class="center grow-5"></x-peers>
|
||
<x-no-peers class="center grow fade-in no-animation-on-load" data-i18n-key="instructions.no-peers" data-i18n-attrs="data-drop-bg">
|
||
<h2>Abra o ErikrafT Drop em outros dispositivos para enviar arquivos</h2>
|
||
<div>Emparelhe dispositivos ou entre em uma sala pública para ser descoberto em outras redes</div>
|
||
</x-no-peers>
|
||
<x-instructions class="grow fade-in" data-i18n-key="instructions.x-instructions" data-i18n-attrs="desktop mobile data-drop-peer data-drop-bg"></x-instructions>
|
||
|
||
<div class="shr-panel panel column" hidden>
|
||
<div class="row">
|
||
<div class="thumb center">
|
||
<div class="text-thumb row" hidden>
|
||
<svg><use xlink:href="#font"></use></svg>
|
||
<svg><use xlink:href="#i-cursor"></use></svg>
|
||
</div>
|
||
<div class="file-thumb" hidden>
|
||
<svg><use xlink:href="#file"></use></svg>
|
||
</div>
|
||
<div class="image-thumb" hidden></div>
|
||
</div>
|
||
<div class="share-descriptor column p-1">
|
||
<span class="descriptor-item"></span>
|
||
<span class="descriptor-other" hidden></span>
|
||
</div>
|
||
</div>
|
||
<div class="center btn-row wrap">
|
||
<div class="cancel-btn btn btn-small btn-rounded btn-dark text-white" data-i18n-key="header.cancel-share-mode" data-i18n-attrs="text"></div>
|
||
<div class="edit-btn btn btn-small btn-rounded btn-dark text-white" data-i18n-key="header.edit-share-mode" data-i18n-attrs="text" hidden></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="websocket-fallback" class="text-center" hidden>
|
||
<span data-i18n-key="footer.traffic" data-i18n-attrs="text"></span>
|
||
<span data-i18n-key="footer.routed" data-i18n-attrs="text"></span>
|
||
<span data-i18n-key="footer.webrtc" data-i18n-attrs="text"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer class="column opacity-0">
|
||
<svg class="icon logo">
|
||
<defs>
|
||
<linearGradient id="primaryGradient" gradientTransform="rotate(90)">
|
||
<stop offset="0%" class="start-color" />
|
||
<stop offset="100%" class="stop-color" />
|
||
</linearGradient>
|
||
</defs>
|
||
<use xlink:href="#wifi-tethering" style="fill: url(#primaryGradient);"></use>
|
||
</svg>
|
||
<div class="column">
|
||
<div class="known-as-wrapper">
|
||
<span data-i18n-key="footer.known-as" data-i18n-attrs="text"></span>
|
||
<div id="display-name" class="badge" data-i18n-key="footer.display-name" data-i18n-attrs="data-placeholder title" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable></div>
|
||
<svg class="icon edit-pen">
|
||
<use xlink:href="#edit-pen-icon"></use>
|
||
</svg>
|
||
</div>
|
||
<div class="discovery-wrapper panel border row">
|
||
<div class="row center">
|
||
<span data-i18n-key="footer.discovery" data-i18n-attrs="text"></span>
|
||
</div>
|
||
<div class="row center wrap">
|
||
<span class="badge badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title"></span>
|
||
<span class="badge badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden></span>
|
||
<span class="badge badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Additional dialogs and components can be put here (ensure they are accessible) -->
|
||
<!-- ... -->
|
||
|
||
<!-- SVG Icon Library omitted for brevity -->
|
||
|
||
</body>
|
||
</html>
|