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"
|
||||
}
|
||||
},
|
||||
"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": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
|
||||
@ -10314,6 +10319,11 @@
|
||||
"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": {
|
||||
"version": "2.3.8",
|
||||
"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": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
|
||||
|
||||
@ -10,9 +10,12 @@
|
||||
"dependencies": {
|
||||
"@mdi/font": "^3.6.95",
|
||||
"core-js": "^3.6.4",
|
||||
"motion-sensors-polyfill": "^0.3.1",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"roboto-fontface": "*",
|
||||
"three": "^0.116.1",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.1.6",
|
||||
"vuetify": "^2.2.11",
|
||||
"vuex": "^3.1.3"
|
||||
},
|
||||
@ -20,6 +23,7 @@
|
||||
"@vue/cli-plugin-babel": "~4.3.0",
|
||||
"@vue/cli-plugin-eslint": "~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-service": "~4.3.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
@ -30,5 +34,7 @@
|
||||
"vue-cli-plugin-vuetify": "~2.0.5",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"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">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<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>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
237
src/App.vue
237
src/App.vue
@ -1,60 +1,203 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-app-bar
|
||||
<v-app id="inspire">
|
||||
<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
|
||||
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
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-img
|
||||
alt="Vuetify Logo"
|
||||
class="shrink mr-2"
|
||||
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
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<!-- <v-toolbar-title
|
||||
style="width: 300px"
|
||||
class="ml-0 pl-4"
|
||||
>
|
||||
<span class="mr-2">Latest Release</span>
|
||||
<v-icon>mdi-open-in-new</v-icon>
|
||||
<span class="hidden-sm-and-down">Google Contacts</span>
|
||||
</v-toolbar-title> -->
|
||||
|
||||
<!-- <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>
|
||||
<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-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
//
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
// import HelloWorld from './components/HelloWorld.vue'
|
||||
export default {
|
||||
components: {
|
||||
// HelloWorld
|
||||
},
|
||||
props: {
|
||||
source: String,
|
||||
},
|
||||
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>
|
||||
@ -1,249 +1,151 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
:clipped="$vuetify.breakpoint.lgAndUp"
|
||||
app
|
||||
>
|
||||
<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>
|
||||
<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-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<v-img
|
||||
:src="require('../assets/logo.svg')"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app color="red" dark>
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer" />
|
||||
<v-btn to="/about" text color="blue">
|
||||
<span class="mr-2">Panda</span>
|
||||
<!-- <v-icon>mdi-open-in-new</v-icon> -->
|
||||
</v-btn>
|
||||
<v-btn to="/home" text color="blue">
|
||||
<span class="mr-2">Home</span>
|
||||
<!-- <v-icon>mdi-open-in-new</v-icon> -->
|
||||
</v-btn>
|
||||
<v-btn to="/HelloWorld" text color="blue">
|
||||
<span class="mr-2">HelloWorld</span>
|
||||
<!-- <v-icon>mdi-open-in-new</v-icon> -->
|
||||
</v-btn>
|
||||
<v-btn to="/apply" text color="blue">
|
||||
<span class="mr-2">Apply</span>
|
||||
<!-- <v-icon>mdi-open-in-new</v-icon> -->
|
||||
</v-btn>
|
||||
<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-col class="mb-4">
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to Vuetify
|
||||
</h1>
|
||||
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a
|
||||
href="https://community.vuetifyjs.com"
|
||||
target="_blank"
|
||||
>Discord Community</a>
|
||||
</p>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<v-row
|
||||
align="center"
|
||||
justify="center"
|
||||
>
|
||||
<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>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
What's next?
|
||||
</h2>
|
||||
|
||||
<!-- // --------------------------------------------------------------------------------------- // -->
|
||||
<v-dialog v-model="dialog" width="800px">
|
||||
<v-card>
|
||||
<v-card-title class="grey darken-2">
|
||||
Create contact
|
||||
</v-card-title>
|
||||
<v-container>
|
||||
<v-row class="mx-2">
|
||||
<v-col class="align-center justify-space-between" cols="12">
|
||||
<v-row align="center" class="mr-0">
|
||||
<v-avatar size="40px" class="mx-3">
|
||||
<img
|
||||
src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png"
|
||||
alt=""
|
||||
/>
|
||||
</v-avatar>
|
||||
<v-text-field placeholder="Name" />
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-text-field
|
||||
prepend-icon="mdi-account-card-details-outline"
|
||||
placeholder="Company"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-text-field placeholder="Job title" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field prepend-icon="mdi-mail" placeholder="Email" />
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
type="tel"
|
||||
prepend-icon="mdi-phone"
|
||||
placeholder="(000) 000 - 0000"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-text-field prepend-icon="mdi-text" placeholder="Notes" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-card-actions>
|
||||
<v-btn text color="primary">More</v-btn>
|
||||
<v-spacer />
|
||||
<v-btn text color="primary" @click="dialog = false">Cancel</v-btn>
|
||||
<v-btn text @click="dialog = false">Save</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-app>
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Important Links
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Ecosystem
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import About from "@/views/About";
|
||||
export default {
|
||||
name: "Apply",
|
||||
components: {
|
||||
About
|
||||
},
|
||||
props: {
|
||||
source: String
|
||||
},
|
||||
data: () => ({
|
||||
dialog: false,
|
||||
drawer: null,
|
||||
items: [
|
||||
{ icon: "mdi-contacts", text: "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" }
|
||||
]
|
||||
})
|
||||
};
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: 'vuetify-loader',
|
||||
href: 'https://github.com/vuetifyjs/vuetify-loader',
|
||||
},
|
||||
{
|
||||
text: 'github',
|
||||
href: 'https://github.com/vuetifyjs/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'awesome-vuetify',
|
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
||||
},
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: 'Documentation',
|
||||
href: 'https://vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Chat',
|
||||
href: 'https://community.vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Made with Vuetify',
|
||||
href: 'https://madewithvuejs.com/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'Twitter',
|
||||
href: 'https://twitter.com/vuetifyjs',
|
||||
},
|
||||
{
|
||||
text: 'Articles',
|
||||
href: 'https://medium.com/vuetify',
|
||||
},
|
||||
],
|
||||
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>
|
||||
|
||||
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 App from './App.vue'
|
||||
import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import vuetify from './plugins/vuetify';
|
||||
import 'roboto-fontface/css/roboto/roboto-fontface.css'
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
vuetify,
|
||||
render: h => h(App)
|
||||
|
||||
@ -4,20 +4,4 @@ import Vuetify from 'vuetify/lib';
|
||||
Vue.use(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