Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature new vertical zartantv #499

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Feature new vertical zartantv #499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ee7b1e4
Adds blueprint for new Zartan TV vertical
mdwallick Feb 8, 2022
e560355
Initial commit of new Zartan TV vertical
mdwallick Feb 8, 2022
f87d743
Removes unused import
mdwallick Feb 9, 2022
38f111a
Removed tfplan file; should be ignored
mdwallick Feb 9, 2022
0bc4ee1
Cleans up HTML, CSS and improves Javascript around registering a netw…
mdwallick Feb 10, 2022
66a21d5
Fixes linting issues
mdwallick Feb 10, 2022
61cc316
Fixes code smells and minor bugs identified by SonarCloud
mdwallick Feb 11, 2022
f9cf01e
Fixes code smells and minor bugs identified by SonarCloud
mdwallick Feb 11, 2022
783a472
Fixes code smells and minor bugs identified by SonarCloud
mdwallick Feb 11, 2022
3ef4df0
Removed unused variables from view templates
mdwallick Feb 11, 2022
39c0b66
Fixes HTML bugs ID by SonarCloud
Feb 20, 2022
07c7c8c
Removes unused import
Feb 20, 2022
d26d776
Updates terraform HCL for zartantv, removes unneeded HCL files
Mar 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 139 additions & 0 deletions _zartantv/templates/zartantv/devicepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!--Do Not Remove any parts of this document unless you expect to not use out of the box behaviours-->
<!DOCTYPE html>
<html lang="en">
{% include '//components/template-header-meta.html' %}
<script type="text/javascript" src="/static/js/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="/static/js/zartantv.js"></script>
<link href="/static/css/zartantv.css" rel="stylesheet" type="text/css">

<body>
<div class="main" id="main">

<div class="row">
<div class="col-lg-4">
<a href="#" class="btn btn-primary btn-lg id-open">Device Flow Information</a>
</div>
<div class="col-lg-6"></div>
<div class="col-lg-2">
<a href="#" class="btn btn-primary btn-lg cta-open">TV Controls</a>
</div>
</div>

<div class="row">
<div class="col-md-12">
<div class="tv">
<div id="tv" class="tvscreen" style="display: none;">
<iframe src="https://streamable.com/e/imsnba?autoplay=1" title="TV display screen"></iframe>
</div>
<section class="toggle-form">
<div class="formwrap px-4" style="text-align:center">
<div class="icon-close pos-a" style="text-align:center">
<br>
<button class="btn btn-transparent-dark btn-icon" type="button">
<span data-feather="x" style="color:white;"></span>
</button>
</div>
<br><br>
<button class="btn btn-primary" id="btnRebootTV">TV Reboot</button>
<br><br>
<button class="btn btn-primary" id="btnRemoveTokens">Remove<br>TV Tokens</button>
<br><br>
<button class="btn btn-primary" id="btnRevokeAccess">Revoke<br>Device Access</button>
<br><br>
<button class="btn btn-primary" id="btnShowIDToken" type="button" data-toggle="modal" data-target="#tokenmodal">
View<br>ID Token
</button>
<br><br>
<button class="btn btn-primary" id="btnShowAccessToken" type="button" data-toggle="modal" data-target="#tokenmodal">
View<br>Access Token
</button>
</div>
<div class="toggle-bg"></div>
</section>
<section class="toggle-deviceid">
<div class="formwrap2 px-4" style="text-align:left">
<div class="icon2-close pos-a" style="text-align:center">
<br>
<button class="btn btn-transparent-dark btn-icon" type="button">
<span data-feather="x" style="color:white;"></span>
</button>
</div>
<strong>STEP 1 - Device Information from Host:</strong><br><br>
Device information is requested by Device Authorization Endpoint and then stored locally.<br><br>
Device Authorization Endpoint also stores device information tied to the <strong class="underline">User Code</strong> for use
during the registration process.<br><br>
User code is displayed to user for registration.<br><br>
<pre><code id="deviceinfo"> No Device Information. Yet!</code></pre>
<br><br>
<strong>STEP 2 - Retrieve Token from Device Authorization Endpoint:</strong><br><br>
The Device polls an API to retrive tokens using the <strong class="underline">Device Code</strong>.<br><br>
Tokens are stored locally for validation on a scheduled basis or on startup of the device.<br><br>
<pre><code id="deviceinfo2"></code></pre>
</div>
<div class="toggle-bg2"></div>
</section>
<div class="appbar" id="appbar">
<button class="action-button shadow animate blue" id="btnTVPower">{{appname}}</button>
</div>
</div>
</div>
</div>

</div>

{% include '//components/template-footer-scripts.html' %}

