<template>
  <card class="card-user" style="max-height:100%">
      <div class="author">
        <img class="avatar border-white" src="@/assets/img/hybrid-1.png" alt="...">
      </div>












<div class="card text-center">
  <div class="card-header">
  </div>
  <div class="card-body">
    <h2 class="card-title">
    share with your friends
    </h2>
<br>
    <p class="card-text">
    <h4>Swarmlab uses VENUS to create virtual networks and ensure your data safety. <br>If you choose to proceed VENUS will have to be installed on your PC.</h4>
    </p>
    <a href="https://git.swarmlab.io:3000/swarmlab/venus-client" target="newwindow" class="btn btn-primary">Get VENUS here</a>
  </div>
  <div class="card-footer text-muted">
      <b>VENUS is an open source service developed and maintained by the swarmlab team.
      </b>
      <br>
      <br>
         <h5>
          Safety is ensured using wireguard.
        </h5>

  </div>


</div>

        <div class="row" >
          <div class="col-1 text-secondary" >
          </div>
          <div class="col-10 text-secondary" >
          <br>





          </div>
          <div class="col-1 text-secondary" >
          </div>
        </div> <!-- row -->


  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
export default {
  components: {
      card
	},
  props: {
  },
  data() {
   return{
    testactionrowindex:[],  // joined        
    actionrowindex:'',
	  playbookInfo: {},
    hybridshowdata:{},
    token: '',
	  CONFIG: {},
    isstatus:'',
	  playbook: {
			'title':'',
			'name':'',
			'description':''
		},
			container:{
				name:'',
				view:0
			},
			pipeline:{},
 		selected: 'hybrid',
		showModal: false,
		visibility: [],
	 	active:false,
		vuetablekey1:0,
		fielddata:{},
    perpage: 10,
    searchFor: '',
		sortOrder: [{
				field: 'pipelinename',
				direction: 'asc'
		}],
    multiSort: true,
		}
  },
	mounted() {
	},
	created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
    //console.log("token "+ this.token);

	},
    beforeDestroy () {
 },
  computed: {

	},

  methods: {


  },


  actions: {


	}

};
</script>
<style>
.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
  background-color: #eff0f1;
	  border: 1px solid blue;
		  //white-space: pre-line;
			}

</style>
