i have vue application can you ajust ui and make it beautifull "<template>
  <v-locale-provider rtl>
    <v-layout class="rounded rounded-md" style="">
      <!-- <overlayCMP></overlayCMP> -->
      <v-system-bar
        window
        color="#070534"
        v-if="IsJoind"
        class="d-flex align-center justify-space-between"
      >
        <div class="ms-5">
          <span class="text-subtitle-1" style="font-family:tanha !important">اتاق : {{ roomId }}</span>
        </div>
        <!-- <div>
          <span>{{MyName}}</span>
        </div> -->
        <div class="me-1">
          <span
            class="ms-3"
            dir="ltr"
            style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"
            >{{ time }}</span
          >

          <v-icon
            icon="mdi-logout"
            class="ms-3"
            @click="this.$refs.webrtc.leave()"
          ></v-icon>
          <v-icon
            icon="mdi-chat"
            class="ms-3"
            @click="
              this.$refs.webrtc.chatsideBar = !this.$refs.webrtc.chatsideBar
            "
          ></v-icon>
          <!-- <v-icon icon="mdi-monitor" class="ms-3" @click="this.$refs.webrtc.shareScreen()"></v-icon> -->
          <v-icon
            icon="mdi-cog"
            class="ms-3"
            @click="this.$refs.webrtc.logDialog = true"
          ></v-icon>

        </div>
      </v-system-bar>
      <v-app-bar v-if="!IsJoind" color="#070534">

        <v-app-bar-title v-if="!IsJoind" dir="rtl">مانا ویو</v-app-bar-title>

        <v-app-bar-nav-icon v-if="IsJoind"></v-app-bar-nav-icon>
        <v-app-bar-title v-if="IsJoind"></v-app-bar-title>
        <v-spacer></v-spacer>

        
        <v-app-bar-title v-if="!IsJoind" dir="ltr">
          <v-img
            :width="200"
            aspect-ratio="4/3"
            cover
            src="/src/assets/logo-home.png"
          ></v-img>
        </v-app-bar-title>

        
      </v-app-bar>
      <v-main class="d-flex align-center justify-center mt-5 mb-5">
        <v-card v-if="!IsJoind" color='#070534'>
          <v-card-title v-if="false">
           <v-tabs v-model="tab" >
             <v-tab value="one" >ایجاد و ورود</v-tab>
             <v-tab value="two" >ورود</v-tab>
           </v-tabs>
          </v-card-title>
          <v-card-actions>
          <v-tabs-window v-model="tab">

          <v-tabs-window-item v-if="false" value="one">
        <!--New Room-->
        <v-card
          class="align-center justify-center elevation-5"
          prepend-icon="mdi-school"
          subtitle="شماره یا نام اتاق مورد نظر خود را وارد کنید"
          width="400"
        >
          <template v-slot:title>
            <span class="font-weight-black">ورود به اتاق</span>
          </template>
          <v-label class="ms-3">نام : </v-label>
          <v-card-actions>
            <v-text-field
              v-model="MyName"
              label="نام"
              variant="outlined"
              hide-details
              single-line
            />
          </v-card-actions>
          <v-label class="ms-3">اتاق : </v-label>
          <v-card-actions>
            <v-text-field
              v-model="roomId"
              variant="outlined"
              hide-details
              single-line
              label="شماره یا نام اتاق"
            />
          </v-card-actions>
          <v-card-actions>
            <v-btn
              color="indigo-darken-1"
              @click="onJoin"
              text="ایجاد و ورود"
              variant="elevated"
              prepend-icon="mdi-login"
              size="large"
              width="100%"
            />
          </v-card-actions>
          <v-card-actions>
            <v-btn
              color="green-darken-1"
              @click="helpDlg = true"
              variant="elevated"
              text="آموزش"
              prepend-icon="mdi-cog"
              size="large"
              width="100%"
            />
          </v-card-actions>
        </v-card>      
        <!--New Room-->
          </v-tabs-window-item>
          <v-tabs-window-item value="two">
           <!--Join Room-->
          <v-card
            class="align-center justify-center elevation-5"
            subtitle=""
            width="400"
            color='#070534'
          >
          
          <template v-slot:title>
            <div class="d-flex align-center justify-center mb-5">
              <div style="width:40%;" class="">
                <v-img
                aspect-ratio="4/3"
                cover
                src="/src/assets/soft-logo-self.png"
              ></v-img>
              
              </div>
              
            </div>
            <div class="d-flex align-center justify-center mb-5"><span style="text-shadow:#ffffff 1px 1px 5px;color: #ffffff;font-size: smaller;">ManaView Video Conference</span></div>
          </template>
          
          <div v-show="AllowedFlag.status">
            <v-label class="ms-3">نام : </v-label>
            <v-card-actions>
              <v-text-field
                v-model="MyName"
                label="نام"
                variant="outlined"
                hide-details
                single-line
              />
            </v-card-actions>
            <v-label class="ms-3">اتاق : </v-label>
            <v-card-actions>
            
              <v-select hide-details v-model="roomId"  :item-title="item => `${item.RoomID} - تعداد افراد حاضر : ${item.pplCount}`" item-value="RoomID" :items="ServerRooms" label="اتاق های موجود">        
                 <!-- <template v-slot:item="{ props, item }">                  
                    <v-list-item v-bind="props" >تعداد افراد حاضر : {{item.raw.pplCount}}</v-list-item>
                 </template> -->
              </v-select>
              
            </v-card-actions>
            <v-card-actions>
              <v-btn
                color="orange-darken-1"
                @click="onJoin"
                variant="elevated"
                size="large"
                width="100%"
                :disabled="roomId==''"
              >
                <span style="color:#000;font-weight:bold">ورود</span>
              </v-btn>
            </v-card-actions>
            <v-card-actions v-if=false>
              <v-btn
                color="green-darken-1"
                @click="helpDlg = true"
                variant="elevated"
                text="آموزش"
                prepend-icon="mdi-cog"
                size="large"
                width="100%"
                
              />
            </v-card-actions>
          </div>
          <div v-show="!AllowedFlag.status" class="text-center text-white">
             <v-label style="font-family:tanha" class="text-h4">ورود مجاز نیست</v-label>
             <v-label style="font-family:tanha" class="text-h7">لطفا با واحد نرم افزار تماس بگیرید</v-label><v-spacer></v-spacer>
             <v-label style="font-family:tanha" class="text-h6">IP Address : {{AllowedFlag.ip}}</v-label>
          </div>
          </v-card>
          <!--Join Room-->
          </v-tabs-window-item>
           </v-tabs-window>
          </v-card-actions>
      </v-card>
        <!---->
        <v-row
          v-show="IsJoind"
          style="height: 100vh !important; padding-top: 1%"
        >
          <vue-webrtc
            ref="webrtc"
            :roomId="roomId"
            :MyName="MyName"
            :enableLogs="true"
            :socketURL="surl"
            :peerOptions="stunServers"
            v-on:IsJoined="IsjoinedEvent"
            v-on:IsLeave="IsLeaveEvent"
            v-on:joined-room="logEvent"
            v-on:left-room="logEvent"
            v-on:opened-room="logEvent"
            v-on:share-started="logEvent"
            v-on:share-stopped="logEvent"
            @error="onError"
          />
        </v-row>
        <!---->
        <v-dialog
          v-model="helpDlg"
          transition="dialog-bottom-transition"
          width="50%"
        >
          <v-card prepend-icon="mdi-help" title="آموزش تنظیمات" class="pa-3 ga-5">
            <!---->

            <v-label>۱.لینک زیر را توسط مرورگر خود باز کنید</v-label>
            <v-text-field variant="outlined" color="bg-grey-darken-2" label="لینک شماره ۱" id="httpinsecuretxt" dir="ltr" v-model="insecTxt" hide-details readonly=""/>
              
            <v-label>۲.طبق عکس زیر لینک دوم را در داخل کادر وارد کنید و دکمه Disable را به Enable تغییر دهید.</v-label>
            <img src="./assets/insecure.png" width:="300" cover style="border-width: 1px;border-color: black;border-style: solid;"/>

            <v-text-field id="currentlocation" variant="outlined" dir="ltr" label="لینک شماره ۲" v-model="currentlocation" hide-details readonly=""/>

            <v-label>۳.بر روی دکمه Relunch کلیک کنید</v-label>
            <!---->
            <template v-slot:actions>
              <v-btn class="ms-auto" text="بستن" @click="helpDlg = false"></v-btn>
            </template>
          </v-card>
        </v-dialog>
      </v-main>
    </v-layout>
    <div style="margin-top:23em;"></div>
    <footerCMP></footerCMP>
  </v-locale-provider>
