Merge branch 'main' of http://18.167.251.121:10003/aidlab/Code-Create

src/components/main-header.vue

@@ -79,7 +79,7 @@
 			path: '',
 			children: [
 				{
-					name: 'MainHeader.AiDA31',
+					name: 'MainHeader.AiDA',
 					path: '/aida'
 				},
 				{

src/lang/en.ts

@@ -3,7 +3,7 @@ export default {
 		Home: 'Home',
 		AboutUs: 'About Us',
 		OurSolutions: 'Our Solutions',
-		AiDA31: 'AiDA 3.1',
+		AiDA: 'AiDA 3.1',
 		Mixi: 'Mixi',
 		Communities: 'Communities',
 		Events: 'Events',
@@ -15,10 +15,14 @@ export default {
 		LoginOrSignin: 'Log in / Sign in',
 	},
 	MainFooter: {
+		Others: 'Others',
 		Copyright: '©{year} {name} Limited',
 		PrivacyPolicy: 'Privacy Policy',
 		TermsOfUse: 'Terms of Use',
 		Disclaimer: 'Disclaimer',
 		SiteMap: 'Site Map',
-	}
+	},
+	PageNotFound: 'Page not found',
+	PageNotFoundTitle: "That Page Can't Be Found",
+	PageNotFoundDesc: "It looks like nothing was found at this location.",
 }

src/lang/zh-cn.ts

@@ -3,7 +3,7 @@ export default {
 		Home: '首页',
 		AboutUs: '关于我们',
 		OurSolutions: '我们的产品',
-		AiDA31: 'AiDA 3.1',
+		AiDA: 'AiDA 3.1',
 		Mixi: 'Mixi',
 		Communities: '社区',
 		Events: '活动',
@@ -15,10 +15,14 @@ export default {
 		LoginOrSignin: '登入 / 注册',
 	},
 	MainFooter: {
+		Others: '其他',
 		Copyright: '©{year} {name} 有限公司',
 		PrivacyPolicy: '隐私政策',
 		TermsOfUse: '使用条款',
 		Disclaimer: '免责声明',
 		SiteMap: '网站地图',
-	}
+	},
+	PageNotFound: '页面不存在',
+	PageNotFoundTitle: '该页面不存在',
+	PageNotFoundDesc: '这里似乎没有任何发现。',
 }

src/lang/zh-tw.ts

@@ -3,7 +3,7 @@ export default {
 		Home: '首頁',
 		AboutUs: '關於我們',
 		OurSolutions: '我們的產品',
-		AiDA31: 'AiDA 3.1',
+		AiDA: 'AiDA 3.1',
 		Mixi: 'Mixi',
 		Communities: '社區',
 		Events: '活動',
@@ -15,10 +15,14 @@ export default {
 		LoginOrSignin: '登錄 / 登冊',
 	},
 	MainFooter: {
+		Others: '其他',
 		Copyright: '©{year} {name} 有限公司',
 		PrivacyPolicy: '私隱政策',
 		TermsOfUse: '使用條款',
 		Disclaimer: '免責聲明',
 		SiteMap: '網站地圖',
-	}
+	},
+	PageNotFound: '頁面不存在',
+	PageNotFoundTitle: '該頁面不存在',
+	PageNotFoundDesc: '這裡似乎沒有任何發現。',
 }

src/pages/others/disclaimer.vue

