heimoshuiyu/social-ojo.org
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init finish

Browse Source
This commit is contained in:
黑墨水鱼
2022-05-12 20:32:34 +08:00
parent 4f976b19cd
commit 5848a7cdaf
22 changed files with 7335 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/Copyright.js Normal file
View File

@@ -0,0 +1,5 @@
function Copyright({ Component, pageProps }) {
return "©";
}
export default Copyright;

15
components/Footer.js Normal file
View File

@@ -0,0 +1,15 @@
import Link from "next/link";
import styles from '../styles/Footer.module.css';
export default function Footer() {
return (
<>
<footer className={styles.footer}>
<small>
©2022-2023 Social OJO. All Rights Reserved.
</small>
</footer>
</>
);
}

33
components/Header.js Normal file
View File

@@ -0,0 +1,33 @@
import styles from "../styles/Header.module.css";
import Link from "next/link";
// images
import headerBackground from "../public/typhoon.png";
export default function Header({ titleText }) {
return (
<>
<nav className={styles.toolbar}>
<strong>
<Link href="/">Social OJO</Link>
</strong>
<div className={styles.nav}>
<span>
<Link href="/">主页</Link>
</span>
<span>
<Link href="/posts/init">关于</Link>
</span>
</div>
</nav>
<h1 className={styles.title}>{titleText || "Social OJO"}</h1>
<header
className={styles.header}
style={{
backgroundImage: `url('${headerBackground.src}')`,
}}
>
</header>
</>
);
}

6984
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

5
pages/_app.js
View File

@@ -1,7 +1,8 @@
import '../styles/globals.css'
import Footer from '../components/Footer';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
function MyApp({Component, pageProps}) {
return <><Component {...pageProps} /><Footer /></>
}
export default MyApp

86
pages/index.js
View File

@@ -1,69 +1,39 @@
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Head from "next/head";
import Link from "next/link";
import Header from "../components/Header";
import Footer from '../components/Footer';
// styles
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<div>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<title>主页 - Social Eye</title>
<meta name="description" content="Social eye 官方网站" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href="https://nextjs.org">Next.js!</a>
</h1>
<Header></Header>
<p className={styles.description}>
Get started by editing{' '}
<code className={styles.code}>pages/index.js</code>
</p>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h2>Documentation &rarr;</h2>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h2>Learn &rarr;</h2>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/canary/examples"
className={styles.card}
>
<h2>Examples &rarr;</h2>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h2>Deploy &rarr;</h2>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
<main className={styles.container}>
<Link href="/posts/map" passHref>
<section className={styles.postPreview}>
<h2>全国灾害统计地图</h2>
<small>发布于 2022-05-12</small>
</section>
</Link>
<hr />
<Link href="/posts/init" passHref>
<section className={styles.postPreview}>
<h2>Social OJO 正式成立</h2>
<p>平台介绍、期望及使命</p>
<small>发布于 2022-05-12</small>
</section>
</Link>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<span className={styles.logo}>
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
</span>
</a>
</footer>
</div>
)
);
}

56
pages/posts/init.js Normal file
View File

