Update

open_mail/src/components/about_us.vue

@@ -0,0 +1,93 @@
+<template>
+<div class="about-us">
+    <div class="about-us-container">
+        <h2 class="why">Anonymous</h2>
+        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release of Letraset 
+        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.</p>
+    </div>
+    <div class="about-us-container">
+        <h2 class="why">Open Source</h2>
+        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release of Letraset 
+        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.</p>
+    </div>
+    <div class="about-us-container">
+        <h2 class="why">Nice design</h2>
+        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release of Letraset 
+        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.</p>
+    </div>
+    <div class="about-us-container">
+        <h2 class="why">One-Time</h2>
+        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release of Letraset 
+        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.</p>
+    </div>
+    <div class="about-us-container">
+        <h2 class="why">Fast</h2>
+        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release of Letraset 
+        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.</p>
+    </div>
+    <div class="about-us-container">
+        <h2 class="why">Updatable</h2>
+        <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+        when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+        It has survived not only five centuries, but also the leap into electronic typesetting, remaining
+        essentially unchanged. It was popularised in the 1960s with the release of Letraset 
+        sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+        like Aldus PageMaker including versions of Lorem Ipsum.</p>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    name: 'Abous-Us'
+}
+</script>
+
+<style scoped>
+.about-us {
+    display: grid;
+    grid-template-columns: 33.33% 33.33% 33.33%;
+}
+.about-us-container {
+    background: #0059FF;
+    margin: 25px;
+    padding: 25px;
+    box-shadow: 3.5px 3.5px 0px #1A5AD2;
+}
+.text {
+    text-align: justify;
+    color: white;
+    font-size: 15px;
+    font-family: 'Poppins';
+}
+.why {
+    font-family: 'Poppins';
+    color: white;
+}
+</style>

open_mail/src/views/About.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="about">
+  <div class="About">
     <h1>This is an about page</h1>
   </div>
 </template>

open_mail/src/views/Account.vue

@@ -13,6 +13,7 @@
 
     <div class="Account">
         <p class="a b c myemail-is">{{ email }}</p>
+        <h1 class="null-mail" v-show="!Boolean(getInbox.length)">You did not have a inbox letters 😢</h1>
         <div v-for="_mail of getInbox" :key="_mail" class="mail" v-on:click="read(_mail)">
             <p>Received message from {{ _mail["from"] }} at {{ _mail["date"] }}</p>   
             <p>{{ _mail["subject"] }}</p>  
@@ -21,7 +22,7 @@
 
     <div class="view_letter" v-show="readshow">
         <p style="text-align: right; "><img src="../assets/hide.png" class="letter-close" style="height: 32px; width: 32px;" v-on:click="readshow=!readshow"></p>
-        <p class="a b c letter" v-html="readletter['body']"></p>
+        <div class="a b c letter" v-html="readletter['body']"></div>
     </div>
 </div>
 </template>
@@ -74,8 +75,7 @@ export default defineComponent({
     background: rgb(255, 255, 255);
     padding: 5px;
     padding-right: 50px;
-    margin-top: auto;
-    margin-bottom: auto;
+    margin-top: 20px;
     margin-left: 20px;
     border-radius: 4.5px;
     box-shadow: 1px 1px 31px rgb(214, 214, 214);
@@ -88,22 +88,24 @@ export default defineComponent({
     display: flex;
     margin-top: 25px;
     margin-bottom: 25px;
-    justify-content: center;
+    justify-content: left;
     align-items: center;
     align-content: center;
+
 }
 .header-img {
     width: 34px; height: 34px;
     justify-content: center;
     color: red;
     filter: contrast(20%);
     align-content: left;
-    margin-right: 16.41px;
+    margin-left: 15px;
+    margin-right: 22.41px;
+
 
 }
 .header-item {
     padding: 15px;
-
     font-family: 'Poppins';
     transition: .11s;
     border-radius: 7px;
@@ -160,13 +162,33 @@ export default defineComponent({
     border-radius: 6px;
 
 }
+.letter-close {
+    padding: 8px;
+    background: white;
+    box-shadow: 0px 5px 15px #C2C2C2;
+    border-radius: 8px;
+    transition: .05s;
+}
+.letter-close:hover {
+    box-shadow: 0px 10px 20px #C2C2C2;
+}
 .letter {
-    background: rgba(14, 14, 14, 0.904);
-    box-shadow: 1px 1px 50px black;
+    background: white;
     padding: 50px;
     font-family: 'Poppins';
-    border-radius: 8px; border: 1px solid black; animation: activate .18s;
-    text-align: left;
+    border-radius: 8px;
+    animation: activate .18s;
+    text-align: justify;
+    box-shadow: 0px 5px 15px #C2C2C2;
+    float: right;
+
+}
 
+.null-mail {
+    text-align: center;
+    font-family: 'arial';
+    font-weight: 900;
+    color: rgb(43, 43, 43);
+    margin-top: 105px;
 }
 </style>

open_mail/src/views/Home.vue

@@ -27,16 +27,20 @@
       </div>
       <p class="a b get-it" v-on:click="$store.commit('updateWindow', true)">Dont have OpenMail? Get it! </p>
     </div>
-
+    <!-- About us -->
+    <about_us/>
+
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapGetters, mapActions, mapMutations } from 'vuex'
+import about_us from '../components/about_us.vue'
 
 export default defineComponent({
   name: 'Home',
+  components: { about_us },
   computed: mapGetters(['getEmails']),
   methods: {
     ...mapActions(['register_mail']),
@@ -48,11 +52,8 @@ export default defineComponent({
   },
   mounted() {
     document.title = "OpenMail"
-    if(localStorage.email.indexOf('@') == -1) {
-    } else {
-      alert('You are already logged. Please Log Out first!')
-      this.$router.push('account')
-    }
+    if(localStorage.email == undefined || localStorage.email.indexOf('@') == -1) {}
+    else { this.$router.push('account') }
 
 
   }
@@ -64,22 +65,30 @@ export default defineComponent({
   font-family: Poppins;
   font-size: 43.41px;
   color: white;
+  margin: 25px;
 }
 .slogantext { 
   font-family: Poppins;
   font-size: 22px;
   color: white;
 }
+.logo {
+  width: 62px;
+  height: 62px;
+
+  filter: invert(100%);
+}
 .mail {
   margin-top: 1.1%; margin-bottom: 1.1%;
   margin-left: 15%; margin-right: 15%;
   padding: 50px;
   border: 1px solid rgb(231, 231, 231);
   border-radius: 15px;
-  background: url('https://hdfon.ru/wp-content/uploads/hdfon.ru-166872470.jpg');
+  background: url('https://64.media.tumblr.com/4c5a34bd6b1da7ac7f48766ab3297e2e/tumblr_pqaqoc66A11ta0hnbo1_1280.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0px 3px 5px rgb(179, 179, 179);
+  background-attachment: fixed;
 }
 
 .searchbox-wrap{