BIN
people.png
Executable file
After Width: | Height: | Size: 260 B |
BIN
picture/Activitypub.png
Executable file
After Width: | Height: | Size: 50 KiB |
BIN
picture/P&C.png
Executable file
After Width: | Height: | Size: 21 KiB |
BIN
picture/background.png
Executable file
After Width: | Height: | Size: 2.0 MiB |
BIN
picture/category.png
Executable file
After Width: | Height: | Size: 4.4 KiB |
BIN
picture/harukin+.png
Executable file
After Width: | Height: | Size: 92 KiB |
BIN
picture/harukin+Black.png
Executable file
After Width: | Height: | Size: 83 KiB |
BIN
picture/harukin+Black2.png
Executable file
After Width: | Height: | Size: 93 KiB |
BIN
picture/icon.png
Executable file
After Width: | Height: | Size: 112 KiB |
82
topsite.css
Executable file
@ -0,0 +1,82 @@
|
||||
main h1,main h2{
|
||||
text-align: center;
|
||||
}
|
||||
.signup,.login{
|
||||
width:30vw;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
/*font-size: 40px;*/
|
||||
|
||||
}
|
||||
.pubstream{
|
||||
width:60vw;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
/*font-size: 40px;*/
|
||||
|
||||
}
|
||||
.button{
|
||||
display: inline-table;
|
||||
margin: 5px;
|
||||
background-color: rgb(85, 85, 85);
|
||||
border-style: ridge;
|
||||
border-color: rgb(93, 94, 95);
|
||||
}
|
||||
.position{
|
||||
text-align: center;
|
||||
}
|
||||
html{
|
||||
background: url("./picture/background.png")center center / cover no-repeat fixed;
|
||||
}
|
||||
body{
|
||||
/*background: rgba(236, 106, 241, 0.747);*/
|
||||
color: azure;
|
||||
margin: 0px;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
a:link{
|
||||
color: azure;
|
||||
text-decoration: none;
|
||||
}
|
||||
.br10{
|
||||
height: 10px;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/*box*/
|
||||
.mainbox{
|
||||
transform:skewY(-5deg);
|
||||
width:100%;
|
||||
}
|
||||
.mainbox div{
|
||||
position: relative;
|
||||
}
|
||||
.mainbox .picturearea{
|
||||
transform:skewY(5deg);
|
||||
height:50vw;
|
||||
width:100%;
|
||||
}
|
||||
.mainbox .textarea{
|
||||
transform:skewY(5deg);
|
||||
}
|
||||
@media screen and (min-width: 700px) {
|
||||
.mainbox{
|
||||
transform:skewY(-5deg);
|
||||
width:100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mainbox div{
|
||||
display: table-cell;
|
||||
}
|
||||
.mainbox .picturearea{
|
||||
width: 50vw;
|
||||
transform:skewY(5deg);
|
||||
height: unset;
|
||||
}
|
||||
.mainbox .textarea{
|
||||
transform:skewY(5deg);
|
||||
width: 50vw;
|
||||
}
|
||||
}
|
102
topsite.html
Executable file
@ -0,0 +1,102 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Harukin+!</title>
|
||||
<script src="jquery-3.3.1.min.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="topsite.css">
|
||||
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<p class="br10"></p>
|
||||
<div style="margin: auto; width:100%;text-align: center;position: absolute;z-index: 100;">
|
||||
<img src="./picture/icon.png" width="200vw" alt="">
|
||||
</div>
|
||||
<p class="br10"></p>
|
||||
<p class="br10"></p>
|
||||
<p class="br10"></p>
|
||||
<p class="br10"></p>
|
||||
<p class="br10"></p>
|
||||
<p class="br10"></p>
|
||||
<div class="mainbox" style="background: repeating-linear-gradient(60deg, #4fd434, #5fad2b 3px,#81be1e 3px, #3ddf1d 7px);">
|
||||
<p class="br10"></p>
|
||||
<p class="br10"></p>
|
||||
<div class="textarea">
|
||||
<h1>hello.Harukin+! from hubzilla</h1>
|
||||
|
||||
</div>
|
||||
<div class="textarea">
|
||||
<p class="br10"></p>
|
||||
<h2>お待たせしました。分散型という選択肢。</h2>
|
||||
<div class="position">
|
||||
<a class="button" href="https://plus.haruk.in/register">
|
||||
<div class="signup">登録</div>
|
||||
</a>
|
||||
<a class="button" href="https://plus.haruk.in/login">
|
||||
<div class="login">ログイン</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="br10"></p>
|
||||
</div>
|
||||
<p class="br10"></p>
|
||||
<div class="mainbox" style="background: repeating-linear-gradient(-60deg, #34c9d4, #2ba4ad 3px,#1ebea3 3px, #1d51df 7px);">
|
||||
<div class="picturearea" style="background: url('./picture/P&C.png') right center / cover no-repeat;"></div>
|
||||
<div class="textarea">
|
||||
<p class="br10"></p>
|
||||
<h1>ポスト/コメントのバランスのよい配置</h1>
|
||||
<p class="br20"></p>
|
||||
<h3>hubzillaはFacebookやGoogle+と同じポスト+コメントのスタイルを継承しています。</h3>
|
||||
<h3>投稿の主従関係を明確にし、話題の脱線を防ぎ有意義な会話を実現します。</h3>
|
||||
<p class="br20"></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="br10"></p>
|
||||
<div class="mainbox" style="background: repeating-linear-gradient(45deg, #d4d434, #ada52b 3px,#bea11e 3px, #d2df1d 7px);">
|
||||
<div class="picturearea" style="background: url('./picture/category.png') right center / cover no-repeat;"></div>
|
||||
<div class="textarea">
|
||||
<p class="br10"></p>
|
||||
<h1>豊富な、豊富すぎる機能たち</h1>
|
||||
<p class="br20"></p>
|
||||
<h3>Google+で人気なサークル概念やコレクション機能を独自名にて内包しており、投稿andフォロワーの整理ができます。</h3>
|
||||
<h3>もちろん特定人物(複数)に送信することやサークルの仲間全員に送信などをすることもできます。</h3>
|
||||
<h3>ファイルフォーマットに限度は無し、BBcodeで自分の投稿内容に装飾を加えることができます。</h3>
|
||||
<p class="br10"></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="br10"></p>
|
||||
<div class="mainbox" style="background: repeating-linear-gradient(-45deg, #4c4d4e, #73787c 3px,#4e565e 3px, #494f55 7px);">
|
||||
<div class="picturearea" style="background: url('./picture/Activitypub.png') right center / cover no-repeat;"></div>
|
||||
<div class="textarea">
|
||||
<p class="br10"></p>
|
||||
<h1>繋がりを求めて</h1>
|
||||
<p class="br20"></p>
|
||||
<h3>hubzillaでは独自開発の協力な分散プロトコルZotをはじめ、MastodonやMisskey,Pleromaでお馴染みのActivityPub、Diaspora、OStatusのクアッドチャンネルを持ちます。</h3>
|
||||
<h3>この協力な連合ネットワークによってここに居るだけで他の大量のサーバーと通信ができます。(Zot以外は任意なので意図せず公開されることはありません)</h3>
|
||||
<h3>対象サービス(リストはマストドンwikiより転載) : GNU Social Friendica diaspora Misskey Hubzilla Mastodon postActiv
|
||||
Sosialhome
|
||||
Aardwolf Pleroma GangGo PixelFed</h3>
|
||||
<p class="br10"></p>
|
||||
<div class="position">
|
||||
<a class="button" href="https://plus.haruk.in/pubstream">
|
||||
<div class="pubstream">繋ってる仲間を見てみる</div>
|
||||
</a>
|
||||
</div>
|
||||
<p class="br10"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|