Untitled
unknown
plain_text
a month ago
6.3 kB
10
Indexable
body { margin: 0; font-family: sans-serif; background-color:black; color: #e0e0e0; } .container { display: flex; height: 100vh; } .left-panel { width: 300px; background-color: #1a1a1a; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; } .logo1{ width: 80px; margin-bottom: 20px; border-radius: 50% solid red; background-color: black; } .project-info { margin-bottom: 30px; } .minor-project { display: flex; align-items: center; margin-bottom: 5px; } .mp-logo { background-color: #ff9800; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); color: #121212; padding: 5px 10px; border-radius: 50%; margin-right: 10px; font-weight: bold; } /*.mp-logo:hover{ box-shadow:linear-gradient(to center, #00c6ff 0%, #0072ff 51%, #00c6ff 100%); }*/ .project-name { font-size: 1.2em; font-weight: bold; color: white; } .project-desc { color: #9e9e9e; font-size: 0.9em; } /*.title h1 { font-size: 2em; margin-bottom: 10px; color: white; }*/ .description p { color: #bdbdbd; line-height: 1.6; } .icons { display: flex; justify-content: space-around; margin-top: 30px; } .icons i { font-size: 1.5em; color: rgb(110, 183, 233); } .footer { font-size: 0.8em; color: #9e9e9e; } .share { display: flex; align-items: center; margin-top: 10px; } .share span { margin-right: 10px; } .share i { margin-right: 5px; color: #bdbdbd; } .right-panel { flex-grow: 1; display: flex; flex-direction: column; } .chat-header { background-color: #212121; padding: 15px; border-bottom: 1px solid #373737; } .chat-title { font-size: 1.2em; font-weight: bold; color: white; } .chat-area { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; } .chat-input { background-color: #212121; padding: 15px; border-top: 1px solid #373737; display: flex; } .chat-input textarea { flex-grow: 1; background-color: #373737; color: #e0e0e0; border: none; padding: 10px; margin-right: 10px; resize: none; border-radius: 5px; } .chat-input .submit-btn { /*background-color: #ff9800; color: #121212; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold;*/ /*background-image: linear-gradient(to right, #2BC0E4 0%, #EAECC6 51%, #2BC0E4 100%);*/ background-image: linear-gradient(to right, #00c6ff 0%, #0072ff 51%, #00c6ff 100%); margin: 10px; padding: 10px 20px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; /*box-shadow: 0 0 20px #eee;*/ border-radius: 10px; display: block; /*.btn-grad:hover { background-position: right center; color: #fff; text-decoration: none; }*/ } .submit-btn:hover { background-position: right center; /* change the direction of the change here */ color: #fff; text-decoration: none; } .chat-actions { background-color: #1a1a1a; padding: 15px; display: flex; justify-content: space-around; } .action-btn { background-color: #373737; color: #e0e0e0; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } .message { padding: 10px; margin-bottom: 10px; border-radius: 10px; max-width: 70%; word-wrap: break-word; display: inline-block; } .message.user { /*background-color: white;*/ background-image: linear-gradient(to right, #00c6ff 0%, #0072ff 51%, #00c6ff 100%); color: #121212; align-self: flex-end; text-align: right; border-top-right-radius: 0; } .message.ai { /*background-color: #2e2e2e;*/ background-image: linear-gradient(to right, #00c6ff 0%, #0072ff 51%, #00c6ff 100%); color: #121212; align-self: flex-start; text-align: left; border-top-left-radius: 0; } /*.gradient-text{ font-size: 2rem; margin-bottom: 10px; text-transform: uppercase; font-weight: bold; background: linear-gradient( 45deg, var(--primary), var(--secondary), var(--accent), var(--primary) ); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradientAnimation 5s ease infinite; }*/ /*.gradient-text { background: linear-gradient(to right, #ff00cc, #333399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-size: 3em; font-weight: bold; text-shadow: 0 0 10px #ff00cc, 0 0 20px #333399; /* Glow effect */ .gradient-text{ /* background: linear-gradient(to right, #ff00cc, #333399, #ff00cc);*/ /* background:linear-gradient(to left top, rgb(134, 239, 172), rgb(59, 130, 246), rgb(147, 51, 234)) ;*/ background-color: #8EC5FC; background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-size: 3em; font-weight: bold; animation: gradientAnimation 5s linear infinite; background-size: 200% auto; } @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .btn-grad {background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff 51%, #ff6e7f 100%)} .btn-grad { margin: 10px; padding: 15px 45px; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; display: block; }
Editor is loading...
Leave a Comment