@@ -0,0 +1,56 @@
import Head from "next/head";
import Link from "next/link";
import Header from "../../components/Header";
import styles from "../../styles/Post.module.css";
import homeStyles from "../../styles/Home.module.css";
export default function Init() {
const title = "Social OJO 正式成立";
return (
<div>
<Head>
<title>{title} - Social Eye</title>
<meta name="description" content="Social eye 官方网站" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header></Header>
<main className={homeStyles.container}>
<section className={styles.post}>
<h2>{title}</h2>
<small>发布于 2022-05-12</small>
<p>今天是汶川大地震的十四周年，也是国家每年的防灾减灾日。</p>
<p>
十四年前，UIC二百多名
师生在地震发生后前赴后继地奔赴灾区，在三江，水磨，绵竹等地提供了灾后社区关怀服务。虽然力量有限，服务为期不长，但师生对灾后服务的情景都记忆猶新。今天我们仍在和水磨镇的小伙伴们在话家常。
</p>
<p>
自此，在UIC我们开设了一门灾害社会工作的选修课，探索社会工作者在灾变管理的角色和社会心理应急特别是危机干预介入的技巧。
</p>
<p>
转眼间我们已进入数字时代。数字社交平台在武汉疫情期间使我们能在线上提供危机干预培训和督导。更在线上陪同当地社工、社区工作者和志愿者为社区內的新冠患者及其家人提供社会心理服务，也可以连接基金会进行精准捐赠。以同一模式我们服务了2020年在湖北滞留的香港市民，在南韩的我国留学生，和2022年面对奥米克隆的香港市民。值得一提的是我们数十名毕业生，都参与到线上服务当中。
</p>
<p>
数字社会工作的基础经已建立。大数据也能应用于灾害救援，郑州洪灾期间，透过收集求助信息志愿者不眠不休地尝试连接求救者和救援队，也用GIS
技术将求救者和救援队的位置显示出来，中间有多少失望，又有多少惊喜，不足为外人道。UIC一名毕业生，自行组织了一个信息志愿队，加入了捜救者的行列，不求名利，实在令人感动。现在各个盈利地图都在大灾时开放求助信息通道，其实是向社会学习。
</p>
<p>
今天是国家防灾减灾日，为传承及颂掦UIC师生在灾难靣前挺身而出的优良传统，我邀请了一群同学，主要是社会工作及社会行政三，四年级，也有其他三个学部的同学，制作了一个中囯灾害地图，利用可视化的效果，让大家初步了解中国的灾害情况。
</p>
<p>
这只是漫漫防灾长路的一步，不是第一步，也肯定不是最后一步。请批评，指正，和参与。
</p>
<p>
黄匡忠
<br />
北师港浸大
<br />
2008+14, 05,12。
<br />
</p>
</section>
</main>
</div>
);
}

136
pages/posts/map.js Normal file
View File

@@ -0,0 +1,136 @@
import Head from "next/head";
import Link from "next/link";
import Header from "../../components/Header";
import Copyright from "../../components/Copyright";
import Image from "next/image";
import styles from "../../styles/Post.module.css";
import homeStyles from "../../styles/Home.module.css";
import typhoonMapPreview from "../../public/typhoon.png";
import doughtMapPreview from "../../public/dought.png";
import snowMapPreview from "../../public/snow.jpg";
import workInjureMapPreview from "../../public/workInjury.png";
import geologicalDisasterMapPreview from '../../public/geological.png';
import earthquakeMapPreview from '../../public/earthquake.png';
import forestFireMapPreview from '../../public/forestFire.png';
import floodsAndDroughtsMapPreview from '../../public/floodsAndDroughts.png';
import trafficAccidentsMapPreview from '../../public/traffic.png';
export default function Init() {
return (
<div>
<Head>
<title>Social OJO 正式成立 - Social Eye</title>
<meta name="description" content="Social eye 官方网站" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header></Header>
<main className={homeStyles.container}>
<section className={styles.post}>
<h2>全国灾害统计地图</h2>
<small>发布于 2022-05-12</small>
<hr />
<div className={styles.grid}>
<Link
href="https://umap.openstreetmap.fr/zh/map/map_761199#4/36.24/122.08"
passHref
>
<div>
<h3>各省受台风影响地图</h3>
<small>
<Copyright />
吴懿鹏、林思源
</small>
<Image src={typhoonMapPreview} />
</div>
</Link>
<Link
href="https://umap.openstreetmap.fr/zh/map/drought-disasters-in-chinas-provinces-from-2014-to_758463#5/34.940/109.248"
passHref
>
<div>
<h3>各省干旱灾害地图</h3>
<small>
<Copyright />
Keer ZHENG & Mengjia ZHENG
</small>
<Image src={doughtMapPreview} />
</div>
</Link>
<Link href="#" passHref>
<div>
<h3>各省雪灾影响地图</h3>
<small>
<Copyright />
Shuyi GUO
</small>
<Image src={snowMapPreview} />
</div>
</Link>
<Link href="https://umap.openstreetmap.fr/en/map/gis_756551#5/37.020/103.623" passHref>
<div>
<h3>各省工伤统计地图</h3>
<small>
<Copyright />
Stanley, Lori, & Kristin.
</small>
<Image src={workInjureMapPreview} />
</div>
</Link>
<Link href="https://umap.openstreetmap.fr/zh/map/geological-disasters-in-mainland-china_758447#4/39.44/104.15" passHref>
<div>
<h3>各省突发地址灾害地图</h3>
<small>
<Copyright />
Sherry, Ivy, & Rika
</small>
<Image src={geologicalDisasterMapPreview} />
</div>
</Link>
<Link href="https://umap.osm.ch/en/map/map_4637#4/41.44/118.21" passHref>
<div>
<h3>新中国成立后各省地震数据</h3>
<small>
<Copyright />
陈九如, 刘梦蝶, & 周鲲鹏
</small>
<Image src={earthquakeMapPreview} />
</div>
</Link>
<Link href="https://umap.openstreetmap.fr/en/map/forest-fires-data-map-of-china-2015-2020_753341#4/35.89/104.24" passHref>
<div>
<h3>各省森林火灾地图</h3>
<small>
<Copyright />
Jessie, Peggy, & Cindy
</small>
<Image src={forestFireMapPreview} />
</div>
</Link>
<Link href="https://umap.openstreetmap.fr/en/map/untitled-map_758141#4/41.97/106.83" passHref>
<div>
<h3>各省洪涝旱灾地图</h3>
<small>
<Copyright />
Jade, Cherry, & Mia
</small>
<Image src={floodsAndDroughtsMapPreview} />
</div>
</Link>
<Link href="http://umap.openstreetmap.fr/en/map/traffic-accidents_756060#4/40.38/107.58" passHref>
<div>
<h3>各省交通事故地图</h3>
<small>
<Copyright />
Jade, Cherry, & Mia
</small>
<Image src={trafficAccidentsMapPreview} />
</div>
</Link>
</div>
</section>
</main>
</div>
);
}