<div class="modal" id="getcode" tabindex="-1" role="dialog" aria-labelledby="Activate Your Device" style="display: none;" aria-hidden="true">
<div class="topbar" id="topbar">
<br>
<div class="row">
<div class="col-md-6">
<div class="card" style="background: none;">
<div class="card-body" style="color:white;">
<h1>Active Your Device</h1>
In order for The application to work please do one of the following:
<ol>
<li>
Go to this website,
<a id="verificationuri" href="#" target="_blank"></a><br>
or use the qr code on your computer or mobile devices.
<div id="qrcode" style="text-align: -webkit-center;"></div>
</li>
<li>When promopted enter the Activation Code located on the right of the screen.</li>
<li>Your device is now Active!</li>
</ol>
</div>
</div>
</div>
<div class="col-md-6" style="border-left: 2px solid gray;">
<div class="card" style="background: none;">
<div class="card-body" style="text-align: center;"><br><br><br><br>
<h1>Activation Code</h1><br><br>
<div id="codebox" style="display: flex;flex-direction: row;place-content: center;flex: 1 1 0%;"></div>
<br><br>
<a id="btnCancelGetCode" href="#" class="actionbtn">Cancel</a> <a id="btnGetCode" href="#" class="actionbtn" style="float:right;">Get New Code</a>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="modal fade" id="tokenmodal" tabindex="-1" role="dialog" aria-labelledby="Token" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tokentitle">Token Modal</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<pre id="tokenbody">No Token Found.</pre>
</div>
<div class="modal-footer"><button class="btn btn-primary" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
</body>

</html>
93 changes: 93 additions & 0 deletions _zartantv/templates/zartantv/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
{% extends "zartantv/template.html" %} {% block content %}
<header class="page-header page-header-dark bg-img-cover overlay overlay-80" style='background-image: url("{{ config.settings.app_banner_img_1 }}")'>
<div class="page-header-content py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10 text-center">
<div data-aos="fade-up">
<h1 class="page-header-title">{{ config.settings.app_slogan }}</h1>
<p class="page-header-text">{{ config.settings.app_subslogan }} </p>
</div>
<button class="btn btn-marketing rounded-pill btn-primary" data-aos="fade-up" data-aos-delay="100">
Learn More
</button>
</div>
</div>
</div>
</div>
<div class="svg-border-rounded text-white">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.54 17.34" preserveAspectRatio="none" fill="currentColor">
<path d="M144.54,17.34H0V0H144.54ZM0,0S32.36,17.34,72.27,17.34,144.54,0,144.54,0"></path>
</svg>
</div>
</header>

<section class="bg-white py-10">
<div class="container">
<div class="row text-center">
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="icon-stack icon-stack-xl bg-gradient-primary-to-secondary text-white mb-4"><span data-feather="send"></span></div>
<h2>The Most Reliable Streaming Service</h2>
<p class="mb-0">We deliver streaming services rain or shine.</p>
</div>
<div class="col-lg-4 mb-5 mb-lg-0">
<div class="icon-stack icon-stack-xl bg-gradient-primary-to-secondary text-white mb-4"><span data-feather="calendar"></span></div>
<h2>Stream to Multiple Devices</h2>
<p class="mb-0">We stream to your devices, from phones to tv to computers.</p>
</div>
<div class="col-lg-4">
<div class="icon-stack icon-stack-xl bg-gradient-primary-to-secondary text-white mb-4"><span data-feather="search"></span></div>
<h2>Find the show you like</h2>
<p class="mb-0">Provide 1000's of titles.</p>
</div>
</div>
</div>
<div class="svg-border-rounded text-light">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.54 17.34" preserveAspectRatio="none" fill="currentColor">
<path d="M144.54,17.34H0V0H144.54ZM0,0S32.36,17.34,72.27,17.34,144.54,0,144.54,0"></path>
</svg>
</div>
</section>

<section class="bg-light py-10">
<div class="container">
<div class="row justify-content-center z-1">
<div class="col-lg-8" data-aos="fade-up">
<div class="card lift mb-n15">
<div class="card-body p-2">
<div class="video overlay bg-img-cover rounded" style='background-image: "https://cdn-zartan.s3.us-east-2.amazonaws.com/static/img/travel-editor-favorite-products.jpg"'>
<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;">
<iframe src="https://streamable.com/e/u8liv3?autoplay=1" title="TV guide demo video" style="border:0;width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="bg-img-cover overlay overlay-80 py-10" style='background-image: url("https://cdn-zartan.s3.us-east-2.amazonaws.com/static/img/movie.jpg")'>
<div class="container position-relative">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="display-4 text-center py-10 my-10 text-white">You’re the reason we <span class="text-primary">love what we do.</span> Our commitment is to your
<span class="text-primary">family</span> and delivering quality <span class="text-primary">service</span>.
</div>
</div>
</div>
</div>
</section>

