SamsaraDao/contact.html
2025-05-07 13:42:14 +08:00

420 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="PYXEL || Ultimate Gaming HTML Template">
<title>Samsara DAO</title>
<!-- Favicon -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<!-- All CSS files -->
<link rel="stylesheet" href="static/css/font-awesome.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/app.css">
<link rel="stylesheet" href="static/js/element-ui-min.css">
</head>
<body class="tt-smooth-scroll">
<!-- Preloader-->
<div id="preloader">
<div class="pyramid-loader">
<div class="wrapper">
<span class="side side1"></span>
<span class="side side2"></span>
<span class="side side3"></span>
<span class="side side4"></span>
<span class="shadow"></span>
</div>
</div>
</div>
<!-- Preloader-->
<!-- Main Wrapper Start -->
<div id="app">
<!-- HEADER MENU START -->
<div id="publickHeader"></div>
<!-- HEADER MENU END -->
<!-- BG-CONTACT PAGE # 1 START -->
<div class="contact-page">
<section class="title-banner py-40">
<div class="container-fluid">
<h1 class="fw-500 text-center" data-i18n="header.title6">Contact Us</h1>
</div>
</section>
<!-- CONTACT PAGE START -->
<section class="contact-us-warpper pb-40">
<div class="container-fluid">
<div class="contact-container">
<div class="row align-items-center row-gap-4">
<div class="col-xl-5">
<img src="static/picture/signup-image.png" style="width: 95%;" alt="">
</div>
<div class="col-xl-7">
<div class="contact-input-form">
<div class="row row-gap-4">
<div class="col-md-6">
<div class="input-block mb-24">
<input type="text" v-model="firstName" class="form-control form-control-3" :placeholder="currentLanguage == 'zh' ? '名字' : 'First Name'">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill="none">
<path d="M10 0C7.09223 0 4.72656 2.36566 4.72656 5.27344C4.72656 8.18121 7.09223 10.5469 10 10.5469C12.9078 10.5469 15.2734 8.18121 15.2734 5.27344C15.2734 2.36566 12.9078 0 10 0ZM10 9.375C7.7384 9.375 5.89844 7.53504 5.89844 5.27344C5.89844 3.01184 7.7384 1.17188 10 1.17188C12.2616 1.17188 14.1016 3.01184 14.1016 5.27344C14.1016 7.53504 12.2616 9.375 10 9.375Z" fill="#92949F"></path>
<path d="M16.5612 13.992C15.1174 12.5261 13.2035 11.7188 11.1719 11.7188H8.82812C6.79656 11.7188 4.88258 12.5261 3.43883 13.992C2.00215 15.4507 1.21094 17.3763 1.21094 19.4141C1.21094 19.7377 1.47328 20 1.79688 20H18.2031C18.5267 20 18.7891 19.7377 18.7891 19.4141C18.7891 17.3763 17.9979 15.4507 16.5612 13.992ZM2.40859 18.8281C2.70215 15.5045 5.46918 12.8906 8.82812 12.8906H11.1719C14.5308 12.8906 17.2979 15.5045 17.5914 18.8281H2.40859Z" fill="#92949F"></path>
</svg>
</div>
</div>
<div class="col-md-6">
<div class="input-block mb-24">
<input type="text" v-model="secondName" class="form-control form-control-3" :placeholder="currentLanguage == 'zh' ? '姓氏' : 'Last Name'">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill="none">
<path d="M10 0C7.09223 0 4.72656 2.36566 4.72656 5.27344C4.72656 8.18121 7.09223 10.5469 10 10.5469C12.9078 10.5469 15.2734 8.18121 15.2734 5.27344C15.2734 2.36566 12.9078 0 10 0ZM10 9.375C7.7384 9.375 5.89844 7.53504 5.89844 5.27344C5.89844 3.01184 7.7384 1.17188 10 1.17188C12.2616 1.17188 14.1016 3.01184 14.1016 5.27344C14.1016 7.53504 12.2616 9.375 10 9.375Z" fill="#92949F"></path>
<path d="M16.5612 13.992C15.1174 12.5261 13.2035 11.7188 11.1719 11.7188H8.82812C6.79656 11.7188 4.88258 12.5261 3.43883 13.992C2.00215 15.4507 1.21094 17.3763 1.21094 19.4141C1.21094 19.7377 1.47328 20 1.79688 20H18.2031C18.5267 20 18.7891 19.7377 18.7891 19.4141C18.7891 17.3763 17.9979 15.4507 16.5612 13.992ZM2.40859 18.8281C2.70215 15.5045 5.46918 12.8906 8.82812 12.8906H11.1719C14.5308 12.8906 17.2979 15.5045 17.5914 18.8281H2.40859Z" fill="#92949F"></path>
</svg>
</div>
</div>
<div class="col-md-12">
<div class="input-block mb-24">
<input type="text" v-model="contactObj.email" class="form-control form-control-3" :placeholder="currentLanguage == 'zh' ? '你的郵箱' : 'Your Email' ">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill="none">
<path d="M18.2422 2.96875H1.75781C0.786602 2.96875 0 3.76023 0 4.72656V15.2734C0 16.2455 0.792383 17.0312 1.75781 17.0312H18.2422C19.2053 17.0312 20 16.2488 20 15.2734V4.72656C20 3.76195 19.2165 2.96875 18.2422 2.96875ZM17.996 4.14062C17.6369 4.49785 11.4564 10.6458 11.243 10.8581C10.9109 11.1901 10.4695 11.3729 10 11.3729C9.53047 11.3729 9.08906 11.1901 8.75594 10.857C8.61242 10.7142 2.50012 4.63414 2.00398 4.14062H17.996ZM1.17188 15.0349V4.96582L6.23586 10.0031L1.17188 15.0349ZM2.00473 15.8594L7.06672 10.8296L7.9284 11.6867C8.48176 12.2401 9.21746 12.5448 10 12.5448C10.7825 12.5448 11.5182 12.2401 12.0705 11.6878L12.9333 10.8296L17.9953 15.8594H2.00473ZM18.8281 15.0349L13.7641 10.0031L18.8281 4.96582V15.0349Z" fill="#92949F"></path>
</svg>
</div>
</div>
<div class="col-md-12">
<div class="input-block mb-24">
<textarea v-model="contactObj.contact" cols="30" rows="5" class="form-control form-control-3" :placeholder="currentLanguage == 'zh' ? '留言' : 'Write Your Message' "></textarea>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill="none">
<path d="M19.3774 2.43355L17.5651 0.621049C16.737 -0.207036 15.3897 -0.206997 14.5616 0.621049C13.782 1.40077 1.87359 13.3101 1.07777 14.1059C0.993003 14.1907 0.936206 14.3034 0.915971 14.4136L0.00980134 19.3073C-0.0253158 19.497 0.0351529 19.6919 0.171598 19.8284C0.308199 19.965 0.503121 20.0253 0.692613 19.9902L5.58592 19.0839C5.69901 19.0628 5.81018 19.0055 5.89354 18.9221L19.3774 5.43717C20.2074 4.60717 20.2075 3.26366 19.3774 2.43355ZM1.31722 18.6826L1.86538 15.7223L4.27733 18.1344L1.31722 18.6826ZM5.47924 17.6791L2.3207 14.5203L13.8523 2.9878L17.0109 6.14658L5.47924 17.6791ZM18.5488 4.60854L17.8395 5.31795L14.6809 2.15917L15.3902 1.44976C15.7614 1.07859 16.3652 1.07855 16.7364 1.44976L18.5488 3.26225C18.9209 3.63432 18.9209 4.23643 18.5488 4.60854Z" fill="#92949F"></path>
</svg>
</div>
</div>
<div class="col-md-12">
<button @click="sendContact" class="cus-btn-3">
<span>{{ currentLanguage == "zh" ? "發送信息" : "Send Message" }}</span>
<span>{{ currentLanguage == "zh" ? "發送信息" : "Send Message" }}</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT PAGE END -->
</div>
<!-- BG-CONTACT PAGE # 1 END -->
<!-- FOOTER START -->
<div id="publciFooter"></div>
<!-- FOOTER END -->
<!-- 錢包選擇彈窗 -->
<el-dialog :visible.sync="moneyDialogVisible" width="40%" custom-class="wallet-dialog">
<div class="wallet-container">
<i class="el-icon-close" @click="moneyDialogVisible = false"></i>
<div class="wallet-left">
<h6 style="font-weight: 700;margin-bottom: 4vh;">{{currentLanguage == 'zh' ? '連接錢包' : 'Connect wallet'}}</h6>
<p class="wallet-tip">
{{ currentLanguage == 'zh' ? '首先,連接以下其中一個錢包。 請務必安全地儲存您的私密金鑰或助記詞,永遠不要與任何人分享它們。' : 'Firstly, connect one of the following wallets. Please make sure to securely store your private keys or mnemonics and never share them with anyone.' }}
</p>
<div class="wallet-grid">
<div v-for="(wallet,index) in wallets" :key="index" class="wallet-item"
@click="selectWallet(wallet)">
<img :src="wallet.icon" :alt="wallet.name">
<span>{{ wallet.name }}</span>
</div>
</div>
</div>
<div class="wallet-right" v-if="selectMoney.icon">
<div class="connecting-status">
<img :src="selectMoney.icon" class="tp-logo">
<p class="status-text">{{ currentLanguage == 'zh' ? '正在打開' : 'Opening' }} {{selectMoney.name}}</p>
<p class="confirm-text">
{{ currentLanguage == 'zh' ? '請在' : 'Please in' }}
{{selectMoney.name}}
{{ currentLanguage == 'zh' ? '中確認' : 'Confirm in the middle' }}</p>
</div>
</div>
<div v-else style="display: flex;justify-content: center;align-items: center;width: 50%;">{{ moneyTip(moneyTipMessage) }}</div>
</div>
</el-dialog>
<!-- 錢包地址彈窗 -->
<el-dialog :visible.sync="showMoneyAdress" width="30%" :close-on-click-modal="false">
<div style="color: #000;">
{{ currentLanguage == 'zh' ? '錢包地址:' : 'Wallet address' }}
{{ userMoneyAdressAll }}
<img src="static/image/fuzhi.png" @click="copyText(userMoneyAdressAll)" style="margin-left: 5px;vertical-align: middle;cursor: pointer;">
</div>
</el-dialog>
</div>
<!-- Main Wrapper End -->
<!-- Back To Top Start -->
<button class="scrollToTopBtn"><i class="fa fa-arrow-up"></i></button>
<!-- Mobile Menu Start -->
<div class="mobile-nav__wrapper">
<div class="mobile-nav__overlay mobile-nav__toggler"></div>
<div class="mobile-nav__content">
<span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"></i></span>
<div class="logo-box">
<a href="index.html" aria-label="logo image"><img src="static/picture/logo.png" alt=""></a>
</div>
<div class="mobile-nav__container"></div>
</div>
</div>
<!-- Mobile Menu End -->
<!-- Jquery Js -->
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/jquery-3.6.3.min.js"></script>
<script src="static/js/jquery-validator.js"></script>
<script src="static/js/publickDOM.js"></script>
<!-- 引入翻譯文件 -->
<script src="static/js/translation.js"></script>
<script src="static/js/i18n.js"></script>
<!-- 獲取用戶信息 -->
<script src="static/js/getIsUser.js"></script>
<!-- 引入 Vue.js -->
<script src="static/js/vue.js" ></script>
<!-- 引入 axios -->
<script src="static/js/axios.min.js"></script>
<!-- 引入 Element UI JS -->
<script src="static/js/element-ui.js"></script>
<script>
// 創建一個增強版的 localStorage
const enhancedStorage = {
setItem: function (key, value) {
localStorage.setItem(key, value);
// 觸發自定義事件
window.dispatchEvent(new CustomEvent('localStorageChange', {
detail: { key, value }
}));
},
getItem: function (key) {
return localStorage.getItem(key);
}
};
// 替換原始的 setItem 方法
const originalSetItem = localStorage.setItem;
localStorage.setItem = function (key, value) {
originalSetItem.call(localStorage, key, value);
window.dispatchEvent(new CustomEvent('localStorageChange', {
detail: { key, value }
}));
};
new Vue({
el: "#app",
data(){
return{
userToken:"",
firstName:"",
secondName:"",
contactObj:{
name:"",
email:"",
contact:""
},
// 錢包登錄開始
userMoneyAdressAll:"",
showMoneyAdress:false,
hasAdress:false,
moneyTipMessage:"",
selectMoney:{},
wallets: [
{
name: 'MetaMask',
icon: 'static/metamask.png'
},
{
name: 'TokenPocket',
icon: 'static/tokenpocket.png'
},
{
name: 'OKX Wallet',
icon: 'static/okx-wallet.png'
}
],
moneyDialogVisible: false,
userIsLogin: false,
userMoneyAdress: "",
// 錢包登錄結尾
currentLanguage: localStorage.getItem('languageNow') || 'en',
}
},
async created(){
const user = window.localStorage.getItem("userInfo")
user && (this.userToken = JSON.parse(user)?.token)
if (user) {
this.userIsLogin = true;
}
// 錢包登錄開始
const provider = window.web3?.currentProvider;
let accounts1 = [];
let accounts2 = [];
let accounts3 = [];
if(provider){
accounts1 = await provider.request({method: 'eth_accounts'});
}
if(window.tokenpocket?.ethereum){
accounts2 = await window.tokenpocket.ethereum.request({method: 'eth_accounts'});
}
if(window.okxwallet || (window.ethereum && window.ethereum?.isOKExWallet)){
accounts3 = await window.okxwallet.request({method: 'eth_accounts'});
}
console.log(accounts1,accounts2,accounts3,'see');
let _adressM = accounts1[0] || accounts2[0] || accounts3[0];
if(_adressM){
this.userMoneyAdressAll = _adressM;
this.userMoneyAdress = _adressM.slice(0,4) + "...." + _adressM.slice(-4);
}
// 錢包登錄結尾
},
mounted() {
window.addEventListener('localStorageChange', (event) => {
if (event.detail.key === 'languageNow') {
this.currentLanguage = event.detail.value;
}
});
},
methods:{
async sendContact(){
let _that = this;
let tipMessage = this.currentLanguage == 'zh' ? '請輸入完整信息' : "Please enter complete information";
if(!this.firstName || !this.secondName || !this.contactObj.email || !this.contactObj.contact){
this.$message.error(tipMessage)
return
}
this.contactObj.name = this.firstName + this.secondName;
let res = await publikRequesFunction('api/common/contactus','post',{..._that.contactObj});
if(res.code === 1){
_that.firstName = "";
_that.secondName = "";
_that.contactObj = {};
_that.$message.success("success");
}else{
_that.$message.error("failed");
}
},
// <-- -------------------------錢包登錄開始 --------------------------->
copyText(txt){
let message = this.currentLanguage == 'zh' ? '複製成功!' : 'Copy successful!';
navigator.clipboard.writeText(txt)
.then(()=>{
this.$message.success(message)
})
.catch(err=>{
console.log(err,'error');
})
},
allMoney(){
this.showMoneyAdress = true;
},
userMoneyAdressOptions(adress){
if(adress){
return adress
}else{
return this.currentLanguage == 'zh' ? '連接錢包' : 'Connect wallet'
}
},
moneyTip(txt){
if(txt){
return txt
}else{
return this.currentLanguage == 'zh' ? '請選擇連接錢包' : 'Please choose to connect the wallet'
}
},
selectWallet(wallet) {
this.selectMoney = {};
if(wallet.name == 'MetaMask') {
if(window.web3?.currentProvider){
this.selectMoney = wallet;
this.connectWallet(wallet.name);
}else{
this.moneyTipMessage = this.currentLanguage == 'zh' ? 'MetaMask未安裝' : 'MetaMask not installed';
}
}
if (wallet.name == 'TokenPocket') {
if(window.tokenpocket?.ethereum){
this.selectMoney = wallet;
this.connectWallet(wallet.name);
}else{
this.moneyTipMessage = this.currentLanguage == 'zh' ? 'TokenPocket未安裝' : 'TokenPocket not installed';
}
}
if(wallet.name == "OKX Wallet"){
if(window.okxwallet || (window.ethereum && window.ethereum.isOKExWallet)){
this.selectMoney = wallet;
this.connectWallet(wallet.name);
}else{
this.moneyTipMessage = this.currentLanguage == 'zh' ? '歐易錢包未安裝' : 'OKX Wallet not installed';
}
}
},
async connectWallet(walletType){
let account = "";
try {
if (walletType == 'MetaMask') {
const provider = window.web3.currentProvider;
const accounts = await provider.request({
method: 'eth_requestAccounts'
});
account = accounts[0];
}
if (walletType == 'TokenPocket') {
const tpAccounts = await window.tokenpocket.ethereum.request({
method: 'eth_requestAccounts'
});
account = tpAccounts[0];
}
if (walletType == 'OKX Wallet') {
const okxAccounts = await window.okxwallet.request({
method: 'eth_requestAccounts'
});
account = okxAccounts[0];
}
console.log(account,'xxaa');
let _adressM = account;
this.userMoneyAdressAll = account;
this.userMoneyAdress = _adressM.slice(0,4) + "...." + _adressM.slice(-4);
this.moneyDialogVisible = false;
} catch (error) {
console.log(error);
}
},
toConnectWallet() {
if(this.userMoneyAdress){
if(this.isShowSale){
return
}
this.hasAdress = !this.hasAdress;
return
};
this.moneyDialogVisible = true;
},
//<-- -------------------------錢包登錄結尾 --------------------------->
mobileLang(){
this.currentLanguage = mobileLang()
},
}
})
</script>
<script src="static/js/app.js"></script>
</body>
</html>