1
0
Fork 0
mirror of https://gitlab.com/futo-org/fcast.git synced 2025-06-24 21:25:23 +00:00
fcast/website/index.html
2024-11-20 12:40:48 -06:00

478 lines
26 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FCast</title>
<meta name="keywords" content="WebSite Template" />
<meta name="description" content="Porto - Multipurpose Website Template">
<meta name="author" content="okler.net">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
<!-- Web Fonts -->
<link id="googleFonts" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800%7CShadows+Into+Light&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/fonts/outfit.css" />
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="vendor/animate/animate.compat.css">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-blog.css">
<link rel="stylesheet" href="css/theme-shop.css">
<!-- Revolution Slider CSS -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css">
<link rel="stylesheet" href="vendor/rs-plugin/css/layers.css">
<link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css">
<link rel="stylesheet" href="css/style.css">
<!-- Skin CSS -->
<link id="skinCSS" rel="stylesheet" href="css/skin-app-landing.css">
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.min.js"></script>
</head>
<body data-plugin-scroll-spy data-plugin-options="{'target': '#header'}">
<div class="body">
<div class="custom-svg-1">
<img width="1290" height="1290" src="images/shape-1.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': ''}" />
</div>
<div class="opacity-2"><div class="custom-el custom-el-circle border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0" data-appear-animation-duration="3s" style="top: 20%; left: 50%; width: 38px; height: 38px;"></div></div>
<div class="opacity-2"><div class="custom-el custom-el-circle border-color-secondary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200" data-appear-animation-duration="3s" style="top: 27%; left: 55%; width: 15px; height: 15px;"></div></div>
<div class="opacity-2"><div class="custom-el custom-el-circle border-color-secondary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="400" data-appear-animation-duration="3s" style="top: 54%; left: 50%; width: 15px; height: 15px;"></div></div>
<div class="opacity-2"><div class="custom-el custom-el-circle custom-el-blur-1 border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300" data-appear-animation-duration="3s" style="top: 70%; left: 47%; width: 48px; height: 48px;"></div></div>
<div class="opacity-2"><div class="custom-el custom-el-rounded-rectangle custom-rotate-45 custom-el-blur-2 border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="700" data-appear-animation-duration="3s" style="top: 60%; left: 42%; width: 27px; height: 27px;"></div></div>
<div class="opacity-2"><div class="custom-el custom-el-rounded-rectangle custom-rotate-45 custom-el-blur-1 border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="800" data-appear-animation-duration="3s" style="top: 64%; left: 56%; width: 18px; height: 18px;"></div></div>
<div class="opacity-2"><div class="custom-el custom-el-circle border-color-primary appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="500" data-appear-animation-duration="3s" style="top: 75%; left: 96%; width: 38px; height: 38px;"></div></div>
<header id="header" class="header-transparent header-transparent-light-bottom-border header-transparent-light-bottom-border-1 header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
<div class="header-body border-top-0 header-body-bottom-border">
<div class="header-container container">
<div class="header-row">
<div class="header-column">
<div class="header-row">
<div class="header-logo">
<a href="https://fcast.org">
<img src="images/logo.svg" class="img-fluid" width="48" height="48" alt="" />
</a>
</div>
</div>
</div>
<div class="header-column justify-content-end">
<div class="header-row">
<div class="header-nav header-nav-links">
<div class="header-nav-main header-nav-main-text-capitalize header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1">
<nav class="collapse">
<ul class="nav nav-pills" id="mainNav">
<li><a href="#overview" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">Overview</a></li>
<li><a href="#what-is-fcast" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">What is FCast?</a></li>
<li><a href="#how-do-i-use" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">How do I use FCast?</a></li>
<li><a href="#key-features" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">Key Features</a></li>
<li><a href="#faq" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">FAQ</a></li>
<li><a href="#downloads" class="nav-link active" data-hash data-hash-offset="0" data-hash-offset-lg="70">Downloads</a></li>
</ul>
</nav>
</div>
</div>
<button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div role="main" class="main">
<section id="overview" class="section bg-transparent border-0 py-5 m-0 p-relative">
<div class="container pt-lg-5">
<div class="row pt-lg-5">
<div class="col-lg-5 text-center text-lg-start pt-2 mt-2">
<h2 class="text-color-primary positive-ls-3 mt-lg-5 pt-lg-5 font-weight-bold text-uppercase text-4 line-height-3 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">Cast media to your TV</h2>
<h1 class="custom-font-size-1 text-color-dark font-weight-bold py-3 mb-1 p-relative appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-plugin-options="{'minWindowWidth': 0}">
<span class="p-relative z-index-1">
<div id="title-container">
<div id="title-icon"></div>
<div id="title-text" class="non-selectable">FCast</div>
</div>
</span>
</h1>
<p class="text-4-5 font-weight-medium mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">Casting made open source</p>
</div>
<div class="col-lg-7 pt-5 pt-lg-0 text-center">
<img src="images/tv.png" style="width: 100%;" />
</div>
</div>
</div>
</section>
<section class="call-to-action custom-call-to-action call-to-action-dark mb-5">
<div class="container">
<div class="row p-3 p-md-0">
<div class="col-lg-8">
<div class="call-to-action-content mx-auto m-lg-0">
<h3 class="mb-1 font-weight-semi-bold">Available for <strong class="font-weight-bold">Linux, MacOS, Windows and Android.</strong></h3>
<p class="mb-0 opacity-7">Also available on the Google Play Store and Amazon Appstore.</p>
</div>
</div>
<div class="col-lg-4 text-center text-lg-start">
<div class="call-to-action-btn mx-auto mt-0 mt-md-4 m-lg-0">
<a href="#downloads" class="d-inline-flex align-items-center btn btn-gradient text-uppercase positive-ls-2 font-weight-bold text-2 btn-py-3 px-3 px-sm-5">
<span class="d-none d-sm-inline-block"><img width="32" height="28" src="images/icon-cloud.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-stroke-color-light me-2'}" /></span>
Download Now
</a>
</div>
</div>
</div>
</div>
</section>
<section id="what-is-fcast" class="py-3 py-lg-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 text-center text-lg-start">
<img src="images/whatis.png" class="img-fluid mb-4 mb-lg-0" alt="" />
</div>
<div class="col-lg-6 text-center text-lg-start">
<div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
<h2 class="text-color-dark font-weight-bold text-10 mb-4-5">What is FCast?</h2>
<p class="font-weight-medium text-4-5 line-height-6 negative-ls-05">Embracing Open Development</p>
<p class="text-3-5 mb-0">FCast is an open-source protocol designed to open wireless audio and video streaming to everybody. With support for various stream types like DASH, HLS, and mp4, it empowers developers to create their own unique streaming experiences.
In contrast to traditional closed protocols, FCast champions open innovation. Developers can create custom receivers, integrate the client protocol into their own apps, or even enhance the protocol, contributing to an evolving open ecosystem. For more information click <a href="https://github.com/futo-org/fcast">here</a>.</p></p>
</div>
</div>
</div>
</div>
</section>
<div class="py-4">
<hr>
</div>
<section id="how-do-i-use" class="py-3 py-lg-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 text-center text-lg-start">
<div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
<h2 class="text-color-dark font-weight-bold text-10 mb-4-5">How to Get Started with FCast?</h2>
<p class="font-weight-medium text-4-5 line-height-6 negative-ls-05">Setting Up Your Environment</p>
<p class="text-3-5 mb-0">For users: Begin by setting up your receiver. Receivers compatible with Linux, Windows, MacOS (via Electron), or Android (native) are readily available. The receiver serves as the target for your media streams, and should be installed on the device you aim to cast to. Discover more about setting up your receiver <a href="https://github.com/futo-org/fcast">here</a>.</p>
<p class="text-3-5 mb-0">For developers: If you're looking to build a custom receiver or to integrate FCast into your existing application, you'll find a wealth of resources at your disposal. Start by reviewing our <a href="https://github.com/futo-org/fcast/tree/master/receivers">existing receiver implementations</a> for inspiration and guidance. For an in-depth understanding of how FCast works, our <a href="https://gitlab.futo.org/videostreaming/fcast/-/wikis/home">protocol documentation</a> is an indispensable resource.</p>
</div>
</div>
<div class="col-lg-6 text-center text-lg-start">
<img src="images/fcast.png" class="img-fluid mb-4 mb-lg-0" alt="" />
</div>
</div>
</div>
</section>
<div class="py-4">
<hr>
</div>
<section id="key-features" class="py-3 py-lg-5">
<div class="container">
<div class="row align-items-center">
<div class="col appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="100">
<div class="text-center">
<h2 class="text-color-dark font-weight-bold text-10 mb-4-5">Key Features</h2>
<p class="font-weight-medium text-4-5 line-height-6 negative-ls-05"> Explore the distinctive features of FCast that make it a dynamic, user-friendly, and developer-centric platform for media streaming.</p>
</div>
<div class="row pt-3">
<div class="col-lg-6">
<div class="feature-box feature-box-style-6 custom-feature-box-1 reverse">
<div class="feature-box-info">
<h4 class="text-5 font-weight-bold mb-1 mt-3">Open-Source Protocol</h4>
<p class="mb-4 text-3-5 font-weight-medium">FCast offers a fully open-source protocol, enabling unrestricted innovation in the field of media streaming.</p>
</div>
</div>
</div>
<div class="col-lg-6 text-start">
<div class="feature-box feature-box-style-6 custom-feature-box-1">
<div class="feature-box-info">
<h4 class="text-5 font-weight-bold mb-1 mt-3">Various Stream Type Support</h4>
<p class="mb-4 text-3-5 font-weight-medium">FCast supports a range of stream types like DASH, HLS, and mp4, accommodating diverse media content.</p>
</div>
</div>
</div>
</div>
<div class="row pt-3">
<div class="col-lg-6">
<div class="feature-box feature-box-style-6 custom-feature-box-1 reverse">
<div class="feature-box-info">
<h4 class="text-5 font-weight-bold mb-1 mt-3">Cross-Platform Compatibility</h4>
<p class="mb-4 text-3-5 font-weight-medium">FCast's core implementation runs seamlessly on Linux, Windows, MacOS (via Electron), and Android (native), ensuring a broad range of device support.</p>
</div>
</div>
</div>
<div class="col-lg-6 text-start">
<div class="feature-box feature-box-style-6 custom-feature-box-1">
<div class="feature-box-info">
<h4 class="text-5 font-weight-bold mb-1 mt-3">Full Playback Control</h4>
<p class="mb-4 text-3-5 font-weight-medium">The client retains full control over playback, capable of operations like pause, resume, seek, and volume adjustment, for a tailored user experience.</p>
</div>
</div>
</div>
</div>
<div class="row pt-3">
<div class="col-lg-6">
<div class="feature-box feature-box-style-6 custom-feature-box-1 reverse">
<div class="feature-box-info">
<h4 class="text-5 font-weight-bold mb-1 mt-3">mDNS for Discovery</h4>
<p class="mb-4 text-3-5 font-weight-medium">FCast uses mDNS to discover available receivers, simplifying the connection process.</p>
</div>
</div>
</div>
<div class="col-lg-6 text-start">
<div class="feature-box feature-box-style-6 custom-feature-box-1">
<div class="feature-box-info">
<h4 class="text-5 font-weight-bold mb-1 mt-3">Real-Time Updates</h4>
<p class="mb-4 text-3-5 font-weight-medium">The receiver provides real-time updates about the playback status to the client, ensuring synchronized communication.</p>
</div>
</div>
</div>
</div>
<div class="row pt-3">
<div class="col-lg-6">
<div class="feature-box feature-box-style-6 custom-feature-box-1 reverse">
<div class="feature-box-info">
<h4 class="text-5 font-weight-bold mb-1 mt-3">Community Contribution</h4>
<p class="mb-4 text-3-5 font-weight-medium">As an open-source project, FCast thrives on the contributions from the global developer community, fostering continuous growth and enhancement.</p>
</div>
</div>
</div>
<div class="col-lg-6 text-start">
<div class="feature-box feature-box-style-6 custom-feature-box-1">
<div class="feature-box-info">
<h4 class="text-5 font-weight-bold mb-1 mt-3">Custom Receiver Implementation</h4>
<p class="mb-0 mb-lg-4 text-3-5 font-weight-medium">Developers have the freedom to create custom receivers, allowing them to explore new possibilities for content delivery.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="py-4">
<hr>
</div>
<section id="faq" class="py-5 my-5 p-relative">
<div class="container">
<div class="row">
<div class="col">
<h2 class="text-color-dark font-weight-bold text-10 mb-4-5">FAQ</h2>
<div class="accordion accordion-modern-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="150" id="accordion1">
<div class="card card-default">
<div class="card-header" id="collapse1HeadingOne">
<h4 class="card-title m-0">
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1One" aria-expanded="false" aria-controls="collapse1One">
1 - Why did you develop FCast?
</a>
</h4>
</div>
<div id="collapse1One" class="collapse" aria-labelledby="collapse1HeadingOne" data-bs-parent="#accordion1">
<div class="card-body">
<p class="mb-0">We developed FCast to democratize the field of media streaming. By creating an open-source protocol, we aim to encourage innovation and offer developers the freedom to create their own custom receiver implementations. This way, we're not just providing a tool for streaming media content, but also creating a dynamic platform for technological growth and creativity.</p>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header" id="collapse1HeadingTwo">
<h4 class="card-title m-0">
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Two" aria-expanded="false" aria-controls="collapse1Two">
2 - How does FCast differ from other streaming protocols like Chromecast or AirPlay?
</a>
</h4>
</div>
<div id="collapse1Two" class="collapse" aria-labelledby="collapse1HeadingTwo" data-bs-parent="#accordion1">
<div class="card-body">
<p class="mb-0">Unlike Chromecast or AirPlay, which are closed protocols, FCast is entirely open-source. This allows developers to create custom receiver implementations and integrate FCast into their existing applications, making it a more flexible and adaptable option.
</p>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header" id="collapse1HeadingThree">
<h4 class="card-title m-0">
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Three" aria-expanded="false" aria-controls="collapse1Three">
3 - How can I implement FCast into my own application?
</a>
</h4>
</div>
<div id="collapse1Three" class="collapse" aria-labelledby="collapse1HeadingThree" data-bs-parent="#accordion1">
<div class="card-body">
<p class="mb-0">FCast has provided example implementations of both clients and receivers in Android, Rust, and TypeScript. You can use these as a reference while building your own application. Additionally, you can consult the protocol documentation for specific details on implementing the FCast protocol. Despite its powerful capabilities, the protocol is designed to be simple and straightforward to implement, making it accessible for developers at all levels.</p>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header" id="collapse1HeadingFour">
<h4 class="card-title m-0">
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Four" aria-expanded="false" aria-controls="collapse1Four">
4 - How does FCast handle device discovery?
</a>
</h4>
</div>
<div id="collapse1Four" class="collapse" aria-labelledby="collapse1HeadingFour" data-bs-parent="#accordion1">
<div class="card-body">
<p class="mb-0">FCast uses mDNS (Multicast Domain Name System) to discover available receivers on the network, simplifying the process of establishing a connection between the client and receiver.</p>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header" id="collapse1HeadingFive">
<h4 class="card-title m-0">
<a class="accordion-toggle text-color-dark font-weight-bold collapsed" data-bs-toggle="collapse" data-bs-target="#collapse1Five" aria-expanded="false" aria-controls="collapse1Five">
5 - Can I contribute to FCast's development?
</a>
</h4>
</div>
<div id="collapse1Five" class="collapse" aria-labelledby="collapse1HeadingFive" data-bs-parent="#accordion1">
<div class="card-body">
<p class="mb-0">Absolutely! As an open-source project, FCast thrives on community contributions. You can contribute to FCast by enhancing the codebase, implementing new features, fixing bugs, and more. You can find more details in our CONTRIBUTING.md file on our repository.
</p>
</div>
</div>
</div>
</div>
<a href="https://github.com/futo-org/fcast" class="btn btn-secondary positive-ls-2 btn-outline font-weight-bold text-2 btn-py-3 px-5 mt-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}">GO TO REPOSITORY</a>
</div>
</div>
</div>
<div class="custom-svg-4">
<img width="1290" height="1290" src="images/shape-1.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': ''}" />
</div>
</section>
<section id="downloads" class="bg-gradient py-5 my-5 p-relative z-index-2">
<div class="container">
<div class="row py-5 text-color-light p-relative">
<div class="text-center text-lg-start">
<h2 class="text-color-light font-weight-bold text-10 mb-5">Download Receiver</h2>
<p class="font-weight-semibold text-color-light text-6 line-height-6 negative-ls-05 mt-4 mb-0">Download to harness the power of open-source media streaming</p>
<p class="font-weight-medium text-color-light opacity-6 text-4-5 line-height-6 negative-ls-05 mb-5">Available on multiple platforms, our suite of resources is ready to help you integrate FCast into your own applications.</p>
<a href="https://github.com/futo-org/fcast/releases/tag/1" class="d-inline-flex align-items-center btn btn-light btn-py-2 px-4 text-start me-2 mb-3 mb-sm-0">
<img height="34" src="images/github-mark.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-stroke-color-dark me-2'}" />
<span class="font-weight-semibold text-4"><em class="text-1 text-uppercase font-weight-medium opacity-6 d-block fst-normal p-relative top-2">DOWNLOAD ON</em><span class="text-color-dark text-4 negative-ls-05 p-relative bottom-2">GitHub</span></span>
</a>
<a href="https://play.google.com/store/apps/details?id=com.futo.fcast.receiver.playstore&pli=1" class="d-inline-flex align-items-center btn btn-light btn-py-2 px-4 text-start me-2 mb-3 mb-sm-0">
<img height="34" src="images/icon-google-play.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-stroke-color-dark me-2'}" />
<span class="font-weight-semibold text-4"><em class="text-1 text-uppercase font-weight-medium opacity-6 d-block fst-normal p-relative top-2">DOWNLOAD ON</em><span class="text-color-dark text-4 negative-ls-05 p-relative bottom-2">Google Play</span></span>
</a>
<a href="https://www.amazon.com/dp/B0CLKVH8GZ/ref=sr_1_1?keywords=fcast&amp;s=mobile-apps&amp;sr=1-1" class="d-inline-flex align-items-center btn btn-light btn-py-2 px-4 text-start me-2 mb-3 mb-sm-0">
<img height="34" width="34" src="images/icon-amazon.png" alt="">
<span class="font-weight-semibold text-4"><em class="text-1 text-uppercase font-weight-medium opacity-6 d-block fst-normal p-relative top-2">DOWNLOAD ON</em><span class="text-color-dark text-4 negative-ls-05 p-relative bottom-2">Amazon Appstore</span></span>
</a>
</div>
</div>
</div>
</section>
</div>
<footer id="footer" class="bg-transparent border-0 mt-lg-5 pt-lg-5">
<div class="footer-copyright bg-transparent">
<div class="container py-2">
<hr class="bg-dark opacity-1 m-0">
<div class="row py-4 pb-5">
<div class="col-md-6 py-4 text-center text-md-start">
<p class="mb-0 text-3 opacity-8 negative-ls-05 font-weight-medium">FUTO © Copyright 2023. All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Vendor -->
<script src="vendor/plugins/js/plugins.min.js"></script>
<!-- Theme Base, Components and Settings -->
<script src="js/theme.js"></script>
<!-- Current Page Vendor and Views -->
<script src="js/views/view.contact.js"></script>
<script src="js/script.js"></script>
<!-- Theme Custom -->
<script src="js/custom.js"></script>
<!-- Theme Initialization Files -->
<script src="js/theme.init.js"></script>
</body>
</html>