<section class="bg-white py-10">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-6 col-lg-8 col-md-10 text-center my-10 py-10">
<h2>Ready to get Started?</h2>
<p class="lead text-gray-500 mb-5">We'd love to hear from you. Our customer service representatives are here for you 24/7.</p>
<a class="btn btn-primary btn-marketing rounded-pill" href="#!">Contact us</a>
</div>
</div>
</div>
</section>
{% endblock %} {% block footer %} {% endblock %}
43 changes: 43 additions & 0 deletions _zartantv/templates/zartantv/mydevices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{% extends "zartantv/template.html" %} {% block content %}
<section class="bg-light py-5">
<div class="container">
<div class="d-flex align-items-center mb-5">
<div class="icon-stack icon-stack-lg bg-primary text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
<div class="ml-3">
<h2 class="mb-0">Account</h2>
<p class="lead mb-0">Your Devices</p>
</div>
</div>
<div class="card border-bottom">
<div class="card-body">
<div class="separator-2"></div>
<table class="table table-striped" aria-describedby="List of my registered devices">
<thead>
<tr>
<th>Device Type</th>
<th>Device ID</th>
<th style="text-align:center">Remove</th>
</tr>
</thead>
<tbody>
{% for i in devices %}
<tr>
<td>Television</td>
<td>{{i}}</td>
<td style="text-align:center"><a href="removedevice?device_id={{ i }}"><span class="fa fa-times-circle"></span></a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</section>
{% endblock %} {% block footer %} {% endblock %}
56 changes: 56 additions & 0 deletions _zartantv/templates/zartantv/navitems.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-lg-5">
<li class="nav-item"><a class="nav-link" href="../index">Home</a></li>
<li class="nav-item dropdown dropdown-xl no-caret">
<a class="nav-link dropdown-toggle" id="navbarDropdownDemos" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Us<span
class="fas fa-chevron-right dropdown-arrow"></span></a>
<div class="dropdown-menu dropdown-menu-right animated--fade-in-up mr-lg-n15" aria-labelledby="navbarDropdownDemos">
<div class="row no-gutters">
<div class="col-lg-5 p-lg-3 bg-img-cover overlay overlay-primary overlay-70 d-none d-lg-block">
<div class="d-flex h-100 w-100 align-items-center justify-content-center">
<div class="text-white text-center z-1">
<div class="mb-3">We are here for you.</div>
</div>
</div>
</div>
<div class="col-lg-7 p-lg-5">
<div class="row">
<div class="col-lg-6">
<h6 class="dropdown-header text-primary">About Us</h6>
<a class="dropdown-item" href="#">Who We Are</a>
<div class="dropdown-divider border-0"></div>
<h6 class="dropdown-header text-primary">Business</h6>
<a class="dropdown-item" href="#">Legal Information</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-lg no-caret">
<a class="nav-link dropdown-toggle" id="navbarDropdownPages" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Streaming Service<span
class="fas fa-chevron-right dropdown-arrow"></span></a>
<div class="dropdown-menu dropdown-menu-right animated--fade-in-up" aria-labelledby="navbarDropdownPages">
<div class="row no-gutters">
<div class="col-lg-6 p-lg-5">
<h6 class="dropdown-header text-primary">TV Shows</h6>
<a class="dropdown-item" href="#">Sports</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Drama</a>
<a class="dropdown-item" href="#">Game Shows</a>
<div class="dropdown-divider border-0"></div>

</div>
<div class="col-lg-6 p-lg-5">
<h6 class="dropdown-header text-primary">Movies</h6>
<a class="dropdown-item" href="#">New Releases</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Documentaries</a>
<div class="dropdown-divider border-0"></div>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="../registration">Register</a></li>
</ul>
</div>
36 changes: 36 additions & 0 deletions _zartantv/templates/zartantv/navitemslogin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mr-lg-5">
<li class="nav-item"><a class="nav-link" href="../index">Home</a></li>
<li class="nav-item"><a class="nav-link" target="_blank" href="/zartantv/devicepage">Setup TV</a></li>
<li class="nav-item dropdown dropdown-xl no-caret">
<a class="nav-link dropdown-toggle" id="navbarDropdownDemos" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Manage Account<span
class="fas fa-chevron-right dropdown-arrow"></span></a>
<div class="dropdown-menu dropdown-menu-right animated--fade-in-up mr-lg-n15" aria-labelledby="navbarDropdownDemos">
<div class="row no-gutters">
<div class="col-lg-5 p-lg-3 bg-img-cover overlay overlay-primary overlay-70 d-none d-lg-block">
<div class="d-flex h-100 w-100 align-items-center justify-content-center">
<div class="text-white text-center z-1">
<div class="mb-3">We are here for you.</div>
</div>
</div>
</div>
<div class="col-lg-7 p-lg-5">
<div class="row">
<div class="col-lg-6">
<h6 class="dropdown-header text-primary">Manage Access</h6>
<a class="dropdown-item" href="/manageusers">Manage Family Members</a>
<a class="dropdown-item" href="/profile">Your Tokens</a>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h6 class="dropdown-header text-primary">Manage Devices</h6>
<a class="dropdown-item" href="/zartantv/mydevices">View Your Devices</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Loading