thedesk/app/index.html
2018-04-01 06:00:27 +09:00

758 lines
35 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.

This file contains Unicode characters that might be confused with other characters. 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/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='./css/twemoji-awesome.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>
//必ずアプデ時のremove instance消して
var ver="Mizuki (ver.3)";
//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="home" data-trans="home">ホーム</option>
<option value="pub" data-trans="public">連合</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"></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="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 id="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="スーパーリロード" 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">
<!--トゥートボックス-->
<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>
<br>
<a id="clear" class="setting nex waves-effect">
<i class="material-icons nex mize" title="トゥートボックスのクリア(Ctrl+Shit+C)" data-trans-title="post_box_clear">clear</i>
</a>
<a onclick="zoomBox()" class="setting nex waves-effect">
<i class="material-icons nex mize" title="ボックスの拡大・縮小(E)" data-trans-title="post_box_zoom">zoom_out_map</i>
</a>
<a onclick="Rtoggle()" class="setting nex mize waves-effect" id="radio-btn">
<i class="material-icons nex" title="Spotify NowPlaying/Radio(Select/Pause)">play_circle_outline</i>
</a>
<div id="waveform">
</div>
<span id="radio-sta" class="radio"></span>
<div id="radio-view" class="hide radio mize">
<a onclick="nowplaying()" class="pointer" title="Ctrl+Shift+N"><i class="fa fa-spotify"></i>NowPlaying</a>
<span class="cbadge pointer waves-effect" onclick="Rplay('https://listen.moe/stream','Listen.moe')" data-name="Listen.moe">Listen.moe</span>
<span class="cbadge pointer waves-effect" onclick="Rplay('http://itori.animenfo.com:443/;','AnimeNfo Radio')" data-name="AnimeNfo Radio">AnimeNfo Radio</span>
<span class="cbadge pointer waves-effect" onclick="Rplay('http://hyades.shoutca.st:8043/stream','LoFi hip hop Radio')" data-name="LoFi hip hop Radio">LoFi hip hop Radio</span>
<span class="cbadge pointer waves-effect" onclick="Rplay('http://89.16.185.174:8004/stream','Linn Classical')" data-name="Linn Classical">Linn Classical</span>
<span class="cbadge pointer waves-effect" onclick="Rplay('http://89.16.185.174:8000/stream','Linn Jazz')" data-name="Linn Jazz">Linn Jazz</span>
<span class="cbadge pointer waves-effect" onclick="Rplay('http://edge-ads-01-cr.sharp-stream.com/jazzfmmobile.aac','Jazz FM')" data-name="Jazz FM">Jazz FM</span>
<span class="cbadge pointer waves-effect" onclick="Rplay('http://91.121.59.45:10024/stream','canal-jazz.eu')" data-name="canal-jazz.eu">canal-jazz.eu</span>
<span class="cbadge pointer waves-effect" onclick="Ryourself()">Others</span>
</div>
<div id="radio-input" class="hide radio mize">
<input type="url" id="radio-url" placeholder="URL" style="width:100px">
<button class="btn waves-effect" onclick="Rinput()">Play</button>
<button class="btn waves-effect" onclick="Rselect()">Presets</button>
</div>
<div class="row" style="margin-bottom:0;">
<span class="sml gray mize" data-trans="post_box_dd">画面内どこでもドラッグ・アンド・ドロップできます。</span>
<span class="mize">
<br>アカウント選択
</span>
<br>
</span>
<div class="input-field mize" style="float:left; width:calc(100% - 24px)">
<select id="post-acct-sel" class="acct-sel" onchange="mdCheck()"></select>
</div>
<div class="mize" style="float:left;">
<a onclick="profShow()" style="vertical-align:-2.5rem;" class="pointer">
<img src="" id="acct-sel-prof" title="選択中のプロフィール表示(Ctrl+Shift+P)" data-trans-title="post_box_prof" width="24px">
</a>
</div>
<!--Markdown-->
<div class="row" style="margin-bottom:0">
<div class="markdown mize">
<div class="col s12 more-show">
<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: 0;">
<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 more-show markdown mize" id="preview-btn">
<a onclick="preview()">Preview</a>
</span>
<span class="sml gray pointer more-show anti-markdown hide mize">
<a onclick="mdToggle()">Markdownエディタを表示</a>
</span>
<br>
<span id="suggest"></span>
</div>
<div class="col s11 mize" style="margin-bottom:5px; padding:0;">
<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 data-trans="nsfw">画像制限</span>:
<span id="nsc">なし</span>
</span>
<br>
<input type="text" id="cw-text" placeholder="警告文" class="mize">
</div>
<div class="col s1 mize" style="padding:0;">
<i class="material-icons pointer" onclick="fileselect()" title="ファイルを選択">photo_library</i>
</div>
<div class="col s3 mize">
<button class="btn waves-effect blue darken-3" style="width:100%; padding:0; margin-top:0;" id="cw" onclick="cw()" title="コンテンツワーニング(トゥートを表示する前にメッセージで隠す)(青:OFF)">CW</button>
</div>
<div class="col s3 mize">
<button class="dropdown-button btn waves-effect purple " style="width:100%; padding:0; margin-top:0;" data-activates='dropdown1' id="vis-icon">
<i class="material-icons">public</i>
</button>
<!-- 公開範囲 Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>公開範囲指定</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>
<a onclick="vis('direct')" class="disabled direct">ダイレクト(Direct)</a>
</li>
</ul>
</div>
<div class="col s3 mize">
<button class="btn waves-effect red darken-3" style="width:100%; padding:0; margin-top:0;" onclick="emoji()" title="絵文字">
<i class="material-icons">tag_faces</i>
</button>
<!--絵文字ピッカー-->
<div id="emoji" class="hide shared z-depth-4">
<span class="gray sml">インスタンスによって実装が異なります。
<i>
<a onclick="emojiGet('true')" class="pointer">絵文字更新</a>
</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>
</div>
<div class="col s3 mize">
<button class="btn waves-effect blue darken-3" style="width:100%; padding:0; margin-top:0;" onclick="nsfw()" id="nsfw" title="画像に制限を付与(青:OFF)">
<i class="material-icons">photo</i>
<i class="material-icons" id="nsi">lock_open</i>
</button>
</div>
</div>
<!--hidden area-->
<input type="hidden" id="reply">
<input type="hidden" id="media">
<!--END hidden area-->
<div class="col s12" id="toot-btn-field">
<button class="btn waves-effect indigo unmize" style="width:100%; padding:0; margin-top:10px;" onclick="post()" id="toot-post-btn">トゥート</button>
</div>
</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-after">
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">reply_all</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>これより前のLocal TL
</div>
<div class="collapsible-body toot-reset" id="toot-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="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>
<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">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">
<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>
</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" width="max-width:150px;">
<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>
<button onclick="profedit()" class="btn waves-effect indigo">適用</button>
<br>
<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>
</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">
<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>
<!--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 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/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/radio.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/reply.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/emojione.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>