220 lines
8.3 KiB
HTML
220 lines
8.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="ja">
|
||
|
|
<head>
|
||
|
|
<title>Croudia</title>
|
||
|
|
<meta content="width=device-width,initial-scale=1.0" name="viewport">
|
||
|
|
<link href='./css/font-awesome.css' rel='stylesheet' type='text/css'>
|
||
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
|
||
|
|
<style>
|
||
|
|
.nav-icon-cro{
|
||
|
|
font-size:200%;
|
||
|
|
}
|
||
|
|
.nav-series{
|
||
|
|
float:right;
|
||
|
|
font-size:70%;
|
||
|
|
margin-right:20px;
|
||
|
|
width:40px;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
#footer{
|
||
|
|
padding:5px;
|
||
|
|
position:absolute;
|
||
|
|
bottom:0;
|
||
|
|
display:flex;
|
||
|
|
width:100vw;
|
||
|
|
justify-content:space-around;
|
||
|
|
background-color:#3387A1;
|
||
|
|
color:white;
|
||
|
|
}
|
||
|
|
#notice{
|
||
|
|
background-color: #e8e8e8;
|
||
|
|
padding:5px;
|
||
|
|
width:100vw;
|
||
|
|
}
|
||
|
|
.cvo {
|
||
|
|
padding-left: 5px;
|
||
|
|
padding-right: 2px;
|
||
|
|
word-break: break-all;
|
||
|
|
width: 100%;
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 43px 2fr 1fr;
|
||
|
|
grid-template-areas: 'notice notice notice' 'icon display_name acct' 'icon toot toot' 'icon additional additional' 'actions actions date_via';
|
||
|
|
}
|
||
|
|
|
||
|
|
.area-notice {
|
||
|
|
margin:2px;
|
||
|
|
grid-area: notice;
|
||
|
|
}
|
||
|
|
|
||
|
|
.area-icon {
|
||
|
|
width:40px;
|
||
|
|
margin:2px;
|
||
|
|
grid-area: icon;
|
||
|
|
}
|
||
|
|
|
||
|
|
.area-display_name {
|
||
|
|
user-select: auto;
|
||
|
|
height:1.5em;
|
||
|
|
margin:2px;
|
||
|
|
overflow:hidden;
|
||
|
|
grid-area: display_name;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.area-acct {
|
||
|
|
margin:2px;
|
||
|
|
grid-area: acct;
|
||
|
|
overflow:hidden;
|
||
|
|
text-align:right;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.area-toot {
|
||
|
|
cursor:text;
|
||
|
|
user-select: auto;
|
||
|
|
margin:2px;
|
||
|
|
grid-area: toot;
|
||
|
|
}
|
||
|
|
|
||
|
|
.area-date_via {
|
||
|
|
text-align:right;
|
||
|
|
grid-area: date_via;
|
||
|
|
}
|
||
|
|
|
||
|
|
.area-additional {
|
||
|
|
cursor:text;
|
||
|
|
user-select: auto;
|
||
|
|
grid-area: additional;
|
||
|
|
font-size:80%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.area-actions {
|
||
|
|
margin:2px;
|
||
|
|
grid-area: actions;
|
||
|
|
height: 50px;
|
||
|
|
font-size: 150%;
|
||
|
|
color: grey;
|
||
|
|
}
|
||
|
|
.tl{
|
||
|
|
height:calc(100vh - 140px);
|
||
|
|
overflow-y:scroll;
|
||
|
|
overflow-x:hidden;
|
||
|
|
}
|
||
|
|
p:last-child{
|
||
|
|
margin-bottom:0;
|
||
|
|
}
|
||
|
|
#side{
|
||
|
|
position:fixed;
|
||
|
|
top:70vh;
|
||
|
|
right:0;
|
||
|
|
background-color: rbga(0,0,0,0.8);
|
||
|
|
color:white;
|
||
|
|
}
|
||
|
|
/*スクロールバー*/
|
||
|
|
::-webkit-scrollbar {
|
||
|
|
width: 5px;
|
||
|
|
height: 5px;
|
||
|
|
background: rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
::-webkit-scrollbar-track {
|
||
|
|
-webkit-border-radius: 5px;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
/* Handle */
|
||
|
|
::-webkit-scrollbar-thumb {
|
||
|
|
-webkit-border-radius: 5px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background: #9e9e9e;
|
||
|
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
.pointer{
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body style="height:100vh; overflow:hidden;">
|
||
|
|
<script>
|
||
|
|
var websocketOld = [];
|
||
|
|
var websocket = [];
|
||
|
|
var websocketHome = [];
|
||
|
|
var websocketLocal = [];
|
||
|
|
var websocketNotf = [];
|
||
|
|
</script>
|
||
|
|
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" style="background-color:#3387A1; color:white; padding-top:10px;">
|
||
|
|
<div style="position:absolute; right:0;">
|
||
|
|
<div class="nav-series pointer"><i class="fa fa-edit nav-icon-cro" data-toggle="modal" data-target="#myModal"></i><br>ささやく</div>
|
||
|
|
<div class="nav-series pointer" onclick="alert('設計中')"><i class="fa fa-search nav-icon-cro"></i><br>検索</div>
|
||
|
|
<div class="nav-series pointer" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars nav-icon-cro"></i><br>メニュー</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<a class="navbar-brand" href="#" style="color:white; font-size:130%;">CroDesk</a>
|
||
|
|
|
||
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent" style="color:white;">
|
||
|
|
© Cutls P and foolish people on kirishima.cloud.<br>クローディア・Croudiaはクローディア株式会社の登録商標です。
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">ささやく</h5>
|
||
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<!--hidden area-->
|
||
|
|
<input type="hidden" id="reply">
|
||
|
|
<input type="hidden" id="media">
|
||
|
|
<input type="hidden" value="0" id="post-acct-sel">
|
||
|
|
<textarea id="textarea" placeholder="今どうしてる？" style="width:100%;"></textarea>
|
||
|
|
<span id="vis" style="display:none">public</span>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary pointer" data-dismiss="modal">閉じる</button>
|
||
|
|
<button type="button" class="btn btn-primary pointer" onclick="post()">ささやく</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="side">上へ</div>
|
||
|
|
<div id="notice_0"></div>
|
||
|
|
<div class="tl-box" tlid="0"><div id="timeline_0" class="tl" tlid="0"><div style="text-align:center">[ここにトゥートはありません。]</div></div></div>
|
||
|
|
<div id="footer">
|
||
|
|
<div class="nav-series pointer" onclick="tl('home', '', 0, 0)"><i class="fa fa-home nav-icon-cro"></i><br>ホーム</div>
|
||
|
|
<div class="nav-series pointer" onclick="tl('local', '', 0, 0)"><i class="fa fa-users nav-icon-cro"></i><br>ローカル</div>
|
||
|
|
<div class="nav-series pointer" onclick="tl('pub', '', 0, 0)"><i class="fa fa-globe nav-icon-cro"></i><br>連合</div>
|
||
|
|
<div class="nav-series pointer" onclick="alert('設計中')"><i class="fa fa-user nav-icon-cro"></i><br>プロフ</div>
|
||
|
|
<div class="nav-series pointer" onclick="alert('設計中')"><i class="fa fa-cog nav-icon-cro"></i><br>設定</div>
|
||
|
|
</div>
|
||
|
|
<!--大量のデフォルト絵文字-->
|
||
|
|
<script type="text/javascript" src="./js/emoji/emoji-map.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/activity.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/flag.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/food.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/nature.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/object.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/people.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/place.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/symbol.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/emoji/default-emoji.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="./js/common/jquery.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/platform/first.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/common/time.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/ui/scroll.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/tl/date.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/post/status.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/post/post.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/tl/tl.js"></script>
|
||
|
|
<script type="text/javascript" src="./js/cro/parse.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
|
||
|
|
<script>tl('home', '', 0, 0)</script>
|
||
|
|
<script type="text/javascript" src="./js/platform/end.js"></script>
|
||
|
|
</body>
|