mirror of
https://github.com/ianramzy/decentralized-video-chat.git
synced 2024-11-23 10:39:20 +08:00
Add meet the team section
This commit is contained in:
Ian Ramzy
parent
b8b25071c8
commit
94be316cf1
@ -69,45 +69,35 @@
|
||||
</button>
|
||||
<div class="HoverState" id="mic-text">Mute</div>
|
||||
</div>
|
||||
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{openFullscreen()}">
|
||||
<i class="fas fa-compress fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState">Fullscreen</div>
|
||||
</div>
|
||||
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{pauseVideo()}">
|
||||
<i class="fas fa-video fa-xs" id="video-icon"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="video-text">Pause Video</div>
|
||||
</div>
|
||||
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" id="share-button" onclick="{swap()}">
|
||||
<i id="swap-icon" class="fas fa-desktop fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="swap-text">Share Screen</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button
|
||||
class="hoverButton"
|
||||
onclick="{window.location.href = '/newroom'}"
|
||||
>
|
||||
<i class="fas fa-phone-slash fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState">End Call</div>
|
||||
</div>
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{requestToggleCaptions()}">
|
||||
<i class="fas fa-closed-captioning fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="caption-text">Start Live Caption</div>
|
||||
</div>
|
||||
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{toggleChat()}">
|
||||
<i id="chat-icon" class="fas fa-comment fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="chat-text">Show Chat</div>
|
||||
</div>
|
||||
|
||||
<div class="buttonContainer">
|
||||
<button
|
||||
class="hoverButton"
|
||||
@ -118,6 +108,23 @@
|
||||
</button>
|
||||
<div class="HoverState" id="pip-text">Enter Picture in Picture</div>
|
||||
</div>
|
||||
|
||||
<div class="buttonContainer">
|
||||
<button class="hoverButton" onclick="{requestToggleCaptions()}">
|
||||
<i class="fas fa-closed-captioning fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState" id="caption-text">Start Live Caption</div>
|
||||
</div>
|
||||
|
||||
<div class="buttonContainer">
|
||||
<button
|
||||
class="hoverButton"
|
||||
onclick="{window.location.href = '/newroom'}"
|
||||
>
|
||||
<i class="fas fa-phone-slash fa-xs"></i>
|
||||
</button>
|
||||
<div class="HoverState">End Call</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
|
||||
BIN
public/images/portrait.png
Normal file
BIN
public/images/portrait.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 500 KiB |
@ -695,7 +695,7 @@ function togglePictureInPicture() {
|
||||
} else {
|
||||
pipVideo.requestPictureInPicture().catch((error) => {
|
||||
alert(
|
||||
"You must be connected to another person to endter picture in picture."
|
||||
"You must be connected to another person to enter picture in picture."
|
||||
);
|
||||
logIt("Error entering pip.");
|
||||
logIt(error);
|
||||
|
||||
@ -113,53 +113,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<!-- <section class="clients section reveal-fade">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">-->
|
||||
<!-- <ul class="list-reset">-->
|
||||
<!-- <li class="reveal-from-top"><img src="images/clients-01.svg" alt="Clients 01"></li>-->
|
||||
<!-- <li class="reveal-from-bottom" data-reveal-delay="150"><img src="images/clients-02.svg"-->
|
||||
<!-- alt="Clients 02"></li>-->
|
||||
<!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"-->
|
||||
<!-- alt="Clients 03"></li>-->
|
||||
<!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"-->
|
||||
<!-- alt="Clients 04"></li>-->
|
||||
<!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"-->
|
||||
<!-- alt="Clients 05"></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
<!-- Video-->
|
||||
<!-- <section class="section center-content">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="section-inner">-->
|
||||
<!-- <div class="section-header reveal-from-bottom">-->
|
||||
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Built exclusively for you</h2>-->
|
||||
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
|
||||
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
||||
<!-- qui.</p></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"-->
|
||||
<!-- data-video="https://player.vimeo.com/video/174002812"-->
|
||||
<!-- href="#"><img src="images/video-placeholder.svg" alt="Video"-->
|
||||
<!-- width="712" height="400"></a></div>-->
|
||||
<!-- <div id="modal-01" class="modal modal-video">-->
|
||||
<!-- <div class="modal-inner">-->
|
||||
<!-- <div class="responsive-video">-->
|
||||
<!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen-->
|
||||
<!-- allowfullscreen></iframe>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
<!-- End Video-->
|
||||
</div>
|
||||
|
||||
<section class="features-tiles section center-content">
|
||||
<div class="container">
|
||||
<div class="features-tiles-inner section-inner has-top-divider">
|
||||
@ -314,6 +267,53 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team section center-content">
|
||||
<div class="container">
|
||||
<div class="team-inner section-inner has-top-divider">
|
||||
<div class="section-header center-content reveal-from-bottom">
|
||||
<div class="container-xs">
|
||||
<h2 class="mt-0 mb-16">
|
||||
Meet the team
|
||||
</h2>
|
||||
<!-- <p class="m-0">-->
|
||||
<!-- One man show... for now-->
|
||||
<!-- </p>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tiles-wrap">
|
||||
<div class="tiles-item reveal-from-bottom">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="team-item-header">
|
||||
<div class="team-item-image mb-24">
|
||||
<img
|
||||
src="images/portrait.png"
|
||||
alt="Team member 01"
|
||||
width="180"
|
||||
height="180"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-item-content">
|
||||
<a target="_blank" href="https://ianramzy.com">
|
||||
<h5 class="team-item-name mt-0 mb-4">Ian Ramzy</h5>
|
||||
</a>
|
||||
<div
|
||||
class="team-item-role text-xxs fw-500 tt-u text-color-primary mb-8"
|
||||
>
|
||||
Software Engineer
|
||||
</div>
|
||||
<p class="m-0 text-sm">
|
||||
Connecting the world together one call at a time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-inner has-top-divider">
|
||||
@ -341,77 +341,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<!-- <section class="testimonial section">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="testimonial-inner section-inner has-top-divider">-->
|
||||
<!-- <div class="section-header center-content">-->
|
||||
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Don't take our word for it</h2>-->
|
||||
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
|
||||
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
|
||||
<!-- qui.</p></div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-wrap">-->
|
||||
<!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
||||
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
||||
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
||||
<!-- class="testimonial-item-name text-color-high">Roman Level</span> <span-->
|
||||
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-item reveal-from-bottom">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
||||
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
||||
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
||||
<!-- class="testimonial-item-name text-color-high">Diana Rynzhuk</span> <span-->
|
||||
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">-->
|
||||
<!-- <div class="tiles-item-inner">-->
|
||||
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
|
||||
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
|
||||
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
|
||||
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
|
||||
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
|
||||
<!-- class="testimonial-item-name text-color-high">Ben Stafford</span> <span-->
|
||||
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
<!-- <section class="cta section center-content-mobile reveal-from-bottom">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <div class="cta-inner section-inner cta-split">-->
|
||||
<!-- <div class="cta-slogan"><h3 class="m-0">For previewing layouts and visual?</h3></div>-->
|
||||
<!-- <div class="cta-action">-->
|
||||
<!-- <div class="has-icon-right"><label for="newsletter"-->
|
||||
<!-- class="form-label screen-reader">Subscribe</label> <input-->
|
||||
<!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">-->
|
||||
<!-- <svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">-->
|
||||
<!-- <path d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z" fill="#376DF9"-->
|
||||
<!-- fill-rule="nonzero"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
</div>
|
||||
</main>
|
||||
<footer class="site-footer center-content-mobile">
|
||||
<div class="container">
|
||||
@ -425,6 +354,7 @@
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||
>
|
||||
<svg
|
||||
@ -448,7 +378,9 @@
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a>
|
||||
<a target="_blank" href="https://ianramzy.com"
|
||||
>Made with ❤️ by Ian Ramzy</a
|
||||
>
|
||||
</li>
|
||||
<!-- <li><a href="#">Contact</a></li>-->
|
||||
<!-- <li><a href="#">About us</a></li>-->
|
||||
|
||||
@ -145,6 +145,7 @@
|
||||
<div class="footer-social">
|
||||
<div>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://github.com/ianramzy/decentralized-video-chat"
|
||||
>
|
||||
<svg
|
||||
@ -168,7 +169,9 @@
|
||||
<nav class="footer-nav">
|
||||
<ul class="list-reset">
|
||||
<li>
|
||||
<a href="https://ianramzy.com">Made with ❤️ by Ian Ramzy</a>
|
||||
<a target="_blank" href="https://ianramzy.com"
|
||||
>Made with ❤️ by Ian Ramzy</a
|
||||
>
|
||||
</li>
|
||||
<!-- <li><a href="#">Contact</a></li>-->
|
||||
<!-- <li><a href="#">About us</a></li>-->
|
||||
|
||||
@ -426,6 +426,212 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="clients section reveal-fade">
|
||||
<div class="container">
|
||||
<div
|
||||
class="clients-inner section-inner has-top-divider has-bottom-divider"
|
||||
>
|
||||
<ul class="list-reset">
|
||||
<li class="reveal-from-top">
|
||||
<img src="images/clients-01.svg" alt="Clients 01" />
|
||||
</li>
|
||||
<li class="reveal-from-bottom" data-reveal-delay="150">
|
||||
<img src="images/clients-02.svg" alt="Clients 02" />
|
||||
</li>
|
||||
|
||||
<li class="reveal-from-top" data-reveal-delay="300">
|
||||
<img src="images/clients-03.svg" alt="Clients 03" />
|
||||
</li>
|
||||
|
||||
<li class="reveal-from-bottom" data-reveal-delay="450">
|
||||
<img src="images/clients-04.svg" alt="Clients 04" />
|
||||
</li>
|
||||
|
||||
<li class="reveal-from-top" data-reveal-delay="600">
|
||||
<img src="images/clients-05.svg" alt="Clients 05" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Video
|
||||
<section class="section center-content">
|
||||
<div class="container">
|
||||
<div class="section-inner">
|
||||
<div class="section-header reveal-from-bottom">
|
||||
<div class="container-xs">
|
||||
<h2 class="mt-0 mb-16">Built exclusively for you</h2>
|
||||
<p class="m-0">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||||
esse cillum dolore eu fugiat nulla pariatur excepteur sint —
|
||||
occaecat cupidatat non proident, sunt in culpa qui.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reveal-from-bottom">
|
||||
<a
|
||||
class="modal-trigger"
|
||||
aria-controls="modal-01"
|
||||
data-video="https://player.vimeo.com/video/174002812"
|
||||
href="#"
|
||||
><img
|
||||
src="images/video-placeholder.svg"
|
||||
alt="Video"
|
||||
width="712"
|
||||
height="400"
|
||||
/></a>
|
||||
</div>
|
||||
<div id="modal-01" class="modal modal-video">
|
||||
<div class="modal-inner">
|
||||
<div class="responsive-video">
|
||||
<iframe
|
||||
src="#"
|
||||
frameborder="0"
|
||||
webkitallowfullscreen
|
||||
mozallowfullscreen
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- End Video-->
|
||||
|
||||
<section class="testimonial section">
|
||||
<div class="container">
|
||||
<div class="testimonial-inner section-inner has-top-divider">
|
||||
<div class="section-header center-content">
|
||||
<div class="container-xs">
|
||||
<h2 class="mt-0 mb-16">Don't take our word for it</h2>
|
||||
<p class="m-0">
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit
|
||||
esse cillum dolore eu fugiat nulla pariatur excepteur sint —
|
||||
occaecat cupidatat non proident, sunt in culpa qui.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiles-wrap">
|
||||
<div
|
||||
class="tiles-item reveal-from-right"
|
||||
data-reveal-delay="200"
|
||||
>
|
||||
<div class="tiles-item-inner">
|
||||
<div class="testimonial-item-content">
|
||||
<p class="text-sm mb-0">
|
||||
— Duis aute irure dolor in reprehenderit in voluptate
|
||||
velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum
|
||||
cillum dolore eu fugiat.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
|
||||
>
|
||||
<span class="testimonial-item-name text-color-high"
|
||||
>Roman Level</span
|
||||
>
|
||||
<span class="text-color-low">/ </span
|
||||
><span class="testimonial-item-link"
|
||||
><a href="#">AppName</a></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tiles-item reveal-from-bottom">
|
||||
<div class="tiles-item-inner">
|
||||
<div class="testimonial-item-content">
|
||||
<p class="text-sm mb-0">
|
||||
— Duis aute irure dolor in reprehenderit in voluptate
|
||||
velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum
|
||||
cillum dolore eu fugiat.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
|
||||
>
|
||||
<span class="testimonial-item-name text-color-high"
|
||||
>Diana Rynzhuk</span
|
||||
>
|
||||
<span class="text-color-low">/ </span
|
||||
><span class="testimonial-item-link"
|
||||
><a href="#">AppName</a></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tiles-item reveal-from-left"
|
||||
data-reveal-delay="200"
|
||||
>
|
||||
<div class="tiles-item-inner">
|
||||
<div class="testimonial-item-content">
|
||||
<p class="text-sm mb-0">
|
||||
— Duis aute irure dolor in reprehenderit in voluptate
|
||||
velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in
|
||||
culpa qui officia deserunt mollit anim id est laborum
|
||||
cillum dolore eu fugiat.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"
|
||||
>
|
||||
<span class="testimonial-item-name text-color-high"
|
||||
>Ben Stafford</span
|
||||
>
|
||||
<span class="text-color-low">/ </span
|
||||
><span class="testimonial-item-link"
|
||||
><a href="#">AppName</a></span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta section center-content-mobile reveal-from-bottom">
|
||||
<div class="container">
|
||||
<div class="cta-inner section-inner cta-split">
|
||||
<div class="cta-slogan">
|
||||
<h3 class="m-0">For previewing layouts and visual?</h3>
|
||||
</div>
|
||||
<div class="cta-action">
|
||||
<div class="has-icon-right">
|
||||
<label for="newsletter" class="form-label screen-reader"
|
||||
>Subscribe</label
|
||||
>
|
||||
<input
|
||||
id="newsletter"
|
||||
class="form-input"
|
||||
type="email"
|
||||
placeholder="Your best email"
|
||||
/>
|
||||
<svg
|
||||
width="16"
|
||||
height="12"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z"
|
||||
fill="#376DF9"
|
||||
fill-rule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features-split section">
|
||||
<div class="container">
|
||||
<div class="features-split-inner section-inner has-top-divider">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user