@@ -0,0 +1,49 @@
+<template>
+	<div class="disclaimer">
+		<OthersHeader :title="$t('MainFooter.Disclaimer')" />
+		<div class="content">
+			<p>
+				The contents of this marketing material are fully protected by copyright and nothing
+				may be reused without permission.
+			</p>
+			<p>
+				All information and contents contained in this marketing material are provided for
+				reference only and should not be relied on as the basis for any decision making.
+				Code Create Limited shall make no representation or warranty and accept no
+				responsibility, express or implied, for the accuracy, completeness, reliability or
+				timeliness of the information and contents, or any opinions, findings, conclusions
+				or recommendations contained in this marketing material. Code Create Limited shall
+				have no legal liability or responsibility (including liability for negligence) for
+				any loss, damage, or injury (including death) which may result, whether directly or
+				indirectly, from the supply or use of this information.
+			</p>
+			<p>
+				In the event of concerns or queries arising from any of the contents of this
+				marketing material, independent professional advice should be sought.
+			</p>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import OthersHeader from './others-header.vue'
+</script>
+
+<style scoped lang="less">
+	.disclaimer {
+		border-top: var(--main-header-height) solid #000;
+		background-color: #f9f9f9;
+		> .content {
+			max-width: 1230px;
+			width: 100%;
+			margin: 0 auto;
+			padding: 25px 15px 80px;
+			line-height: 1.6;
+			color: #333;
+			font-weight: 400;
+			> p {
+				margin-bottom: 20px;
+			}
+		}
+	}
+</style>

src/pages/others/not-found-404.vue

@@ -0,0 +1,62 @@
+<template>
+	<div class="not-found-404">
+		<OthersHeader :title="$t('PageNotFound')" />
+		<div class="content">
+			<h2>404</h2>
+			<h1>{{ $t('PageNotFoundTitle') }}</h1>
+			<p>{{ $t('PageNotFoundDesc') }}</p>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import OthersHeader from './others-header.vue'
+</script>
+
+<style scoped lang="less">
+	.not-found-404 {
+		border-top: var(--main-header-height) solid #000;
+		background-color: #f9f9f9;
+		> .content {
+			max-width: 1230px;
+			width: 100%;
+			margin: 0 auto;
+			padding: 120px 15px;
+			line-height: 1.6;
+			color: #333;
+			font-weight: 400;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			color: #222;
+			> h2 {
+				font-size: 100px;
+				font-weight: 600;
+				letter-spacing: 2px;
+				background-image: url('@/assets/images/404.png');
+				background-size: auto 100%;
+				background-clip: text;
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+				animation: bgImageAnim 7s linear infinite;
+				@keyframes bgImageAnim {
+					0% {
+						background-position-y: 0;
+					}
+					100% {
+						background-position-y: -200px;
+					}
+				}
+			}
+			> h1 {
+				font-size: 24px;
+				margin-bottom: 5px;
+				text-transform: uppercase;
+			}
+			> p {
+				color: #333;
+				margin-bottom: 20px;
+			}
+		}
+	}
+</style>

src/pages/others/others-header.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="others-header">
+		<router-link to="/">
+			<span>{{ $t('MainHeader.Home') }}</span>
+			<span class="iconfont icon-arrow-right-bold"></span>
+		</router-link>
+		<h1 class="title">{{ title }}</h1>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	const props = defineProps({
+		title: { type: String, required: true }
+	})
+</script>
+
+<style scoped lang="less">
+	.others-header {
+		padding: 50px 0;
+		background-color: #666;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> a {
+			font-size: 14px;
+			font-weight: 400;
+			color: #ffffff;
+			text-decoration: none;
+			> .iconfont {
+				font-size: 10px;
+				margin-left: 5px;
+			}
+		}
+		> .title {
+			font-size: 40px;
+			font-weight: 400;
+			line-height: 2;
+			text-transform: none;
+			color: #ffffff;
+		}
+	}
+</style>

src/pages/others/privacy-policy.vue

