Live-Video-Chat

Running

App Files Files Community

KingNish commited on Sep 28

Commit

bde24fa

•

1 Parent(s): 7fdbd84

Update styles.css

Browse files

Files changed (1) hide show

styles.css +139 -139

styles.css CHANGED Viewed

@@ -1,215 +1,215 @@
 :root {
-    --primary-color: #4a90e2;
-    --secondary-color: #f39c12;
-    --accent-color: #38cb96;
-    --background-color: #f0f4f8;
-    --card-bg-color: #ffffff;
-    --text-color: #333333;
-    --border-color: #e0e0e0;
-    --shadow-color: rgba(0, 0, 0, 0.1);
-    --hover-shadow-color: rgba(74, 144, 226, 0.3);
-    --hover-bg-color: #1e9b6e;
-    --active-bg-color: #1a855d;
-    --tooltip-bg-color: #333;
-    --tooltip-text-color: #fff;
 }
 body {
-    font-family: 'Roboto', sans-serif;
-    background: linear-gradient(135deg, var(--background-color) 0%, #dfe9f3 100%);
-    color: var(--text-color);
-    margin: 0;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
 }
 .container {
-    width: 90%;
-    max-width: 800px;
 }
 .voice-assistant-card {
-    background: linear-gradient(135deg, var(--card-bg-color) 0%, #f9f9f9 100%);
-    border-radius: 20px;
-    box-shadow: 0 10px 30px var(--shadow-color);
-    padding: 40px;
-    text-align: center;
-    position: relative;
-    overflow: hidden;
 }
 .voice-assistant-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 20px;
-    z-index: -1;
-    filter: blur(10px);
 }
 .title {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 20px;
-    color: var(--primary-color);
-    position: relative;
-    z-index: 1;
 }
 #responseTime {
-    font-size: 0.9rem;
-    color: #777;
-    margin-bottom: 20px;
-    position: relative;
-    z-index: 1;
 }
 .indicator-wrapper {
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 30px;
-    position: relative;
-    z-index: 1;
 }
 .indicator {
-    display: flex;
-    align-items: center;
-    padding: 10px 20px;
-    border-radius: 50px;
-    font-size: 1rem;
-    color: #fff;
-    transition: all 0.3s ease;
-    position: relative;
-    z-index: 1;
 }
 .indicator svg {
-    margin-right: 8px;
 }
 #userIndicator {
-    background: linear-gradient(135deg, var(--primary-color) 0%, #6fb1f2 100%);
 }
 #aiIndicator {
-    background: linear-gradient(135deg, var(--secondary-color) 0%, #ffaf5c 100%);
 }
 #startStopButton {
-    background: linear-gradient(135deg, var(--accent-color) 0%, #28b475 100%);
-    color: #fff;
-    border: none;
-    padding: 15px 30px;
-    font-size: 1.2rem;
-    border-radius: 50px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto 30px;
-    position: relative;
-    z-index: 1;
 }
 #startStopButton:hover {
-    background: linear-gradient(135deg, var(--hover-bg-color) 0%, #28b475 100%);
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px var(--hover-shadow-color);
 }
 #startStopButton:active {
-    background: linear-gradient(135deg, var(--active-bg-color) 0%, #28b475 100%);
-    transform: translateY(0);
-    box-shadow: 0 2px 10px var(--shadow-color);
 }
 #startStopButton svg {
