|
|
|
|
@ -1,651 +0,0 @@
|
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"> |
|
|
|
|
<head> |
|
|
|
|
<meta charset="utf-8"> |
|
|
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
|
|
|
|
<title>HOME</title> |
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> |
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> |
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> |
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
|
|
|
|
#loader { |
|
|
|
|
display: flex; |
|
|
|
|
height: 100vh; |
|
|
|
|
width: 100%; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller { |
|
|
|
|
display: inline-block; |
|
|
|
|
position: relative; |
|
|
|
|
width: 80px; |
|
|
|
|
height: 80px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div { |
|
|
|
|
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; |
|
|
|
|
transform-origin: 40px 40px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:after { |
|
|
|
|
content: " "; |
|
|
|
|
display: block; |
|
|
|
|
position: absolute; |
|
|
|
|
width: 7px; |
|
|
|
|
height: 7px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
background: grey; |
|
|
|
|
margin: -4px 0 0 -4px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(1) { |
|
|
|
|
animation-delay: -0.036s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(1):after { |
|
|
|
|
top: 63px; |
|
|
|
|
left: 63px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(2) { |
|
|
|
|
animation-delay: -0.072s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(2):after { |
|
|
|
|
top: 68px; |
|
|
|
|
left: 56px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(3) { |
|
|
|
|
animation-delay: -0.108s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(3):after { |
|
|
|
|
top: 71px; |
|
|
|
|
left: 48px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(4) { |
|
|
|
|
animation-delay: -0.144s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(4):after { |
|
|
|
|
top: 72px; |
|
|
|
|
left: 40px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(5) { |
|
|
|
|
animation-delay: -0.18s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(5):after { |
|
|
|
|
top: 71px; |
|
|
|
|
left: 32px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(6) { |
|
|
|
|
animation-delay: -0.216s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(6):after { |
|
|
|
|
top: 68px; |
|
|
|
|
left: 24px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(7) { |
|
|
|
|
animation-delay: -0.252s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(7):after { |
|
|
|
|
top: 63px; |
|
|
|
|
left: 17px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(8) { |
|
|
|
|
animation-delay: -0.288s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lds-roller div:nth-child(8):after { |
|
|
|
|
top: 56px; |
|
|
|
|
left: 12px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes lds-roller { |
|
|
|
|
0% { |
|
|
|
|
transform: rotate(0deg); |
|
|
|
|
} |
|
|
|
|
100% { |
|
|
|
|
transform: rotate(360deg); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#cont { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
body { |
|
|
|
|
margin: 0; |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.my-card-content { |
|
|
|
|
padding: 16px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.toolbar-links a { |
|
|
|
|
text-decoration: none; |
|
|
|
|
margin: 0 10px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</head> |
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
<div id="loader"> |
|
|
|
|
<div class="lds-roller"> |
|
|
|
|
<div></div> |
|
|
|
|
<div></div> |
|
|
|
|
<div></div> |
|
|
|
|
<div></div> |
|
|
|
|
<div></div> |
|
|
|
|
<div></div> |
|
|
|
|
<div></div> |
|
|
|
|
<div></div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div id="cont"> |
|
|
|
|
<div id="app"> |
|
|
|
|
<v-app> |
|
|
|
|
<v-app-bar |
|
|
|
|
app |
|
|
|
|
clipped-left |
|
|
|
|
dense |
|
|
|
|
color="elevation-1" |
|
|
|
|
style="background: #0082ff" |
|
|
|
|
> |
|
|
|
|
<!-- <v-toolbar-side-icon></v-toolbar-side-icon> --> |
|
|
|
|
<v-toolbar-title> |
|
|
|
|
<v-btn to="/" icon class="pa-1"> |
|
|
|
|
<v-icon color="white">mdi-home |
|
|
|
|
</v-icon |
|
|
|
|
> |
|
|
|
|
</v-btn> |
|
|
|
|
</v-toolbar-title> |
|
|
|
|
|
|
|
|
|
<v-spacer></v-spacer> |
|
|
|
|
<v-toolbar-items class="hidden-sm-and-down align-center toolbar-links"> |
|
|
|
|
<a href="/health" target="_blank"> |
|
|
|
|
<v-btn class="white--text" text small style=""> |
|
|
|
|
<v-icon small color="white">mdi-medical-bag</v-icon> |
|
|
|
|
Health |
|
|
|
|
</v-btn> |
|
|
|
|
</a> |
|
|
|
|
<a href="/graphql" target="_blank" v-if="graphql"> |
|
|
|
|
<v-icon size="30" color="white">mdi-graphql</v-icon> |
|
|
|
|
</a> |
|
|
|
|
<a href="xc://app?projectType=graphql"> |
|
|
|
|
<v-img src="icon.png" width="30"></v-img> |
|
|
|
|
</a> |
|
|
|
|
<a href="https://github.com/NocoDB/NocoDB" target="_blank"> |
|
|
|
|
<v-icon size="30" color="white"> |
|
|
|
|
mdi-github-circle |
|
|
|
|
</v-icon> |
|
|
|
|
</a> |
|
|
|
|
<a href="https://discord.gg/5RgZmkW" target="_blank"> |
|
|
|
|
<v-icon size="30" color="white"> |
|
|
|
|
mdi-discord |
|
|
|
|
</v-icon> |
|
|
|
|
</a> |
|
|
|
|
<a href="https://twitter.com/NocoDB" target="_blank"> |
|
|
|
|
<v-icon size="30" color="white"> |
|
|
|
|
mdi-twitter |
|
|
|
|
</v-icon> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</v-toolbar-items> |
|
|
|
|
</v-app-bar> |
|
|
|
|
<v-content class="pb-0 mb-0 grey lighten-4"> |
|
|
|
|
|
|
|
|
|
<v-container fluid class="py-0"> |
|
|
|
|
|
|
|
|
|
<v-row class="white py-10"> |
|
|
|
|
<v-col class="text-center mt-10"> |
|
|
|
|
<div class="logo d-flex align-center justify-center"> |
|
|
|
|
<v-lazy> |
|
|
|
|
<img src="icon.png" class="mr-5" width="50px"> |
|
|
|
|
<h1 class="d-inline-block display-2"> |
|
|
|
|
NocoDB |
|
|
|
|
</h1> |
|
|
|
|
</v-lazy> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2 class="my-5 title grey--text text--darken-2">Instant APIs on any Database</h2> |
|
|
|
|
<div class="d-flex justify-center mt-2 mb-10"> |
|
|
|
|
<ul class="flex-shrink-1 text-left"> |
|
|
|
|
<li><a href="https://docs.nocodb.com/en/v0.5/graphql-apis/graphql-authentication"> |
|
|
|
|
Authentication</a></li> |
|
|
|
|
<li><a href="https://docs.nocodb.com/en/v0.5/graphql-apis/graphql-acl"> Access |
|
|
|
|
Control</a></li> |
|
|
|
|
<li><a href="https://docs.nocodb.com/en/v0.5/desktop-app/database-design"> |
|
|
|
|
Database Design</a></li> |
|
|
|
|
<li><a href="https://docs.nocodb.com/en/v0.5/desktop-app/api-client"> API |
|
|
|
|
Client</a></li> |
|
|
|
|
<li><a href="https://docs.nocodb.com/en/v0.5/desktop-app/sql-editor"> Database |
|
|
|
|
Client</a></li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-btn outlined class="" large href="xc://app?projectType=rest">Open Desktop App</v-btn> |
|
|
|
|
<v-btn href="/swagger" class="white--text" color="rgb(3, 129, 255)" large>View REST APIs |
|
|
|
|
generated |
|
|
|
|
</v-btn> |
|
|
|
|
</v-col> |
|
|
|
|
</v-row> |
|
|
|
|
|
|
|
|
|
<v-row class="justify-center pt-10"> |
|
|
|
|
<v-col class="col-md-4"> |
|
|
|
|
|
|
|
|
|
<v-lazy> |
|
|
|
|
<!-- <v-hover v-slot:default="{ hover }">--> |
|
|
|
|
<v-card |
|
|
|
|
|
|
|
|
|
> |
|
|
|
|
<v-list-item> |
|
|
|
|
<v-list-item-avatar color="grey"> |
|
|
|
|
<img width="32" src="/icon.png" title="NocoDB" |
|
|
|
|
alt="NocoDB"> |
|
|
|
|
</v-list-item-avatar> |
|
|
|
|
<v-list-item-content> |
|
|
|
|
<v-list-item-title><h2 |
|
|
|
|
class="title"> |
|
|
|
|
Please Join Our Community |
|
|
|
|
</h2> |
|
|
|
|
</v-list-item-title> |
|
|
|
|
<!-- <v-list-item-subtitle>by Kurt Wagner</v-list-item-subtitle>--> |
|
|
|
|
</v-list-item-content> |
|
|
|
|
</v-list-item> |
|
|
|
|
<v-divider></v-divider> |
|
|
|
|
|
|
|
|
|
<v-card-actions class="pa-2 justify-center py-10 flex-column " |
|
|
|
|
style="background: linear-gradient(#ffffff99,#ffffff99), url('/community.jpg') ;"> |
|
|
|
|
<v-btn x-large class="my-5 px-6 black" height="80" style="min-width:300px" |
|
|
|
|
href="https://github.com/NocoDB/NocoDB" target="_blank"> |
|
|
|
|
<v-icon x-large class="mr-5" color="white">mdi-github-circle</v-icon> |
|
|
|
|
<span class="d-flex flex-column"> |
|
|
|
|
<span class="white--text">Github</span> |
|
|
|
|
<span class="d-block caption grey--text text--lighten-2" |
|
|
|
|
style="clear: both;text-transform: none"> Watch / Star Us</span> |
|
|
|
|
</span> |
|
|
|
|
</v-btn> |
|
|
|
|
<v-btn color="rgb(80, 108, 255)" x-large class="my-5 px-6 " height="80" |
|
|
|
|
style="min-width:300px" href="https://discord.gg/5RgZmkW" |
|
|
|
|
target="_blank"> |
|
|
|
|
<v-icon color="white" x-large class="mr-5">mdi-discord</v-icon> |
|
|
|
|
<span class="d-flex flex-column"> |
|
|
|
|
<span class="white--text">Discord</span> |
|
|
|
|
<span class="d-block caption grey--text text--lighten-2" style="clear: both;text-transform: none">Live Chat</span> |
|
|
|
|
</span> |
|
|
|
|
</v-btn> |
|
|
|
|
<v-btn color="rgb(3, 129, 255)" href="https://twitter.com/NocoDB" |
|
|
|
|
target="_blank" |
|
|
|
|
x-large class="my-5 px-6" height="80" style="min-width:300px"> |
|
|
|
|
<v-icon x-large color="white" class="mr-5">mdi-twitter</v-icon> |
|
|
|
|
<span class="d-flex flex-column"> |
|
|
|
|
<span class="white--text">Twitter</span> |
|
|
|
|
<span class="d-block caption grey--text text--lighten-2" style="clear: both;text-transform: none"> Stay Tuned</span> |
|
|
|
|
</span> |
|
|
|
|
</v-btn> |
|
|
|
|
|
|
|
|
|
</v-card-actions> |
|
|
|
|
|
|
|
|
|
<!-- <v-card-text>--> |
|
|
|
|
<!-- {{name}}--> |
|
|
|
|
<!-- </v-card-text>--> |
|
|
|
|
|
|
|
|
|
</v-card> |
|
|
|
|
<!-- </v-hover>--> |
|
|
|
|
</v-lazy> |
|
|
|
|
</v-col> |
|
|
|
|
</v-row> |
|
|
|
|
|
|
|
|
|
<v-row class="justify-center"> |
|
|
|
|
<v-col class="col-md-4"> |
|
|
|
|
|
|
|
|
|
<v-lazy> |
|
|
|
|
<!-- <v-hover v-slot:default="{ hover }">--> |
|
|
|
|
<v-card |
|
|
|
|
> |
|
|
|
|
<v-list-item> |
|
|
|
|
<v-list-item-avatar color="grey"> |
|
|
|
|
<img width="32" src="/icon.png" title="NocoDB" |
|
|
|
|
alt="NocoDB"> |
|
|
|
|
</v-list-item-avatar> |
|
|
|
|
<v-list-item-content> |
|
|
|
|
<v-list-item-title><h2 |
|
|
|
|
class="title"> |
|
|
|
|
Subscribe To Our Newsletter |
|
|
|
|
</h2> |
|
|
|
|
</v-list-item-title> |
|
|
|
|
<!-- <v-list-item-subtitle>by Kurt Wagner</v-list-item-subtitle>--> |
|
|
|
|
</v-list-item-content> |
|
|
|
|
</v-list-item> |
|
|
|
|
<v-divider></v-divider> |
|
|
|
|
|
|
|
|
|
<v-card-actions class="pa-2 justify-center py-10 " |
|
|
|
|
style="background: linear-gradient(#000000bb,#000000bb), url('/newsletter.jpg') ;background-position: 0 -60px"> |
|
|
|
|
<form action="https://cloud.us4.list-manage.com/subscribe/post?u=34a5d2680bab8825d485af859&id=f04c6c8b8d" |
|
|
|
|
method="post" id="mc-embedded-subscribe-form" |
|
|
|
|
name="mc-embedded-subscribe-form" |
|
|
|
|
class="validate" |
|
|
|
|
target="_blank" novalidate style="width: 100%"> |
|
|
|
|
<div id="mc_embed_signup_scroll" class=" pt-10 mt-10"> |
|
|
|
|
<div class=" mx-auto justify-center text-center pt-10" |
|
|
|
|
style="max-width:300px"> |
|
|
|
|
<v-text-field |
|
|
|
|
hide-details |
|
|
|
|
class="mx-2 mb-2" |
|
|
|
|
solo |
|
|
|
|
outlined |
|
|
|
|
name="EMAIL" |
|
|
|
|
type="email" |
|
|
|
|
placeholder="Please enter your email" |
|
|
|
|
></v-text-field> |
|
|
|
|
|
|
|
|
|
<v-btn class="white--text mt-5" color="rgb(3, 129, 255)" |
|
|
|
|
type="submit" |
|
|
|
|
x-large> |
|
|
|
|
Subscribe |
|
|
|
|
</v-btn> |
|
|
|
|
</div> |
|
|
|
|
<!-- <label for="mce-EMAIL">Subscribe To Newsletter</label>--> |
|
|
|
|
<!-- <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>--> |
|
|
|
|
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> |
|
|
|
|
<div style="position: absolute; left: -5000px;" aria-hidden="true"> |
|
|
|
|
<input |
|
|
|
|
type="email" |
|
|
|
|
name="b_34a5d2680bab8825d485af859_f04c6c8b8d" |
|
|
|
|
tabindex="-1" value=""></div> |
|
|
|
|
|
|
|
|
|
<!-- <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button v-btn home-cta v-size--large"></div>--> |
|
|
|
|
</div> |
|
|
|
|
</form> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</v-card-actions> |
|
|
|
|
|
|
|
|
|
</v-card> |
|
|
|
|
</v-lazy> |
|
|
|
|
</v-col> |
|
|
|
|
</v-row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-row class="justify-center"> |
|
|
|
|
<v-col class="col-md-4"> |
|
|
|
|
|
|
|
|
|
</v-lazy> |
|
|
|
|
<!-- <v-hover v-slot:default="{ hover }">--> |
|
|
|
|
<v-card |
|
|
|
|
> |
|
|
|
|
<v-list-item> |
|
|
|
|
<v-list-item-avatar color="grey"> |
|
|
|
|
<img width="32" src="/icon.png" title="NocoDB" |
|
|
|
|
alt="NocoDB"> |
|
|
|
|
</v-list-item-avatar> |
|
|
|
|
<v-list-item-content> |
|
|
|
|
<v-list-item-title><h2 |
|
|
|
|
class="title"> |
|
|
|
|
Show Us Your Support ❤️ |
|
|
|
|
</h2> |
|
|
|
|
</v-list-item-title> |
|
|
|
|
<!-- <v-list-item-subtitle>by Kurt Wagner</v-list-item-subtitle>--> |
|
|
|
|
</v-list-item-content> |
|
|
|
|
</v-list-item> |
|
|
|
|
<v-divider></v-divider> |
|
|
|
|
|
|
|
|
|
<!-- <div style="height: 400px;background: linear-gradient(#000000bb,#000000bb), url('/giphy.gif');background-size: cover" class="d-flex align-center justify-center">--> |
|
|
|
|
|
|
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-img src="giphy.gif"></v-img> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<v-card-actions class="justify-center flex-wrap"> |
|
|
|
|
<!-- :style="{ opacity : hover || isThisMobile? 1 : 0 }"--> |
|
|
|
|
<!-- style="transition: opacity 500ms">--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`https://twitter.com/intent/tweet?url=${getshareUrl(`demo-${i}-${id}`,i)}&text=${name}&hashtags=NocoDB`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/twitter.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`https://www.linkedin.com/shareArticle?mini=true&url=${getshareUrl(`demo-${i}-${id}`,i)}&title=${name}&summary=${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/linkedin.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`https://www.facebook.com/sharer/sharer.php?u=${getshareUrl(`demo-${i}-${id}`,i)}&title=${name}&summary=${name}"e=${name}&hashtag=%23NocoDB`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/facebook.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`https://www.reddit.com/submit?url=${getshareUrl(`demo-${i}-${id}`,i)}&title=${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/reddit.png" class="img-responsive" alt="linkedin" width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`https://pinterest.com/pin/create/button/?url=${getshareUrl(`demo-${i}-${id}`,i)}&description==${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/pinterest.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <a href="#"--> |
|
|
|
|
<!-- @click.prevent="openUrl(`https://web.skype.com/share?url=${name}%0D%0A${getshareUrl(`demo-${i}-${id}`,i)}`)"--> |
|
|
|
|
<!-- class="px-2">--> |
|
|
|
|
<!-- <img src="/social/png/skype.png" class="img-responsive" alt="linkedin" width="25px" title=Social Media Share>--> |
|
|
|
|
<!-- </a>--> |
|
|
|
|
|
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`https://api.whatsapp.com/send?text=${name}%0D%0A${getshareUrl(`demo-${i}-${id}`,i)}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/whatsapp.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`https://telegram.me/share/url?url=${getshareUrl(`demo-${i}-${id}`,i)}&text=${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/png/telegram.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<social-sharing :url="getshareUrl(`demo-${i}-${id}`,i)" |
|
|
|
|
:title="name" |
|
|
|
|
:quote="name" |
|
|
|
|
inline-template> |
|
|
|
|
<div class="text-center"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a href="#" onclick="return false;" class="px-2"> |
|
|
|
|
<network network="email"> |
|
|
|
|
<img src="/social/email.png" class="img-responsive" alt="email" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</network> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</social-sharing> |
|
|
|
|
|
|
|
|
|
<a |
|
|
|
|
@click.prevent="openUrl(`https://www.addtoany.com/add_to/wechat?linkurl=${getshareUrl(`demo-${i}-${id}`,i)}&linkname=${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/png/wechat.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<a href="#" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img |
|
|
|
|
@click.prevent="openUrl(`http://line.me/R/msg/text/?${name}%0D%0A${getshareUrl(`demo-${i}-${id}`,i)}`)" |
|
|
|
|
src="/social/png/line.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<a href="#" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img |
|
|
|
|
@click.prevent="openUrl(`https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=${getshareUrl(`demo-${i}-${id}`,i)}&st.comments=${name}`)" |
|
|
|
|
src="/social/png/odnoklassniki.png" class="img-responsive" |
|
|
|
|
alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`http://service.weibo.com/share/share.php?url=${getshareUrl(`demo-${i}-${id}`,i)})&title=${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/png/weibo.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<a |
|
|
|
|
@click.prevent="openUrl(`http://widget.renren.com/dialog/share?resourceUrl=${getshareUrl(`demo-${i}-${id}`,i)}&srcUrl=${getshareUrl(`demo-${i}-${id}`,i)}&title=${name}&description=${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/png/renren.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<a |
|
|
|
|
@click.prevent="openUrl(`http://www.douban.com/recommend/?url=${getshareUrl(`demo-${i}-${id}`,i)}&title=${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/png/douban.png" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<a href="#" |
|
|
|
|
@click.prevent="openUrl(`https://vk.com/share.php?url=${getshareUrl(`demo-${i}-${id}`,i)})&title=${name}&description=${name}&noparse=true`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/png/vk.png" class="img-responsive" alt="linkedin" width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
<!-- <a href="#"--> |
|
|
|
|
<!-- @click.prevent="openUrl(`viber://forward?text=${getshareUrl(`demo-${i}-${id}`,i)} ${name}`)"--> |
|
|
|
|
<!-- class="px-2">--> |
|
|
|
|
<!-- <img src="/social/png/viber.png" class="img-responsive" alt="linkedin" width="25px" title=Social Media Share>--> |
|
|
|
|
<!-- </a>--> |
|
|
|
|
<a |
|
|
|
|
@click.prevent="openUrl(`https://www.addtoany.com/add_to/wykop?linkurl=${getshareUrl(`demo-${i}-${id}`,i)}&linkname=${name}`)" |
|
|
|
|
class="px-2"> |
|
|
|
|
<img src="/social/png/wykop.jpg" class="img-responsive" alt="linkedin" |
|
|
|
|
width="25px" |
|
|
|
|
title="Social Media Share"> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</v-card-actions> |
|
|
|
|
<!-- <v-card-text>--> |
|
|
|
|
<!-- {{name}}--> |
|
|
|
|
<!-- </v-card-text>--> |
|
|
|
|
|
|
|
|
|
</v-card> |
|
|
|
|
<!-- </v-hover>--> |
|
|
|
|
</v-col> |
|
|
|
|
</v-col> |
|
|
|
|
</v-row> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <v-list dense>--> |
|
|
|
|
<!-- <v-list-item three-line v-for="r in routes" v-if="r.route">--> |
|
|
|
|
<!-- <v-list-item-content>--> |
|
|
|
|
<!-- <v-list-item-title>{{r.route.path}}</v-list-item-title>--> |
|
|
|
|
<!-- <v-list-item-subtitle>--> |
|
|
|
|
<!-- {{Object.keys(r.route.methods).join(', ').toUpperCase()}}--> |
|
|
|
|
<!-- </v-list-item-subtitle>--> |
|
|
|
|
<!-- </v-list-item-content>--> |
|
|
|
|
<!-- </v-list-item>--> |
|
|
|
|
<!-- </v-list>--> |
|
|
|
|
<!-- <ul>--> |
|
|
|
|
<!-- <li class="mdc-list-item" v-for="r in routes" v-if="r.route">--> |
|
|
|
|
<!-- <span class="mdc-list-item__text">{{r.route.path}}</span>--> |
|
|
|
|
<!-- </li>--> |
|
|
|
|
|
|
|
|
|
<!-- </ul>--> |
|
|
|
|
</v-container> |
|
|
|
|
</v-content> |
|
|
|
|
</v-app> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> |
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> |
|
|
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var app = new Vue({ |
|
|
|
|
el: '#app', |
|
|
|
|
data: { |
|
|
|
|
routes: [], |
|
|
|
|
graphql: false |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getshareUrl() { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
vuetify: new Vuetify(), |
|
|
|
|
created() { |
|
|
|
|
console.log('created') |
|
|
|
|
axios.get('/routes') |
|
|
|
|
.then((response) => { |
|
|
|
|
this.routes = response.data; |
|
|
|
|
}) |
|
|
|
|
.catch(function (error) { |
|
|
|
|
// handle error |
|
|
|
|
console.log(error); |
|
|
|
|
}) |
|
|
|
|
.finally(function () { |
|
|
|
|
// always executed |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const cont = document.querySelector('#cont'); |
|
|
|
|
const loader = document.querySelector('#loader'); |
|
|
|
|
|
|
|
|
|
window.onload = function () { |
|
|
|
|
loader.style.display = 'none'; |
|
|
|
|
cont.style.display = 'block'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
|
</html> |
Daniel Spaude
2 years ago
