<template>
  <f7-page name="firstpage" no-swipeback>
    <div class="page-one" align="center">
      <f7-block>
        <h1><font color="white">Welcome to Penpal America</font></h1>

        <h3>
          <font color="white">Register today to chat with Americans</font>
        </h3>
        <div class="halfcol">
          <f7-button fill @click="gotoSignIn" open-confirm
            >Get Started</f7-button
          >
          <br />
        </div>
        <!--
        <br />
        <f7-link href="https://penpalamerica.com/" external>Goto Home </f7-link>
        -->
      </f7-block>
    </div>
  </f7-page>
</template>

<script>
import { f7 } from "framework7-vue";
import { setInterval, clearInterval } from "timers";
import { mixin } from "../../js/mixin";
import firebase from "firebase";
import { title } from "process";
export default {
  data() {
    return {
      email: null,
      password: null,
      time_left: -1,
      app_agree: false,
    };
  },

  methods: {
    gotoSignIn() {
      this.$f7router.navigate("/signin/");
    },

    gotoHome() {
      this.$f7router.navigate("/../index.html/", External);
    },
  },
  created() {},
};
</script>
<style scoped>
.page {
  font-family: "centabel";
  background: url("https://penpalamerica.com/images/coversmall.png") no-repeat
    center fixed !important;
  background-size: cover !important;
}
.page-one {
  width: 70%;
  --f7-page-bg-color: red;
  margin-top: 200px;
  margin-left: 150px;
}

@media only screen and (min-width: 700px) and (max-width: 1024px) {
  .page-one {
    width: 70%;
    --f7-page-bg-color: red;
    margin-top: 400px;
    margin-left: 150px;
    font-size: 2em;
  }
  .halfcol {
    width: 100%;
    height: auto;
    font-size: 3em;
  }
}

@media only screen and (max-width: 600px) {
  .page-one {
    width: 70%;
    --f7-page-bg-color: red;
    margin-top: 300px;
    margin-left: 70px;
  }
}
.halfcol {
  width: 20%;
}

@media only screen and (max-width: 600px) {
  .halfcol {
    width: 70%;
  }
}
.align-center {
  margin-top: 300px;
  margin-left: 50px;
  margin-right: 50px;
  position: relative;
  /*background: #1b1e24;*/
  /* SIDEBAR */
  /* END SIDEBAR */
  /* CONTENT */
  /* END CONTENT */
  /* RTL CONTENT MODE */
  /* END RTL CONTENT MODE */
}
</style>>