gsd
2 years ago
41 changed files with 626 additions and 76 deletions
@ -1,28 +1,137 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<img alt="Vue logo" src="./assets/logo.png"> |
|||
<HelloWorld msg="Welcome to Your Vue.js App"/> |
|||
<div> |
|||
<TabsMenu></TabsMenu> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import HelloWorld from './components/HelloWorld.vue' |
|||
import Vue from "vue"; |
|||
//import 'vue-material/dist/theme/default.css' |
|||
import 'vue-material/dist/vue-material.min.css' |
|||
|
|||
import MdTabs from "vue-material/dist/components/MdTabs"; |
|||
import MdIcon from "vue-material/dist/components/MdIcon"; |
|||
|
|||
Vue.use(MdTabs); |
|||
Vue.use(MdIcon); |
|||
|
|||
import TabsMenu from "@/components/TabsMenu.vue"; |
|||
export default { |
|||
name: 'App', |
|||
components: { |
|||
HelloWorld |
|||
TabsMenu |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
#app { |
|||
@font-face { |
|||
font-family: tf2build; |
|||
src: url('@/assets/fonts/tf2build.ttf'); |
|||
} |
|||
|
|||
@font-face { |
|||
font-family: tf2secondary; |
|||
src: url('@/assets/fonts/tf2secondary.ttf'); |
|||
} |
|||
|
|||
/*#app { |
|||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
text-align: center; |
|||
color: #2c3e50; |
|||
margin-top: 60px; |
|||
}*/ |
|||
|
|||
h1,h2,h3,h4,h5,h6 { |
|||
font-family: tf2build; |
|||
color: #131213; |
|||
} |
|||
h1 { |
|||
font-family: tf2build; |
|||
line-height: 1em; |
|||
font-size: 5em; |
|||
} |
|||
|
|||
h2 { |
|||
font-family: tf2build; |
|||
font-size: 4em; |
|||
} |
|||
|
|||
h3 { |
|||
font-family: tf2build; |
|||
font-size: 3em; |
|||
} |
|||
|
|||
h4 { |
|||
line-height: 1em; |
|||
font-size: 2em; |
|||
} |
|||
|
|||
h5 { |
|||
font-size: 1.3em; |
|||
} |
|||
|
|||
h6 { |
|||
font-size: 0.5em; |
|||
} |
|||
|
|||
p { |
|||
color: #fdecc1; |
|||
} |
|||
|
|||
a { |
|||
font-family: tf2build; |
|||
} |
|||
|
|||
.md-tab { |
|||
background-size: cover |
|||
} |
|||
|
|||
.rounded-and-colored { |
|||
border-radius: 20px; |
|||
border: 2px solid black; |
|||
background: #fd8846; |
|||
} |
|||
|
|||
.rounded-and-colored-without-bottom { |
|||
border-radius: 20px; |
|||
border-top: 2px solid black; |
|||
border-left: 2px solid black; |
|||
border-right: 2px solid black; |
|||
border-bottom: 0px solid transparent; |
|||
background: #fd8846; |
|||
} |
|||
|
|||
.rounded-only { |
|||
border-radius: 20px; |
|||
border: 1px solid black; |
|||
background: #e0eddd; |
|||
} |
|||
|
|||
.pt-5 { |
|||
padding-top: 10px; |
|||
} |
|||
|
|||
.md-tabs { |
|||
background-color: #131213; |
|||
} |
|||
|
|||
.md-button.md-active { |
|||
font-size: 1.7em; |
|||
color: #fdecc1; |
|||
font-family: tf2build; |
|||
border-bottom: 2px solid #fdecc1; |
|||
} |
|||
|
|||
.md-tabs-navigation { |
|||
font-size: 1.5em; |
|||
} |
|||
|
|||
.md-button { |
|||
color: #efdfb7; |
|||
font-family: tf2secondary; |
|||
text-transform: none; |
|||
} |
|||
</style> |
|||
|
|||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 3.0 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 908 KiB |
|
After Width: | Height: | Size: 982 B |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@ -1,58 +0,0 @@ |
|||
<template> |
|||
<div class="hello"> |
|||
<h1>{{ msg }}</h1> |
|||
<p> |
|||
For a guide and recipes on how to configure / customize this project,<br> |
|||
check out the |
|||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|||
</p> |
|||
<h3>Installed CLI Plugins</h3> |
|||
<ul> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|||
</ul> |
|||
<h3>Essential Links</h3> |
|||
<ul> |
|||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|||
</ul> |
|||
<h3>Ecosystem</h3> |
|||
<ul> |
|||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HelloWorld', |
|||
props: { |
|||
msg: String |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
list-style-type: none; |
|||
padding: 0; |
|||
} |
|||
li { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,31 @@ |
|||
<template> |
|||
<div :style="getStyle()"/> |
|||
</template> |
|||
|
|||
<script> |
|||
import PublicMethods from "@/components/PublicMethods"; |
|||
export default { |
|||
name: 'BackgroundImage', |
|||
data: () => ({ |
|||
blur_px: 5 |
|||
}), |
|||
methods: { |
|||
getStyle(){ |
|||
return { |
|||
"position": "fixed", |
|||
"left": 0, |
|||
"right": 0, |
|||
"z-index": -1, |
|||
"width":"100%", |
|||
"height":"800px", |
|||
"background-image": `url('${PublicMethods.getBackground()}')`, |
|||
"-webkit-filter": `blur(${this.blur_px}px)`, |
|||
"-moz-filter": `blur(${this.blur_px}px)`, |
|||
"-o-filter": `blur(${this.blur_px}px)`, |
|||
"-ms-filter": `blur(${this.blur_px}px)`, |
|||
"filter": `blur(${this.blur_px}px)` |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,28 @@ |
|||
<template> |
|||
<div class="md-layout-item" :class="`md-size-${size}`"> |
|||
<img :src="img_src" @click="audio_puk"> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'CharacterImage', |
|||
props: { |
|||
size: { |
|||
type: Number, |
|||
default: 15 |
|||
}, |
|||
img_src: { |
|||
type: String |
|||
}, |
|||
audio_src: { |
|||
type: String |
|||
} |
|||
}, |
|||
methods: { |
|||
audio_puk() { |
|||
new Audio(this.audio_src).play(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,50 @@ |
|||
import axios from "axios"; |
|||
|
|||
export default { |
|||
name: "PublicMethods", |
|||
methods: {}, |
|||
getBackground(){ |
|||
const backgrounds = [ |
|||
require('../assets/images/backgrounds/1.png'), |
|||
require('../assets/images/backgrounds/2.png'), |
|||
require('../assets/images/backgrounds/3.png'), |
|||
require('../assets/images/backgrounds/4.png') |
|||
]; |
|||
return backgrounds[Math.floor(Math.random()*backgrounds.length)]; |
|||
}, |
|||
getApi(){ |
|||
console.log("[PublicMethods] request api/stats"); |
|||
return axios.get("/api/stats") |
|||
.then(response => response.data) |
|||
.then(response => { |
|||
console.log("[PublicMethods] success get api/stats"); |
|||
console.log(response); |
|||
return response; |
|||
}) |
|||
.catch(err => { |
|||
console.log(`[PublicMethods] cannot request api/stats, err: ${err}`); |
|||
}) |
|||
}, |
|||
getStatistics(){ |
|||
console.log("[PublicMethods] request api/stats/statistics"); |
|||
return axios.get("/api/stats?filter=statistic") |
|||
.then(response => response.data) |
|||
.then(response => { |
|||
return response; |
|||
}) |
|||
.catch(err => { |
|||
console.log(`[PublicMethods] cannot request api/stats/statistic, err: ${err}`); |
|||
}) |
|||
}, |
|||
getUniq(){ |
|||
console.log("[PublicMethods] request api/stats/uniq"); |
|||
return axios.get("/api/stats?filter=uniq") |
|||
.then(response => response.data) |
|||
.then(response => { |
|||
return response; |
|||
}) |
|||
.catch(err => { |
|||
console.log(`[PublicMethods] cannot request api/stats/statistic, err: ${err}`); |
|||
}) |
|||
} |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
<template> |
|||
<div> |
|||
<md-tabs md-alignment="centered" :md-active-tab="current_tab"> |
|||
<MainView/> |
|||
<RulesView/> |
|||
<ServersView/> |
|||
<VipView/> |
|||
<AboutView/> |
|||
<EmptyTab lb=""/> |
|||
<EmptyTab lb=""/> |
|||
<ProfileView/> |
|||
</md-tabs> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import RulesView from "@/components/TabsMenuElements/RulesView.vue"; |
|||
import ServersView from "@/components/TabsMenuElements/ServersView.vue"; |
|||
import ProfileView from "@/components/TabsMenuElements/ProfileView.vue"; |
|||
import VipView from "@/components/TabsMenuElements/VipView.vue"; |
|||
import AboutView from "@/components/TabsMenuElements/AboutView.vue"; |
|||
import EmptyTab from "@/components/TabsMenuElements/EmptyTab.vue"; |
|||
import MainView from "@/components/TabsMenuElements/MainView/MainView.vue"; |
|||
|
|||
export default { |
|||
name: 'TabsMenu', |
|||
components: {MainView, EmptyTab, RulesView, ServersView, ProfileView, VipView, AboutView}, |
|||
data: () => ({ |
|||
current_tab: 0 |
|||
}) |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<md-tab id="aboutView" md-label="О нас"> |
|||
<p>about</p> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'AboutView' |
|||
} |
|||
</script> |
|||
@ -0,0 +1,14 @@ |
|||
<template> |
|||
<md-tab :md-label="this.lb" md-disabled/> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'EmptyTab', |
|||
props: { |
|||
lb: String |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,37 @@ |
|||
<template> |
|||
<div> |
|||
<div class="md-layout md-alignment-bottom-center"> |
|||
<div class="md-layout-item md-size-20"/> |
|||
<CharacterImage :size="20" :img_src="require(`@/assets/images/characters/pootisd.png`)" :audio_src="require(`@/assets/sounds/pootis.mp3`)"/> |
|||
<div class="md-layout-item md-size-20"> |
|||
<div class="md-layout md-alignment-bottom-center"> |
|||
<CharacterImage :size="25" :img_src="require(`@/assets/images/characters/pyro.png`)" :audio_src="require(`@/assets/sounds/alertmgs.mp3`)"/> |
|||
<CharacterImage :size="50" :img_src="require(`@/assets/images/characters/toilet.png`)" :audio_src="require(`@/assets/sounds/puk.mp3`)"/> |
|||
<CharacterImage :size="25" :img_src="require(`@/assets/images/characters/engi_n.png`)" :audio_src="require(`@/assets/sounds/nigger.mp3`)"/> |
|||
</div> |
|||
<div class="md-layout md-size-40"> |
|||
<div class="md-layout-item md-alignment-bottom-center rounded-and-colored-without-bottom"> |
|||
<h1 style="text-align: center; text-shadow: rgba(80,80,80,0.59) 2px 5px; margin: 2%">Факты 13</h1> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<CharacterImage :size="20" :img_src="require(`@/assets/images/characters/mgesold.png`)" :audio_src="require(`@/assets/sounds/soldier_laughevil03.mp3`)"/> |
|||
<div class="md-layout-item md-size-20"/> |
|||
</div> |
|||
<div class="md-layout"> |
|||
<div class="md-layout-item md-size"/> |
|||
<div class="md-layout-item md-size-55 rounded-and-colored-without-bottom"> |
|||
<h4 style="text-align: center; text-transform: uppercase; font-size: 2.5em; margin: 1%">Добро пожаловать на "лучший" ру-сервер тф2</h4> |
|||
</div> |
|||
<div class="md-layout-item md-size"/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CharacterImage from "@/components/Others/CharacterImage.vue"; |
|||
export default { |
|||
name: 'LogoWithCharacters', |
|||
components: {CharacterImage} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,64 @@ |
|||
<template> |
|||
<div class="md-layout"> |
|||
<div class="md-layout-item md-size"/> |
|||
<div class="md-layout-item md-size-60 rounded-and-colored" style="background: #fffefc"> |
|||
<h5 style="text-align: center;margin: 1%;">Давно искал место где можно почилить в данной мертвой игре??? Поздравляю ты его нашел!!!</h5> |
|||
<hr> |
|||
<div class="md-layout md-alignment-center-center"> |
|||
<div class="md-layout-item md-size-10"> |
|||
<h5 style="text-align: center">Сейчас играют</h5> |
|||
</div> |
|||
<div class="md-layout-item md-size-5" style="border-left:1px solid #000;height:3.5em;border-right: 1px solid #000"/> |
|||
<div class="md-layout-item md-size-10"> |
|||
<h5 style="text-align: center;">Пик игроков за день</h5> |
|||
</div> |
|||
<div class="md-layout-item md-size-5" style="border-left:1px solid #000;height:3.5em;border-right: 1px solid #000"/> |
|||
<div class="md-layout-item md-size-10"> |
|||
<h5 style="text-align: center">Серверов работает</h5> |
|||
</div> |
|||
</div> |
|||
<div class="md-layout md-alignment-center-center" style="margin-top: -2%"> |
|||
<div class="md-layout-item md-size-5 rounded-and-colored"> |
|||
<h4 style="text-align: center; margin: 40% 0%;">-1</h4> |
|||
</div> |
|||
<div class="md-layout-item md-size-10"/> |
|||
<div class="md-layout-item md-size-5 rounded-and-colored"> |
|||
<h4 style="text-align: center; margin: 40% 0%;">-1</h4> |
|||
</div> |
|||
<div class="md-layout-item md-size-10"/> |
|||
<div class="md-layout-item md-size-5 rounded-and-colored"> |
|||
<h4 style="text-align: center; margin: 40% 0%;">-1</h4> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<div class="md-layout md-alignment-center-center" style="margin: 2%"> |
|||
<div class="md-layout-item md-size-30 rounded-and-colored"> |
|||
<div class="md-layout md-alignment-center-center" style="margin: -5% 5%"> |
|||
<div class="md-layout-item md-size-5"> |
|||
<h4 style="text-align: left">{{' > '}}</h4> |
|||
</div> |
|||
<div class="md-layout-item"> |
|||
<h4 style="text-align: center;">ПОДКЛЮЧИТЬСЯ К СЕРВЕРУ</h4> |
|||
</div> |
|||
<div class="md-layout-item md-size-5"> |
|||
<h4 style="text-align: right">{{' < '}}</h4> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<div class="md-layout md-alignment-center-center" style="margin: 2%"> |
|||
<div class="md-layout-item md-size-50" style="margin: -5% 0%"> |
|||
<h4 style="text-align: center">Почему стоит начать играть?</h4> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="md-layout-item md-size"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "WhyNot" |
|||
} |
|||
</script> |
|||
@ -0,0 +1,23 @@ |
|||
<template> |
|||
<md-tab id="mainView" md-label="Факты 13" :style="toStyle()"> |
|||
<BackgroundImage/> |
|||
<LogoWithCharacters/> |
|||
<WhyNot/> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
import BackgroundImage from "@/components/Others/BackgroundImage.vue"; |
|||
import LogoWithCharacters from "@/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue"; |
|||
import WhyNot from "@/components/TabsMenuElements/MainView/Components/WhyNot.vue"; |
|||
|
|||
export default { |
|||
name: 'MainViewElement2', |
|||
components: {WhyNot, LogoWithCharacters, BackgroundImage}, |
|||
methods: { |
|||
toStyle() { |
|||
return {}; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,17 @@ |
|||
<template> |
|||
<md-tab id="profileView" :md-icon="this.avatar"> |
|||
<p>profile</p> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ProfileView', |
|||
props: { |
|||
avatar: { |
|||
type: String, |
|||
default: require('@/assets/profile-user.svg') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<md-tab id="rulesView" md-label="Правила"> |
|||
<p>rules</p> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RulesView' |
|||
} |
|||
</script> |
|||
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<md-tab id="serversView" md-label="Серверы"> |
|||
<p>servers</p> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ServersView' |
|||
} |
|||
</script> |
|||
@ -0,0 +1,11 @@ |
|||
<template> |
|||
<md-tab id="vipView" md-label="VIP"> |
|||
<p>vip</p> |
|||
</md-tab> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'VipView' |
|||
} |
|||
</script> |
|||
@ -1,4 +1,14 @@ |
|||
const { defineConfig } = require('@vue/cli-service') |
|||
module.exports = defineConfig({ |
|||
transpileDependencies: true |
|||
transpileDependencies: true, |
|||
devServer: { |
|||
proxy: { |
|||
"/api": { |
|||
target: "http://192.168.3.3:26272/api/", |
|||
secure: false, |
|||
changeOrigin: true, |
|||
pathRewrite: { '^/api': '' }, |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
Loading…
Reference in new issue