thedesk/app/index.html
2018-07-07 02:51:48 +09:00

779 lines
36 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ja">
<head>
<title>TheDesk</title>
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<link href="./css/materialize.css" type="text/css" rel="stylesheet">
<link href='./css/font-awesome.css' rel='stylesheet' type='text/css'>
<link href="./css/themes.css" type="text/css" rel="stylesheet">
<link href='./css/tl.css' rel='stylesheet' type='text/css'>
<link href='./css/userdata.css' rel='stylesheet' type='text/css'>
<link href='./css/post.css' rel='stylesheet' type='text/css'>
<link href="./css/master.css" type="text/css" rel="stylesheet">
<link href='./css/sort.css' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans:300|Baloo+Bhai" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<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/materialize.js"></script>
<script type="text/javascript" src="./js/ui/tips.js"></script>
<script type="text/javascript" src="./js/common/time.js"></script>
<script type="text/javascript" src="./js/common/version.js"></script>
<script type="text/javascript" src="./js/common/keyshortcut.js"></script>
<script type="text/javascript" src="./js/common/modal.js"></script>
<script type="text/javascript" src="./js/ui/jquery-ui.min.js"></script>
<script>
var ver="Mio (15.8.0)";
//betaを入れるとバージョンチェックしない
//var ver="beta";
var acct_id=0;
var tlid=0;
verck(ver);
</script>
<textarea id="copy" style="top:-100px; position:fixed;"></textarea>
<div id="tl">
<!--TL-->
<!--ドラッグハンドラ-->
<div id="drag">
<div id="drag-content" data-trans="drag_here">ここにドラッグして添付(ドラッグと同時にアップロードされます)
<br>
<button class="btn waves-effect" onclick="closedrop()" data-trans="close">閉じる</button>
</div>
</div>
<!--カラム追加-->
<div id="add-box" class="hide z-depth-4 notf-box">
<div class="input-field"><span data-trans="your_acct">アカウント選択</span>
<br>
<select id="add-acct-sel" class="acct-sel" style="color:black" onchange="addselCk()"></select>
<label></label>
</div>
<div class="input-field">
<div id="auth">
<select id="type-sel" style="color:black">
<option value="local" data-trans="local">ローカル</option>
<option value="local-media" data-trans="local-media">ローカル(メディア)</option>
<option value="home" data-trans="home">ホーム</option>
<option value="pub" data-trans="public">連合</option>
<option value="pub-media" data-trans="public-media">連合(メディア)</option>
<option value="dm" data-trans="dm">ダイレクトメッセージ</option>
<option value="mix" data-trans="integrated">統合(ローカルとホーム)</option>
<option value="plus" data-trans="plus">統合(ローカルとブースト・リプライ)</option>
<option value="notf" data-trans="notification">通知</option>
</select>
<label data-trans="show_tl">表示するタイムライン</label>
</div>
<div id="noauth" class="hide">表示するタイムライン
<input id="noauth-url" type="text" class="validate" style="width:calc( 70% - 40px);" placeholder="e.g:mstdn.jp">
</div>
</div>
<button class="btn waves-effect blue " style="width:calc( 100% - 10px);" onclick="addColumn()" data-trans-i="add">
<i class="material-icons left">add</i>追加
</button>
<br>
<br>
<button class="btn waves-effect orange " style="width:calc( 100% - 10px);" onclick="addToggle()" data-trans-i="close">
<i class="material-icons left">close</i>閉じる
</button>
</div>
<!--検索-->
<div id="src-box" class="hide notf-box z-depth-4">
<div class="input-field">
<i class="material-icons prefix">search</i>
<input id="src" type="text" class="validate" style="width:calc( 70% - 40px);">
<br><span data-trans="src_tip">ハッシュタグを検索するときは#を抜いてください。</span>
<br><span data-trans="src_acct_sel">検索に使用するアカウントを選択</span>
<br>
<div class="input-field">
<select id="src-acct-sel" class="acct-sel" onchange="trend()"></select>
<label></label>
</div>
<label for="src" data-trans="src">検索</label>
<button class="btn waves-effect indigo" style="width:calc( 60% - 40px);" onclick="src()" data-trans-i="src">
<i class="material-icons left">search</i>検索
</button>
</div>
<div id="search">
<div id="src-contents">
</div>
<button class="btn waves-effect orange " style="width:calc( 100% - 10px);" onclick="srcToggle()">
<i class="material-icons left" data-trans-i="close">close</i>閉じる
</button>
</div>
</div>
<!--並べ替え-->
<div id="sort-box" class="hide notf-box z-depth-4">
<ul id="sort"></ul>
<button onclick="sort()" class="btn waves-effect light-blue nex" style="width:100%; max-width:200px;" data-trans-i="sort">
<i class="material-icons left">sort</i>並べ替え設定
</button>
<button class="btn waves-effect orange " style="width:calc( 100% - 10px);" onclick="sortToggle()" data-trans-i="close">
<i class="material-icons left">close</i>閉じる
</button>
</div>
<!--リスト-->
<div id="list-box" class="hide notf-box z-depth-4">
アカウント選択
<div class="input-field">
<select id="list-acct-sel" class="acct-sel"></select>
<label></label>
</div>
<button class="btn waves-effect indigo" style="width:calc( 60% - 40px);" onclick="list()" data-trans-i="lists">
リスト一覧
</button><br><br>
<div id="lists"></div>
<div id="lists-user"></div>
<input type="text" style="width:150px" id="list-add" placeholder="タイトル">
<button class="btn waves-effect" style="width:120px;" onclick="makeNewList()">新規作成</button>
</div>
<div id="main">
<!--TLのTL-->
<div id="timeline-container">
まずは右のアカウントボタンからアカウントを追加してください。<br>
右のカラム追加ボタンで認証せずにローカルタイムラインを見ることもできます。
</div>
<!--サイドバー-->
<div id="sidebar">
<div id="sidebar-top">
<div class="side-dead"></div>
<div class="big-menu" id="add-tgl">
<a onclick="addToggle()" class="nex waves-effect" data-trans-i="add">
<i class="material-icons nex big-icon" title="カラム追加" data-trans-title="column_add">add</i>
</a>
<br>
<span class="side-label" data-trans="column_add">カラム追加</span>
</div>
<div class="big-menu">
<a href="acct.html" class="nex waves-effect">
<i class="material-icons nex big-icon" title="アカウントマネージャー(Ctrl+Shift+M)" data-trans-title="manager">account_circle</i>
</a>
<br>
<span class="side-label" data-trans="manager_short">アカウント</span>
</div>
<div class="big-menu" id="sort-tgl">
<a onclick="sortToggle()" class="nex waves-effect">
<i class="material-icons nex big-icon" title="カラム一覧/並べ替え" data-trans-title="sort">sort</i>
</a>
<br>
<span class="side-label" data-trans="sort">カラム一覧</span>
</div>
<div class="side-dead">
</div>
<div class="small-menu" id="src-tgl">
<a onclick="srcToggle()" class="nex waves-effect">
<i class="material-icons" title="検索" data-trans-title="src">search</i>
<span class="side-label" data-trans="src">検索</span>
</a>
</div>
<div class="small-menu">
<a href="setting.html" class="nex waves-effect">
<i class="material-icons nex" title="設定(Ctrl+Shift+S)" data-trans-title="setting">settings</i>
<span class="side-label" data-trans="setting">設定</span>
</a>
</div>
<div class="small-menu" id="list-tgl">
<a onclick="listToggle()" class="nex waves-effect">
<i class="material-icons" title="リスト" data-trans-title="list">view_headline</i>
<span class="side-label" data-trans="list">リスト</span>
</a>
</div>
<div class="small-menu">
<a href="index.html" class="nex mize waves-effect">
<i class="material-icons nex" title="スーパーリロード(F5/⌘+R)" data-trans-title="reload">refresh</i>
<span class="side-label" data-trans="reload">再読込</span>
</a>
</div>
<div class="small-menu">
<a onclick="window.open('https://astarte.thedesk.top');" class="setting nex waves-effect" target="_blank" id="ranking-btn" style="display:none;">
<i class="material-icons nex" title="アスタルテランキング">timeline</i>
<span class="side-label">暇ラン</span>
</a>
</div>
<div class="small-menu">
<a onclick="nano()" class="nex waves-effect">
<i class="material-icons" title="最小のマストドン。TheDesk Nano" data-trans-title="nano_desp">remove_from_queue</i>
<span class="side-label" data-trans="nano">Nano</span>
</a>
</div>
<div id="side-dead">
</div>
<div class="small-menu">
<a onclick="xpand()" class="nex waves-effect">
<i class="material-icons" title="サイドバーの開閉" data-trans-title="sidebar_xpand" id="x-btn">keyboard_arrow_right</i>
<span class="side-label" data-trans="sidebar_xpand_short">たたむ</span>
</a>
</div>
</div>
<div id="sidebar-btm">
<!--最小化-->
<div id="menu-btn" class="big-menu" onclick="show()" style="display:none;">
<a class="waves-effect">
<i class="material-icons big-icon">mode_edit</i>
<br>
<span class="side-label" data-trans="post">投稿</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="post-box" class="z-depth-3">
<!--トゥートボックス-->
<div class="row" style="margin-bottom:0;">
</span>
<div class="" style="float:left;">
<a onclick="profShow()" style="vertical-align:-2.5rem;" class="pointer mize">
<img src="./img/missing.svg" id="acct-sel-prof" title="選択中のプロフィール表示(Ctrl+Shift+P)" data-trans-title="post_box_prof" width="24px">
</a>
</div>
<div class="input-field mize" style="float:left; width:calc(100% - 24px)">
<select id="post-acct-sel" class="acct-sel" onchange="mdCheck()"></select>
</div>
<span class="cancel">
<i class="material-icons waves-effect" onclick="hide()" title="このボックスを閉じる(X)" data-trans-title="post_box_close">cancel</i>
<i class="material-icons waves-effect mini-btn" onclick="mini()" title="このボックスを最小化" data-trans-title="post_box_mini">expand_more</i>
</span>
<!--Markdown-->
<div class="row" style="margin-bottom:0">
<div class="markdown mize hide">
<div class="col s12">
<i class="material-icons pointer setting waves-effect" onclick="tagsel('b')" title="太字(Ctrl+B)テキストボックス内を選択してから押すと囲みます。">format_bold</i>
<i class="material-icons pointer setting waves-effect" onclick="tagsel('i')" title="斜字(Ctrl+I)テキストボックス内を選択してから押すと囲みます。">format_italic</i>
<i class="material-icons pointer setting waves-effect" onclick="tagsel('u')" title="下線(Ctrl+U)テキストボックス内を選択してから押すと囲みます。">format_underlined</i>
<i class="material-icons pointer setting waves-effect" onclick="tagsel('s')" title="取り消し(Ctrl+S)テキストボックス内を選択してから押すと囲みます。">strikethrough_s</i>
<i class="material-icons pointer setting waves-effect" onclick="markdown('>','no','yes')" title="引用">format_quote</i>
<i class="material-icons pointer setting waves-effect" onclick="markdown('#','no','yes')" title="見出し">short_text</i>
<i class="material-icons pointer setting waves-effect" onclick="markdown('`','yes','no')" title="コード挿入 テキストボックス内を選択してから押すと囲みます。">code</i>
<i class="material-icons pointer setting waves-effect" onclick="markdown('- ','yes','yes')" title="箇条書きリスト">format_list_bulleted</i>
<i class="material-icons pointer setting waves-effect" onclick="markdown('1. ','yes','yes')" title="番号付きリスト">format_list_numbered</i>
<i class="pointer setting fa fa-subscript waves-effect" onclick="markdown('__','yes','no','before')" title="下付き文字 テキストボックス内を選択してから押すと囲みます。" style="font-size:1.5rem"></i>
<i class="pointer setting fa fa-superscript waves-effect" onclick="markdown('_','yes','no','before')" title="上付き文字 テキストボックス内を選択してから押すと囲みます。" style="font-size:1.5rem"></i>
<i class="material-icons pointer setting waves-effect" onclick="tagsel('spin')" title="回転 テキストボックス内を選択してから押すと囲みます。">autorenew</i>
<i class="material-icons pointer setting waves-effect" onclick="tagsel('pulse')" title="点滅 テキストボックス内を選択してから押すと囲みます。">flare</i>
<i class="material-icons pointer setting waves-effect" onclick="tagsel('flip=vertical')" title="上下反転 テキストボックス内を選択してから押すと囲みます。">swap_vert</i>
<i class="material-icons pointer setting waves-effect" onclick="tagsel('flip=horizontal')" title="左右反転 テキストボックス内を選択してから押すと囲みます。">swap_horiz</i>
<span class="sml gray pointer waves-effect">
<a onclick="mdToggle()">Markdownエディタを隠す</a>
</span>
<br>
<i class="material-icons pointer setting waves-effect" onclick="tagsel('size')" title="文字サイズ変更 テキストボックス内を選択してから押すと囲みます。">format_size</i>
<input id="size" style="width: calc(50% - 20px); margin: 0; height: 24px;" value="12">px
<i class="material-icons pointer setting waves-effect" onclick="tagsel('colorhex')" title="文字色変更 テキストボックス内を選択してから押すと囲みます。">color_lens</i>
<input id="colorhex" style="width: calc(50% - 50px); margin: 0; height: 24px;" type="color">
<br>
<i class="material-icons pointer setting waves-effect" onclick="markdownLink()" title="リンク挿入">link</i>
<input id="linkt" style="width: calc(50% - 20px); margin: 0; height: 24px;" placeholder="リンクテキスト">&nbsp;
<input id="link2" style="width: calc(50% - 20px); margin: 0; height: 24px;" placeholder="リンクアドレス">
<br>
<i class="material-icons pointer setting waves-effect" onclick="markdownImage()" title="インライン画像挿入">image</i>
<input id="image" style="width: calc(50% - 20px); margin: 0; height: 24px;" placeholder="代替テキスト">&nbsp;
<input id="image2" style="width: calc(50% - 20px); margin: 0; height: 24px;" placeholder="画像アドレス">
</div>
</div>
<div class="input-field col s12" id="preview-field" style="margin-top: 0;">
<div id="md-preview">
</div>
<span class="sml gray pointer">
<a onclick="previewEdit()">Edit</a>
</span>
</div>
<div class="input-field col s12" id="toot-field" style="margin-top: 10px;">
<textarea id="textarea" class="materialize-textarea unmize" style="margin-bottom:0;" data-length="500"></textarea>
<label for="textarea" data-trans="toot">トゥート</label>
<br>
<span class="sml gray pointer markdown mize" id="preview-btn">
<a onclick="preview()">Preview</a>
</span>
<span class="sml gray pointer anti-markdown mize">
<a onclick="mdToggle()">Markdownエディタを表示</a>
</span>
<span id="suggest"></span>
</div>
<div class="col s12 mize" style="margin-top: 0; display:flex; justify-content: space-between">
<i class="waves-effect gray material-icons" id="nsfw" title="画像に制限を付与" onclick="nsfw()">visibility_off</i>
<i class="waves-effect gray material-icons purple-text dropdown-button" data-activates='dropdown1' id="vis-icon">public</i>
<a class="waves-effect gray" id="cw" onclick="cw()" title="コンテンツワーニング(トゥートを表示する前にメッセージで隠す)">CW</a>
<span><span id="imgup"></span><span id="imgsel"><i class="waves-effect material-icons gray" onclick="fileselect()" title="ファイルを選択">photo_library</i></span></span>
<i class="waves-effect gray material-icons" onclick="adobe()" title="Adobeフォトエディタ">format_shapes</i>
<i class="waves-effect gray material-icons" onclick="emoji()" title="絵文字を挿入">tag_faces</i>
<a class="pointer waves-effect gray" id="npbtn" title="NowPlaying[クリックでSpotify(アカウント連携が必要です)/control+クリックでiTunes(macOSが必要です)]"><i class="material-icons" style="font-size:24px;">music_note</i></a>
<i class="material-icons nex gray waves-effect" title="トゥートボックスのクリア(Ctrl+Shit+C)" data-trans-title="post_box_clear" id="clear">clear</i>
</div>
<div class="col s12 mize" style="margin-bottom:5px; padding:0;">
<div id="taglist"></div>
<span id="preview" class="mize"></span>
<span class=" sml mize"><span data-trans="reply">返信モード</span>:
<span id="rec">いいえ</span>/<span data-trans="file">添付</span>:
<span id="mec">なし</span>/<span data-trans="vis">公開範囲</span>:
<span id="vis">public</span>
</span>
<br>
<input type="text" id="cw-text" placeholder="警告文" class="mize">
</div>
</div>
<!-- 公開範囲 Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li style="font-size: 16px; display: block; line-height: 22px; padding: 14px 16px;">公開範囲指定</li>
<li>
<a onclick="vis('public')">公開(Public)</a>
</li>
<li>
<a onclick="vis('unlisted')">未収載(Unlisted)</a>
</li>
<li>
<a onclick="vis('private')" id="private-button">非公開(Private)</a>
</li>
<li id="limited-button" class="hide">
<a onclick="vis('limited')">限定公開(Limited)</a>
</li>
<li>
<a onclick="vis('direct')" class="disabled direct">ダイレクト(Direct)</a>
</li>
</ul>
<!--hidden area-->
<input type="hidden" id="reply">
<input type="hidden" id="media">
<!--END hidden area-->
</div>
<div id="toot-btn-field">
<button class="btn waves-effect indigo unmize" style="width:calc(100% - 10px); padding:0; margin-top:10px;" onclick="post()" id="toot-post-btn">トゥート</button>
</div>
</div>
<!--絵文字ピッカー-->
<div id="emoji" class="hide shared z-depth-4">
<span class="gray sml">インスタンスによって実装が異なります。
<a onclick="emojiGet('true')" class="pointer">絵文字更新</a>
<i class="material-icons waves-effect" onclick="emoji()" title="このボックスを閉じる" data-trans-title="post_box_close">cancel</i>
<br>
</span>
<input type="text" id="emoji-suggest" placeholder="カスタム絵文字検索">
<div id="emoji-list" class="" style="">
</div>
<div class="emoji-control center">
<button class="btn waves-effect blue" style="width:30%; padding:0;" onclick="emojiList('before')" id="emoji-before">
<i class="material-icons">navigate_before</i>
</button>
<span id="emoji-count"></span>/
<span id="emoji-sum"></span>
<button class="btn waves-effect blue" style="width:30%; padding:0;" onclick="emojiList('next')" id="emoji-next">
<i class="material-icons">navigate_next</i>
</button>
</div>
<div id="default-emoji">
<span id="now-emoji"></span>一覧を表示中<br><span class="gray sml">一部デフォルト絵文字は入力・描画できません。(国旗系など)</span>
<br>
<a onclick="customEmoji()" class="pointer waves-effect" title="カスタム絵文字">
<i class="material-icons">add</i>
</a>
<a onclick="defaultEmoji('people')" class="pointer waves-effect" title="ひと">
<i class="material-icons">people</i>
</a>
<a onclick="defaultEmoji('nature')" class="pointer waves-effect" title="自然">
<i class="material-icons">local_florist</i>
</a>
<a onclick="defaultEmoji('food')" class="pointer waves-effect" title="食べ物">
<i class="material-icons">restaurant</i>
</a>
<a onclick="defaultEmoji('activity')" class="pointer waves-effect" title="活動">
<i class="material-icons">directions_run</i>
</a>
<a onclick="defaultEmoji('place')" class="pointer waves-effect" title="場所">
<i class="material-icons">directions_car</i>
</a>
<a onclick="defaultEmoji('object')" class="pointer waves-effect" title="もの">
<i class="material-icons">attach_file</i>
</a>
<a onclick="defaultEmoji('symbol')" class="pointer waves-effect" title="記号">
<i class="material-icons">gesture</i>
</a>
<a onclick="defaultEmoji('flag')" class="pointer waves-effect" title="国旗">
<i class="material-icons">flag</i>
</a>
<a onclick="faicon()" class="pointer waves-effect" title="faicon" id="faicon-btn">
<i class="fa fa-fort-awesome"></i>
</a>
</div>
</div>
<!-- Modal Structure Tootdata-->
<div id="tootmodal" class="modal modal-fixed-footer">
<div class="modal-content">
<ul class="collapsible" data-collapsible="accordion" id="det-col">
<li>
<div class="collapsible-header">
<i class="material-icons">arrow_upward</i>これより前の会話
</div>
<div class="collapsible-body toot-reset" id="toot-reply">
</div>
</li>
<li>
<div class="collapsible-header" id="activator">
<i class="material-icons">more_horiz</i>対象のトゥート
</div>
<div class="collapsible-body toot-reset" id="toot-this">
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">arrow_downward</i>これよりあとの会話
</div>
<div class="collapsible-body toot-reset" id="toot-after">
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">people_outline</i>これより前のLocal TL(エアリプソース確認)
</div>
<div class="collapsible-body toot-reset" id="toot-before">
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">person_outline</i>これより前のユーザーTL(BTソース確認)
</div>
<div class="collapsible-body toot-reset" id="user-before">
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">star</i>このトゥートをお気に入りに登録した人
</div>
<div class="collapsible-body toot-reset" id="toot-fav">
</div>
</li>
<li>
<div class="collapsible-header">
<i class="text-darken-3 fa fa-retweet"></i>このトゥートをブーストした人
</div>
<div class="collapsible-body toot-reset" id="toot-rt">
</div>
</li>
</ul>
他のアカウントを使用(<i class="fa fa-retweet"></i>/<i class="fa fa-star"></i>の解除はできません)<br>
<div class="row">
<div class="col s4">
<select id="status-acct-sel" class="acct-sel"></select>
</div>
<div class="col s2">
<button class="dropdown-button btn waves-effect" style="width:100%;" onclick="staEx('reply')"><i class="fa fa-share left"></i>返信</button>
</div>
<div class="col s2">
<button class="dropdown-button btn waves-effect indigo" style="width:100%;" onclick="staEx('rt')"><i class="fa fa-retweet left"></i>ブースト</button>
</div>
<div class="col s3">
<button class="dropdown-button btn waves-effect orange" style="width:100%;" onclick="staEx('fav')"><i class="fa fa-star left"></i>お気に入り登録</button>
</div>
</div>
<div id="toot-tools">
</div>
<div id="toot-after">
</div>
</div>
<div class="modal-footer">
<a href="#!" class="waves-effect waves-green btn-flat" onclick="brws()">ブラウザで開く</a>
<a href="#!" class="waves-effect waves-green btn-flat" onclick="shot()">スクリーンショット</a>
<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy()">URLをコピー</a>
<a href="#!" class="waves-effect waves-green btn-flat" onclick="cbCopy('emb')">埋め込む</a>
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<!-- Modal Structure Userdata -->
<div id="his-data" class="modal bottom-sheet modal-fixed-footer" style="max-height:750px; height:90%;">
<div id="his-data-content" class="modal-content" style="padding-bottom: 0;overflow-y:hidden;">
<div id="his-data-show">
<img src="./img/loading.svg" id="his-prof" style="">
<div class="his-float">
<span id="his-name" style="font-size:1.5rem">Loading...</span><span class="gray" id="his-bot"></span>
<br>@
<span id="his-acct"></span>
<span class="gray" id="his-relation"></span>
<br>
<span class="cbadge">
<span id="his-sta"></span>トゥート
</span>
<span class="cbadge">フォロー:
<span id="his-follow"></span>
</span>
<span class="cbadge">フォロワー:
<span id="his-follower"></span>
</span>
<span class="cbadge" style="max-width:150px; width:150px; ">Since:
<span id="his-since"></span>
</div>
<div class="his-float">
<span id="his-des"></span>
<br>
</div>
<div class="row">
<div class="col s12" id="my-data-nav">
<ul class="custom-tabs transparent">
<li class="custom-tab col my-data-width active-back column-first">
<a go="#his-tl">タイムライン</a>
</li>
<li class="custom-tab col my-data-width">
<a go="#his-follow-list">フォロー</a>
</li>
<li class="custom-tab col my-data-width">
<a go="#his-follower-list">フォロワー</a>
</li>
<li class="custom-tab col my-data-width only-his-data">
<a go="#his-action">他アカウントで操作</a>
</li>
<li class="custom-tab col my-data-width only-his-data">
<a go="#his-list">リスト</a>
</li>
<li class="custom-tab col my-data-width only-my-data">
<a go="#his-fav-list">お気に入り登録</a>
</li>
<li class="custom-tab col my-data-width only-my-data">
<a go="#his-blocking-list">ブロック</a>
</li>
<li class="custom-tab col my-data-width only-my-data">
<a go="#his-muting-list">ミュート</a>
</li>
<li class="custom-tab col my-data-width only-my-data">
<a go="#his-domain-list">ドメインブロック</a>
</li>
<li class="custom-tab col my-data-width only-my-data">
<a go="#his-prof-list">プロフィール編集</a>
</li>
<li class="custom-tab col my-data-width only-my-data">
<a go="#his-request-list">フォローリクエスト</a>
</li>
<li class="custom-tab col my-data-width only-his-data">
<a go="#his-matching-list">似てる</a>
</li>
<li class="custom-tab col my-data-width only-my-data">
<a go="#his-follow-recom-list">おすすめ</a>
</li>
</ul>
</div>
<div id="his-tl" class="col s12 tab-content">
<div id="his-tl-contents" class="cont-series">
</div>
<button class="btn waves-effect " style="width:100%; padding:0;" onclick="utl('--now','more')">もっと</button>
</div>
<div id="his-follow-list" class="col s12 tab-content">
<div id="his-follow-list-contents" class="cont-series">
</div>
<button class="btn waves-effect " style="width:100%; padding:0;" onclick="flw('--now','more')">もっと</button>
</div>
<div id="his-follower-list" class="col s12 tab-content">
<div id="his-follower-list-contents" class="cont-series">
</div>
<button class="btn waves-effect " style="width:100%; padding:0;" onclick="fer('--now','more')">もっと</button>
</div>
<div id="his-action" class="col s12 tab-content">
他のアカウントを使用してフォロー(解除はできません)<br>
<div style="max-width:500px;"><select id="user-acct-sel" class="acct-sel"></select></div>
<a href="#!" class="waves-effect btn" onclick="follow('selector','true')">フォロー</a><br>
または<br>
<a href="#!" class="waves-effect btn" onclick="udgEx('selector', 'selector')">プロフを開く</a><br>
</div>
<div id="his-list" class="col s12 tab-content">
<div id="his-lists-a">リストに追加するためにはフォローが必要です。</div>
<div id="his-lists-b"></div>
</div>
<div id="his-fav-list" class="col s12 tab-content">
<div id="his-fav-list-contents" class="cont-series">
</div>
<button class="btn waves-effect" style="width:100%; padding:0;" onclick="showFav('more')">もっと</button>
</div>
<div id="his-blocking-list" class="col s12 tab-content">
<div id="his-blocking-list-contents"class="cont-series" >
</div>
<button class="btn waves-effect " style="width:100%; padding:0;" onclick="showBlo('more')">もっと</button>
</div>
<div id="his-muting-list" class="col s12 tab-content">
<div id="his-muting-list-contents" class="cont-series">
</div>
<button class="btn waves-effect " style="width:100%; padding:0;" onclick="showMut('more')">もっと</button>
</div>
<div id="his-domain-list" class="col s12 tab-content">
<div id="his-domain-list-contents" class="cont-series">
</div>
<button class="btn waves-effect " style="width:100%; padding:0;" onclick="showDom('more')">もっと</button>ブロックするドメイン
<br>
<input type="text" placeholder="example.com" id="domainblock">
<button class="btn waves-effect" onclick="addDomainblock()">ブロック</button>
<br>
</div>
<div id="his-prof-list" class="col s12 tab-content">名前
<br>
<input type="text" placeholder="名前" id="his-name-val" style="max-width:250px;">
<br>自己紹介
<br>
<div class="input-field col s12">
<textarea placeholder="自己紹介" id="his-des-val" class="materialize-textarea"></textarea>
<label for="his-des-val">自己紹介</label>
</div>
<br>プロフィール画像変更:
<span id="prof-change">
<input type="file" onchange="imgChange(this,'avatar')">
</span>
<br>ヘッダー画像変更:
<span id="header-change">
<input type="file" onchange="imgChange(this,'header')">
</span>
</div>
<div id="his-request-list" class="col s12 tab-content">
<div id="his-request-list-contents" class="cont-series">
</div>
<button class="btn waves-effect " style="width:100%; padding:0;" onclick="showReq('more')">もっと</button>
</div>
<div id="his-matching-list" class="col s12 tab-content">
似ているユーザーを取得できます。<br>
Powered by <a href="https://vinayaka.distsn.org/" target="_blank">Mastodon User Matching</a><br>
<div id="his-matching-list-contents" class="cont-series">
</div>
<button class="btn waves-effect " onclick="showMat()">取得</button>
</div>
<div id="his-follow-recom-list" class="col s12 tab-content">
<div id="his-follow-recom-contents" class="cont-series">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="modal-action waves-effect waves-green btn-flat" id="his-history-btn" onclick="historyShow()">一つ前のユーザーデータ</button>
<a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-follow-btn" onclick="follow()">フォロー</a>
<a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-mute-btn" onclick="mute()">ミュート</a>
<a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-block-btn" onclick="block()">ブロック</a>
<a href="#!" class="modal-action waves-effect waves-green btn-flat" id="his-emp-btn" onclick="empUser()">ユーザー強調</a>
<a href="#!" class="modal-action waves-effect waves-green btn-flat" onclick="hisclose()">Close</a>
</div>
</div>
<!-- Modal Structure Image-->
<div id="imagemodal" class="modal modal-fixed-footer" style="min-width:550px">
<div class="modal-content">
<div id="imagewrap">
<img src="" id="imgmodal">
</div>
<br>
</div>
<div class="modal-footer">
DL:<span id="imgprog"></span>%
<a class="waves-effect white-text" onclick="zoom(2)">
<i class="material-icons">zoom_in</i>
</a>
<a class="waves-effect white-text" onclick="zoom(0.5)">
<i class="material-icons">zoom_out</i>
</a>
<button class="btn waves-effect purple" onclick="dlImg()">
<i class="material-icons">file_download</i>
</button>
<button class="btn waves-effect brown" onclick="detFromImg()">当該トゥート</button>
<button class="btn waves-effect orange" onclick="imgCont('prev')" id="image-prev">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<button class="btn waves-effect orange" onclick="imgCont('next')" id="image-next">
<i class="material-icons">keyboard_arrow_right</i>
</button>
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">
<i class="material-icons">close</i>
</a>
</div>
</div>
<!-- Modal Structure Video-->
<div id="videomodal" class="modal modal-fixed-footer">
<div class="modal-content">
<video src="" id="video" style="max-width:100%; max-height:100%;" controls >
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<!-- Modal Structure Release Note-->
<div id="releasenote" class="modal modal-fixed-footer">
<div class="modal-content">
<h3>TheDesk</h3>
<a href="https://thedesk.top" target="_blank">HP</a><br>
<a href="https://github.com/cutls/TheDesk" target="_blank">GitHub</a><br><br>
<div id="release-Mio_15-7-0" style="display:none">
<h5>Release Note Mio (15.7.0)</h5>
<ul>
<li>公開範囲情報の記録がインスタンスごとに(これにより一度記録がリセットされます。)</li>
<li>インスタンスのユーザー設定に従った公開範囲指定(アカウント設定より情報更新をしてください。)</li>
<li>インスタンスカラーを設定できるように(アカウント設定から)</li>
<li>スクリーンショット(魚拓)機能の高速化</li>
<li>Integrated TLのバグ修正</li>
<li>キーボードショートカットのバグ修正</li>
<li>コピペのバグ改善(ただし、ワンクリックコピーで複数の絵文字があるトゥートをコピーするとバグが発生します)</li>
<li>CWのバグ改善</li>
<li><b>DTP鯖(dtp-mstdn.jp)とtheboss.techをサポート</b>タグ付きトゥート時、デフォルトタグがないとき確認ダイアログが表示されます。</li>
</ul>
</div>
<br><br>
TheDeskはオープンソース・ソフトウェアです。<br>
皆様のあたたかい支援のもとで製作されています。<br>
<h5>TheDesk自己主張ステッカー(5cm四方・透明)</h5>
<img src="./img/sticker.png" width="100">
<a href="https://cutls.booth.pm" target="_blank">購入</a><br>
<h5>その他</h5>
<a href="https://enty.jp/Cutls" target="_blank">Entyで支援</a><br>
<a href="https://www.amazon.co.jp/registry/wishlist/2TV35ZHHJPDSB" target="_blank">Amazonほしいものリスト</a><br>
<a href="mailto:mstdn@thedesk.top" target="_blank">mstdn@thedesk.top</a>にAmazonギフトカードを送る<br>
<a href="https://osushi.love/Cutls_P" target="_blank">Osushi.love</a>で寿司を贈る<br>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
<!--PiP-->
<div id="pip" class="hide pip-bottom pip-left">
<i class="material-icons pip-horiz pointer" onclick="pipHoriz()">chevron_right</i> 
<i class="material-icons pip-vert pointer" onclick="pipVert()">expand_less</i> 
<i class="material-icons pointer" onclick="endPip()">close</i>
<div id="pip-content">
</div>
</div>
<!--左下メッセージ-->
<div id="message">
</div>
<!--Radio Happy(Yui) Taku Inoue-->
<audio src="" id="radio"></audio>
<!--JS-->
<script src="https://twemoji.maxcdn.com/2/twemoji.min.js?2.7"></script>
<script type="text/javascript" src="./js/common/about.js"></script>
<script type="text/javascript" src="./js/tl/parse.js"></script>
<script type="text/javascript" src="./js/ui/scroll.js"></script>
<script type="text/javascript" src="./js/tl/tl.js"></script>
<script type="text/javascript" src="./js/tl/card.js"></script>
<script type="text/javascript" src="./js/tl/date.js"></script>
<script type="text/javascript" src="./js/tl/notification.js"></script>
<script type="text/javascript" src="./js/tl/datails.js"></script>
<script type="text/javascript" src="./js/tl/mix.js"></script>
<script type="text/javascript" src="./js/tl/src.js"></script>
<script type="text/javascript" src="./js/tl/filter.js"></script>
<script type="text/javascript" src="./js/tl/tag.js"></script>
<script type="text/javascript" src="./js/tl/list.js"></script>
<script type="text/javascript" src="./js/ui/post-box.js"></script>
<script type="text/javascript" src="./js/ui/layout.js"></script>
<script type="text/javascript" src="./js/login/instance.js"></script>
<script type="text/javascript" src="./js/login/login.js"></script>
<script type="text/javascript" src="./js/ui/img.js"></script>
<script type="text/javascript" src="./js/ui/theme.js"></script>
<script type="text/javascript" src="./js/ui/pip.js"></script>
<script type="text/javascript" src="./js/ui/sort.js"></script>
<script type="text/javascript" src="./js/ui/spotify.js"></script>
<script type="text/javascript" src="./js/post/post.js"></script>
<script type="text/javascript" src="./js/post/use-txtbox.js"></script>
<script type="text/javascript" src="./js/post/secure.js"></script>
<script type="text/javascript" src="./js/post/img.js"></script>
<script type="text/javascript" src="./js/post/status.js"></script>
<script type="text/javascript" src="./js/post/emoji.js"></script>
<script type="text/javascript" src="./js/post/suggest.js"></script>
<script type="text/javascript" src="./js/post/bb-md.js"></script>
<script type="text/javascript" src="./js/userdata/showOnTL.js"></script>
<script type="text/javascript" src="./js/userdata/his-data.js"></script>
<script type="text/javascript" src="./js/userdata/prof-edit.js"></script>
<script type="text/javascript" src="./js/emoji/emojipack.js"></script>
<script type="text/javascript" src="./js/emoji/default-emoji.js"></script>
<script type="text/javascript" src="./js/platform/end.js"></script>