diff --git a/index.html b/index.html
index a223384..a9cfea7 100644
--- a/index.html
+++ b/index.html
@@ -4,504 +4,8 @@
ConnectMeet - Video Conferencing
-
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7913a11
--- /dev/null
+++ b/style.css
@@ -0,0 +1,496 @@
+:root {
+ --primary-color: #4285F4;
+ --secondary-color: #34A853;
+ --danger-color: #EA4335;
+ --dark-color: #202124;
+ --light-color: #F8F9FA;
+ --gray-color: #5F6368;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+ background-color: var(--dark-color);
+ color: var(--light-color);
+ overflow: hidden;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+.login-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.9);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+
+.login-box {
+ background-color: var(--dark-color);
+ border-radius: 8px;
+ padding: 30px;
+ width: 400px;
+ max-width: 90%;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.login-box h2 {
+ margin-bottom: 20px;
+ color: var(--primary-color);
+ text-align: center;
+}
+
+.login-form input {
+ width: 100%;
+ padding: 12px;
+ margin-bottom: 15px;
+ border-radius: 4px;
+ border: 1px solid var(--gray-color);
+ background-color: #303134;
+ color: var(--light-color);
+}
+
+.login-form input:focus {
+ outline: none;
+ border-color: var(--primary-color);
+}
+
+.btn {
+ padding: 10px 15px;
+ border-radius: 4px;
+ border: none;
+ cursor: pointer;
+ font-weight: 500;
+ transition: all 0.3s ease;
+}
+
+.btn-primary {
+ background-color: var(--primary-color);
+ color: white;
+}
+
+.btn-secondary {
+ background-color: transparent;
+ border: 1px solid var(--gray-color);
+ color: var(--light-color);
+}
+
+.btn-danger {
+ background-color: var(--danger-color);
+ color: white;
+}
+
+.btn:hover {
+ opacity: 0.9;
+}
+
+.action-row {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 10px;
+}
+
+.room-info {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15px 20px;
+ border-bottom: 1px solid #3c4043;
+}
+
+.room-id {
+ display: flex;
+ align-items: center;
+}
+
+.room-id span {
+ margin-right: 10px;
+ font-weight: 500;
+}
+
+.copy-link {
+ cursor: pointer;
+ color: var(--primary-color);
+ display: flex;
+ align-items: center;
+}
+
+.copy-link:hover {
+ text-decoration: underline;
+}
+
+.main-container {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+
+.video-container {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ grid-auto-rows: minmax(200px, auto);
+ gap: 10px;
+ padding: 15px;
+ overflow-y: auto;
+ max-height: calc(100vh - 150px);
+ justify-content: center;
+}
+
+.video-item {
+ position: relative;
+ background-color: #3c4043;
+ border-radius: 8px;
+ overflow: hidden;
+}
+
+.video-item.pinned {
+ grid-column: 1 / -1;
+ grid-row: 1 / span 2;
+}
+
+.video-item video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.video-item .user-info {
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 5px 10px;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+}
+
+.video-item .user-info .mic-status {
+ margin-left: 5px;
+}
+
+.video-controls {
+ height: 70px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ padding: 10px;
+ background-color: #292a2d;
+}
+
+.control-btn {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ background-color: #3c4043;
+ transition: all 0.3s ease;
+}
+
+.control-btn:hover {
+ background-color: #4a4c50;
+}
+
+.control-btn.active {
+ background-color: var(--primary-color);
+}
+
+.control-btn.leave {
+ background-color: var(--danger-color);
+}
+
+.sidebar {
+ width: 300px;
+ background-color: #292a2d;
+ border-left: 1px solid #3c4043;
+ display: flex;
+ flex-direction: column;
+ transition: width 0.3s ease;
+ overflow: hidden;
+}
+
+.sidebar.hidden {
+ width: 0;
+}
+
+.tabs {
+ display: flex;
+ border-bottom: 1px solid #3c4043;
+}
+
+.tab {
+ flex: 1;
+ text-align: center;
+ padding: 15px 0;
+ cursor: pointer;
+ border-bottom: 3px solid transparent;
+ transition: all 0.3s ease;
+}
+
+.tab.active {
+ border-bottom-color: var(--primary-color);
+ color: var(--primary-color);
+}
+
+.tab-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 15px;
+}
+
+.chat-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+.chat-messages {
+ flex: 1;
+ overflow-y: auto;
+ padding-right: 5px;
+}
+
+.message {
+ margin-bottom: 15px;
+}
+
+.message-header {
+ display: flex;
+ align-items: baseline;
+ margin-bottom: 5px;
+}
+
+.message-sender {
+ font-weight: 500;
+ color: var(--primary-color);
+ margin-right: 10px;
+}
+
+.message-time {
+ font-size: 0.8rem;
+ color: var(--gray-color);
+}
+
+.message-content {
+ background-color: #303134;
+ padding: 10px;
+ border-radius: 4px;
+ word-break: break-word;
+}
+
+.chat-input {
+ display: flex;
+ margin-top: 15px;
+}
+
+.chat-input input {
+ flex: 1;
+ padding: 10px;
+ border-radius: 4px;
+ border: 1px solid var(--gray-color);
+ background-color: #303134;
+ color: var(--light-color);
+}
+
+.chat-input button {
+ margin-left: 10px;
+}
+
+.participants-list {
+ list-style: none;
+}
+
+.participant-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 0;
+ border-bottom: 1px solid #3c4043;
+}
+
+.participant-info {
+ display: flex;
+ align-items: center;
+}
+
+.participant-avatar {
+ width: 36px;
+ height: 36px;
+ border-radius: 50%;
+ background-color: var(--primary-color);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-right: 10px;
+ font-weight: bold;
+}
+
+.participant-controls button {
+ margin-left: 5px;
+ padding: 5px;
+ font-size: 0.8rem;
+}
+
+.settings-container h3 {
+ margin-bottom: 15px;
+ color: var(--primary-color);
+}
+
+.setting-group {
+ margin-bottom: 20px;
+}
+
+.setting-item {
+ margin-bottom: 15px;
+}
+
+.setting-item label {
+ display: block;
+ margin-bottom: 5px;
+}
+
+.setting-item select {
+ width: 100%;
+ padding: 8px;
+ border-radius: 4px;
+ background-color: #303134;
+ color: var(--light-color);
+ border: 1px solid var(--gray-color);
+}
+
+.notification {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ padding: 15px;
+ border-radius: 4px;
+ background-color: var(--dark-color);
+ border-left: 4px solid var(--primary-color);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ animation: slideIn 0.3s forwards;
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateX(100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+.notification-message {
+ margin-left: 10px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .main-container {
+ flex-direction: column;
+ }
+
+ .sidebar {
+ width: 100%;
+ height: 300px;
+ border-left: none;
+ border-top: 1px solid #3c4043;
+ }
+
+ .sidebar.hidden {
+ height: 0;
+ width: 100%;
+ }
+
+ .video-container {
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ }
+}
+
+/* Loading spinner */
+.loader {
+ border: 4px solid rgba(255, 255, 255, 0.3);
+ border-radius: 50%;
+ border-top: 4px solid var(--primary-color);
+ width: 40px;
+ height: 40px;
+ animation: spin 1s linear infinite;
+ margin: 20px auto;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+/* Screen share indicator */
+.screen-share-indicator {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background-color: rgba(0, 0, 0, 0.5);
+ padding: 5px 10px;
+ border-radius: 4px;
+ font-size: 0.8rem;
+}
+
+/* Video actions */
+.video-actions {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ display: none;
+}
+
+.video-item:hover .video-actions {
+ display: flex;
+}
+
+.video-action-btn {
+ background-color: rgba(0, 0, 0, 0.5);
+ color: white;
+ border: none;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ cursor: pointer;
+ margin-left: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.video-action-btn:hover {
+ background-color: rgba(0, 0, 0, 0.7);
+}
+
+.hide-video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #3c4043;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.5rem;
+}
\ No newline at end of file