</template>

<script>
import VueWebRTC from "./components/vueWebRtc.vue";
// import AdminView from "./views/AdminView.vue"
import axios from "axios";
import overlayCMPVue from './components/overlayCMP.vue';
import footerCMPVue from './components/footerCMP.vue';

export default {
  components: {
    "vue-webrtc": VueWebRTC,
    "overlayCMP": overlayCMPVue,
    "footerCMP": footerCMPVue
  },
  data() {
    return {
      axios: axios,
      tab:"two",
      roomId: "آموزشگاه",
      MyName: Math.floor(Math.random() * (99999999 - 11111111) + 11111111),
      surl: `${import.meta.env.VITE_API_URL}`.replace('https://','').replace('http://',''),//"192.168.138.46:3000",
      IsJoind: false,
      stunServers: {
        iceServers: [
          { urls: "stun:192.168.1.101:9000" },
          { urls: "stun:192.168.1.100:9001" },
        ],
      },
      time: "",
      helpDlg: false,
      currentlocation:"",
      insecTxt:"chrome://flags/#unsafely-treat-insecure-origin-as-secure",
      clipbrd:null,
      ServerRooms:[],
      baseUrl: `${import.meta.env.VITE_API_URL}`,
      AllowedFlag: {},
      
    };
  },
  mounted() {
    console.log(this.surl)
    if (localStorage.getItem("roomID") != null) {
      this.roomId = localStorage.getItem("roomID");
    } else {
      this.roomId = "";
    }
    
    ///-------------
    setInterval(() => {
      this.time = new Date().toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
      }); // 11:18:48 AM
    }, 1000);
    setInterval(() => {
        this.GetServerRooms();
    }, 2000);
    this.GetServerRooms();
    ///-------------
    this.currentlocation = window.location;
    this.GetAllowed();
    
  },
  computed: {},
  watch: {},
  methods: {
    GetAllowed(){
      this.axios.get(this.baseUrl + "/AmiAllowed").
          then(res => {
              this.AllowedFlag = res.data;
          });
    },
    onJoin() {
      this.$refs.webrtc.join();
    },
    onLeave() {
      this.$refs.webrtc.leave();
    },
    onShareScreen() {
      this.img = this.$refs.webrtc.shareScreen();
    },
    onError(error, stream) {
      console.log("On Error Event", error, stream);
    },
    logEvent(event) {
      console.log("Event : ", event);
    },
    IsjoinedEvent(event) {
      this.IsJoind = true;
    },
    IsLeaveEvent(event) {
      this.IsJoind = false;
    },
    GetServerRooms() {
      this.ServerRooms=[];
      this.ServerRooms.push({ RoomID: 'اتاق شماره ۱', Members: [ {ID:'',Name:''} ] ,pplCount:0} );
      this.ServerRooms.push({ RoomID: 'اتاق شماره ۲', Members: [ {ID:'',Name:''} ] ,pplCount:0} );
      this.ServerRooms.push({ RoomID: 'اتاق شماره ۳', Members: [ {ID:'',Name:''} ] ,pplCount:0} );
      
      axios.get(this.baseUrl+"/adminRooms").then((res) => {
      var rooms = res.data;
      if(rooms.length != 0){
          rooms.forEach((element)=>{
            this.ServerRooms.filter(x=>x.RoomID == element.RoomID)[0].pplCount = element.Members.length;
          })
        }
      });
    
    },
    
  },
};
</script>
"