@@ -0,0 +1,116 @@
+<template>
+	<div class="privacy-policy">
+		<OthersHeader :title="$t('MainFooter.PrivacyPolicy')" />
+		<div class="content">
+			<p>
+				Please read this Privacy Policy Statement (“PPS”) to understand our policy and
+				practices on the collection, use, transfer, storage and processing of your personal
+				data. By accessing this Website, you are consenting to this PPS.
+			</p>
+
+			<ol>
+				<li>
+					Code Create Limited (“we”, “us” or “our”) pledges to comply with the
+					requirements of the Personal Data (Privacy) Ordinance. In doing so, we will
+					ensure compliance by our staff with the highest security and confidentiality
+					standards.
+				</li>
+
+				<li>
+					We protect the privacy of users of our website. Any personal data collected from
+					you will only be used for the specific purposes mentioned at the time of
+					collection or for purposes directly related to those specific purposes and/or
+					that mentioned in the relevant Personal Information Collection Statement.
+				</li>
+
+				<li>
+					We will retain your personal data only for so long as necessary to fulfill the
+					purpose of collection; and will erase your personal data thereafter. We will
+					ensure the security of your personal data and protect them from unauthorised
+					access.
+				</li>
+
+				<li>
+					We will keep your personal data confidential. Your personal data will be used
+					(and disclosed) to third parties for the purposes for which they were collected,
+					and where we are required to do so by law and as specified in the relevant
+					Personal Information Collection Statement.
+				</li>
+
+				<li>
+					We may keep an activity log that does not identify you individually and cannot
+					be used to determine the particular user in order to measure traffic, gauge the
+					popularity of different parts of our websites, gain general knowledge about the
+					users, and facilitate the enhancement of our websites. This information may
+					include the IP address, operating system and version, the type of network, the
+					type and configuration of your browser, the geo-location information and
+					identifiers of the device you used.
+				</li>
+
+				<li>
+					We use cookies to enhance your experience on this website (<strong>code-</strong
+					><strong>create.com.hk</strong>). Cookies are small pieces of data stored on
+					your computer or other devices when websites are loaded in a browser. We use
+					cookies to analyse website traffic, personalise website content and to make
+					targeted advertisements on third party websites. We use Google Analytics to
+					analyze usage trends at its website. We also use cookies at this website and
+					cookies set by Google Analytics to collect information on how visitors use our
+					website. Third parties such as YouTube and Google may set cookies, for example,
+					relating to the use of YouTube video players and targeted advertising
+					respectively. For further information, users should refer to the relevant third
+					parties’ cookies policy which may be amended from time to time. By continuing to
+					use this website, you agree to the use of these cookies. If you do not accept
+					the cookies or withdraw your consent, you will not able to use some of the
+					functions on this website.
+				</li>
+
+				<li>
+					This PPS is subject to change. Any changes will be posted on this page. Your
+					continued use of our website after the posting of such changes indicates your
+					acceptance to the same. In case of any inconsistency between the English and
+					Chinese versions, the English version shall prevail. If you have any enquiries,
+					please send an email to&nbsp;<strong
+						><a href="mailto:info@code-create.com.hk"
+							>info@code-create.com.hk</a
+						></strong
+					>.
+				</li>
+			</ol>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import OthersHeader from './others-header.vue'
+</script>
+
+<style scoped lang="less">
+	.privacy-policy {
+		border-top: var(--main-header-height) solid #000;
+		background-color: #f9f9f9;
+		> .content {
+			max-width: 1230px;
+			width: 100%;
+			margin: 0 auto;
+			padding: 25px 15px 80px;
+			line-height: 1.6;
+			color: #333;
+			font-weight: 400;
+			> p {
+				margin-bottom: 20px;
+			}
+			> ol {
+				padding-left: 20px;
+				margin: 0;
+				> li {
+					margin-bottom: 8px;
+					a,
+					strong {
+						text-decoration: none;
+						color: #222;
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/others/site-map.vue

@@ -0,0 +1,97 @@
+<template>
+	<div class="site-map">
+		<OthersHeader :title="$t('MainFooter.SiteMap')" />
+		<div class="content">
+			<div>
+				<div>
+					<router-link to="/about-us"
+						><h3>{{ $t('MainHeader.AboutUs') }}</h3></router-link
+					>
+				</div>
+				<div>
+					<router-link to="/our-solutions"
+						><h3>{{ $t('MainHeader.OurSolutions') }}</h3></router-link
+					>
+					<router-link to="/aida">{{ $t('MainHeader.AiDA') }}</router-link>
+					<router-link to="/mixi">{{ $t('MainHeader.Mixi') }}</router-link>
+				</div>
+				<div>
+					<router-link to="#"
+						><h3>{{ $t('MainHeader.Communities') }}</h3></router-link
+					>
+					<router-link to="/events">{{ $t('MainHeader.Events') }}</router-link>
+					<router-link to="/user-stories">{{ $t('MainHeader.UserStories') }}</router-link>
+					<router-link to="/help-centre">{{ $t('MainHeader.HelpCentre') }}</router-link>
+				</div>
+			</div>
+			<div>
+				<div>
+					<router-link to="/contact-us"
+						><h3>{{ $t('MainHeader.ContactUs') }}</h3></router-link
+					>
+				</div>
+				<div>
+					<router-link to="/media"
+						><h3>{{ $t('MainHeader.Media') }}</h3></router-link
+					>
+				</div>
+				<div>
+					<router-link to="#"
+						><h3>{{ $t('MainFooter.Others') }}</h3></router-link
+					>
+					<router-link to="/privacy-policy">{{
+						$t('MainFooter.PrivacyPolicy')
+					}}</router-link>
+					<router-link to="/terms-of-use">{{ $t('MainFooter.TermsOfUse') }}</router-link>
+					<router-link to="/disclaimer">{{ $t('MainFooter.Disclaimer') }}</router-link>
+					<router-link to="/site-map">{{ $t('MainFooter.SiteMap') }}</router-link>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import OthersHeader from './others-header.vue'
+</script>
+
+<style scoped lang="less">
+	.site-map {
+		border-top: var(--main-header-height) solid #000;
+		background-color: #f9f9f9;
+		> .content {
+			max-width: 1230px;
+			width: 100%;
+			margin: 0 auto;
+			padding: 25px 15px 80px;
+			display: flex;
+			> div {
+				flex: 1;
+				padding: 10px 40px;
+				> div {
+					margin-bottom: 20px;
+					display: flex;
+					flex-direction: column;
+					&:last-child {
+						margin-bottom: 0;
+					}
+					a {
+						color: #888;
+						font-size: 16px;
+						text-decoration: none;
+						padding: 8px 0;
+						transition: all 0.3s ease-in-out;
+						&:hover {
+							color: #222;
+						}
+					}
+					h3 {
+						padding: 2px 0;
+						color: #000;
+						font-size: 20px;
+					}
+				}
+			}
+		}
+	}
+</style>

src/pages/others/terms-of-use.vue

@@ -0,0 +1,139 @@
+<template>
+	<div class="terms-of-use">
+		<OthersHeader :title="$t('MainFooter.TermsOfUse')" />
+		<div class="content">
+			<p>
+				Please read these Terms of Use carefully.&nbsp; By accessing this Website, you are
+				consenting to these Terms of Use.&nbsp; If you do not accept these Terms of Use, do
+				not access this Website.
+			</p>
+
+			<p>1.<strong>Website Contents</strong></p>
+
+			<p>
+				This Website of the Code Create Limited (“we”, “us”, “our”) is for general
+				reference.&nbsp; We may, at our absolute discretion and at any time, without prior
+				notice to you, add to, amend or remove material from this Website, or alter the
+				presentation, substance, or functionality of this Website.
+			</p>
+
+			<p>2.<strong>Links to and from this Website</strong></p>
+
+			<p>
+				The links on this Website may take you to third-party websites or services that are
+				not owned or controlled by us.&nbsp; You acknowledge and agree that we have no
+				control over, and assume no responsibility for the content, privacy policies, or
+				practices of any third party websites or services.&nbsp; Links to other websites do
+				not constitute an endorsement by us of such websites or the information, products,
+				advertising, or other materials available on those websites.
+			</p>
+
+			<p>3.<strong>Intellectual Property Rights</strong></p>
+
+			<p>
+				All intellectual property rights subsisting in respect of this Website belong to us
+				or have been lawfully licensed to us for use on this Website. All rights under
+				applicable laws are hereby reserved. Except with our express written permission, you
+				are not allowed to upload, post, publish, reproduce, transmit or distribute in any
+				way any component of this Website itself or create derivative works with respect
+				thereto, as this Website is copyrighted under applicable laws.
+			</p>
+
+			<p>
+				You may only download such part of this Website as is expressly permitted to be
+				downloaded for the purposes specified.&nbsp; You have no rights in or to the
+				contents and you will not use them except as permitted under these Terms of Use.
+			</p>
+
+			<p>4.<strong>Limited Liability and Warranty</strong></p>
+
+			<p>
+				This Website is provided by us on an “as is” and “as available” basis.&nbsp; All
+				information is for your general reference only. We do not accept any responsibility
+				whatsoever in respect of such information.&nbsp; We do not guarantee or assume any
+				responsibility that:
+			</p>
+
+			<p>
+				∙this Website is available or will be uninterrupted or error-free, or that defects
+				will be corrected;
+			</p>
+
+			<p>
+				∙the information on this Website is accurate, adequate, current or reliable, or may
+				be used for any purpose other than for general reference;
+			</p>
+
+			<p>
+				∙the information on this Website is free of defect, error, omission, virus or
+				anything which may change, erase, add to or damage your software, data or equipment;
+				or
+			</p>
+
+			<p>
+				∙the messages sent through the internet will be free from interception, corruption
+				or loss.
+			</p>
+
+			<p>
+				We make no representation that the information on this Website is appropriate or
+				available for use in any other jurisdictions.&nbsp; Those who access this Website
+				from other locations do so at their discretion and are solely responsible for
+				compliance with their laws and rules.
+			</p>
+
+			<p>5.<strong>Privacy Policy</strong></p>
+
+			<p>
+				For information about our privacy policies and practices, please refer to
+				our&nbsp;<strong
+					><a href="/privacy-policy" data-type="URL" data-id="/privacy-policy"
+						>Privacy Policy Statement</a
+					></strong
+				>. Where personal data is collected, you should also have reference to the relevant
+				Personal Information Collection Statement in the form through which your personal
+				data is collected.
+			</p>
+
+			<p>6.<strong>Governing Law and Jurisdiction</strong></p>
+
+			<p>
+				These Terms of Use shall be governed by the law of the Hong Kong Special
+				Administrative Region of the People’s Republic of China (“Hong Kong”). You agree to
+				submit to the non-exclusive jurisdiction of the Hong Kong courts.
+			</p>
+
+			<p>7.<strong>General Matters</strong></p>
+
+			<p>
+				These Terms of Use are subject to change.&nbsp; Any changes will be posted on this
+				page. Your continued use of our website after the posting of such changes indicates
+				your acceptance to the changes. In case of any inconsistency between the English and
+				Chinese versions, the English version shall prevail.
+			</p>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import OthersHeader from './others-header.vue'
+</script>
+
+<style scoped lang="less">
+	.terms-of-use {
+		border-top: var(--main-header-height) solid #000;
+		background-color: #f9f9f9;
+		> .content {
+			max-width: 1230px;
+			width: 100%;
+			margin: 0 auto;
+			padding: 25px 15px 80px;
+			line-height: 1.6;
+			color: #333;
+			font-weight: 400;
+			> p {
+				margin-bottom: 20px;
+			}
+		}
+	}
+</style>

src/routes.ts

@@ -86,10 +86,26 @@ export const routes: RouteRecordRaw[] = [
 					},
 				]
 			},
+			{	path: 'privacy-policy',
+				name: 'privacy-policy',
+				component: () => import('./pages/others/privacy-policy.vue')
+			},
+			{	path: 'terms-of-use',
+				name: 'terms-of-use',
+				component: () => import('./pages/others/terms-of-use.vue')
+			},
+			{	path: 'disclaimer',
+				name: 'disclaimer',
+				component: () => import('./pages/others/disclaimer.vue')
+			},
+			{	path: 'site-map',
+				name: 'site-map',
+				component: () => import('./pages/others/site-map.vue')
+			},
 			{
 				path: ':pathMatch(.*)*',
-				name: 'not-found-home',
+				name: 'not-found-404',
-				component: HomeView,
+				component: () => import('./pages/others/not-found-404.vue'),
 			},
 		]
 	}