Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
yacmov committed May 30, 2024
1 parent cde7b09 commit 90ad065
Show file tree
Hide file tree
Showing 6 changed files with 326 additions and 307 deletions.
44 changes: 23 additions & 21 deletions app/templates/collaborate-create.html
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
{% extends "new-base.html" %}
{% set title = "Collaborate" %}
{% block content %}
<div class="m-8">
<h2 class="text-6xl font-bold text-center text-transparent bg-clip-text
bg-gradient-to-tr from-indigo-500 via-fuchsia-400 to-purple-400">
<i class="fa-solid fa-tower-cell mr-4"></i>Create Collaborate Session
</h2>
<div class="w-1/2 mt-8 mx-auto">
<h3 class="text-xl"><strong>Step 1.</strong> Select Video</h3>
<select class="mt-1 p-1 w-full rounded-md border-gray-200 border bg-white shadow-sm" name=""
id="">
<option value="">Select Video to Share</option>
</select>
<h3 class="text-xl mt-4"><strong>Step 2.</strong> Create Session Password</h3>
<input class="mt-1 p-1 w-full rounded-md border-gray-200 border bg-white shadow-sm"
placeholder="Create a secure password" type="password">
<input class="mt-4 p-1 w-full rounded-md border-gray-200 border bg-white shadow-sm"
placeholder="Confirm password" type="password">
<button type="submit" class="bg-gradient-to-r from-indigo-400 to-purple-400 text-white font-bold py-1
mt-4 shadow-sm rounded-xl hover:scale-[1.02] w-full hover:underline transition">Create Session
</button>

<body>
<div class="m-8">
<h2 class="text-6xl font-bold text-center text-transparent bg-clip-text
bg-gradient-to-tr from-indigo-500 via-fuchsia-400 to-purple-400">
<i class="fa-solid fa-tower-cell mr-4"></i>Create Collaborate Session
</h2>
<div class="w-1/2 mt-8 mx-auto">
<h3 class="text-xl"><strong>Step 1.</strong> Select Video</h3>
<select class="mt-1 p-1 w-full rounded-md border-gray-200 border bg-white shadow-sm" name="" id="">
<option value="">Select Video to Share</option>
</select>
<h3 class="text-xl mt-4"><strong>Step 2.</strong> Create Session Password</h3>
<input class="mt-1 p-1 w-full rounded-md border-gray-200 border bg-white shadow-sm"
placeholder="Create a secure password" type="password">
<input class="mt-4 p-1 w-full rounded-md border-gray-200 border bg-white shadow-sm"
placeholder="Confirm password" type="password">
<button type="submit" class="bg-gradient-to-r from-indigo-400 to-purple-400 text-white font-bold py-1
mt-4 shadow-sm rounded-xl hover:scale-[1.02] w-full hover:underline transition">Create Session
</button>
</div>
</div>
</div>
{% endblock %}
</body>
{% endblock %}
32 changes: 18 additions & 14 deletions app/templates/collaborate.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
{% extends "new-base.html" %}
{% set title = "Collaborate" %}
{% block content %}
<div class="m-8 flex items-center">
<div class="flex flex-col gap-8 w-1/2 mx-auto">
<h2 class="text-6xl font-bold text-center text-transparent bg-clip-text
bg-gradient-to-tr from-indigo-500 via-fuchsia-400 to-purple-400"><i class="fa-solid fa-user-group mr-4"></i>OcrRoo
Collaborate</h2>
<p class="text-center text-lg text-gray-500">Join or create an OcrRoo Collaborate session to
exchange code captures with another user. With OcrRoo Collaborate,
you can invite someone to monitor, review, annotate, and assist with your code.</p>
<div class="flex w-full gap-8">
<a class="bg-blue-200/50 w-1/2 py-6 rounded-xl shadow-lg text-2xl text-center"
href="/collaborate/create"><i class="fa-solid fa-tower-cell mr-2"></i>Create Session</a>
<a class="bg-green-200/50 w-1/2 py-6 rounded-xl shadow-lg text-2xl text-center" href=""><i
class="fa-solid fa-link mr-2"></i>Join Session</a>