-    margin-right: 10px;
 }
 .settings {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1.5fr;
-    gap: 20px;
-    margin-bottom: 30px;
-    position: relative;
-    z-index: 1;
 }
 .setting {
-    text-align: left;
-    position: relative;
-    /* Added for tooltip positioning */
 }
 .setting label {
-    display: block;
-    margin-bottom: 5px;
-    font-weight: 700;
-    color: var(--text-color);
 }
 select,
 input[type="password"] {
-    width: 100%;
-    padding: 10px;
-    border: 1px solid var(--border-color);
-    border-radius: 5px;
-    font-size: 1rem;
-    background-color: #fff;
-    color: var(--text-color);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
 }
 select:hover,
 input[type="password"]:hover {
-    border-color: var(--primary-color);
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 .tooltip {
-    display: none;
-    position: absolute;
-    background-color: var(--tooltip-bg-color);
-    color: var(--tooltip-text-color);
-    padding: 5px;
-    border-radius: 5px;
-    font-size: 0.8rem;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 .setting:hover .tooltip {
-    display: block;
-    /* Show tooltip on hover */
 }
 #transcript {
-    background: linear-gradient(135deg, #f9f9f9 0%, #e6e6e6 100%);
-    border-radius: 10px;
-    padding: 20px;
-    margin-top: 30px;
-    text-align: left;
-    font-family: 'Courier New', monospace;
-    white-space: pre-wrap;
-    max-height: 200px;
-    overflow-y: auto;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    position: relative;
-    z-index: 1;
 }
 @media (max-width: 600px) {
-    .settings {
-        grid-template-columns: 1fr;
-    }
 }

 :root {
+  --primary-color: #4a90e2;
+  --secondary-color: #f39c12;
+  --accent-color: #38cb96;
+  --background-color: #f0f4f8;
+  --card-bg-color: #ffffff;
+  --text-color: #333333;
+  --border-color: #e0e0e0;
+  --shadow-color: rgba(0, 0, 0, 0.1);
+  --hover-shadow-color: rgba(74, 144, 226, 0.3);
+  --hover-bg-color: #1e9b6e;
+  --active-bg-color: #1a855d;
+  --tooltip-bg-color: #333;
+  --tooltip-text-color: #fff;
 }
 body {
+  font-family: 'Roboto', sans-serif;
+  background: linear-gradient(135deg, var(--background-color) 0%, #dfe9f3 100%);
+  color: var(--text-color);
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
 }
 .container {
+  width: 90%;
+  max-width: 800px;
 }
 .voice-assistant-card {
+  background: linear-gradient(135deg, var(--card-bg-color) 0%, #f9f9f9 100%);
+  border-radius: 20px;
+  box-shadow: 0 10px 30px var(--shadow-color);
+  padding: 40px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
 }
 .voice-assistant-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 20px;
+  z-index: -1;
+  filter: blur(10px);
 }
 .title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 20px;
+  color: var(--primary-color);
+  position: relative;
+  z-index: 1;
 }
 #responseTime {
+  font-size: 0.9rem;
+  color: #777;
+  margin-bottom: 20px;
+  position: relative;
+  z-index: 1;
 }
 .indicator-wrapper {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 30px;
+  position: relative;
+  z-index: 1;
 }
 .indicator {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  border-radius: 50px;
+  font-size: 1rem;
+  color: #fff;
+  transition: all 0.3s ease;
+  position: relative;
+  z-index: 1;
 }
 .indicator svg {
+  margin-right: 8px;
 }
 #userIndicator {
+  background: linear-gradient(135deg, var(--primary-color) 0%, #6fb1f2 100%);
 }
 #aiIndicator {
+  background: linear-gradient(135deg, var(--secondary-color) 0%, #ffaf5c 100%);
 }
 #startStopButton {
+  background: linear-gradient(135deg, var(--accent-color) 0%, #28b475 100%);
+  color: #fff;
+  border: none;
+  padding: 15px 30px;
+  font-size: 1.2rem;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 30px;
+  position: relative;
+  z-index: 1;
 }
 #startStopButton:hover {
+  background: linear-gradient(135deg, var(--hover-bg-color) 0%, #28b475 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px var(--hover-shadow-color);
 }
 #startStopButton:active {
+  background: linear-gradient(135deg, var(--active-bg-color) 0%, #28b475 100%);
+  transform: translateY(0);
+  box-shadow: 0 2px 10px var(--shadow-color);
 }
 #startStopButton svg {
+  margin-right: 10px;
 }
 .settings {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1.5fr;
+  gap: 20px;
+  margin-bottom: 30px;
+  position: relative;
+  z-index: 1;
 }
 .setting {
+  text-align: left;
+  position: relative;
+  /* Added for tooltip positioning */
 }
 .setting label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 700;
+  color: var(--text-color);
 }
 select,
 input[type="password"] {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  font-size: 1rem;
+  background-color: #fff;
+  color: var(--text-color);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
 }
 select:hover,
 input[type="password"]:hover {
+  border-color: var(--primary-color);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 .tooltip {
+  display: none;
+  position: absolute;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 5px;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 .setting:hover .tooltip {
+  display: block;
+  /* Show tooltip on hover */
 }
 #transcript {
+  background: linear-gradient(135deg, #f9f9f9 0%, #e6e6e6 100%);
+  border-radius: 10px;
+  padding: 20px;
+  margin-top: 60px;
+  text-align: left;
+  font-family: 'Courier New', monospace;
+  white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 1;
 }
 @media (max-width: 600px) {
+  .settings {
+      grid-template-columns: 1fr;
+  }
 }