Skip to content

Commit

Permalink
feat: change landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@suryateja-kandukuru
suryateja-kandukuru committed Oct 24, 2024
1 parent 77006d8 commit 08ee42a
Show file tree
Hide file tree
Showing 5 changed files with 202 additions and 9 deletions.
168 changes: 162 additions & 6 deletions frontend/src/app/landing/landing.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
<!-- <input type="text" [(ngModel)]="remotePeerId" />
<button (click)="initiateCall()">Submit</button>
<div id="video-container"></div> -->

<div class="flex w-full justify-center gap-4 mt-4">
<!-- <div class="flex w-full justify-center gap-4 mt-4">
<div class="flex flex-col items-center">
<div>
<label
Expand Down Expand Up @@ -47,4 +42,165 @@
</button>
</div>
</div>
</div> -->

<!-- video-meeting.component.html -->
<div class="min-h-screen bg-gray-50">
<!-- Header -->
<header class="bg-white shadow-sm">
<div
class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex items-center justify-between"
>
<div class="flex items-center space-x-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"
/>
</svg>
<h1 class="text-xl font-bold text-gray-900">ConnectMeet</h1>
</div>
<nav class="flex space-x-4">
<button class="text-gray-500 hover:text-gray-700">Features</button>
<button class="text-gray-500 hover:text-gray-700">Support</button>
</nav>
</div>
</header>

<!-- Main Content -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
<!-- Left Column - Content -->
<div class="mb-12 lg:mb-0">
<h2 class="text-4xl font-extrabold text-gray-900 mb-4">
Connect with anyone, anywhere, anytime
</h2>
<p class="text-xl text-gray-500 mb-8">
High-quality video meetings made simple. No downloads required, just
share your code and start collaborating.
</p>

<!-- Features -->
<div class="grid grid-cols-2 gap-6 mb-8">
<div class="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
<span class="text-gray-700">Up to 6 participants</span>
</div>
<div class="flex items-center space-x-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
/>
</svg>
<span class="text-gray-700">Instant sharing</span>
</div>
</div>

<!-- Action Buttons -->
<div class="flex space-x-4">
<button
(click)="handleStartInstantMeeting()"
class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Start instant meeting
</button>
<!-- <button
(click)="setJoinFlow(true)"
class="px-6 py-3 bg-white text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-colors"
>
Join with code
</button> -->
</div>
</div>

<!-- Right Column - Join Form -->
<div class="bg-white rounded-2xl shadow-xl p-8">
<h3 class="text-2xl font-bold text-gray-900 mb-6">Join a meeting</h3>

<div class="space-y-6">
<div>
<label
for="userName"
class="block text-sm font-medium text-gray-700 mb-2"
>
Your Name
</label>
<input
type="text"
id="userName"
[(ngModel)]="userName"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Enter your name"
/>
</div>
<div>
<label
for="userName"
class="block text-sm font-medium text-gray-700 mb-2"
>
Meeting Code
</label>
<input
type="text"
id="meetCode"
[(ngModel)]="meetCode"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Enter your meeting code"
/>
</div>

<button
(click)="handleJoinMeeting()"
class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Join a meeting
</button>
</div>
</div>
</div>
</main>

<!-- Footer -->
<!-- <footer class="bg-white border-t">
<div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 text-xs">
<div class="flex justify-between items-center">
<p class="text-gray-500">© 2024 ConnectMeet. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-gray-700">Privacy</a>
<a href="#" class="text-gray-500 hover:text-gray-700">Terms</a>
<a href="#" class="text-gray-500 hover:text-gray-700">Contact</a>
</div>
</div>
</div>
</footer> -->
</div>
6 changes: 6 additions & 0 deletions frontend/src/app/landing/landing.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
main {
display: flex;
justify-content: center;
align-items: center;
height: calc(100dvh - 64px)
}
12 changes: 10 additions & 2 deletions frontend/src/app/landing/landing.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,21 @@ import { SocketService } from '../socket.service';
styleUrls: ['./landing.component.scss'],
})
export class LandingComponent implements OnInit {
meetCode = '123-456-789';
userName = 'surya';
meetCode = '';
userName = '';

constructor(private socket: SocketService, private router: Router) {}

ngOnInit(): void {}

handleJoinMeeting() {}
handleStartInstantMeeting() {
const uuid = crypto.randomUUID();
const meetUserName = prompt('Enter your name') || 'user';
sessionStorage.setItem('userName', meetUserName);
this.router.navigate(['/', uuid]);
}

onJoin() {
sessionStorage.setItem('userName', this.userName);
this.router.navigate(['/', this.meetCode]);
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/app/meet/meet.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,12 @@ <h3>Participants</h3>
</div>

<div class="meeting-info">
<h3>Meeting Information</h3>
<div class="flex items-center justify-between">
<h3>Meeting Information</h3>
<button (click)="copyToClipboard()" class="control-button text-blue-400">
<i class="fas fa-copy"></i>
</button>
</div>
<p><strong>Meeting Code:</strong> {{ meetCode }}</p>
<p><strong>Your Name:</strong> {{ userName }}</p>
</div>
Expand Down
18 changes: 18 additions & 0 deletions frontend/src/app/meet/meet.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,4 +231,22 @@ export class MeetComponent implements OnInit, OnDestroy {
this.toggleAudio();
}
}

copyToClipboard() {
const content = `
Meeting Information
Meeting Code: ${this.meetCode}
Your Name: ${this.userName}
`;

navigator.clipboard
.writeText(content)
.then(() => {
this.toastr.info('Meeting invite copied.');
console.log('Text copied to clipboard');
})
.catch((err) => {
console.error('Error copying text to clipboard', err);
});
}
}

0 comments on commit 08ee42a

Please sign in to comment.