<body>
<div class="m-8 flex items-center">
<div class="flex flex-col gap-8 w-1/2 mx-auto">
<h2 class="text-6xl font-bold text-center text-transparent bg-clip-text
bg-gradient-to-tr from-indigo-500 via-fuchsia-400 to-purple-400"><i
class="fa-solid fa-user-group mr-4"></i>OcrRoo
Collaborate</h2>
<p class="text-center text-lg text-gray-500">Join or create an OcrRoo Collaborate session to
exchange code captures with another user. With OcrRoo Collaborate,
you can invite someone to monitor, review, annotate, and assist with your code.</p>
<div class="flex w-full gap-8">
<a class="bg-blue-200/50 w-1/2 py-6 rounded-xl shadow-lg text-2xl text-center"
href="/collaborate/create"><i class="fa-solid fa-tower-cell mr-2"></i>Create Session</a>
<a class="bg-green-200/50 w-1/2 py-6 rounded-xl shadow-lg text-2xl text-center" href=""><i
class="fa-solid fa-link mr-2"></i>Join Session</a>
</div>
</div>
</div>
</div>
</body>
{% endblock %}
147 changes: 75 additions & 72 deletions app/templates/new-base.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>{{ title }} | OcrRoo</title>
Expand All @@ -13,86 +14,88 @@
{# Todo: Change from using CDN to using NPM or other package manager #}
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="icon" type="image/png" href="{{ url_for("static", filename="resources/favicon.png") }}">
<link rel="icon" type="image/png" href="{{ url_for(" static", filename="resources/favicon.png" ) }}">
</head>

<body class="bg-gradient-to-br from-gray-50 via-gray-50 to-purple-200">

<div class="flex">
<nav class="flex h-screen flex-col sticky left-0 top-0 w-fit min-w-fit justify-between border-e bg-white">
<a href="#mainContent" class="sr-only">Skip to Main Content</a>
<div class="p-4">
<div class="flex items-center w-fit mx-auto">
<img class="w-10" src="{{ url_for("static", filename="resources/logo.png") }}"
alt="Application Logo">
<p class="pl-2 text-2xl font-extrabold text-transparent bg-clip-text caret-pink-600
<div class="flex">
<nav class="flex h-screen flex-col sticky left-0 top-0 w-fit min-w-fit justify-between border-e bg-white">
<a href="#mainContent" class="sr-only">Skip to Main Content</a>
<div class="p-4">
<div class="flex items-center w-fit mx-auto">
<img class="w-10" src="{{ url_for(" static", filename="resources/logo.png" ) }}"
alt="Application Logo">
<p class="pl-2 text-2xl font-extrabold text-transparent bg-clip-text caret-pink-600
bg-gradient-to-tr from-indigo-500 via-fuchsia-400 to-purple-400">OcrRoo</p>
</div>
<hr class="my-4">
<ul class="space-y-1">
<li>
<a href="/" class="block flex flex-col rounded-lg px-4 py-2 text-sm font-medium
</div>
<hr class="my-4">
<ul class="space-y-1">
<li>
<a href="/" class="block flex flex-col rounded-lg px-4 py-2 text-sm font-medium
{% if title == " Home" %}text-gray-700 bg-gray-100{% else %}text-gray-500 hover:bg-gray-100
hover:text-gray-700{% endif %}">
<span><i class="fa-solid fa-house mr-2"></i>Home</span>
<span class="text-xs text-gray-400 pt-1">({{ hotkeys["open_home_page"] }})</span>
</a>
</li>
<li>
<a href="/upload" class="block flex flex-col rounded-lg px-4 py-2 text-sm font-medium
{% if title == " Upload" %}text-gray-700 bg-gray-100{% else %}text-gray-500
hover:bg-gray-100 hover:text-gray-700{% endif %}">
<span><i class="fa-solid fa-upload mr-2"></i>
Upload Video</span>
<span class="text-xs text-gray-400 pt-1">({{ hotkeys["upload_video"] }})</span>
</a>
</li>
<li class="hidden">
<a href="/collaborate" class="block rounded-lg px-4 py-2 text-sm font-medium
hover:text-gray-700{% endif %}">
<span><i class="fa-solid fa-house mr-2"></i>Home</span>
<span class="text-xs text-gray-400 pt-1">({{ hotkeys["open_home_page"] }})</span>
</a>
</li>
<li>
<a href="/upload" class="block flex flex-col rounded-lg px-4 py-2 text-sm font-medium
{% if title == " Upload" %}text-gray-700 bg-gray-100{% else %}text-gray-500 hover:bg-gray-100
hover:text-gray-700{% endif %}">
<span><i class="fa-solid fa-upload mr-2"></i>
Upload Video</span>
<span class="text-xs text-gray-400 pt-1">({{ hotkeys["upload_video"] }})</span>
</a>
</li>
<li class="hidden">
<a href="/collaborate" class="block rounded-lg px-4 py-2 text-sm font-medium
{% if title == " Collaborate" %}text-gray-700 bg-gray-100{% else %}text-gray-500
hover:bg-gray-100
hover:text-gray-700{% endif %}">
<i class="fa-solid fa-user-group mr-2"></i>Collaborate
</a>
</li>
<li>
<a href="/settings" class="block flex flex-col rounded-lg px-4 py-2 text-sm font-medium
{% if title == " Settings" %}text-gray-700 bg-gray-100{% else %}text-gray-500
hover:bg-gray-100
hover:text-gray-700{% endif %}">
<span><i class="fa-solid fa-gear mr-2"></i>Settings</span>
<span class="text-xs text-gray-400 pt-1">({{ hotkeys["open_settings_page"] }})</span>
</a>
</li>
</ul>
<hr class="my-4">
<a href="" class="block flex flex-col rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100
hover:bg-gray-100 hover:text-gray-700{% endif %}">
<i class="fa-solid fa-user-group mr-2"></i>Collaborate
</a>
</li>
<li>
<a href="/settings" class="block flex flex-col rounded-lg px-4 py-2 text-sm font-medium
{% if title == " Settings" %}text-gray-700 bg-gray-100{% else %}text-gray-500 hover:bg-gray-100
hover:text-gray-700{% endif %}">
<span><i class="fa-solid fa-gear mr-2"></i>Settings</span>
<span class="text-xs text-gray-400 pt-1">({{ hotkeys["open_settings_page"] }})</span>
</a>
</li>
</ul>
<hr class="my-4">
<a href="" class="block flex flex-col rounded-lg px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100
hover:text-gray-700">
<span><i class="fa-solid fa-volume-mute mr-2"></i>Unmute UI SFX</span>
<span class="text-xs text-gray-400 pt-1">({{ hotkeys["open_settings_page"] }})</span>
</a>
</div>
<div class="sticky inset-x-0 bottom-0 border-t text-center border-gray-100 py-4">
<a href="https://github.com/NM-TAFE" target="_blank" class="text-center text-2xl">
<i class="fa-brands fa-github"></i>
</a>
<p class="text-xs text-center">Developed by<br><span class="font-bold">Team Mental Capacity</span></p>
</div>
</nav>
<div class="flex-grow flex flex-col">
<main id="mainContent" class="flex-grow">
{% block content %}{% endblock %}
</main>
<section id="webCliContainer" class="hidden h-64 overflow-y-auto bg-slate-800/90 text-white p-2 bottom-0 sticky left-0 right-0 z-50">
<div class="flex items-center">
<label for="webCliInput" class="text-purple-300 w-fit mr-1">OcrRooWebCli></label>
<input id="webCliInput" class="flex-grow bg-transparent outline-none" type="text" autocomplete="off">
<span><i class="fa-solid fa-volume-mute mr-2"></i>Unmute UI SFX</span>
<span class="text-xs text-gray-400 pt-1">({{ hotkeys["open_settings_page"] }})</span>
</a>
</div>
<div class="sticky inset-x-0 bottom-0 border-t text-center border-gray-100 py-4">
<a href="https://github.com/NM-TAFE" target="_blank" class="text-center text-2xl">
<i class="fa-brands fa-github"></i>
</a>
<p class="text-xs text-center">Developed by<br><span class="font-bold">Team Mental Capacity</span></p>
</div>
</section>
<script src="{{url_for('static', filename='js/webCli.js')}}"></script>
</nav>
<div class="flex-grow flex flex-col">
<main id="mainContent" class="flex-grow">
{% block content %}{% endblock %}
</main>
<section id="webCliContainer"
class="hidden h-64 overflow-y-auto bg-slate-800/90 text-white p-2 bottom-0 sticky left-0 right-0 z-50">
<div class="flex items-center">
<label for="webCliInput" class="text-purple-300 w-fit mr-1">OcrRooWebCli></label>
<input id="webCliInput" class="flex-grow bg-transparent outline-none" type="text"
autocomplete="off">
</div>
</section>
<script src="{{url_for('static', filename='js/webCli.js')}}"></script>
</div>
</div>
</div>
</body>
</html>

</html>
Loading

0 comments on commit 90ad065

Please sign in to comment.