BIN
public/dought.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/earthquake.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 513 KiB

BIN
public/floodsAndDroughts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 518 KiB

BIN
public/forestFire.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 395 KiB

BIN
public/geological.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 384 KiB

BIN
public/snow.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 904 KiB

BIN
public/traffic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 406 KiB

BIN
public/typhoon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 538 KiB

BIN
public/workInjury.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

4
styles/Footer.module.css Normal file
View File

@@ -0,0 +1,4 @@
.footer {
padding-top: 2rem;
text-align: center;
}

38
styles/Header.module.css Normal file
View File

@@ -0,0 +1,38 @@
.header {
padding: 2em;
background-color: rgba(255, 255, 255, 0.7);
box-shadow: 0px 5px 8px rgba(255, 255, 255, 0.7);
background-position: center;
background-size: cover;
height: 50vh;
}
.toolbar {
display: flex;
flex-direction: row;
justify-content: space-between;
position: absolute;
left: 0;
width: 100vw;
padding: 2rem;
background-color: rgba(255, 255, 255, 0.7);
}
.nav {
height: min-content;
}
.nav > * {
padding-left: 1em;
padding-right: 1em;
}
.title {
position: absolute;
top: 22vh;
width: 100vw;
text-align: center;
font-size: 2rem;
line-height: 3rem;
text-shadow: 1px 1px 1px black;
}

119
styles/Home.module.css
View File

@@ -1,116 +1,11 @@
.container {
padding: 0 2rem;
margin-left: 2rem;
margin-right: 2rem;
margin-top: 2rem;
}
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex: 1;
padding: 2rem 0;
border-top: 1px solid #eaeaea;
justify-content: center;
align-items: center;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.title a {
color: #0070f3;
text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
text-decoration: underline;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
}
.title,
.description {
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 800px;
}
.card {
margin: 1rem;
padding: 1.5rem;
text-align: left;
color: inherit;
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
transition: color 0.15s ease, border-color 0.15s ease;
max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
color: #0070f3;
border-color: #0070f3;
}
.card h2 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}
.card p {
margin: 0;
font-size: 1.25rem;
line-height: 1.5;
}
.logo {
height: 1em;
margin-left: 0.5rem;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
.postPreview {
padding: 0.5rem;
border-radius: 1rem;
cursor: pointer;
}

20
styles/Post.module.css Normal file
View File

@@ -0,0 +1,20 @@
.post {
padding-top: 1rem;
}
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, 15rem);
}
.grid > * {
padding: 0.3rem;
cursor: pointer;
border-radius: 1rem;
}
.grid > *:hover {
background-color: lightblue;
transition: cubic-bezier(1, 0, 0, 1);
}

8
styles/globals.css
View File

@@ -2,8 +2,7 @@ html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family:Arial, Helvetica, sans-serif
}
a {
@@ -14,3 +13,8 @@ a {
* {
box-sizing: border-box;
}
.hr {
margin-top: 2rem;
margin-bottom: 2rem;
}