added Earth with satellites
This commit is contained in:
dspwithaheart
parent
3f95ca04f4
commit
a79f453051
15
package-lock.json
generated
15
package-lock.json
generated
@ -7162,6 +7162,11 @@
|
|||||||
"minimist": "^1.2.5"
|
"minimist": "^1.2.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"motion-sensors-polyfill": {
|
||||||
|
"version": "0.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/motion-sensors-polyfill/-/motion-sensors-polyfill-0.3.1.tgz",
|
||||||
|
"integrity": "sha1-+N/hhhS3GcddjEZpFKOTG/yMjR8="
|
||||||
|
},
|
||||||
"move-concurrently": {
|
"move-concurrently": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
|
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
|
||||||
@ -10314,6 +10319,11 @@
|
|||||||
"neo-async": "^2.6.0"
|
"neo-async": "^2.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"three": {
|
||||||
|
"version": "0.116.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/three/-/three-0.116.1.tgz",
|
||||||
|
"integrity": "sha512-l2JCMiA/lVZAuSrLWRYMalvpR+0j8hbIhCpfs4V6JFnw2+JQEQJ5HltNpfFr+9TDpQts1BhtcISehWf/xBGPvQ=="
|
||||||
|
},
|
||||||
"through": {
|
"through": {
|
||||||
"version": "2.3.8",
|
"version": "2.3.8",
|
||||||
"resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
|
"resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
|
||||||
@ -10904,6 +10914,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vue-router": {
|
||||||
|
"version": "3.1.6",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1588663962110&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz",
|
||||||
|
"integrity": "sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k="
|
||||||
|
},
|
||||||
"vue-style-loader": {
|
"vue-style-loader": {
|
||||||
"version": "4.1.2",
|
"version": "4.1.2",
|
||||||
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
|
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
|
||||||
|
|||||||
@ -10,9 +10,12 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdi/font": "^3.6.95",
|
"@mdi/font": "^3.6.95",
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
|
"motion-sensors-polyfill": "^0.3.1",
|
||||||
"register-service-worker": "^1.7.1",
|
"register-service-worker": "^1.7.1",
|
||||||
"roboto-fontface": "*",
|
"roboto-fontface": "*",
|
||||||
|
"three": "^0.116.1",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
|
"vue-router": "^3.1.6",
|
||||||
"vuetify": "^2.2.11",
|
"vuetify": "^2.2.11",
|
||||||
"vuex": "^3.1.3"
|
"vuex": "^3.1.3"
|
||||||
},
|
},
|
||||||
@ -20,6 +23,7 @@
|
|||||||
"@vue/cli-plugin-babel": "~4.3.0",
|
"@vue/cli-plugin-babel": "~4.3.0",
|
||||||
"@vue/cli-plugin-eslint": "~4.3.0",
|
"@vue/cli-plugin-eslint": "~4.3.0",
|
||||||
"@vue/cli-plugin-pwa": "~4.3.0",
|
"@vue/cli-plugin-pwa": "~4.3.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.3.0",
|
||||||
"@vue/cli-plugin-vuex": "~4.3.0",
|
"@vue/cli-plugin-vuex": "~4.3.0",
|
||||||
"@vue/cli-service": "~4.3.0",
|
"@vue/cli-service": "~4.3.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
@ -30,5 +34,7 @@
|
|||||||
"vue-cli-plugin-vuetify": "~2.0.5",
|
"vue-cli-plugin-vuetify": "~2.0.5",
|
||||||
"vue-template-compiler": "^2.6.11",
|
"vue-template-compiler": "^2.6.11",
|
||||||
"vuetify-loader": "^1.3.0"
|
"vuetify-loader": "^1.3.0"
|
||||||
}
|
},
|
||||||
|
"_id": "vue_pwa@0.1.0",
|
||||||
|
"readme": "ERROR: No README data found!"
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
public/img/map/bump.jpg
Normal file
BIN
public/img/map/bump.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 920 KiB |
BIN
public/img/map/map.jpg
Normal file
BIN
public/img/map/map.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 MiB |
BIN
public/img/map/night.jpg
Normal file
BIN
public/img/map/night.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 973 KiB |
BIN
public/img/map/spekular.jpg
Normal file
BIN
public/img/map/spekular.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 742 KiB |
@ -6,6 +6,8 @@
|
|||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
237
src/App.vue
237
src/App.vue
@ -1,60 +1,203 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app>
|
<v-app id="inspire">
|
||||||
<v-app-bar
|
<v-navigation-drawer
|
||||||
|
v-model="drawer"
|
||||||
|
:clipped="$vuetify.breakpoint.lgAndUp"
|
||||||
|
:color="color"
|
||||||
|
:expand-on-hover="expandOnHover"
|
||||||
|
:mini-variant="miniVariant"
|
||||||
|
:right="right"
|
||||||
|
:permanent="permanent"
|
||||||
|
:src="bg"
|
||||||
|
:absolute="absolute"
|
||||||
|
dark
|
||||||
app
|
app
|
||||||
color="primary"
|
>
|
||||||
|
<v-list dense>
|
||||||
|
<template v-for="item in items">
|
||||||
|
<v-row
|
||||||
|
v-if="item.heading"
|
||||||
|
:key="item.heading"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-subheader v-if="item.heading">
|
||||||
|
{{ item.heading }}
|
||||||
|
</v-subheader>
|
||||||
|
</v-col>
|
||||||
|
<v-col
|
||||||
|
cols="6"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#!"
|
||||||
|
class="body-2 black--text"
|
||||||
|
>EDIT</a>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-list-group
|
||||||
|
v-else-if="item.children"
|
||||||
|
:key="item.text"
|
||||||
|
v-model="item.model"
|
||||||
|
:prepend-icon="item.model ? item.icon : item['icon-alt']"
|
||||||
|
append-icon=""
|
||||||
|
>
|
||||||
|
<template v-slot:activator>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.text }}
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</template>
|
||||||
|
<v-list-item
|
||||||
|
v-for="(child, i) in item.children"
|
||||||
|
:key="i"
|
||||||
|
link
|
||||||
|
>
|
||||||
|
<v-list-item-action v-if="child.icon">
|
||||||
|
<v-icon>{{ child.icon }}</v-icon>
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ child.text }}
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list-group>
|
||||||
|
<!-- This in Case Items have no Children -->
|
||||||
|
<v-list-item
|
||||||
|
v-else
|
||||||
|
:key="item.text"
|
||||||
|
link
|
||||||
|
:to="item.href"
|
||||||
|
>
|
||||||
|
<v-list-item-action>
|
||||||
|
<v-icon @click.stop="fuckOff">{{ item.icon }}</v-icon>
|
||||||
|
</v-list-item-action>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>
|
||||||
|
{{ item.text }}
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</template>
|
||||||
|
</v-list>
|
||||||
|
</v-navigation-drawer>
|
||||||
|
|
||||||
|
<v-app-bar
|
||||||
|
:clipped-left="$vuetify.breakpoint.lgAndUp"
|
||||||
|
app
|
||||||
|
color="blue darken-3"
|
||||||
dark
|
dark
|
||||||
>
|
>
|
||||||
<div class="d-flex align-center">
|
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||||
<v-img
|
<!-- <v-toolbar-title
|
||||||
alt="Vuetify Logo"
|
style="width: 300px"
|
||||||
class="shrink mr-2"
|
class="ml-0 pl-4"
|
||||||
contain
|
|
||||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
|
|
||||||
transition="scale-transition"
|
|
||||||
width="40"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-img
|
|
||||||
alt="Vuetify Name"
|
|
||||||
class="shrink mt-1 hidden-sm-and-down"
|
|
||||||
contain
|
|
||||||
min-width="100"
|
|
||||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
|
|
||||||
width="100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
|
||||||
target="_blank"
|
|
||||||
text
|
|
||||||
>
|
>
|
||||||
<span class="mr-2">Latest Release</span>
|
<span class="hidden-sm-and-down">Google Contacts</span>
|
||||||
<v-icon>mdi-open-in-new</v-icon>
|
</v-toolbar-title> -->
|
||||||
</v-btn>
|
|
||||||
</v-app-bar>
|
|
||||||
|
|
||||||
|
<!-- <v-spacer></v-spacer>
|
||||||
|
<v-btn icon>
|
||||||
|
<v-icon>mdi-apps</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn icon>
|
||||||
|
<v-icon>mdi-bell</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
icon
|
||||||
|
large
|
||||||
|
>
|
||||||
|
<v-avatar
|
||||||
|
size="32px"
|
||||||
|
item
|
||||||
|
>
|
||||||
|
<v-img
|
||||||
|
src="https://cdn.vuetifyjs.com/images/logos/logo.svg"
|
||||||
|
alt="Vuetify"
|
||||||
|
></v-img></v-avatar>
|
||||||
|
</v-btn> -->
|
||||||
|
</v-app-bar>
|
||||||
<v-content>
|
<v-content>
|
||||||
<HelloWorld/>
|
<v-container class="px-4 py-0 fill-height" fluid>
|
||||||
|
<v-row class="fill-height">
|
||||||
|
<v-col>
|
||||||
|
<transition name="fade">
|
||||||
|
<router-view></router-view>
|
||||||
|
</transition>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</v-content>
|
</v-content>
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HelloWorld from './components/HelloWorld';
|
// import HelloWorld from './components/HelloWorld.vue'
|
||||||
|
export default {
|
||||||
export default {
|
components: {
|
||||||
name: 'App',
|
// HelloWorld
|
||||||
|
},
|
||||||
components: {
|
props: {
|
||||||
HelloWorld,
|
source: String,
|
||||||
},
|
},
|
||||||
|
data: () => ({
|
||||||
data: () => ({
|
// App Drawer properties
|
||||||
//
|
dialog: false,
|
||||||
}),
|
drawer: null,
|
||||||
};
|
right: false,
|
||||||
|
permanent: false,
|
||||||
|
miniVariant: false,
|
||||||
|
expandOnHover: false,
|
||||||
|
background: true,
|
||||||
|
absolute: false,
|
||||||
|
// Items in the App Drawer
|
||||||
|
items: [
|
||||||
|
{ icon: 'mdi-contacts', text: 'Contacts', href: '/contacts' },
|
||||||
|
{ icon: 'mdi-history', text: 'Frequently contacted' },
|
||||||
|
{ icon: 'mdi-content-copy', text: 'Duplicates' },
|
||||||
|
{
|
||||||
|
icon: 'mdi-chevron-up',
|
||||||
|
'icon-alt': 'mdi-chevron-down',
|
||||||
|
text: 'Labels',
|
||||||
|
model: true,
|
||||||
|
children: [
|
||||||
|
{ icon: 'mdi-plus', text: 'Create label' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'mdi-chevron-up',
|
||||||
|
'icon-alt': 'mdi-chevron-down',
|
||||||
|
text: 'More',
|
||||||
|
model: false,
|
||||||
|
children: [
|
||||||
|
{ text: 'Import' },
|
||||||
|
{ text: 'Export' },
|
||||||
|
{ text: 'Print' },
|
||||||
|
{ text: 'Undo changes' },
|
||||||
|
{ text: 'Other contacts' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ icon: 'mdi-settings', text: 'Settings' },
|
||||||
|
{ icon: 'mdi-message', text: 'Send feedback' },
|
||||||
|
{ icon: 'mdi-help-circle', text: 'Help' },
|
||||||
|
{ icon: 'mdi-cellphone-link', text: 'App downloads' },
|
||||||
|
{ icon: 'mdi-keyboard', text: 'Go to the old version' },
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
computed: {
|
||||||
|
bg () {
|
||||||
|
return this.background ? 'https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg' : undefined
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fuckOff() {
|
||||||
|
alert('fuckOff')
|
||||||
|
},
|
||||||
|
toggleTheme() {
|
||||||
|
this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -1,249 +1,151 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-app id="inspire">
|
<v-container>
|
||||||
<v-navigation-drawer
|
<v-row class="text-center">
|
||||||
v-model="drawer"
|
<v-col cols="12">
|
||||||
:clipped="$vuetify.breakpoint.lgAndUp"
|
<v-img
|
||||||
app
|
:src="require('../assets/logo.svg')"
|
||||||
>
|
class="my-3"
|
||||||
<v-list dense>
|
contain
|
||||||
<template v-for="item in items">
|
height="200"
|
||||||
<v-row v-if="item.heading" :key="item.heading" align="center">
|
/>
|
||||||
<v-col cols="6">
|
</v-col>
|
||||||
<v-subheader v-if="item.heading">
|
|
||||||
{{ item.heading }}
|
|
||||||
</v-subheader>
|
|
||||||
</v-col>
|
|
||||||
<v-col cols="6" class="text-center">
|
|
||||||
<a href="#!" class="body-2 black--text">EDIT</a>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
<v-list-group
|
|
||||||
v-else-if="item.children"
|
|
||||||
:key="item.text"
|
|
||||||
v-model="item.model"
|
|
||||||
:prepend-icon="item.model ? item.icon : item['icon-alt']"
|
|
||||||
append-icon=""
|
|
||||||
>
|
|
||||||
<template v-slot:activator>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>
|
|
||||||
{{ item.text }}
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item-content>
|
|
||||||
</template>
|
|
||||||
<v-list-item v-for="(child, i) in item.children" :key="i" link>
|
|
||||||
<v-list-item-action v-if="child.icon">
|
|
||||||
<v-icon>{{ child.icon }}</v-icon>
|
|
||||||
</v-list-item-action>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>
|
|
||||||
{{ child.text }}
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list-group>
|
|
||||||
<v-list-item v-else :key="item.text" link>
|
|
||||||
<v-list-item-action>
|
|
||||||
<v-icon>{{ item.icon }}</v-icon>
|
|
||||||
</v-list-item-action>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title>
|
|
||||||
{{ item.text }}
|
|
||||||
</v-list-item-title>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
</template>
|
|
||||||
</v-list>
|
|
||||||
</v-navigation-drawer>
|
|
||||||
|
|
||||||
<v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="red" dark>
|
<v-col class="mb-4">
|
||||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
|
<h1 class="display-2 font-weight-bold mb-3">
|
||||||
<v-btn to="/about" text color="blue">
|
Welcome to Vuetify
|
||||||
<span class="mr-2">Panda</span>
|
</h1>
|
||||||
<!-- <v-icon>mdi-open-in-new</v-icon> -->
|
|
||||||
</v-btn>
|
<p class="subheading font-weight-regular">
|
||||||
<v-btn to="/home" text color="blue">
|
For help and collaboration with other Vuetify developers,
|
||||||
<span class="mr-2">Home</span>
|
<br>please join our online
|
||||||
<!-- <v-icon>mdi-open-in-new</v-icon> -->
|
<a
|
||||||
</v-btn>
|
href="https://community.vuetifyjs.com"
|
||||||
<v-btn to="/HelloWorld" text color="blue">
|
target="_blank"
|
||||||
<span class="mr-2">HelloWorld</span>
|
>Discord Community</a>
|
||||||
<!-- <v-icon>mdi-open-in-new</v-icon> -->
|
</p>
|
||||||
</v-btn>
|
</v-col>
|
||||||
<v-btn to="/apply" text color="blue">
|
|
||||||
<span class="mr-2">Apply</span>
|
<v-col
|
||||||
<!-- <v-icon>mdi-open-in-new</v-icon> -->
|
class="mb-5"
|
||||||
</v-btn>
|
cols="12"
|
||||||
<v-toolbar-title style="width: 300px" class="ml-0 pl-4">
|
|
||||||
<span class="hidden-sm-and-down">Google Contacts</span>
|
|
||||||
</v-toolbar-title>
|
|
||||||
<v-text-field
|
|
||||||
flat
|
|
||||||
solo-inverted
|
|
||||||
hide-details
|
|
||||||
prepend-inner-icon="mdi-magnify"
|
|
||||||
label="Search"
|
|
||||||
class="hidden-sm-and-down"
|
|
||||||
/>
|
|
||||||
<v-spacer />
|
|
||||||
<v-btn icon>
|
|
||||||
<v-icon>mdi-apps</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn icon>
|
|
||||||
<v-icon>mdi-bell</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn icon large>
|
|
||||||
<v-avatar size="32px" item>
|
|
||||||
<v-img
|
|
||||||
src="https://cdn.vuetifyjs.com/images/logos/logo.svg"
|
|
||||||
alt="Vuetify"
|
|
||||||
/></v-avatar>
|
|
||||||
</v-btn>
|
|
||||||
</v-app-bar>
|
|
||||||
<v-content>
|
|
||||||
<!-- <About /> -->
|
|
||||||
</v-content>
|
|
||||||
<!-- <v-content>
|
|
||||||
<v-container
|
|
||||||
class="fill-height"
|
|
||||||
fluid
|
|
||||||
>
|
>
|
||||||
<v-row
|
<h2 class="headline font-weight-bold mb-3">
|
||||||
align="center"
|
What's next?
|
||||||
justify="center"
|
</h2>
|
||||||
>
|
|
||||||
<v-tooltip right>
|
|
||||||
<template v-slot:activator="{ on }">
|
|
||||||
<v-btn
|
|
||||||
:href="source"
|
|
||||||
icon
|
|
||||||
large
|
|
||||||
target="_blank"
|
|
||||||
v-on="on"
|
|
||||||
>
|
|
||||||
<v-icon large>mdi-code-tags</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</template>
|
|
||||||
<span>Source</span>
|
|
||||||
</v-tooltip>
|
|
||||||
<v-tooltip right>
|
|
||||||
<template v-slot:activator="{ on }">
|
|
||||||
<v-btn
|
|
||||||
icon
|
|
||||||
large
|
|
||||||
href="https://codepen.io/johnjleider/pen/MNYLdL"
|
|
||||||
target="_blank"
|
|
||||||
v-on="on"
|
|
||||||
>
|
|
||||||
<v-icon large>mdi-codepen</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</template>
|
|
||||||
<span>Codepen</span>
|
|
||||||
</v-tooltip>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</v-content> -->
|
|
||||||
<v-btn bottom color="pink" dark fab fixed right @click="dialog = !dialog">
|
|
||||||
<v-icon>mdi-plus</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
<!-- // --------------------------------------------------------------------------------------- // -->
|
<v-row justify="center">
|
||||||
<v-dialog v-model="dialog" width="800px">
|
<a
|
||||||
<v-card>
|
v-for="(next, i) in whatsNext"
|
||||||
<v-card-title class="grey darken-2">
|
:key="i"
|
||||||
Create contact
|
:href="next.href"
|
||||||
</v-card-title>
|
class="subheading mx-3"
|
||||||
<v-container>
|
target="_blank"
|
||||||
<v-row class="mx-2">
|
>
|
||||||
<v-col class="align-center justify-space-between" cols="12">
|
{{ next.text }}
|
||||||
<v-row align="center" class="mr-0">
|
</a>
|
||||||
<v-avatar size="40px" class="mx-3">
|
</v-row>
|
||||||
<img
|
</v-col>
|
||||||
src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
|
|
||||||
alt=""
|
<v-col
|
||||||
/>
|
class="mb-5"
|
||||||
</v-avatar>
|
cols="12"
|
||||||
<v-text-field placeholder="Name" />
|
>
|
||||||
</v-row>
|
<h2 class="headline font-weight-bold mb-3">
|
||||||
</v-col>
|
Important Links
|
||||||
<v-col cols="6">
|
</h2>
|
||||||
<v-text-field
|
|
||||||
prepend-icon="mdi-account-card-details-outline"
|
<v-row justify="center">
|
||||||
placeholder="Company"
|
<a
|
||||||
/>
|
v-for="(link, i) in importantLinks"
|
||||||
</v-col>
|
:key="i"
|
||||||
<v-col cols="6">
|
:href="link.href"
|
||||||
<v-text-field placeholder="Job title" />
|
class="subheading mx-3"
|
||||||
</v-col>
|
target="_blank"
|
||||||
<v-col cols="12">
|
>
|
||||||
<v-text-field prepend-icon="mdi-mail" placeholder="Email" />
|
{{ link.text }}
|
||||||
</v-col>
|
</a>
|
||||||
<v-col cols="12">
|
</v-row>
|
||||||
<v-text-field
|
</v-col>
|
||||||
type="tel"
|
|
||||||
prepend-icon="mdi-phone"
|
<v-col
|
||||||
placeholder="(000) 000 - 0000"
|
class="mb-5"
|
||||||
/>
|
cols="12"
|
||||||
</v-col>
|
>
|
||||||
<v-col cols="12">
|
<h2 class="headline font-weight-bold mb-3">
|
||||||
<v-text-field prepend-icon="mdi-text" placeholder="Notes" />
|
Ecosystem
|
||||||
</v-col>
|
</h2>
|
||||||
</v-row>
|
|
||||||
</v-container>
|
<v-row justify="center">
|
||||||
<v-card-actions>
|
<a
|
||||||
<v-btn text color="primary">More</v-btn>
|
v-for="(eco, i) in ecosystem"
|
||||||
<v-spacer />
|
:key="i"
|
||||||
<v-btn text color="primary" @click="dialog = false">Cancel</v-btn>
|
:href="eco.href"
|
||||||
<v-btn text @click="dialog = false">Save</v-btn>
|
class="subheading mx-3"
|
||||||
</v-card-actions>
|
target="_blank"
|
||||||
</v-card>
|
>
|
||||||
</v-dialog>
|
{{ eco.text }}
|
||||||
</v-app>
|
</a>
|
||||||
|
</v-row>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import About from "@/views/About";
|
export default {
|
||||||
export default {
|
name: 'HelloWorld',
|
||||||
name: "Apply",
|
|
||||||
components: {
|
data: () => ({
|
||||||
About
|
ecosystem: [
|
||||||
},
|
{
|
||||||
props: {
|
text: 'vuetify-loader',
|
||||||
source: String
|
href: 'https://github.com/vuetifyjs/vuetify-loader',
|
||||||
},
|
},
|
||||||
data: () => ({
|
{
|
||||||
dialog: false,
|
text: 'github',
|
||||||
drawer: null,
|
href: 'https://github.com/vuetifyjs/vuetify',
|
||||||
items: [
|
},
|
||||||
{ icon: "mdi-contacts", text: "Contacts" },
|
{
|
||||||
{ icon: "mdi-history", text: "Frequently contacted" },
|
text: 'awesome-vuetify',
|
||||||
{ icon: "mdi-content-copy", text: "Duplicates" },
|
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
||||||
{
|
},
|
||||||
icon: "mdi-chevron-up",
|
],
|
||||||
"icon-alt": "mdi-chevron-down",
|
importantLinks: [
|
||||||
text: "Labels",
|
{
|
||||||
model: true,
|
text: 'Documentation',
|
||||||
children: [{ icon: "mdi-plus", text: "Create label" }]
|
href: 'https://vuetifyjs.com',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: "mdi-chevron-up",
|
text: 'Chat',
|
||||||
"icon-alt": "mdi-chevron-down",
|
href: 'https://community.vuetifyjs.com',
|
||||||
text: "More",
|
},
|
||||||
model: false,
|
{
|
||||||
children: [
|
text: 'Made with Vuetify',
|
||||||
{ text: "Import" },
|
href: 'https://madewithvuejs.com/vuetify',
|
||||||
{ text: "Export" },
|
},
|
||||||
{ text: "Print" },
|
{
|
||||||
{ text: "Undo changes" },
|
text: 'Twitter',
|
||||||
{ text: "Other contacts" }
|
href: 'https://twitter.com/vuetifyjs',
|
||||||
]
|
},
|
||||||
},
|
{
|
||||||
{ icon: "mdi-settings", text: "Settings" },
|
text: 'Articles',
|
||||||
{ icon: "mdi-message", text: "Send feedback" },
|
href: 'https://medium.com/vuetify',
|
||||||
{ icon: "mdi-help-circle", text: "Help" },
|
},
|
||||||
{ icon: "mdi-cellphone-link", text: "App downloads" },
|
],
|
||||||
{ icon: "mdi-keyboard", text: "Go to the old version" }
|
whatsNext: [
|
||||||
]
|
{
|
||||||
})
|
text: 'Explore components',
|
||||||
};
|
href: 'https://vuetifyjs.com/components/api-explorer',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Select a layout',
|
||||||
|
href: 'https://vuetifyjs.com/layout/pre-defined',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Frequently Asked Questions',
|
||||||
|
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
217
src/components/ThreeAnime.vue
Normal file
217
src/components/ThreeAnime.vue
Normal file
@ -0,0 +1,217 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div id="console"></div>
|
||||||
|
<div id="container"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
AbsoluteOrientationSensor
|
||||||
|
// RelativeOrientationSensor
|
||||||
|
} from 'motion-sensors-polyfill'
|
||||||
|
import * as THREE from 'three'
|
||||||
|
// import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
|
||||||
|
// import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
|
||||||
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
|
||||||
|
const params = new URLSearchParams(new URL(window.location.href).search.slice(1))
|
||||||
|
// const relative = !!Number(params.get("relative"));
|
||||||
|
const coordinateSystem = params.get('coord')
|
||||||
|
|
||||||
|
// let container, camera, scene, renderer, model;
|
||||||
|
let container, camera, scene, renderer, cube, sensor
|
||||||
|
export default {
|
||||||
|
name: 'HelloWorld',
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
},
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.initScene()
|
||||||
|
if (navigator.permissions) {
|
||||||
|
// https://w3c.github.io/orientation-sensor/#model
|
||||||
|
Promise.all([navigator.permissions.query({ name: 'accelerometer' }),
|
||||||
|
navigator.permissions.query({ name: 'magnetometer' }),
|
||||||
|
navigator.permissions.query({ name: 'gyroscope' })])
|
||||||
|
.then(results => {
|
||||||
|
if (results.every(result => result.state === 'granted')) {
|
||||||
|
this.initSensor()
|
||||||
|
} else {
|
||||||
|
console.log('Permission to use sensor was denied.')
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.log('Integration with Permissions API is not enabled, still try to start app.' + err)
|
||||||
|
this.initSensor()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
console.log('No Permissions API, still try to start app.')
|
||||||
|
this.initSensor()
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.renderScene();
|
||||||
|
this.animate()
|
||||||
|
const log = console.log
|
||||||
|
console.log = (message, ...rest) => {
|
||||||
|
const div = document.querySelector('#console')
|
||||||
|
div.innerText = message
|
||||||
|
log.call(console, message, ...rest)
|
||||||
|
}
|
||||||
|
console.log('mounted')
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
calcPosFromLatLonRad(lat,lon,radius){
|
||||||
|
|
||||||
|
var phi = (90-lat)*(Math.PI/180);
|
||||||
|
var theta = (lon+180)*(Math.PI/180);
|
||||||
|
var x, y,z
|
||||||
|
x = -((radius) * Math.sin(phi)*Math.cos(theta));
|
||||||
|
z = ((radius) * Math.sin(phi)*Math.sin(theta));
|
||||||
|
y = ((radius) * Math.cos(phi));
|
||||||
|
|
||||||
|
|
||||||
|
console.log([x,y,z]);
|
||||||
|
return [x,y,z];
|
||||||
|
},
|
||||||
|
createRandomPoints() {
|
||||||
|
var meshes=[];
|
||||||
|
for(var i = 0 ; i < 10 ; i++){
|
||||||
|
var geometry = new THREE.SphereGeometry(0.025, 20, 20)
|
||||||
|
var material = new THREE.MeshBasicMaterial({
|
||||||
|
color: new THREE.Color('white')
|
||||||
|
})
|
||||||
|
var mesh = new THREE.Mesh(geometry, material)
|
||||||
|
meshes.push(mesh);
|
||||||
|
}
|
||||||
|
return meshes
|
||||||
|
},
|
||||||
|
initScene () {
|
||||||
|
container = document.getElementById('container')
|
||||||
|
// document.body.appendChild(container);
|
||||||
|
|
||||||
|
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100)
|
||||||
|
camera.position.z = 10
|
||||||
|
|
||||||
|
scene = new THREE.Scene()
|
||||||
|
scene.background = new THREE.Color(0x00f0ff)
|
||||||
|
|
||||||
|
// var ambientLight = new THREE.AmbientLight(0x404040, 10);
|
||||||
|
// scene.add(ambientLight);
|
||||||
|
// camera.position.set( 0, 250, 1000 );
|
||||||
|
scene.add(camera)
|
||||||
|
|
||||||
|
scene.add(new THREE.AmbientLight(0xf0f0f0))
|
||||||
|
var light = new THREE.SpotLight(0xffffff, 1.5)
|
||||||
|
light.position.set(0, 10, 0)
|
||||||
|
light.angle = Math.PI * 0.2
|
||||||
|
light.castShadow = true
|
||||||
|
light.shadow.camera.near = 20
|
||||||
|
light.shadow.camera.far = 50
|
||||||
|
light.shadow.bias = -0.222
|
||||||
|
light.shadow.mapSize.width = 10
|
||||||
|
light.shadow.mapSize.height = 10
|
||||||
|
scene.add(light)
|
||||||
|
|
||||||
|
|
||||||
|
var helper = new THREE.GridHelper(2000, 1000)
|
||||||
|
helper.position.y = -20
|
||||||
|
helper.material.opacity = 0.7
|
||||||
|
helper.material.transparent = false
|
||||||
|
// helper.material.color = 0x0f00f0
|
||||||
|
scene.add(helper)
|
||||||
|
|
||||||
|
helper = new THREE.GridHelper(2000, 500)
|
||||||
|
helper.position.y = 20
|
||||||
|
helper.material.opacity = 1
|
||||||
|
helper.material.transparent = true
|
||||||
|
scene.add(helper)
|
||||||
|
|
||||||
|
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||||
|
renderer.setPixelRatio(window.devicePixelRatio)
|
||||||
|
renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.8)
|
||||||
|
renderer.shadowMap.enabled = true
|
||||||
|
|
||||||
|
var controls = new OrbitControls(camera, renderer.domElement)
|
||||||
|
controls.target.set(0, 0, 0)
|
||||||
|
controls.update()
|
||||||
|
|
||||||
|
container.appendChild(renderer.domElement)
|
||||||
|
|
||||||
|
|
||||||
|
var geometry = new THREE.SphereGeometry(0.5, 32, 32)
|
||||||
|
var material = new THREE.MeshPhongMaterial({
|
||||||
|
map : THREE.ImageUtils.loadTexture('./img/map/night.jpg'),
|
||||||
|
bumpMap: new THREE.ImageUtils.loadTexture('./img/map/bump.jpg' ),
|
||||||
|
specularMap: new THREE.ImageUtils.loadTexture( './img/map/spekular.jpg' ),
|
||||||
|
})
|
||||||
|
var mesh = new THREE.Mesh(geometry, material)
|
||||||
|
scene.add(mesh)
|
||||||
|
|
||||||
|
var latlons = [[40.7142700,-74.0059700], [52.5243700,13.4105300]];
|
||||||
|
|
||||||
|
var meshes= this.createRandomPoints()
|
||||||
|
for(var i = 0; i< meshes.length; i++ ){
|
||||||
|
scene.add(meshes[i])
|
||||||
|
|
||||||
|
var latlon=latlons[Math.floor(Math.random()*latlons.length)];
|
||||||
|
|
||||||
|
var latlonpoint = this.calcPosFromLatLonRad(latlon[0],latlon[1], 0.5);
|
||||||
|
meshes[i].position.set(latlonpoint[0],latlonpoint[1],latlonpoint[2]);
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
initSensor () {
|
||||||
|
const options = { frequency: 60, coordinateSystem }
|
||||||
|
console.log(JSON.stringify(options))
|
||||||
|
sensor = new AbsoluteOrientationSensor(options)
|
||||||
|
sensor.onreading = () => cube.quaternion.fromArray(sensor.quaternion).inverse()
|
||||||
|
sensor.onerror = (event) => {
|
||||||
|
if (event.error.name === 'NotReadableError') {
|
||||||
|
console.log('Sensor is not available.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
sensor.start()
|
||||||
|
console.log(sensor)
|
||||||
|
},
|
||||||
|
// renderScene() {
|
||||||
|
// requestAnimationFrame(this.renderScene);
|
||||||
|
// camera.lookAt(scene.position);
|
||||||
|
// renderer.render(scene, camera);
|
||||||
|
// }
|
||||||
|
animate () {
|
||||||
|
requestAnimationFrame(this.animate)
|
||||||
|
|
||||||
|
// Rotate cube (Change values to change speed)
|
||||||
|
// cube.rotation.x += 0.01
|
||||||
|
// cube.position.z -= 0.001
|
||||||
|
|
||||||
|
renderer.render(scene, camera)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style type="text/css">
|
||||||
|
/* .garden {
|
||||||
|
position: relative;
|
||||||
|
width : 200px;
|
||||||
|
height: 200px;
|
||||||
|
border: 5px solid #CCC;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ball {
|
||||||
|
position: absolute;
|
||||||
|
top : 90px;
|
||||||
|
left : 90px;
|
||||||
|
width : 20px;
|
||||||
|
height: 20px;
|
||||||
|
background: green;
|
||||||
|
border-radius: 100%;
|
||||||
|
} */
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,14 +1,14 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import './registerServiceWorker'
|
import './registerServiceWorker'
|
||||||
|
import router from './router'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
import vuetify from './plugins/vuetify';
|
import vuetify from './plugins/vuetify';
|
||||||
import 'roboto-fontface/css/roboto/roboto-fontface.css'
|
|
||||||
import '@mdi/font/css/materialdesignicons.css'
|
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
|
router,
|
||||||
store,
|
store,
|
||||||
vuetify,
|
vuetify,
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
|
|||||||
@ -4,20 +4,4 @@ import Vuetify from 'vuetify/lib';
|
|||||||
Vue.use(Vuetify);
|
Vue.use(Vuetify);
|
||||||
|
|
||||||
export default new Vuetify({
|
export default new Vuetify({
|
||||||
theme: {
|
|
||||||
options: {
|
|
||||||
customProperties: true,
|
|
||||||
},
|
|
||||||
themes: {
|
|
||||||
light: {
|
|
||||||
primary: '#ee44aa',
|
|
||||||
secondary: '#424242',
|
|
||||||
accent: '#82B1FF',
|
|
||||||
error: '#FF5252',
|
|
||||||
info: '#2196F3',
|
|
||||||
success: '#4CAF50',
|
|
||||||
warning: '#FFC107'
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
34
src/router/index.js
Normal file
34
src/router/index.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import Home from '../views/Home.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Home',
|
||||||
|
component: Home
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'About',
|
||||||
|
// route level code-splitting
|
||||||
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
|
// which is lazy-loaded when the route is visited.
|
||||||
|
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/three',
|
||||||
|
name: 'ThreeAnime',
|
||||||
|
component: () => import(/* webpackChunkName: "about" */ '../components/ThreeAnime.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
5
src/views/About.vue
Normal file
5
src/views/About.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div class="about">
|
||||||
|
<h1>This is an about page</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
17
src/views/Home.vue
Normal file
17
src/views/Home.vue
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<img alt="Vue logo" src="../assets/logo.png">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
// import HelloWorld from '@/components/HelloWorld.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Home',
|
||||||
|
components: {
|
||||||
|
// HelloWorld
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user