Home Explore Help
Register Sign In
genlitex
/
prototype_design
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

zbytest003-2025-02-18 09:56:43

genlitex 2 months ago
parent
43496de076
commit
fcf87bca7b
6 changed files with 232 additions and 17 deletions
Unified View Show Diff Stats
  1. 0 0
      dist/assets/index-Btspm7_H.css
  2. 0 4
      dist/assets/index-malWbV8K.js
  3. 0 13
      dist/index.html
  4. 79 0
      src/assets/new-chat-style.css
  5. 6 0
      src/router/index.js
  6. 147 0
      src/views/NewChatView.vue

File diff suppressed because it is too large
+ 0 - 0
dist/assets/index-Btspm7_H.css


File diff suppressed because it is too large
+ 0 - 4
dist/assets/index-malWbV8K.js


+ 0 - 13
dist/index.html
View File 

@@ -1,13 +0,0 @@
 
-<!doctype html>
 
-<html lang="en">
 
-  <head>
 
-    <meta charset="UTF-8" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Prototype Design</title>
 
-    <script type="module" crossorigin src="/prototype/3000/assets/index-malWbV8K.js"></script>
 
-    <link rel="stylesheet" crossorigin href="/prototype/3000/assets/index-Btspm7_H.css">
 
-  </head>
 
-  <body>
 
-    <div id="app"></div>
 
-  </body>
 
-</html>

+ 79 - 0
src/assets/new-chat-style.css
View File 

@@ -0,0 +1,79 @@
 
+/* Chat container styles */
 
+.chat-container {
 
+  display: flex;
 
+  height: 100vh;
 
+}
 
+
 
+/* Sidebar styles */
 
+.sidebar {
 
+  width: 250px;
 
+  background-color: #08002E;
 
+  color: white;
 
+}
 
+
 
+/* Message area styles */
 
+.message-area {
 
+  flex-grow: 1;
 
+  background-color: white;
 
+}
 
+
 
+/* Card area styles */
 
+.card-area {
 
+  width: 300px;
 
+  background-color: gray;
 
+}
 
+
 
+.card {
 
+  border-radius: 10px;
 
+  background-color: #FBEFFF;
 
+  padding: 10px;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+/* Message bubble styles */
 
+.message-bubble {
 
+  border-radius: 10px;
 
+  padding: 10px;
 
+  margin: 5px;
 
+}
 
+
 
+.sent {
 
+  background-color: purple;
 
+  color: white;
 
+}
 
+
 
+.received {
 
+  background-color: lightgray;
 
+}
 
+
 
+/* Footer styles */
 
+footer form {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  padding: 10px;
 
+}
 
+
 
+footer form input[type="text"] {
 
+  flex-grow: 1;
 
+  border-radius: 5px;
 
+  padding: 10px;
 
+  margin-right: 10px;
 
+}
 
+
 
+footer form button {
 
+  background-color: purple;
 
+  color: white;
 
+  font-weight: bold;
 
+  border: none;
 
+  border-radius: 5px;
 
+  padding: 10px;
 
+}
 
+
 
+footer form input[type="file"] {
 
+  background-color: purple;
 
+  color: white;
 
+  border: none;
 
+  border-radius: 50%;
 
+  padding: 10px;
 
+}

+ 6 - 0
src/router/index.js
View File 

@@ -1,11 +1,17 @@
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import { createRouter, createWebHashHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
 
 import HomeView from '../views/HomeView.vue'
 
+import NewChatView from '../views/NewChatView.vue'
 
 
 
 const routes = [
 
 const routes = [
 
   {
 
   {
 
     path: '/',
 
     path: '/',
 
     name: 'home',
 
     name: 'home',
 
     component: HomeView
 
     component: HomeView
 
+  },
 
+  {
 
+    path: '/chat',
 
+    name: 'chat',
 
+    component: NewChatView
 
   }
 
   }
 
 ]
 
 ]

+ 147 - 0
src/views/NewChatView.vue
View File 

@@ -0,0 +1,147 @@
 
+<template>
 
+  <div class="chat-container">
 
+    <aside class="sidebar">
 
+      <header>
 
+        <h1>Contact List</h1>
 
+      </header>
 
+      <ul>
 
+        <li v-for="contact in contacts" :key="contact.id" @click="selectContact(contact)">
 
+          {{ contact.name }}
 
+        </li>
 
+      </ul>
 
+    </aside>
 
+    <section class="message-area">
 
+      <div v-for="message in messages" :key="message.id" :class="{'message-bubble': true, 'sent': message.sentByMe, 'received': !message.sentByMe}">
 
+        <p>{{ message.text }}</p>
 
+      </div>
 
+    </section>
 
+    <section class="card-area">
 
+      <div class="card" v-for="card in cards" :key="card.id">
 
+        {{ card.content }}
 
+      </div>
 
+    </section>
 
+    <footer>
 
+      <form @submit.prevent="sendMessage">
 
+        <input type="text" v-model="messageText" placeholder="Type a message...">
 
+        <button type="submit">Send</button>
 
+        <input type="file" @change="handleFileUpload">
 
+      </form>
 
+    </footer>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      contacts: [
 
+        { id: 1, name: 'Contact 1' },
 
+        { id: 2, name: 'Contact 2' }
 
+      ],
 
+      selectedContact: null,
 
+      messages: [],
 
+      messageText: '',
 
+      cards: [
 
+        { id: 1, content: 'Card 1 Content' },
 
+        { id: 2, content: 'Card 2 Content' }
 
+      ]
 
+    };
 
+  },
 
+  methods: {
 
+    selectContact(contact) {
 
+      this.selectedContact = contact;
 
+      // Fetch messages for the selected contact
 
+    },
 
+    sendMessage() {
 
+      if (this.messageText.trim()) {
 
+        this.messages.push({ id: Date.now(), text: this.messageText, sentByMe: true });
 
+        this.messageText = '';
 
+      }
 
+    },
 
+    handleFileUpload(event) {
 
+      const file = event.target.files[0];
 
+      if (file) {
 
+        // Handle file upload logic
 
+      }
 
+    }
 
+  }
 
+};
 
+</script>
 
+
 
+<style scoped>
 
+@import url('./assets/new-chat-style.css');
 
+
 
+.chat-container {
 
+  display: flex;
 
+  height: 100vh;
 
+}
 
+
 
+.sidebar {
 
+  width: 250px;
 
+  background-color: #08002E;
 
+  color: white;
 
+}
 
+
 
+.message-area {
 
+  flex-grow: 1;
 
+  background-color: white;
 
+}
 
+
 
+.card-area {
 
+  width: 300px;
 
+  background-color: gray;
 
+}
 
+
 
+.card {
 
+  border-radius: 10px;
 
+  background-color: #FBEFFF;
 
+  padding: 10px;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.message-bubble {
 
+  border-radius: 10px;
 
+  padding: 10px;
 
+  margin: 5px;
 
+}
 
+
 
+.sent {
 
+  background-color: purple;
 
+  color: white;
 
+}
 
+
 
+.received {
 
+  background-color: lightgray;
 
+}
 
+
 
+footer form {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  padding: 10px;
 
+}
 
+
 
+footer form input[type="text"] {
 
+  flex-grow: 1;
 
+  border-radius: 5px;
 
+  padding: 10px;
 
+  margin-right: 10px;
 
+}
 
+
 
+footer form button {
 
+  background-color: purple;
 
+  color: white;
 
+  font-weight: bold;
 
+  border: none;
 
+  border-radius: 5px;
 
+  padding: 10px;
 
+}
 
+
 
+footer form input[type="file"] {
 
+  background-color: purple;
 
+  color: white;
 
+  border: none;
 
+  border-radius: 50%;
 
+  padding: 10px;
 
+}
 
+</style>

Some files were not shown because too many files changed in this diff