JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<div class="ui-brand"> <div>Version: <<= $version>></div> </div> <div class="ui-notes"> <p>Scratch pad for names, clues, and answers. It stays here until you delete it.</p> <textarea id="stalkie-notes" maxlength="8000"><<= setup.notesText()>></textarea> </div>
<<run setup.boot()>> <<set $version to (setup.buildVersion || "V0.01")>> <<set $levels to clone(setup.levelTemplates)>> <<set $currentLevelIndex to setup.buildStartLevelIndex()>> <<set $screen to "home">> <<set $homePage to 0>> <<set $navStack to []>> <<set $currentAppId to "">> <<set $openApp to null>> <<set $draftAnswer to "">> <<set $pinAttempt to "">> <<set $justSolved to false>> <<set $solveError to "">> <<set $solveHint to "">> <<set $solveNarrow to false>> <<set $solveMonth to "">> <<set $solveDate to "">> <<set $solvePick to "">> <<set $calView to "">> <<set $calSelected to "">> <<set $photoView to null>> <<set $noteView to null>> <<set $album to "main">> <<set $weatherView to null>> <<set $fgPage to "home">> <<set $fgUser to "">> <<set $fgPost to "">> <<set $fgThread to "">> <<set $fgStory to "">> <<set $mailFolder to "inbox">> <<set $mailId to "">> <<set $mailMenu to false>> <<set $bankCardId to "">> <<set $clockTab to "clock">> <<set $msgThread to "">> <<set $msgContact to "">> <<set $callTab to "recents">> <<set $callContact to "">> <<set $callId to "">> <<set $callFavSheet to "">> <<set $waThread to "">> <<set $waContact to "">> <<set $bnbTab to "explore">> <<set $bnbTrip to "upcoming">> <<set $bnbCat to "">> <<set $setPage to "">> <<set $g48Help to false>> <<set $icTab to "camera">> <<set $icPage to "">> <<set $icStoryGroup to "">> <<set $icThread to "">> <<set $icStory to "">> <<set $icPhoto to 0>> <<set $icAlbum to "snaps">> <<set $healthTab to "heart">> <<set $gptId to "">> <<set $gptMenu to false>> <<set $fitId to "">> <<set $cupTab to "home">> <<set $cupPage to "">> <<set $cupId to "">> <<set $qrSheet to "">> <<set $qrPage to "">> <<set $qrThread to "">> <<set $mfId to "">> <<set $netView to "page">> <<set $netTab to "">> <<set $netLock to false>> <<set $netPriv to false>> <<set $ttTab to "past">> <<set $pePage to "">> <<set $peId to "">> <<set $cpPage to "">> <<set $cpId to "">> <<set $cpalPage to "">> <<set $lwPage to "">> <<set $lwId to "">> <<set $stId to "">> <<set $tlId to "">> <<set $drTab to "home">> <<set $lsPage to "">> <<set $lsId to "">> <<set $fnTab to "devices">> <<set $fnId to "">> <<set $cdPage to "">> <<set $cdId to "">> <<set $cdFile to "">> <<set $mediaView to null>> <<set $mediaIndex to 0>> <<set $cdErr to "">> <<set $cdPatErr to "">> <<set $introStep to 0>> <<set $outroStep to 0>> <<set $briefStep to 0>> <<set $briefIndex to 0>> <<set $lvResetOn to -1>> <<set $howtoStep to 0>> <<set $solvePanel to false>> <<if setup.buildKind is "test">> <<if not setup.hasAgeUnlock()>> <<set $screen to "intro-age">> <<elseif not setup.hasUnlock("intro")>> <<set $screen to "intro-chat">> <<else>> <<set $screen to "home">> <</if>> <<elseif not setup.hasAgeUnlock()>> <<set $screen to "intro-age">> <<elseif setup.hasUnlock("intro") and not setup.hasHowToHelp()>> <<set $howtoStep to 1>> <</if>>
<<goto "Display">>
<<widget "mediaThumb">> <div class="media-frame <<= setup.isVideo(_args[0]) ? 'is-video' : ''>>"> <<if setup.isVideo(_args[0])>> <<if setup.mediaPoster(_args[0])>> <img @src="setup.mediaPoster(_args[0])" alt=""> <<else>> <span class="media-fill"></span> <</if>> <span class="media-video-ico" aria-hidden="true"></span> <<else>> <img @src="setup.mediaSrc(_args[0])" alt=""> <</if>> </div> <</widget>> <<widget "mediaFull">> <<if setup.isVideo(_args[0])>> <video class="media-player <<= _args[1] || ''>>" @src="setup.mediaSrc(_args[0])" @data-poster="setup.mediaPoster(_args[0])" playsinline webkit-playsinline loop></video> <<else>> <img @class="_args[1] || ''" @src="setup.mediaSrc(_args[0])" alt=""> <</if>> <</widget>> <<widget "mediaStamp">> <<if _args[0] and (_args[0].date or _args[0].time)>> <div class="photo-stamp"> <<if _args[0].date>><div class="photo-date"><<= setup.dayChip(_args[0].date)>></div><</if>> <<if _args[0].time>><div class="photo-time"><<= _args[0].time>></div><</if>> </div> <</if>> <</widget>> <<widget "galleryNav">> <<set _g to setup.galleryState()>> <<set _gix to Number(_g.index) || 0>> <<set _glen to (_g.list ? _g.list.length : 0)>> <<set _glast to _glen - 1>> <<if _glast lt 0>><<set _glast to 0>><</if>> <<if _glen gt 1>> <button type="button" @class="'gallery-arrow prev' + (_gix lte 0 ? ' is-off' : '')" data-action="gallery-step" data-arg="-1" aria-label="Previous">‹</button> <button type="button" @class="'gallery-arrow next' + (_gix gte _glast ? ' is-off' : '')" data-action="gallery-step" data-arg="1" aria-label="Next">›</button> <</if>> <</widget>> <<widget "storyNav">> <<set _sn to setup.storyIndex()>> <button type="button" @class="'gallery-arrow story-arrow prev' + (_sn.index lte 0 ? ' is-off' : '')" data-action="story-step" data-arg="-1" aria-label="Previous">‹</button> <button type="button" @class="'gallery-arrow story-arrow next' + (_sn.index gte _sn.last ? ' is-off' : '')" data-action="story-step" data-arg="1" aria-label="Next">›</button> <</widget>> <<widget "storyBars">> <<set _sbPack to _args[0] || setup.storyPack()>> <<set _sbTotal to Math.max(1, Number(_sbPack.total) || 1)>> <<set _sbOn to Math.max(0, Number(_sbPack.index) || 0)>> <<if _sbOn gte _sbTotal>><<set _sbOn to _sbTotal - 1>><</if>> <<nobr>> <<for _sbI to 0; _sbI lt _sbTotal; _sbI++>> <<if _sbI lt _sbOn>><span class="is-done"><i></i></span> <<elseif _sbI eq _sbOn>><span class="is-on"><i></i></span> <<else>><span><i></i></span> <</if>> <</for>> <</nobr>> <</widget>> <<widget "fgCarousel">> <<set _fp to _args[0] || {}>> <<set _fimgs to setup.fgPostImages(_fp)>> <<set _ffull to _args[1] is "full">> <<set _fcur to _fimgs.length ? _fimgs[0] : setup.asMedia("")>> <div class="fg-carousel" @data-post="_fp.id" data-index="0" @data-full="_ffull ? '1' : '0'"> <<if _ffull>> <div class="fg-carousel-shot"><<mediaFull _fcur>></div> <<else>> <button type="button" class="fg-carousel-shot" data-action="fg-post" @data-arg="_fp.id"><<mediaThumb _fcur>></button> <</if>> </div> <</widget>> <<widget "personAva">> <<set _ava to _args[0] || {}>> <span @class="_args[1] || 'msg-ava'"> <<if _ava.pic>> <img @src="setup.personSrc(_ava)" alt=""> <<else>> <<= setup.msgInitials(_ava.name)>> <</if>> </span> <</widget>> <<widget "chatBody">> <<set _cm to _args[0] || {}>> <<set _cimgs to setup.chatImages(_cm)>> <<set _ccap to setup.chatCaption(_cm)>> <<set _cdel to setup.chatShowDeleted(_cm, _args[1])>> <<if _cimgs.length>> <div class="chat-shots"> <<for _cimg range _cimgs>> <button type="button" @class="'chat-shot' + (_cdel ? ' is-deleted' : '')" data-action="open-chat-media" @data-arg="setup.chatMediaArg(_cimg, _cdel)"> <<mediaThumb setup.asMedia(_cimg)>> <<if _cdel>> <span class="chat-shot-banner">Deleted</span> <</if>> </button> <</for>> </div> <</if>> <<if _ccap>> <div class="chat-cap"><<= _ccap>></div> <</if>> <</widget>>
<div id="stage" @style="setup.stageBgStyle()"> <div class="phone-fit"> <div class="phone" id="phone"> <div class="hud"> <<if setup.inLevelHud()>> <div class="hud-name"><<= setup.level().name>></div> <div class="hud-progress">Progress <<= Number(setup.level().progress || 0)>>/<<= setup.level().totalTasks || 0>></div> <<else>> <div class="hud-name hud-game">Phone Detective</div> <</if>> </div> <div class="phone-screen"> <<switch $screen>> <<case "intro-age">><<include "ScreenIntroAge">> <<case "intro-chat">><<include "ScreenStoryChat">> <<case "outro-chat">><<include "ScreenStoryChat">> <<case "brief-chat">><<include "ScreenStoryChat">> <<case "patreon">><<include "ScreenPatreon">> <<case "levels">><<include "ScreenLevels">> <<case "achievements">><<include "ScreenAchievements">> <<case "home">><<include "ScreenHome">> <<case "solve">><<include "ScreenSolve">> <<case "app">><<include "ScreenApp">> <<case "photo-full">><<include "ScreenPhotoFull">> <<case "media-full">><<include "ScreenMediaFull">> <<case "chat-media">><<include "ScreenChatMedia">> <<case "photo-pin">><<include "ScreenPhotoPin">> <<case "photo-album">><<include "ScreenPhotoAlbum">> <<case "note-full">><<include "ScreenNoteFull">> <<case "weather-detail">><<include "ScreenWeatherDetail">> <<default>> <div class="app-page">Unknown screen.</div> <</switch>> </div> <<run setup.startHowToHelpIfNeeded()>> <<if $howtoStep gt 0>> <<include "HowToHelp">> <</if>> </div> </div> <<if setup.solveDockShown()>><div class="solve-dock" id="solve-dock"><<include "ScreenSolve">></div><</if>> </div>
<<set _hs to setup.howtoSlide()>> <div class="solve-modal howto-modal"> <div class="solve-modal-card"> <b><<= _hs.title>></b> <p><<= _hs.body>></p> <button type="button" class="solve-modal-ok" data-action="howto-next"><<= _hs.button>></button> <span class="howto-count"><<= $howtoStep>>/<<= setup.howtoSlides().length>></span> </div> </div>
<div class="app-page intro-age"> <div class="intro-age-box"> <div class="intro-age-shot"> <img @src="setup.mediaPath('images/backgrounds/adultwarning.webp')" alt=""> </div> <div class="intro-age-copy"> <b>18+ Adult content</b> <p>This game contains adult themes, sexual content, and strong language. You must be 18 or older to continue.</p> <p>All characters are fictional works of art. If they resemble a real person, it's a coincidence.</p> <button type="button" class="intro-age-btn" data-action="intro-ok">I am 18</button> </div> </div> </div>
<<set _chat to setup.storyChatView()>> <<set _msgs to _chat.shown>> <<set _ix to setup.indexList(_msgs)>> <div class="app-page msg-page msg-chat-page intro-chat-page"> <div class="msg-head msg-chat-head"> <span></span> <div class="msg-person"> <<personAva _chat "msg-ava sm">> <span class="msg-person-name"><<= _chat.name>></span> </div> <span></span> </div> <div class="msg-chat" id="story-chat"> <<for _i range _ix>> <<set _msg to _msgs[_i]>> <<if setup.isChatTransition(_msg) or _msg.type is "day">> <div class="msg-day"><<= setup.dayChip(setup.chatTransitionText(_msg))>></div> <<elseif setup.msgMine(_msg)>> <div @class="'msg-bubble mine' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg>> </div> <<else>> <div @class="'msg-bubble theirs' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg>> </div> <</if>> <</for>> </div> </div>
<<set _list to setup.levelList()>> <<set _ix to setup.indexList(_list)>> <div class="app-page lv-page"> <button type="button" class="lv-ach-btn" data-action="open-achievements" aria-label="Achievements"> <svg viewBox="0 0 64 64" aria-hidden="true"><circle cx="32" cy="32" r="30" fill="#f5c542"/><circle cx="32" cy="32" r="22" fill="#ffe082"/><circle cx="32" cy="32" r="16" fill="#d4a017"/><path d="M22 44c3.2 5 7.2 8 10 8s6.8-3 10-8" fill="#e53935"/><path d="M22 44c2 3.4 5.4 6.4 10 6.4s8-3 10-6.4" fill="#b71c1c"/></svg> </button> <div class="lv-track" id="lv-track"> <<for _i range _ix>> <<set _lv to _list[_i]>> <<set _st to setup.levelStatus(_lv)>> <<set _pr to setup.levelProgress(_lv)>> <div class="lv-slide"> <<if _pr.complete>> <button type="button" class="lv-reset" data-action="lv-reset" @data-arg="_i">Reset</button> <<else>> <span class="lv-reset-spacer"></span> <</if>> <div class="lv-pct"><<= _pr.pct>>% complete</div> <<if setup.levelClickable(_lv, _pr)>> <button type="button" class="lv-card" data-action="lv-open" @data-arg="_i"> <div class="lv-polaroid"> <div @class="setup.lvPhotoClass(_st, _pr)"> <img @src="setup.levelPic(_lv)" alt=""> <<if _pr.complete>> <div class="lv-stamp">Complete</div> <</if>> </div> <b><<= setup.levelCardName(_lv)>></b> </div> </button> <<elseif setup.levelOpensPatreon(_st)>> <button type="button" class="lv-card" data-action="lv-patreon"> <div class="lv-polaroid"> <div @class="setup.lvPhotoClass(_st, _pr)"> <img @src="setup.levelPic(_lv)" alt=""> <div class="lv-stamp"><<= setup.levelStamp(_st)>></div> </div> <b><<= setup.levelCardName(_lv)>></b> </div> </button> <<else>> <div class="lv-card lv-locked"> <div class="lv-polaroid"> <div @class="setup.lvPhotoClass(_st, _pr)"> <img @src="setup.levelPic(_lv)" alt=""> <div class="lv-stamp"><<= setup.levelStamp(_st)>></div> </div> <b><<= setup.levelCardName(_lv)>></b> </div> </div> <</if>> </div> <</for>> </div> <div class="lv-dots" id="lv-dots"></div> <<if $lvResetOn gte 0>> <div class="lv-modal"> <div class="lv-modal-card"> <p>Reset this level? Progress, unlocks, and the intro will start over.</p> <button type="button" class="lv-yes" data-action="lv-reset-yes">Yes</button> <button type="button" class="lv-no" data-action="lv-reset-no">No</button> </div> </div> <</if>> </div>
<<set _secs to setup.achSections()>> <div class="app-page ach-page"> <div class="ach-top">Achievements</div> <div class="ach-body"> <<for _sec range _secs>> <<set _got to 0>> <<set _n to _sec.achievements.length>> <<for _a range _sec.achievements>> <<if setup.achProgress(_a).done>> <<set _got to _got + 1>> <</if>> <</for>> <section @class="'ach-sec' + ($achSectionOpen === _sec.id ? ' is-open' : '')" @data-id="_sec.id"> <div class="ach-sec-head"> <div> <b><<= _sec.name>></b> <small><<= _got>> of <<= _n>> unlocked</small> </div> <button type="button" data-action="ach-view-all" @data-arg="_sec.id">View All</button> </div> <div class="ach-row"> <<for _a range _sec.achievements>> <<set _pr to setup.achProgress(_a)>> <button type="button" class="ach-tile" data-action="ach-open" @data-arg="_a.id"> <<print setup.achBadgeHtml(_a, not _pr.done)>> <span class="ach-tile-name"><<= _a.title>></span> <<if _pr.done>> <span class="ach-tile-sub"><<= setup.achLabel(_a, _pr)>></span> <<else>> <span class="ach-tile-sub"><<= setup.achLabel(_a, _pr)>></span> <span class="ach-tile-bar"><i @style="'width:' + _pr.pct + '%'"></i></span> <</if>> </button> <</for>> </div> </section> <</for>> </div> </div>
<div class="app-page pat-page"> <div class="pat-banner"> <img @src="setup.mediaPath('images/backgrounds/patreonbanner1.webp')" alt=""> </div> <div class="pat-body"> <h1>Join on Patreon</h1> <p class="pat-lead">On Patreon you get:</p> <ul class="pat-list"> <li>Polls – vote on polls that decide the game’s future</li> <li>Early Access to new levels 1-3 weeks before the public</li> <li>Exclusive cases coming soon</li> <li>Request new cases and features</li> <li>Get a shoutout in the credits list below</li> <li>A thanks for supporting the project! 💖</li> </ul> <button type="button" class="pat-join" data-action="patreon-open">Join on Patreon</button> <div class="pat-credits"> <h2>A big Thank you to these patreon members for making this game possible</h2> <<set _creds to setup.patreonCredits()>> <<if _creds.length lt 1>> <p class="pat-credits-empty">The game has just been released</p> <<else>> <ul class="pat-credits-list"> <<for _m range _creds>> <li class="pat-credit"> <img class="pat-credit-badge" @src="setup.patreonCreditBadge(_m)" alt=""> <span class="pat-credit-name"><<= _m.name>></span> <span class="pat-credit-months"><<= setup.patreonCreditMonths(_m)>></span> </li> <</for>> </ul> <</if>> </div> </div> </div>
<<set _pages to setup.homePages()>> <div class="home"> <div class="wallpaper" @style="setup.wallpaperStyle()"></div> <<if setup.canHomePrev()>> <button class="page-arrow left" type="button" data-action="home-prev">‹</button> <<else>> <button class="page-arrow left" type="button" data-action="home-prev" disabled>‹</button> <</if>> <<if setup.canHomeNext()>> <button class="page-arrow right" type="button" data-action="home-next">›</button> <<else>> <button class="page-arrow right" type="button" data-action="home-next" disabled>›</button> <</if>> <div class="home-pages-clip"> <div class="home-pages" @style="'transform:translateX(-' + ($homePage * 100) + '%)'"> <<for _page range _pages>> <div class="home-page"> <div class="app-grid"> <<for _app range _page>> <button class="app-cell" type="button" data-action="open-app" @data-arg="_app.id"> <div @class="'app-icon' + (setup.hasAppIcon(_app) ? ' has-art' : '')" @data-id="_app.id"><img @src="setup.iconSrc(_app)" alt=""></div> <div class="app-label"><<= _app.name>></div> </button> <</for>> </div> </div> <</for>> </div> </div> <div class="home-dots"> <<for _p range setup.indexList(_pages)>> <<if $homePage eq _p>> <span class="dot on"></span> <<else>> <span class="dot"></span> <</if>> <</for>> </div> <div class="dock"> <<for _pin range setup.dockItems()>> <button class="dock-cell" type="button" data-action="open-app" @data-arg="_pin.openId"> <div @class="'app-icon' + (setup.hasAppIcon(_pin) ? ' has-art' : '')" @data-id="_pin.id"><img @src="setup.iconSrc(_pin)" alt=""></div> </button> <</for>> </div> </div>
<<if ndef $solveNarrow>><<set $solveNarrow to false>><</if>> <<if ndef $solveMonth>><<set $solveMonth to "">><</if>> <<if ndef $solveDate>><<set $solveDate to "">><</if>> <<if ndef $solvePick>><<set $solvePick to "">><</if>> <<if $solveMonth is "">><<set $solveMonth to setup.solveMonthDefault()>><</if>> <<set _client to setup.client()>> <<set _slides to setup.solveSlides()>> <<set _ix to setup.indexList(_slides)>> <div class="solve"> <div class="solve-profile"> <div class="solve-avatar"> <<if _client.pic>> <img @src="setup.personSrc(_client)" alt=""> <<else>> <span><<= _client.initials || setup.msgInitials(_client.name)>></span> <</if>> </div> <div class="solve-name"><<= setup.clientFirst()>></div> </div> <<if _ix.length lt 1>> <div class="solve-card complete-card"> <div class="complete-title">This level is complete</div> <div class="complete-copy">You finished every task for <<= setup.clientFirst()>>.</div> </div> <<else>> <div class="solve-track" id="solve-track"> <<for _i range _ix>> <<set _q to _slides[_i]>> <<set _past to setup.qSolved(_q)>> <<set _live to not _past>> <div class="solve-slide" @data-current="_live ? '1' : '0'"> <div class="solve-card"> <div class="solve-qmeta"> <span>Progress <<= (_i + 1)>>/<<= setup.solveQuestions().length>></span> <<if _live>> <span class="solve-qmeta-btns"> <<if setup.questionInput(_q) is "text" and setup.questionChoices(_q).length>> <<if $solveNarrow>> <button type="button" class="solve-hint-btn" data-action="solve-narrow">Type it in</button> <<else>> <button type="button" class="solve-hint-btn" data-action="solve-narrow">Narrow it down</button> <</if>> <</if>> <<if _q.hint>> <button type="button" class="solve-hint-btn" data-action="solve-hint" @data-arg="_q.id">Hint</button> <</if>> </span> <<elseif _q.hint>> <button type="button" class="solve-hint-btn" disabled>Hint</button> <</if>> </div> <div class="solve-qtext"><<= _q.text>></div> <<set _kind to setup.questionInput(_q)>> <<if _kind is "date">> <<if _live>> <div class="solve-cal"> <div class="solve-cal-nav"> <button type="button" data-action="solve-month" data-arg="-1" aria-label="Previous month">‹</button> <span><<= setup.monthLabel($solveMonth)>></span> <button type="button" data-action="solve-month" data-arg="1" aria-label="Next month">›</button> </div> <div class="solve-cal-week"><span>S</span><span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span></div> <div class="solve-cal-grid"> <<for _cell range setup.solveMonthGrid($solveMonth)>> <button type="button" @class="setup.solveDayClass(_cell, $solveDate)" data-action="solve-date" @data-arg="_cell.iso"><<= _cell.day>></button> <</for>> </div> </div> <<else>> <div class="solve-chosen"><<= _q.given>></div> <</if>> <<elseif _kind is "yesno">> <div class="solve-choices"> <<if _live>> <button type="button" @class="setup.solveChoiceClass('yes', $solvePick)" data-action="solve-choice" data-arg="yes">Yes</button> <button type="button" @class="setup.solveChoiceClass('no', $solvePick)" data-action="solve-choice" data-arg="no">No</button> <<else>> <button type="button" @class="setup.solvePastChoiceClass('yes', _q.given)" disabled>Yes</button> <button type="button" @class="setup.solvePastChoiceClass('no', _q.given)" disabled>No</button> <</if>> </div> <<else>> <<if _live and $solveNarrow and setup.questionChoices(_q).length>> <div class="solve-choices stack"> <<for _choice range setup.questionChoices(_q)>> <<set _clabel to setup.choiceText(_choice)>> <button type="button" @class="setup.solveChoiceClass(_clabel, $solvePick)" data-action="solve-option" @data-arg="_clabel"><<= _clabel>></button> <</for>> </div> <<else>> <div class="solve-field"> <<if _live>> <textarea class="solve-input" id="solve-input" maxlength="240"><<= $draftAnswer>></textarea> <<else>> <textarea class="solve-input" maxlength="240" disabled><<= _q.given>></textarea> <</if>> </div> <</if>> <</if>> <<if _live and $solveError neq "">> <div class="solve-error"><<= $solveError>></div> <</if>> <<if _live and _kind is "yesno">> <<elseif _live>> <button class="submit-btn" type="button" data-action="submit-answer">Submit answer</button> <<elseif _kind is "yesno">> <<else>> <button class="submit-btn" type="button" disabled>Submit answer</button> <</if>> </div> </div> <</for>> </div> <</if>> <<if $solveHint>> <<set _hq to setup.solveQuestion($solveHint)>> <div class="solve-modal"> <div class="solve-modal-card"> <b>Hint</b> <p><<= (_hq && _hq.hint) || "">></p> <button type="button" class="solve-modal-ok" data-action="solve-hint-close">Got it</button> </div> </div> <</if>> </div>
<<set _app to setup.activeApp()>> <<set _kind to setup.templateKind(_app)>> <<if not _app>> <div class="app-page"> <div class="app-top"> <span></span> <div class="app-title">App</div> </div> <div class="empty-msg">This app is not in the level data.</div> </div> <<elseif _kind is "photos">> <<include "AppPhotos">> <<elseif _kind is "notes">> <<include "AppNotes">> <<elseif _kind is "calendar">> <<include "AppCalendar">> <<elseif _kind is "texts">> <<include "AppTexts">> <<elseif _kind is "weather">> <<include "AppWeather">> <<elseif _kind is "facegram">> <<include "AppFaceGram">> <<elseif _kind is "mail">> <<include "AppMail">> <<elseif _kind is "bank">> <<include "AppBank">> <<elseif _kind is "clock">> <<include "AppClock">> <<elseif _kind is "calc">> <<include "AppCalc">> <<elseif _kind is "phone">> <<include "AppPhone">> <<elseif _kind is "whatmsg">> <<include "AppWhatmsg">> <<elseif _kind is "nextbnb">> <<include "AppNextbnb">> <<elseif _kind is "settings">> <<include "AppSettings">> <<elseif _kind is "g2048">> <<include "App2048">> <<elseif _kind is "snake">> <<include "AppSnake">> <<elseif _kind is "imgchat">> <<include "AppImgchat">> <<elseif _kind is "health">> <<include "AppHealth">> <<elseif _kind is "talkgpt">> <<include "AppTalkgpt">> <<elseif _kind is "fitness">> <<include "AppFitness">> <<elseif _kind is "brick">> <<include "AppBrick">> <<elseif _kind is "blockblast">> <<include "AppBlockblast">> <<elseif _kind is "cupid">> <<include "AppCupid">> <<elseif _kind is "qrscan">> <<include "AppQrscan">> <<elseif _kind is "musicfy">> <<include "AppMusicfy">> <<elseif _kind is "internet">> <<include "AppInternet">> <<elseif _kind is "traintrip">> <<include "AppTraintrip">> <<elseif _kind is "photoedit">> <<include "AppPhotoedit">> <<elseif _kind is "cloudphotos">> <<include "AppCloudphotos">> <<elseif _kind is "cashpal">> <<include "AppCashpal">> <<elseif _kind is "linkwork">> <<include "AppLinkwork">> <<elseif _kind is "stride">> <<include "AppStride">> <<elseif _kind is "translate">> <<include "AppTranslate">> <<elseif _kind is "driver">> <<include "AppDriver">> <<elseif _kind is "lessons">> <<include "AppLessons">> <<elseif _kind is "finder">> <<include "AppFinder">> <<elseif _kind is "clouddrive">> <<include "AppDrive">> <<else>> <<include "AppGeneric">> <</if>>
<<set _app to setup.activeApp()>> <<set _photos to setup.albumPhotos("main")>> <div class="app-page photos-page"> <div class="app-top"> <span></span> <div class="app-title"><<= _app.name>></div> </div> <div class="photos-scroll"> <div class="photo-grid"> <<for _i range setup.indexList(_photos)>> <button class="photo-thumb" type="button" data-action="open-photo" @data-arg="'main,' + _i"> <<mediaThumb _photos[_i]>> </button> <</for>> </div> </div> <div class="photo-utils"> <button class="util-row" type="button" data-action="open-hidden"> <span class="util-left"><span class="util-ico">👁</span> Hidden</span> <span class="util-right"><span class="util-lock">🔒</span> ›</span> </button> <button class="util-row" type="button" data-action="open-deleted"> <span class="util-left"><span class="util-ico">🗑</span> Recently Deleted</span> <span class="util-right">›</span> </button> </div> </div>
<<set _list to setup.albumPhotos($album)>> <<set _p to _list[$photoView]>> <div class="photo-full"> <div class="photo-full-img"> <<if _p>> <<mediaFull _p>> <<mediaStamp _p>> <<else>> <div class="empty-msg">Photo missing.</div> <</if>> </div> <<galleryNav>> </div>
<<set _p to $mediaView>> <div class="photo-full"> <div class="photo-full-img"> <<if _p>> <<mediaFull _p>> <<else>> <div class="empty-msg">Photo missing.</div> <</if>> </div> <<galleryNav>> </div>
<<set _p to $mediaView>> <div class="chat-media-full" data-action="back"> <<if _p>> <div @class="'chat-media-shot' + (_p.deleted ? ' is-deleted' : '')" data-action="chat-media-hold"> <<mediaFull _p>> <<if _p.deleted>> <span class="chat-shot-banner">Deleted</span> <</if>> </div> <<else>> <div class="empty-msg">Photo missing.</div> <</if>> </div>
<div class="app-page pin-page"> <div class="app-top"> <span></span> <div class="app-title"></div> </div> <div class="pin-wrap"> <div class="pin-title">Hidden</div> <div class="pin-sub">Enter your passcode</div> <div class="pin-dots"> <<for _i range setup.indexList(6)>> <<if $pinAttempt.length gt _i>> <span class="pin-dot filled"></span> <<else>> <span class="pin-dot"></span> <</if>> <</for>> </div> <div class="keypad"> <button class="key" type="button" data-action="pin-digit" data-arg="1">1</button> <button class="key" type="button" data-action="pin-digit" data-arg="2">2</button> <button class="key" type="button" data-action="pin-digit" data-arg="3">3</button> <button class="key" type="button" data-action="pin-digit" data-arg="4">4</button> <button class="key" type="button" data-action="pin-digit" data-arg="5">5</button> <button class="key" type="button" data-action="pin-digit" data-arg="6">6</button> <button class="key" type="button" data-action="pin-digit" data-arg="7">7</button> <button class="key" type="button" data-action="pin-digit" data-arg="8">8</button> <button class="key" type="button" data-action="pin-digit" data-arg="9">9</button> <div></div> <button class="key" type="button" data-action="pin-digit" data-arg="0">0</button> <button class="key key-del" type="button" data-action="pin-del">⌫</button> </div> </div> </div>
<<set _list to setup.albumPhotos($album)>> <div class="app-page photos-page album-page"> <div class="app-top"> <span></span> <div class="app-title"><<= setup.albumTitle($album)>></div> </div> <div class="photos-scroll"> <<if _list.length is 0>> <div class="empty-msg">This folder is empty.</div> <<else>> <div class="photo-grid"> <<for _i range setup.indexList(_list)>> <button class="photo-thumb" type="button" data-action="open-photo" @data-arg="$album + ',' + _i"> <<mediaThumb _list[_i]>> </button> <</for>> </div> <</if>> </div> </div>
<<set _app to setup.activeApp()>> <<set _notes to setup.noteList(_app)>> <div class="app-page notes-page"> <div class="app-top"> <span></span> <div class="app-title"><<= _app.name>></div> </div> <div class="notes-list"> <<set _i to 0>> <<for _note range _notes>> <button class="note-card" type="button" data-action="open-note" @data-arg="String(_i)"> <span class="note-title"><<= _note.title>></span> <span class="note-preview"><<= setup.notePreview(_note.body)>></span> <<if _note.editedAt>> <span class="note-ago"><<= setup.timeAgo(_note.editedAt)>></span> <</if>> </button> <<set _i to _i + 1>> <</for>> </div> </div>
<<if $msgContact>> <<include "MsgContact">> <<elseif $msgThread>> <<include "MsgThread">> <<else>> <<include "MsgList">> <</if>>
<<set _app to setup.activeApp()>> <<set _threads to setup.msgThreads()>> <div class="app-page msg-page"> <div class="msg-head"> <span></span> <div class="msg-title">Messages</div> <span></span> </div> <div class="msg-list"> <<for _th range _threads>> <<set _prev to setup.msgPreview(_th)>> <button class="msg-row" type="button" data-action="msg-open" @data-arg="_th.id"> <<personAva _th>> <span class="msg-row-main"> <span class="msg-row-top"> <b><<= _th.name>></b> <small><<= _th.when>></small> </span> <span class="msg-row-prev"> <<if _prev.you>><span class="msg-ticks"></span><</if>> <span><<= _prev.text>></span> </span> </span> </button> <</for>> </div> </div>
<<set _th to setup.msgThread($msgThread)>> <div class="app-page msg-page msg-chat-page"> <div class="msg-head msg-chat-head"> <span></span> <button class="msg-person" type="button" data-action="msg-contact" @data-arg="_th.id"> <<personAva _th "msg-ava sm">> <span class="msg-person-name"><<= _th.name>></span> </button> <span></span> </div> <div class="msg-chat" id="msg-chat"> <<for _msg range _th.messages>> <<if _msg.type is "day">> <div class="msg-day"><<= setup.dayChip(_msg.text)>></div> <<elseif setup.msgMine(_msg)>> <div @class="'msg-bubble mine' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg "deleted">> <<if _msg.time>> <small><<= _msg.time>> <span class="msg-ticks light"></span></small> <</if>> </div> <<else>> <div @class="'msg-bubble theirs' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg "deleted">> <<if _msg.time>><small><<= _msg.time>></small><</if>> </div> <</if>> <</for>> </div> <div class="msg-composer"> <button class="msg-plus" type="button" data-action="flash" aria-label="Add"></button> <div class="msg-field">Message...</div> <button class="msg-send" type="button" data-action="flash" aria-label="Send"></button> </div> </div>
<<set _th to setup.msgThread($msgContact)>> <div class="app-page msg-page msg-contact-page"> <div class="msg-head msg-contact-head"> <span></span> <span></span> <span></span> </div> <div class="msg-contact-scroll"> <<personAva _th "msg-ava xl">> <div class="msg-contact-name"><<= _th.name>></div> <div class="msg-actions"> <button type="button" data-action="flash" data-tone="message"><span class="msg-act-ico chat"></span><small>Message</small></button> <button type="button" data-action="flash" data-tone="call"><span class="msg-act-ico handset"></span><small>Call</small></button> <button type="button" data-action="flash" data-tone="video"><span class="msg-act-ico video"></span><small>Video</small></button> <button type="button" data-action="flash" data-tone="mail"><span class="msg-act-ico mail"></span><small>Mail</small></button> </div> <div class="msg-info-card"> <div class="msg-info-row"> <span class="msg-info-ico handset"></span> <span> <small>Phone</small> <b><<= _th.phone || "">></b> </span> </div> <div class="msg-info-row"> <span class="msg-info-ico star"></span> <span> <small>Favorite</small> <<if _th.favorite>> <b>Yes</b> <<else>> <b>No</b> <</if>> </span> </div> </div> </div> </div>
<<set _app to setup.activeApp()>> <<set _notes to setup.noteList(_app)>> <<set _note to _notes[Number($noteView)]>> <div class="app-page note-full"> <div class="app-top note-full-top"> <span></span> <div class="app-title note-full-title"><<= _note.title>></div> </div> <div class="note-body"> <<for _line range setup.noteLines(_note.body)>> <span class="note-line"><<= _line>></span><br> <</for>> </div> </div>
<<set _app to setup.activeApp()>> <<set _view to setup.genericView(_app)>> <div class="app-page"> <div class="app-top"> <span></span> <div class="app-title"><<= _app.name>></div> </div> <<if _view.mode is "body">> <div class="note-body"><<= _view.body>></div> <<elseif _view.mode is "list">> <div class="notes-list"> <<for _item range _view.items>> <div class="note-card"> <div class="note-preview"><<= _item>></div> </div> <</for>> </div> <<else>> <div class="generic-app"> <div @class="'app-icon lg' + (setup.hasAppIcon(_app) ? ' has-art' : '')" @data-id="_app.id"><img @src="setup.iconSrc(_app)" alt=""></div> <div class="empty-msg">Nothing to display.</div> </div> <</if>> </div>
<<set _app to setup.activeApp()>> <<set _cal to setup.calData(_app)>> <<if not $calView>><<run setup.openCalendar()>><</if>> <<set _grid to setup.calendarGrid($calView)>> <<set _events to setup.eventsOn($calSelected)>> <div class="app-page cal-page"> <div class="app-top"> <span></span> <div class="app-title"><<= _app.name>></div> </div> <div class="cal-nav"> <button class="cal-arrow" type="button" data-action="cal-prev">‹</button> <div class="cal-month"><<= setup.monthLabel($calView)>></div> <button class="cal-arrow" type="button" data-action="cal-next">›</button> </div> <div class="cal-weekdays"> <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span> </div> <div class="cal-grid"> <<for _cell range _grid>> <button @class="setup.calDayClass(_cell, _cal.currentDate, $calSelected)" type="button" data-action="cal-select" @data-arg="_cell.iso"> <span class="day-num"><<= _cell.day>></span> <span class="day-dots"> <<if _cell.dots gte 1>><i></i><</if>> <<if _cell.dots gte 2>><i></i><</if>> <<if _cell.dots gte 3>><i></i><</if>> </span> </button> <</for>> </div> <div class="cal-events"> <<for _ev range _events>> <div class="event-card" @data-color="_ev.color || 'orange'"> <span class="event-bar"></span> <div class="event-body"> <div class="event-title"><<= _ev.title>></div> <div class="event-meta"><<= _ev.time>></div> <div class="event-meta"><<= _ev.location>></div> </div> </div> <</for>> </div> </div>
<<set _app to setup.activeApp()>> <<set _places to setup.weatherPlaces(_app)>> <div class="app-page weather-page"> <div class="app-top"> <span></span> <div class="app-title"><<= _app.name>></div> </div> <div class="weather-list"> <<set _i to 0>> <<for _place range _places>> <button class="wx-card" type="button" data-action="open-weather" @data-arg="String(_i)" @data-sky="_place.sky"> <span class="wx-emoji"><<= setup.weatherEmoji(_place.sky)>></span> <span class="wx-copy"> <span class="wx-name"><<= _place.name>></span> <span class="wx-cond"><<= _place.condition>></span> </span> <span class="wx-temp"><<= _place.temp>>°</span> </button> <<set _i to _i + 1>> <</for>> </div> </div>
<<set _app to setup.activeApp()>> <<set _place to setup.weatherPlaces(_app)[Number($weatherView)]>> <<set _days to setup.weatherWeek(_place)>> <div class="app-page wx-detail" @data-sky="_place.sky"> <div class="app-top wx-detail-top"> <span></span> <div class="app-title"></div> </div> <div class="wx-detail-hero"> <div class="wx-detail-emoji"><<= setup.weatherEmoji(_place.sky)>></div> <div class="wx-detail-temp"><<= _place.temp>>°</div> <div class="wx-detail-cond"><<= _place.condition>></div> <div class="wx-detail-loc"><<= _place.name>></div> </div> <div class="wx-week"> <<for _day range _days>> <div class="wx-day"> <div class="wx-day-name"><<= _day.label>></div> <div class="wx-day-emoji"><<= setup.weatherEmoji(_day.sky)>></div> <div class="wx-day-temp"><<= _day.temp>>°</div> </div> <</for>> </div> </div>
<<if $fgPage is "dms">><<include "FgDms">> <<elseif $fgPage is "thread">><<include "FgThread">> <<elseif $fgPage is "explore">><<include "FgExplore">> <<elseif $fgPage is "new">><<include "FgNewPost">> <<elseif $fgPage is "profile">><<include "FgProfile">> <<elseif $fgPage is "post">><<include "FgPost">> <<elseif $fgPage is "story">><<include "FgStory">> <<else>><<include "FgHome">> <</if>>
<div class="fg-tabs"> <<if $fgPage is "home">> <button class="fg-tab on" type="button" data-action="fg-tab" data-arg="home"><span class="fg-ico house"></span></button> <<else>> <button class="fg-tab" type="button" data-action="fg-tab" data-arg="home"><span class="fg-ico house"></span></button> <</if>> <<if $fgPage is "explore">> <button class="fg-tab on" type="button" data-action="fg-tab" data-arg="explore"><span class="fg-ico search"></span></button> <<else>> <button class="fg-tab" type="button" data-action="fg-tab" data-arg="explore"><span class="fg-ico search"></span></button> <</if>> <<if $fgPage is "new">> <button class="fg-tab add on" type="button" data-action="fg-tab" data-arg="new"><span class="fg-ico plus"></span></button> <<else>> <button class="fg-tab add" type="button" data-action="fg-tab" data-arg="new"><span class="fg-ico plus"></span></button> <</if>> <<if $fgPage is "profile">> <button class="fg-tab on" type="button" data-action="fg-tab" data-arg="profile"><span class="fg-ico profile"></span></button> <<else>> <button class="fg-tab" type="button" data-action="fg-tab" data-arg="profile"><span class="fg-ico profile"></span></button> <</if>> </div>
<<set _app to setup.activeApp()>> <<set _stories to setup.fgStoryGroups()>> <<set _feed to setup.fgFeed()>> <div class="app-page fg-page"> <div class="fg-head"> <span></span> <div class="fg-logo"><<= _app.name>></div> <button class="fg-head-btn" type="button" data-action="fg-dms" aria-label="Messages"><span class="fg-ico plane"></span></button> </div> <div class="fg-scroll"> <div class="fg-stories"> <<for _g range _stories>> <button class="fg-story-dot" type="button" data-action="fg-story" @data-arg="_g.openId"> <span class="fg-ring"><img @src="setup.personSrc(_g)" alt=""></span> <<if setup.fgIsMe(_g.user)>> <span class="fg-story-plus">＋</span> <</if>> <span class="fg-story-name"><<= _g.name>></span> </button> <</for>> </div> <<for _post range _feed>> <<set _u to setup.fgUser(_post.user)>> <div class="fg-post"> <div class="fg-post-top"> <button class="fg-person" type="button" data-action="fg-profile" @data-arg="_post.user"> <img @src="setup.personSrc(_u)" alt=""> <span> <b><<= _u.name>></b> <<if _post.location>><small><<= _post.location>></small><</if>> </span> </button> <button class="fg-more" type="button" data-action="flash">⋮</button> </div> <div class="fg-post-img"> <<fgCarousel _post>> </div> <div class="fg-actions"> <button type="button" class="fg-like" data-action="flash"><span class="fg-ico heart"></span><span class="fg-like-meta"><span><<= setup.fgCount(_post.likes)>></span><<if _post.date>><small><<= setup.dayChip(_post.date)>></small><</if>></span></button> <button type="button" data-action="flash"><span class="fg-ico comment"></span> <<= setup.fgCount(setup.fgCommentCount(_post))>></button> <button type="button" data-action="flash"><span class="fg-ico plane"></span></button> <button class="fg-save" type="button" data-action="flash"><span class="fg-ico bookmark"></span></button> </div> <div class="fg-caption"><b><<= _u.name>></b> <<= _post.caption>></div> </div> <</for>> </div> <<include "FgTabBar">> </div>
<<set _pack to setup.storyPack()>> <<set _st to _pack.item>> <<set _u to setup.fgUser(_st.user || _pack.user)>> <div class="fg-story-full"> <div class="fg-story-bars"><<storyBars _pack>></div> <div class="fg-story-top"> <button class="fg-person light" type="button" data-action="fg-profile" @data-arg="_st.user"> <img @src="setup.personSrc(_pack.pic || _u)" alt=""> <span><b><<= _u.handle || _pack.name>></b> <small><<= _st.time>></small></span> </button> <button class="fg-more light" type="button" data-action="flash">⋮</button> </div> <<if setup.isVideo(setup.fgMedia(_st))>> <<mediaFull setup.fgMedia(_st) "fg-story-bg story-player">> <<else>> <img class="fg-story-bg" @src="setup.fgSrc(_st.image || _st.preview)" alt=""> <</if>> <button class="story-hit" type="button" data-action="story-pause" aria-label="Pause"></button> <div class="story-pause-ico"></div> <<storyNav>> <div class="fg-story-bottom"> <button class="fg-send" type="button" data-action="flash" disabled>Send a message</button> <button type="button" data-action="flash"><span class="fg-ico heart"></span></button> <button type="button" data-action="flash"><span class="fg-ico plane"></span></button> </div> </div>
<<set _threads to setup.fgThreads()>> <div class="app-page fg-page fg-dms"> <div class="fg-head"> <span></span> <div class="fg-logo left">Messages</div> <div class="fg-head-right"> <button class="fg-head-btn" type="button" data-action="flash">⋯</button> <button class="fg-head-btn" type="button" data-action="flash">✎</button> </div> </div> <div class="fg-scroll"> <<for _th range _threads>> <<set _u to setup.fgUser(_th.user)>> <button class="fg-dm-row" type="button" data-action="fg-thread" @data-arg="_th.id"> <img @src="setup.personSrc(_u)" alt=""> <span class="fg-dm-copy"> <b><<= _u.name>></b> <small><<= setup.fgThreadPreview(_th)>></small> </span> <span class="fg-dm-time"><<= _th.time>></span> </button> <</for>> </div> </div>
<<set _th to setup.fgThread($fgThread)>> <<set _u to setup.fgUser(_th.user)>> <div class="app-page fg-page fg-thread"> <div class="fg-head"> <span></span> <button class="fg-person" type="button" data-action="fg-profile" @data-arg="_th.user"> <img @src="setup.personSrc(_u)" alt=""> <span><b><<= _u.name>></b></span> </button> </div> <div class="fg-thread-scroll"> <<for _msg range _th.messages>> <<if _msg.type is "day">> <div class="fg-day"><<= setup.dayChip(_msg.text)>></div> <<elseif setup.fgMsgMine(_msg)>> <div @class="'fg-bubble mine' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg>> <<if _msg.time>><small><<= _msg.time>></small><</if>> </div> <<else>> <div @class="'fg-bubble theirs' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg>> <<if _msg.time>><small><<= _msg.time>></small><</if>> </div> <</if>> <</for>> </div> <div class="fg-composer"> <button type="button" data-action="flash"><span class="fg-ico plus"></span></button> <input type="text" value="Message..." disabled> <button type="button" data-action="flash" disabled><span class="fg-ico plane"></span></button> </div> </div>
<<set _explore to setup.fgExplore()>> <div class="app-page fg-page"> <div class="fg-head"> <span></span> <div class="fg-search" disabled>Search</div> </div> <div class="fg-scroll"> <div class="fg-grid"> <<for _post range _explore>> <button class="fg-grid-cell" type="button" data-action="fg-post" @data-arg="_post.id"> <<mediaThumb setup.fgMedia(_post)>> </button> <</for>> </div> </div> <<include "FgTabBar">> </div>
<div class="app-page fg-page"> <div class="fg-head"> <span></span> <div class="fg-logo left">New Post</div> </div> <div class="fg-new"> <div class="fg-cam">📷</div> <div>New Post</div> </div> <<include "FgTabBar">> </div>
<<set _u to setup.fgUser($fgUser || setup.fgMe().id)>> <<set _grid to setup.fgUserPosts(_u.id)>> <div class="app-page fg-page"> <div class="fg-head"> <span></span> <div class="fg-logo"><<= _u.handle>></div> <button class="fg-head-btn" type="button" data-action="flash" aria-label="Add"><span class="fg-ico plus"></span></button> </div> <div class="fg-scroll"> <div class="fg-profile-top"> <img class="fg-avatar-lg" @src="setup.personSrc(_u)" alt=""> <div class="fg-counts"> <button type="button" data-action="flash"><b><<= _grid.length>></b><span>Posts</span></button> <button type="button" data-action="flash"><b><<= setup.fgCount(_u.followers)>></b><span>Followers</span></button> <button type="button" data-action="flash"><b><<= setup.fgCount(_u.following)>></b><span>Following</span></button> </div> </div> <div class="fg-bio"> <b><<= _u.name>></b> <div><<= _u.bio>></div> </div> <button class="fg-grid-ico" type="button" data-action="flash">▦</button> <div class="fg-grid"> <<for _post range _grid>> <button class="fg-grid-cell" type="button" data-action="fg-post" @data-arg="_post.id"> <<mediaThumb setup.fgMedia(_post)>> </button> <</for>> </div> </div> <<include "FgTabBar">> </div>
<<set _post to setup.fgPost($fgPost)>> <<set _u to setup.fgUser(_post.user)>> <div class="app-page fg-page"> <div class="fg-head"> <span></span> <div class="fg-logo"></div> </div> <div class="fg-scroll"> <div class="fg-post-top"> <button class="fg-person" type="button" data-action="fg-profile" @data-arg="_post.user"> <img @src="setup.personSrc(_u)" alt=""> <span> <b><<= _u.name>></b> <<if _post.location>><small><<= _post.location>></small><</if>> </span> </button> <button class="fg-more" type="button" data-action="flash">⋮</button> </div> <button type="button" class="fg-post-shot" data-action="open-shot" @data-arg="_post.id"> <<mediaFull setup.fgMedia(_post)>> </button> <div class="fg-actions"> <button type="button" class="fg-like" data-action="flash"><span class="fg-ico heart"></span><span class="fg-like-meta"><span><<= setup.fgCount(_post.likes)>></span><<if _post.date>><small><<= setup.dayChip(_post.date)>></small><</if>></span></button> <button type="button" data-action="flash"><span class="fg-ico comment"></span> <<= setup.fgCount(setup.fgCommentCount(_post))>></button> <button type="button" data-action="flash"><span class="fg-ico plane"></span></button> <button class="fg-save" type="button" data-action="flash"><span class="fg-ico bookmark"></span></button> </div> <div class="fg-caption"><b><<= _u.name>></b> <<= _post.caption>></div> </div> </div>
<<if $mailId>> <<include "MailRead">> <<else>> <<include "MailList">> <</if>>
<<set _app to setup.activeApp()>> <<set _box to setup.mailBox()>> <<set _mails to setup.mailList($mailFolder)>> <div class="app-page mail-page"> <div class="mail-head"> <span></span> <div class="mail-title"><<= _box.title>></div> <button class="mail-ico-btn" type="button" data-action="mail-menu">☰</button> </div> <div class="mail-scroll"> <<if _mails.length is 0>> <div class="empty-msg">No mail in this folder.</div> <<else>> <<for _m range _mails>> <button class="mail-row" type="button" data-action="mail-open" @data-arg="_m.id"> <span class="mail-ava"><<= _m.initials>></span> <span class="mail-row-main"> <span class="mail-row-top"> <b><<= _m.from>></b> <small><<= setup.dayChip(_m.when)>></small> </span> <span class="mail-sub"><<= _m.subject>></span> <span class="mail-prev"><<= _m.preview>></span> </span> </button> <</for>> <</if>> </div> <<if $mailMenu>><<include "MailDrawer">><</if>> </div>
<<set _me to setup.mailMe()>> <button class="mail-scrim" type="button" data-action="mail-menu"></button> <div class="mail-drawer"> <div class="mail-drawer-top"> <img @src="setup.personSrc(_me)" alt=""> <div class="mail-me-name"><<= _me.name>></div> <div class="mail-me-email"><<= _me.email>></div> </div> <div class="mail-drawer-list"> <button type="button" data-action="mail-folder" data-arg="inbox"><span class="mail-nav inbox"></span> Inbox</button> <button type="button" data-action="mail-folder" data-arg="starred"><span class="mail-nav starred"></span> Starred</button> <button type="button" data-action="mail-folder" data-arg="important"><span class="mail-nav important"></span> Important</button> <button type="button" data-action="mail-folder" data-arg="sent"><span class="mail-nav sent"></span> Sent</button> <button type="button" data-action="mail-folder" data-arg="drafts"><span class="mail-nav drafts"></span> Drafts</button> <button type="button" data-action="mail-folder" data-arg="spam"><span class="mail-nav spam"></span> Spam</button> <button type="button" data-action="mail-folder" data-arg="trash"><span class="mail-nav trash"></span> Trash</button> </div> </div>
<<set _m to setup.mailItem($mailId)>> <div class="app-page mail-page"> <div class="mail-head mail-read-head"> <span></span> <div class="mail-title left">Email</div> <div class="mail-head-tools"> <button type="button" data-action="flash">⬇</button> <button type="button" data-action="flash">🗑</button> <button type="button" data-action="flash">✉</button> <button type="button" data-action="flash">⋮</button> </div> </div> <div class="mail-scroll mail-read-scroll"> <h2 class="mail-read-sub"><<= _m.subject>></h2> <div class="mail-from-row"> <span class="mail-ava"><<= _m.initials>></span> <div class="mail-from-copy"> <b><<= _m.from>></b> <div><<= _m.fromEmail>></div> <div><<= setup.dayChip(_m.stamp)>></div> <div>To:<<= _m.to>></div> </div> <button class="mail-star" type="button" data-action="flash">☆</button> </div> <div class="mail-body"><<= _m.body>></div> <div class="mail-actions"> <button type="button" data-action="flash"><span>↩</span>Reply</button> <button type="button" data-action="flash"><span>➜</span>Forward</button> </div> </div> </div>
<<if $bankCardId>> <<include "BankCard">> <<else>> <<include "BankHome">> <</if>>
<<set _app to setup.activeApp()>> <<set _me to setup.bankMe()>> <<set _cards to setup.bankCards()>> <<set _txns to setup.bankRecent()>> <div class="app-page bank-page"> <div class="mail-head"> <span></span> <div class="mail-title"><<= _app.name>></div> <span></span> </div> <div class="mail-scroll bank-scroll"> <div class="bank-hello"> <div> <div class="bank-hello-hi">Hello,</div> <div class="bank-hello-name"><<= _me.name>></div> </div> <img class="bank-hello-pic" @src="setup.personSrc(_me)" alt=""> </div> <div class="bank-total"> <div class="bank-total-label">Total balance</div> <div class="bank-total-amt"><<= setup.bankTotal()>></div> </div> <div class="bank-sec">My accounts</div> <div class="bank-card-row"> <<for _c range _cards>> <button class="bank-card" type="button" @data-tone="_c.tone" data-action="bank-open" @data-arg="_c.id"> <<if _c.style is "pay">> <span class="bank-card-top"> <span class="bank-card-name"><<= _c.name>></span> <span class="bank-wifi"></span> </span> <span class="bank-card-pan"><<= _c.pan>></span> <span class="bank-card-bal"><<= _c.balance>></span> <<else>> <span class="bank-card-ico" @data-ico="_c.icon"></span> <span class="bank-card-name"><<= _c.name>></span> <span class="bank-card-avail">Available balance</span> <span class="bank-card-bal"><<= _c.balance>></span> <span class="bank-card-pan dim"><<= _c.pan>></span> <</if>> </button> <</for>> </div> <div class="bank-sec">Recent transactions</div> <div class="bank-txns"> <<if _txns.length is 0>> <div class="empty-msg">No recent transactions.</div> <<else>> <<for _t range _txns>> <div class="bank-txn"> <span class="bank-txn-ico"></span> <span class="bank-txn-copy"> <b><<= _t.name>></b> <small><<= _t.note or _t.when>></small> </span> <span class="bank-txn-amt <<if setup.bankParseAmt(_t.amount) gte 0>>in<</if>>"><<= _t.amount>></span> </div> <</for>> <</if>> </div> </div> </div>
<<set _c to setup.bankCard($bankCardId)>> <<set _txns to setup.bankCardTxns($bankCardId)>> <div class="app-page bank-page"> <div class="bank-card-head"> <span></span> <div class="bank-card-head-title"><<= _c.title>></div> <span></span> </div> <div class="mail-scroll bank-scroll"> <div class="bank-hero" @data-tone="_c.tone"> <div class="bank-card-top"> <span class="bank-card-name"><<= _c.name>></span> <span class="bank-wifi"></span> </div> <div class="bank-hero-bal"><<= _c.balance>></div> </div> <div class="bank-detail-txns"> <<if _txns.length is 0>> <div class="empty-msg">No transactions on this card.</div> <<else>> <<for _t range _txns>> <div class="bank-detail-txn"> <b><<= _t.name>></b> <div class="bank-detail-amt"><<= _t.amount>></div> <small><<= setup.dayChip(_t.when)>></small> </div> <</for>> <</if>> </div> </div> </div>
<<if $clockTab is "alarms">><<include "ClockAlarms">> <<elseif $clockTab is "timer">><<include "ClockTimers">> <<else>><<include "ClockFace">> <</if>>
<<set _now to setup.clockStamp()>> <div class="app-page clk-page"> <div class="mail-head"> <span></span> <div class="mail-title">Clock</div> <span></span> </div> <div class="clk-face"> <div class="clk-time" id="clock-time"><<= _now.time>></div> <div class="clk-date" id="clock-date"><<= _now.date>></div> </div> <<include "ClockTabs">> </div>
<<set _alarms to setup.clockAlarms()>> <<set _reminders to setup.clockReminders()>> <div class="app-page clk-page"> <div class="mail-head"> <span></span> <div class="mail-title">Alarms</div> <span></span> </div> <div class="mail-scroll clk-scroll"> <<for _a range _alarms>> <div class="clk-row"> <span class="clk-row-ico alarm"></span> <span class="clk-row-copy"> <b><<= _a.time>></b> <small><<= _a.label>></small> </span> <<if _a.on>> <button class="clk-sw on" type="button" data-action="clock-toggle" @data-arg="_a.id"><i></i></button> <<else>> <button class="clk-sw" type="button" data-action="clock-toggle" @data-arg="_a.id"><i></i></button> <</if>> </div> <</for>> <<if _reminders.length>> <div class="clk-sec">Reminders</div> <<for _r range _reminders>> <div class="clk-row"> <span class="clk-row-ico alarm"></span> <span class="clk-row-copy"> <b><<= setup.clockWhen(_r)>></b> <small><<= _r.label>></small> </span> <<if _r.on>> <button class="clk-sw on" type="button" data-action="clock-toggle" @data-arg="_r.id"><i></i></button> <<else>> <button class="clk-sw" type="button" data-action="clock-toggle" @data-arg="_r.id"><i></i></button> <</if>> </div> <</for>> <</if>> </div> <<include "ClockTabs">> </div>
<<set _timers to setup.clockTimers()>> <div class="app-page clk-page"> <div class="mail-head"> <span></span> <div class="mail-title">Timer</div> <span></span> </div> <div class="mail-scroll clk-scroll"> <<for _t range _timers>> <div class="clk-row"> <span class="clk-row-ico timer"></span> <span class="clk-row-copy"> <b><<= _t.time>></b> <small><<= _t.label>></small> </span> </div> <</for>> </div> <<include "ClockTabs">> </div>
<div class="clk-tabs"> <<if $clockTab is "clock">> <button class="clk-tab on" type="button" data-action="clock-tab" data-arg="clock"><span class="clk-tab-ico face"></span>Clock</button> <<else>> <button class="clk-tab" type="button" data-action="clock-tab" data-arg="clock"><span class="clk-tab-ico face"></span>Clock</button> <</if>> <<if $clockTab is "alarms">> <button class="clk-tab on" type="button" data-action="clock-tab" data-arg="alarms"><span class="clk-tab-ico alarm"></span>Alarms</button> <<else>> <button class="clk-tab" type="button" data-action="clock-tab" data-arg="alarms"><span class="clk-tab-ico alarm"></span>Alarms</button> <</if>> <<if $clockTab is "timer">> <button class="clk-tab on" type="button" data-action="clock-tab" data-arg="timer"><span class="clk-tab-ico timer"></span>Timer</button> <<else>> <button class="clk-tab" type="button" data-action="clock-tab" data-arg="timer"><span class="clk-tab-ico timer"></span>Timer</button> <</if>> </div>
<div class="app-page calc-page"> <div class="mail-head calc-head"> <span></span> <div class="mail-title">Calculator</div> <span></span> </div> <div class="calc-display" id="calc-display"><<= setup.calcBuf()>></div> <div class="calc-pad"> <button class="calc-key gray" type="button" data-action="calc" data-arg="C">C</button> <button class="calc-key gray" type="button" data-action="calc" data-arg="%">%</button> <span class="calc-skip"></span> <button class="calc-key teal" type="button" data-action="calc" data-arg="/">÷</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="7">7</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="8">8</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="9">9</button> <button class="calc-key teal" type="button" data-action="calc" data-arg="*">×</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="4">4</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="5">5</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="6">6</button> <button class="calc-key teal" type="button" data-action="calc" data-arg="-">-</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="1">1</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="2">2</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="3">3</button> <button class="calc-key teal" type="button" data-action="calc" data-arg="+">+</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="00">00</button> <button class="calc-key dark" type="button" data-action="calc" data-arg="0">0</button> <button class="calc-key dark" type="button" data-action="calc" data-arg=".">.</button> <button class="calc-key teal" type="button" data-action="calc" data-arg="=">=</button> </div> </div>
<<run setup.ensure2048()>> <<set _g to setup.g48State()>> <div class="app-page g48-page"> <div class="app-top"> <span></span> <div class="app-title">2048</div> <button type="button" class="g48-help-btn" data-action="g48-help" aria-label="How to play">?</button> </div> <div class="g48-score"> <small>Score</small> <b id="g48-score"><<= _g.score>></b> </div> <div class="g48-play"> <button class="g48-dir up" type="button" data-action="g48" data-arg="up" aria-label="Swipe up"></button> <button class="g48-dir left" type="button" data-action="g48" data-arg="left" aria-label="Swipe left"></button> <div class="g48-board" id="g48-board"> <div class="g48-tile empty"></div><div class="g48-tile empty"></div><div class="g48-tile empty"></div><div class="g48-tile empty"></div> <div class="g48-tile empty"></div><div class="g48-tile empty"></div><div class="g48-tile empty"></div><div class="g48-tile empty"></div> <div class="g48-tile empty"></div><div class="g48-tile empty"></div><div class="g48-tile empty"></div><div class="g48-tile empty"></div> <div class="g48-tile empty"></div><div class="g48-tile empty"></div><div class="g48-tile empty"></div><div class="g48-tile empty"></div> </div> <button class="g48-dir right" type="button" data-action="g48" data-arg="right" aria-label="Swipe right"></button> <button class="g48-dir down" type="button" data-action="g48" data-arg="down" aria-label="Swipe down"></button> </div> <div class="g48-foot"> <button class="g48-reset" type="button" data-action="g48" data-arg="reset" aria-label="Restart"></button> <div class="g48-high"> <small>High Score</small> <b id="g48-high"><<= _g.high>></b> </div> </div> <<if $g48Help>> <div class="g48-help"> <div class="g48-help-card"> <b>How to play</b> <p>Use the arrows to slide the tiles. When two tiles with the same number touch, they combine into a bigger one. The highest a square can go is 2048. It can't go any higher than that.</p> <button type="button" class="g48-help-ok" data-action="g48-help-close">Got it</button> </div> </div> <</if>> </div>
<<run setup.ensureSnake()>> <div class="app-page snk-page"> <div class="app-top"> <span></span> <div class="app-title">Snake</div> </div> <div class="snk-score">Score: <span id="snk-score">0</span></div> <div class="snk-board" id="snk-board"></div> <div class="snk-pad"> <button class="snk-dir up" type="button" data-action="snk" data-arg="up" aria-label="Up">↑</button> <button class="snk-dir left" type="button" data-action="snk" data-arg="left" aria-label="Left">←</button> <button class="snk-dir right" type="button" data-action="snk" data-arg="right" aria-label="Right">→</button> <button class="snk-dir down" type="button" data-action="snk" data-arg="down" aria-label="Down">↓</button> </div> <div class="snk-start"> <button class="snk-restart" type="button" data-action="snk" data-arg="play">Play</button> </div> <div class="snk-end"> <div class="snk-end-title" id="snk-end-title">Game Over!</div> <button class="snk-restart" type="button" data-action="snk" data-arg="reset">Restart</button> </div> </div>
<<run setup.ensureBrick()>> <div class="app-page brk-page"> <div class="brk-head"> <span></span> <div class="brk-title">Brick Breaker</div> <div class="brk-score">Score: <span id="brk-score">0</span></div> </div> <div class="brk-stage" id="brk-stage"> <canvas id="brk-canvas"></canvas> <div class="brk-drag" id="brk-drag"></div> <div class="brk-overlay start" id="brk-start"> <button class="brk-cta" type="button" data-action="brk" data-arg="play">PLAY</button> </div> <div class="brk-overlay end" id="brk-end"> <div class="brk-banner" id="brk-banner">GAME OVER</div> <div class="brk-end-score">Score: <span id="brk-end-score">0</span></div> <button class="brk-cta" type="button" data-action="brk" data-arg="reset">REPLAY</button> </div> </div> </div>
<<run setup.ensureBlast()>> <div class="app-page bl-page"> <div class="bl-head"> <div class="bl-title">Block Blast</div> <div class="bl-score">Score: <span id="bl-score">0</span></div> <div class="bl-best">Best: <span id="bl-best">0</span></div> </div> <div class="bl-board-wrap"> <div class="bl-board" id="bl-board"></div> </div> <div class="bl-tray" id="bl-tray"></div> <div class="bl-overlay" id="bl-end"> <div class="bl-banner">GAME OVER</div> <div class="bl-end-score">Score: <span id="bl-end-score">0</span></div> <div class="bl-end-best">Best: <span id="bl-end-best">0</span></div> <button class="bl-cta" type="button" data-action="bl" data-arg="reset">REPLAY</button> </div> <div class="bl-float" id="bl-float" hidden></div> </div>
<<if $pePage is "edit">> <<include "PeEdit">> <<else>> <<include "PePick">> <</if>>
<<set _photos to setup.peGallery()>> <div class="app-page pe-page"> <div class="pe-head"> <span></span> <div class="pe-title">PhotoEdit</div> <span></span> </div> <div class="pe-banner"> <span class="pe-badge">Pe</span> <span> <b>Select a photo</b> <small>Choose an image to edit</small> </span> </div> <div class="pe-pick-scroll"> <div class="pe-grid"> <<for _i range setup.indexList(_photos)>> <button class="pe-cell" type="button" data-action="pe-open" @data-arg="_photos[_i].id"> <<mediaThumb _photos[_i]>> </button> <</for>> </div> </div> </div>
<<set _shot to setup.pePhoto()>> <div class="app-page pe-page pe-edit-page"> <div class="pe-edit-head"> <span></span> <div class="pe-title">Edit</div> <button class="pe-reset" type="button" data-action="pe-reset">Reset</button> </div> <div class="pe-stage"> <div class="pe-shot" id="pe-shot"> <img id="pe-img" @src="_shot.src" alt=""> </div> </div> <div class="pe-dock"> <div class="pe-tabs" id="pe-tabs"></div> <div class="pe-tools" id="pe-tools"></div> </div> </div>
<<if not setup.cpLogged()>> <<include "CpLogin">> <<elseif $cpPage is "full">> <<include "CpFull">> <<else>> <<include "CpFeed">> <</if>>
<div class="app-page cp-page cp-login"> <div class="cp-login-body"> <div class="cp-login-copy"> <div class="cp-login-title">Cloud Photos Sign In</div> <div class="cp-login-sub">Use your Cloud Photos Account</div> </div> <div class="cp-form" id="cp-form"> <label class="cp-field" id="cp-email-wrap"> <span>Email</span> <input id="cp-email" type="text" inputmode="email" autocomplete="off" autocapitalize="off" spellcheck="false" name="cpemail"> </label> <label class="cp-field" id="cp-pass-wrap"> <span>Password</span> <input id="cp-pass" type="password" autocomplete="new-password" spellcheck="false" name="cppass"> <button class="cp-eye" type="button" data-action="cp-eye" aria-label="Show password"></button> </label> <div class="cp-err" id="cp-err">Wrong email or password</div> <button class="cp-signin" type="button" data-action="cp-login">Sign in</button> </div> </div> </div>
<<set _groups to setup.cpGroups()>> <div class="app-page cp-page"> <div class="cp-head"> <span></span> <div class="cp-title">Cloud Photos</div> <span></span> </div> <div class="cp-scroll"> <<for _g range setup.indexList(_groups)>> <<set _items to _groups[_g].items>> <div class="cp-day"><<= _groups[_g].label>></div> <div class="cp-grid"> <<for _i range setup.indexList(_items)>> <button class="cp-cell" type="button" data-action="cp-open" @data-arg="_items[_i].id"> <<mediaThumb _items[_i]>> </button> <</for>> </div> <</for>> </div> </div>
<<set _p to setup.cpPhoto()>> <div class="app-page cp-page cp-full"> <div class="cp-full-head"> <span></span> <div class="cp-full-stamp"><<= setup.cpStamp(_p)>></div> <span></span> </div> <div class="cp-full-shot"> <<mediaFull _p>> <<galleryNav>> </div> </div>
<<if not setup.cpalUnlocked()>> <<include "CpalPin">> <<elseif $cpalPage is "profile">> <<include "CpalProfile">> <<else>> <<include "CpalHome">> <</if>>
<div class="app-page pal-page pal-lock"> <div class="pal-lock-title">CashPal</div> <div class="pal-lock-ico"></div> <div class="pal-lock-name">CashPal</div> <div class="pal-lock-sub">Enter your PIN</div> <div class="pal-dots" id="pal-dots"> <span></span><span></span><span></span><span></span> </div> <div class="pal-pad"> <button type="button" data-action="cpal-digit" data-arg="1">1</button> <button type="button" data-action="cpal-digit" data-arg="2">2</button> <button type="button" data-action="cpal-digit" data-arg="3">3</button> <button type="button" data-action="cpal-digit" data-arg="4">4</button> <button type="button" data-action="cpal-digit" data-arg="5">5</button> <button type="button" data-action="cpal-digit" data-arg="6">6</button> <button type="button" data-action="cpal-digit" data-arg="7">7</button> <button type="button" data-action="cpal-digit" data-arg="8">8</button> <button type="button" data-action="cpal-digit" data-arg="9">9</button> <span></span> <button type="button" data-action="cpal-digit" data-arg="0">0</button> <button class="pal-del" type="button" data-action="cpal-del" aria-label="Delete"></button> </div> </div>
<<set _d to setup.cpalData()>> <<set _tx to setup.cpalTx()>> <<set _me to setup.cpalMe()>> <div class="app-page pal-page pal-home"> <div class="pal-head"> <span></span> <div class="pal-title">CashPal</div> <button class="pal-ava" type="button" data-action="cpal-profile"> <<if _me.pic>> <img @src="setup.personSrc(_me)" alt=""> <<else>> <<= setup.cpalIni()>> <</if>> </button> </div> <div class="pal-scroll"> <div class="pal-bal"> <div>Your balance</div> <b><<= setup.cpalBal()>></b> </div> <div class="pal-actions"> <button type="button" data-action="flash"><span class="pal-act send"></span>Send</button> <button type="button" data-action="flash"><span class="pal-act req"></span>Request</button> </div> <div class="pal-sec">Recent activity</div> <<for _i range setup.indexList(_tx)>> <<set _t to _tx[_i]>> <div class="pal-row"> <span class="pal-kind <<= _t.kind>>"></span> <span class="pal-who"> <b><<= _t.name>></b> <small><<= setup.dayChip(_t.when)>> · <<= _t.note>></small> </span> <span class="pal-amt <<if _t.amount lt 0>>out<<else>>in<</if>>"><<= setup.cpalAmt(_t.amount)>></span> </div> <</for>> </div> </div>
<<set _d to setup.cpalData()>> <<set _me to setup.cpalMe()>> <div class="app-page pal-page pal-prof"> <div class="pal-head light"> <span></span> <div class="pal-title dark">Profile</div> <span></span> </div> <div class="pal-scroll"> <div class="pal-hero"> <div class="pal-ava xl"> <<if _me.pic>> <img @src="setup.personSrc(_me)" alt=""> <<else>> <<= setup.cpalIni()>> <</if>> </div> <b><<= _me.name>></b> <small><<= _me.email>></small> </div> <div class="pal-card"> <div class="pal-info"> <span class="pal-ii mail"></span> <span><small>Email</small><b><<= _me.email>></b></span> </div> <div class="pal-info"> <span class="pal-ii phone"></span> <span><small>Phone</small><b><<= _me.phone or _d.phone>></b></span> </div> <div class="pal-info"> <span class="pal-ii cal"></span> <span><small>Member since</small><b><<= _d.since>></b></span> </div> <div class="pal-info"> <span class="pal-ii ok"></span> <span><small>Status</small><b class="ok"><<= _d.status>></b></span> </div> </div> </div> </div>
<<if $lwPage is "post">> <<include "LwPost">> <<elseif $lwPage is "profile">> <<include "LwProfile">> <<elseif $lwPage is "inbox">> <<include "LwInbox">> <<elseif $lwPage is "thread">> <<include "LwThread">> <<else>> <<include "LwFeed">> <</if>>
<<set _posts to setup.lwFeed()>> <<set _owner to setup.owner()>> <<set _ix to setup.indexList(_posts)>> <div class="app-page lw-page"> <div class="lw-head"> <span class="lw-x"></span> <div class="lw-brand">LinkWork</div> <div class="lw-head-r"> <button type="button" class="lw-ico msg" data-action="lw-inbox" aria-label="Messages"></button> <button type="button" class="lw-me" data-action="lw-me" aria-label="Profile"> <i><<= setup.lwIni(_owner.name)>></i> <<if _owner.pic>> <img @src="setup.personSrc(_owner)" alt=""> <</if>> </button> </div> </div> <div class="lw-scroll"> <<for _i range _ix>> <<set _p to _posts[_i]>> <<include "LwPostCard">> <</for>> </div> </div>
<<set _u to setup.lwPerson(_p.user)>> <article class="lw-card"> <div class="lw-who"> <button type="button" class="lw-ava" data-action="lw-who" @data-arg="_u.id"> <<if _u.pic>> <img @src="setup.personSrc(_u)" alt=""> <<else>> <i><<= setup.lwIni(_u.name)>></i> <</if>> </button> <div class="lw-who-t"> <button type="button" class="lw-name" data-action="lw-who" @data-arg="_u.id"><<= _u.name>></button> <<if _u.title>><small><<= _u.title>></small><</if>> <small class="lw-when"><<= setup.lwWhen(_p)>></small> </div> <button type="button" class="lw-follow" data-action="flash">+ Follow</button> </div> <<if setup.lwPhoto(_p)>> <button type="button" class="lw-photo" data-action="lw-post" @data-arg="_p.id"> <<mediaThumb setup.lwMedia(_p)>> </button> <</if>> <<if _p.text>> <button type="button" class="lw-body" data-action="lw-post" @data-arg="_p.id"><<= _p.text>></button> <</if>> <div class="lw-stats"> <span class="lw-rx"><i class="lk"></i><i class="ht"></i> <<= _p.likes>></span> <span><<= _p.comments>> comments <<= _p.reposts>> reposts</span> </div> <div class="lw-acts"> <button type="button" data-action="flash"><span class="lw-ai like"></span> Like</button> <button type="button" data-action="flash"><span class="lw-ai comment"></span> Comment</button> <button type="button" data-action="flash"><span class="lw-ai repost"></span> Repost</button> <button type="button" data-action="flash"><span class="lw-ai send"></span> Send</button> </div> </article>
<<set _p to setup.lwPost($lwId)>> <<set _u to setup.lwPerson(_p.user)>> <<set _owner to setup.owner()>> <div class="app-page lw-page"> <div class="lw-head"> <span class="lw-x"></span> <div class="lw-brand">Post</div> <button type="button" class="lw-dot" data-action="flash">•••</button> </div> <div class="lw-scroll post"> <div class="lw-who"> <button type="button" class="lw-ava" data-action="lw-who" @data-arg="_u.id"> <<if _u.pic>> <img @src="setup.personSrc(_u)" alt=""> <<else>> <i><<= setup.lwIni(_u.name)>></i> <</if>> </button> <div class="lw-who-t"> <button type="button" class="lw-name" data-action="lw-who" @data-arg="_u.id"><<= _u.name>></button> <<if _u.title>><small><<= _u.title>></small><</if>> <small class="lw-when"><<= setup.lwWhen(_p)>></small> </div> </div> <<if setup.lwPhoto(_p)>> <button type="button" class="lw-photo" data-action="lw-shot" @data-arg="_p.id"> <<mediaFull setup.lwMedia(_p)>> </button> <</if>> <<if _p.text>> <div class="lw-body static"><<= _p.text>></div> <</if>> <div class="lw-stats"> <span class="lw-rx"><i class="lk"></i><i class="ht"></i> <<= _p.likes>></span> <span><<= _p.comments>> comments <<= _p.reposts>> reposts</span> </div> <div class="lw-acts"> <button type="button" data-action="flash"><span class="lw-ai like"></span> Like</button> <button type="button" data-action="flash"><span class="lw-ai comment"></span> Comment</button> <button type="button" data-action="flash"><span class="lw-ai repost"></span> Repost</button> <button type="button" data-action="flash"><span class="lw-ai send"></span> Send</button> </div> <div class="lw-cmt"> <span class="lw-ava sm"> <i><<= setup.lwIni(_owner.name)>></i> <<if _owner.pic>> <img @src="setup.personSrc(_owner)" alt=""> <</if>> </span> <button type="button" class="lw-cmt-in" data-action="flash">Add a comment...</button> </div> </div> </div>
<<set _u to setup.lwPerson($lwId)>> <<set _ex to setup.lwExp(_u)>> <<set _ed to setup.lwEdu(_u)>> <<set _acts to setup.lwActivity(_u.id)>> <<set _exi to setup.indexList(_ex)>> <<set _edi to setup.indexList(_ed)>> <<set _ai to setup.indexList(_acts)>> <div class="app-page lw-page lw-prof-page"> <div class="lw-head"> <span class="lw-x"></span> <div class="lw-brand"></div> <div class="lw-head-r"> <button type="button" class="lw-ico gear" data-action="flash" aria-label="Settings"></button> <button type="button" class="lw-ico pen" data-action="flash" aria-label="Edit"></button> </div> </div> <div class="lw-scroll prof"> <div class="lw-hero"> <div class="lw-ava xl"> <<if _u.pic>> <img @src="setup.personSrc(_u)" alt=""> <<else>> <i><<= setup.lwIni(_u.name)>></i> <</if>> </div> <b><<= _u.name>></b> <<if _u.title>><p><<= _u.title>></p><</if>> <<if _u.loc>><small><<= _u.loc>></small><</if>> <<if _u.connections>><button type="button" class="lw-conn" data-action="flash"><<= _u.connections>> connections</button><</if>> <div class="lw-btns"> <<if setup.lwIsMe(_u.id)>> <button type="button" class="lw-pill" data-action="flash">My goals</button> <button type="button" class="lw-pill" data-action="flash">Add section</button> <button type="button" class="lw-more" data-action="flash">•••</button> <<else>> <button type="button" class="lw-pill fill" data-action="flash">Connect</button> <<if setup.lwCanMessage(_u.id)>> <button type="button" class="lw-pill" data-action="lw-thread" @data-arg="_u.id">Message</button> <</if>> <button type="button" class="lw-more" data-action="flash">•••</button> <</if>> </div> </div> <<if _u.about>> <div class="lw-sec"> <h3>About</h3> <p><<= _u.about>></p> </div> <</if>> <<if _exi.length gt 0>> <div class="lw-sec"> <h3>Experience</h3> <<for _i range _exi>> <<set _j to _ex[_i]>> <div class="lw-job"> <span class="lw-job-ic bld"></span> <div> <b><<= _j.role>></b> <small><<= _j.co>></small> <small><<= _j.dates>></small> <<if _j.place>><small><<= _j.place>></small><</if>> </div> </div> <</for>> </div> <</if>> <<if _edi.length gt 0>> <div class="lw-sec"> <h3>Education</h3> <<for _i range _edi>> <<set _j to _ed[_i]>> <div class="lw-job"> <span class="lw-job-ic cap"></span> <div> <b><<= _j.school>></b> <small><<= _j.deg>></small> <small><<= _j.dates>></small> </div> </div> <</for>> </div> <</if>> <<if _ai.length gt 0>> <div class="lw-sec"> <h3>Activity</h3> <<for _i range _ai>> <<set _p to _acts[_i]>> <button type="button" class="lw-act" data-action="lw-post" @data-arg="_p.id"> <span class="lw-act-main"> <span class="lw-act-tx"><<= _p.text || "Photo">></span> <small><<= _p.likes>> Like · <<= _p.comments>> comments</small> </span> <<if setup.lwPhoto(_p)>> <span class="lw-act-ph"><<mediaThumb setup.lwMedia(_p)>></span> <</if>> </button> <</for>> </div> <</if>> </div> </div>
<<set _th to setup.lwInbox()>> <<set _ix to setup.indexList(_th)>> <div class="app-page lw-page"> <div class="lw-head"> <span class="lw-x"></span> <div class="lw-brand">Messaging</div> <div class="lw-head-r"> <button type="button" class="lw-ico pen" data-action="flash" aria-label="Compose"></button> <button type="button" class="lw-dot" data-action="flash">•••</button> </div> </div> <div class="lw-scroll inbox"> <button type="button" class="lw-search" data-action="flash">Search messages</button> <<for _i range _ix>> <<set _t to _th[_i]>> <<set _u to setup.lwPerson(_t.id)>> <button type="button" class="lw-row" data-action="lw-thread" @data-arg="_t.id"> <span class="lw-ava"> <<if _u.pic>> <img @src="setup.personSrc(_u)" alt=""> <<else>> <i><<= setup.lwIni(_u.name)>></i> <</if>> <<if _t.unread>><em></em><</if>> </span> <span class="lw-row-t"> <b><<= _u.name>></b> <<if _u.inbox>><small><<= _u.inbox>></small><</if>> <small class="prev"><<= setup.lwPreview(_t)>></small> </span> <span class="lw-row-when"><<= _t.when>></span> </button> <</for>> </div> </div>
<<set _t to setup.lwThread($lwId)>> <<set _u to setup.lwPerson(_t.id)>> <<set _msgs to setup.lwMsgs(_t)>> <<set _ix to setup.indexList(_msgs)>> <div class="app-page lw-page"> <div class="lw-head thread"> <button type="button" class="lw-th-who" data-action="lw-who" @data-arg="_u.id"> <span class="lw-ava xs"> <<if _u.pic>> <img @src="setup.personSrc(_u)" alt=""> <<else>> <i><<= setup.lwIni(_u.name)>></i> <</if>> </span> <span> <b><<= _u.name>></b> <<if _u.inbox>><small><<= _u.inbox>></small><</if>> </span> </button> <div class="lw-head-r"> <button type="button" class="lw-ico cam" data-action="flash" aria-label="Video"></button> <button type="button" class="lw-dot" data-action="flash">•••</button> </div> </div> <div class="lw-scroll chat" id="lw-chat"> <button type="button" class="lw-chat-hero" data-action="lw-who" @data-arg="_u.id"> <span class="lw-ava xl"> <<if _u.pic>> <img @src="setup.personSrc(_u)" alt=""> <<else>> <i><<= setup.lwIni(_u.name)>></i> <</if>> </span> <b><<= _u.name>></b> <<if _u.inbox>><small><<= _u.inbox>></small><</if>> <span class="lw-pill">View profile</span> </button> <<set _lastDay to "">> <<for _i range _ix>> <<set _m to _msgs[_i]>> <<set _stamp to setup.lwMsgStamp(_m)>> <<if _m.type is "day">> <<if _stamp.day>> <div class="lw-day"><<= setup.dayChip(_stamp.day)>></div> <<set _lastDay to _stamp.day>> <</if>> <<else>> <<if _stamp.day and _stamp.day neq _lastDay>> <div class="lw-day"><<= setup.dayChip(_stamp.day)>></div> <<set _lastDay to _stamp.day>> <</if>> <<set _from to setup.lwPerson(_m.from)>> <<if setup.lwIsMe(_m.from) or setup.msgMine(_m)>> <div @class="'lw-bubble me' + (setup.chatImage(_m) ? ' has-shot' : '')"> <div class="lw-bubble-copy"> <<chatBody _m>> <<if _stamp.time>><small class="lw-msg-time"><<= _stamp.time>></small><</if>> </div> </div> <<else>> <div @class="'lw-bubble them' + (setup.chatImage(_m) ? ' has-shot' : '')"> <div class="lw-bubble-row"> <button type="button" class="lw-ava xs" data-action="lw-who" @data-arg="_from.id"> <<if _from.pic>> <img @src="setup.personSrc(_from)" alt=""> <<else>> <i><<= setup.lwIni(_from.name)>></i> <</if>> </button> <div class="lw-bubble-copy"> <<chatBody _m>> <<if _stamp.time>><small class="lw-msg-time"><<= _stamp.time>></small><</if>> </div> </div> </div> <</if>> <</if>> <</for>> </div> <div class="lw-composer"> <button type="button" class="lw-plus" data-action="flash">+</button> <button type="button" class="lw-cmt-in" data-action="flash">Write a message...</button> <button type="button" class="lw-send" data-action="flash" aria-label="Send"></button> </div> </div>
<<if $stId>> <<include "StDetail">> <<else>> <<include "StList">> <</if>>
<<set _runs to setup.stRuns()>> <<set _ix to setup.indexList(_runs)>> <div class="app-page rn-page"> <div class="rn-head"> <span class="rn-x"></span> <div class="rn-brand">Stride</div> <span class="rn-x"></span> </div> <div class="rn-scroll list"> <<for _i range _ix>> <<set _r to _runs[_i]>> <button type="button" class="rn-card" data-action="st-open" @data-arg="_r.id"> <div class="rn-card-top"> <span class="rn-ico"></span> <span class="rn-card-copy"> <b><<= _r.title>></b> <small><<= setup.dayChip(_r.date)>></small> </span> <span class="rn-chev">›</span> </div> <div class="rn-meta"><<= _r.km>> · <<= _r.duration>> · <<= _r.pace>></div> <<if _r.note>> <p class="rn-note"><<= _r.note>></p> <</if>> <div class="rn-social"> <span><i class="heart"></i> <<= _r.likes>></span> <span><i class="chat"></i> <<= _r.comments>></span> </div> </button> <</for>> </div> </div>
<<set _r to setup.stRun($stId)>> <div class="app-page rn-page dark"> <div class="rn-sheet"> <div class="rn-handle"></div> <div class="rn-scroll detail"> <h1><<= _r.title>></h1> <small class="rn-date"><<= setup.dayChip(_r.dateFull)>></small> <small class="rn-place"><<= _r.place>></small> <div class="rn-row"> <span class="rn-mark clock"></span> <div><small>Time</small><b><<= _r.time>></b></div> </div> <div class="rn-row"> <span class="rn-mark timer"></span> <div><small>Duration</small><b><<= _r.duration>></b></div> </div> <div class="rn-row"> <span class="rn-mark path"></span> <div><small>Distance</small><b><<= _r.kmFull>></b></div> </div> <div class="rn-row"> <span class="rn-mark pace"></span> <div><small>Pace</small><b><<= _r.pace>></b></div> </div> <div class="rn-row"> <span class="rn-mark hill"></span> <div><small>Elevation</small><b><<= _r.elev>></b></div> </div> <div class="rn-row"> <span class="rn-mark fire"></span> <div><small>Calories</small><b><<= _r.kcal>></b></div> </div> <<if _r.note>> <div class="rn-status"> <small>Status</small> <p><<= _r.note>></p> </div> <</if>> </div> </div> </div>
<<include "TlHome">>
<<set _d to setup.tlData()>> <<set _hist to setup.tlHistory()>> <div class="app-page tl-page"> <div class="tl-head"> <span class="tl-pad"></span> <div class="tl-brand">Translate</div> <span class="tl-pad"></span> </div> <div class="tl-scroll"> <div class="tl-label">Translate</div> <div class="tl-langs"> <button type="button" class="tl-lang" data-action="flash"> <small>Source</small> <b><<= _d.sourceLang>></b> </button> <button type="button" class="tl-lang" data-action="flash"> <small>Target</small> <b><<= _d.targetLang>></b> </button> </div> <button type="button" class="tl-box" data-action="flash"> <small>Source</small> </button> <button type="button" class="tl-go" data-action="flash">Translate</button> <div class="tl-result-h">Result</div> <p class="tl-empty">Translation not found</p> <div class="tl-hist-h">History</div> <<for _h range _hist>> <button type="button" class="tl-card" data-action="tl-open" @data-arg="_h.id"> <b><<= _h.from>> → <<= _h.to>></b> <span><<= _h.text>></span> <<if _h.en>> <p class="tl-en"><<= _h.en>></p> <</if>> </button> <</for>> </div> </div>
<<set _tab to ($drTab is "activity" ? "activity" : ($drTab is "account" ? "account" : "home"))>> <<if _tab is "activity">> <<include "DrActivity">> <<elseif _tab is "account">> <<include "DrAccount">> <<else>> <<include "DrHome">> <</if>>
<div class="dr-tabs"> <<if _tab is "home">> <button class="dr-tab on" type="button" data-action="dr-tab" data-arg="home"><span class="dr-tic house"></span><small>Home</small></button> <<else>> <button class="dr-tab" type="button" data-action="dr-tab" data-arg="home"><span class="dr-tic house"></span><small>Home</small></button> <</if>> <<if _tab is "activity">> <button class="dr-tab on" type="button" data-action="dr-tab" data-arg="activity"><span class="dr-tic clock"></span><small>Activity</small></button> <<else>> <button class="dr-tab" type="button" data-action="dr-tab" data-arg="activity"><span class="dr-tic clock"></span><small>Activity</small></button> <</if>> <<if _tab is "account">> <button class="dr-tab on" type="button" data-action="dr-tab" data-arg="account"><span class="dr-tic me"></span><small>Account</small></button> <<else>> <button class="dr-tab" type="button" data-action="dr-tab" data-arg="account"><span class="dr-tic me"></span><small>Account</small></button> <</if>> </div>
<div class="app-page dr-page"> <div class="dr-head"> <span class="dr-pad"></span> <div class="dr-brand">Home</div> <span class="dr-pad"></span> </div> <div class="dr-body dr-map"> <div class="dr-lost"> <span class="dr-pin"></span> <b>Location not found</b> </div> </div> <<include "DrTabs">> </div>
<<set _rides to setup.drRides()>> <<set _ix to setup.indexList(_rides)>> <div class="app-page dr-page"> <div class="dr-head"> <span class="dr-pad"></span> <div class="dr-brand">Your trips</div> <span class="dr-pad"></span> </div> <div class="dr-scroll"> <<for _i range _ix>> <<set _r to _rides[_i]>> <article class="dr-ride"> <div class="dr-ride-top"> <div> <b><<= _r.kind>></b> <small><<= setup.dayChip(_r.when)>></small> </div> <span><<= _r.price>></span> </div> <div class="dr-ride-path"> <div class="dr-stop"> <i class="dot"></i> <div><small>Pickup</small><b><<= _r.pickup>></b></div> </div> <div class="dr-stop"> <i class="pin"></i> <div><small>Dropoff</small><b><<= _r.dropoff>></b></div> </div> </div> <div class="dr-ride-meta"> <div> <span class="dr-mi person"></span> <b><<= _r.driver>></b> <small>★ <<= _r.stars>></small> </div> <div> <span class="dr-mi clock"></span> <b><<= _r.mins>></b> </div> <div> <span class="dr-mi ruler"></span> <b><<= _r.km>></b> </div> </div> <div class="dr-ride-car"> <span class="dr-mi car"></span> <span><<= _r.car>></span> </div> </article> <</for>> </div> <<include "DrTabs">> </div>
<<set _d to setup.drData()>> <<set _me to setup.drMe()>> <div class="app-page dr-page"> <div class="dr-head"> <span class="dr-pad"></span> <div class="dr-brand">My account</div> <span class="dr-pad"></span> </div> <div class="dr-scroll acc"> <div class="dr-ava"> <<if _me.pic>> <img @src="setup.personSrc(_me)" alt=""> <<else>> <<= _me.initials>> <</if>> </div> <h2><<= _me.name>></h2> <div class="dr-rate">★ <<= _d.rating>></div> <div class="dr-stats"> <div> <b><<= _d.trips>></b> <small>Trips</small> </div> <div> <b><<= _d.since>></b> <small>Member since</small> </div> </div> <div class="dr-info"> <div class="dr-info-row"> <span class="dr-ii mail"></span> <div><small>Email</small><b><<= _me.email>></b></div> </div> <div class="dr-info-row"> <span class="dr-ii phone"></span> <div><small>Phone</small><b><<= _me.phone>></b></div> </div> </div> </div> <<include "DrTabs">> </div>
<<if $lsPage is "class">> <<include "LsClass">> <<elseif $lsPage is "classes">> <<include "LsClasses">> <<else>> <<include "LsHome">> <</if>>
<<set _d to setup.lsData()>> <<set _me to setup.lsMe()>> <div class="app-page ls-page"> <div class="ls-head">Lessons</div> <div class="ls-welcome"> <span class="ls-cap"></span> <div> <small>Welcome</small> <b><<= _me.name>></b> </div> </div> <div class="ls-body"> <button type="button" class="ls-row" data-action="ls-classes"> <span class="ls-ico books"></span> <span class="ls-row-copy"> <b>My classes</b> </span> <span class="ls-chev">›</span> </button> <div class="ls-row dead"> <span class="ls-ico cal"></span> <span class="ls-row-copy"> <b>Schedule</b> <small>No upcoming courses</small> </span> </div> <div class="ls-row dead"> <span class="ls-ico bars"></span> <span class="ls-row-copy"> <b>Grades</b> </span> </div> <div class="ls-row dead"> <span class="ls-ico life"></span> <span class="ls-row-copy"> <b>School life</b> </span> </div> </div> </div>
<<set _classes to setup.lsClasses()>> <<set _ix to setup.indexList(_classes)>> <div class="app-page ls-page"> <div class="ls-head">My classes</div> <div class="ls-body"> <<for _i range _ix>> <<set _c to _classes[_i]>> <button type="button" class="ls-class" data-action="ls-open" @data-arg="_c.id"> <div class="ls-class-top"> <div> <b><<= _c.name>></b> <small><<= _c.subject>></small> </div> <div class="ls-score"> <strong><<= _c.score>></strong> <small>/<<= _c.max>></small> </div> </div> <div class="ls-bar"><i @style="'width:' + setup.lsBar(_c.score, _c.max) + '%'"></i></div> <div class="ls-class-foot"> <span>Average</span> <<if setup.lsAttendance(_c) lt 0>> <span><<= _c.students>> students</span> <<else>> <span><<= setup.lsAttendance(_c)>>% attendance</span> <</if>> </div> </button> <</for>> </div> </div>
<<set _c to setup.lsClass($lsId)>> <<set _missed to setup.lsMissed(_c)>> <<set _held to setup.lsHeld(_c)>> <div class="app-page ls-page"> <div class="ls-head"><<= _c.name || "Class">></div> <div class="ls-body"> <div class="ls-class ls-detail"> <small class="ls-subject"><<= _c.subject>></small> <div class="ls-stats"> <div> <<if setup.lsAttendance(_c) lt 0>> <strong>—</strong> <<else>> <strong><<= setup.lsAttendance(_c)>>%</strong> <</if>> <span>Attendance</span> </div> <div> <strong><<= _c.score>><small>/<<= _c.max>></small></strong> <span>Average</span> </div> <div> <strong><<= _held || "—">></strong> <span>Classes held</span> </div> </div> <h3>Days missed this year</h3> <<if _missed.length>> <ul class="ls-missed"> <<for _day range _missed>> <li><<= setup.dayChip(_day)>></li> <</for>> </ul> <<else>> <p class="ls-none">No days missed this year.</p> <</if>> </div> </div> </div>
<<if $fnId>> <<include "FnDetail">> <<else>> <<include "FnList">> <</if>>
<<set _tab to ($fnTab is "people" ? "people" : ($fnTab is "items" ? "items" : "devices"))>> <div class="fn-tabs"> <<if _tab is "devices">> <button class="fn-tab on" type="button" data-action="fn-tab" data-arg="devices"><span class="fn-tic devices"></span><small>Devices</small></button> <<else>> <button class="fn-tab" type="button" data-action="fn-tab" data-arg="devices"><span class="fn-tic devices"></span><small>Devices</small></button> <</if>> <<if _tab is "people">> <button class="fn-tab on" type="button" data-action="fn-tab" data-arg="people"><span class="fn-tic people"></span><small>People</small></button> <<else>> <button class="fn-tab" type="button" data-action="fn-tab" data-arg="people"><span class="fn-tic people"></span><small>People</small></button> <</if>> <<if _tab is "items">> <button class="fn-tab on" type="button" data-action="fn-tab" data-arg="items"><span class="fn-tic items"></span><small>Items</small></button> <<else>> <button class="fn-tab" type="button" data-action="fn-tab" data-arg="items"><span class="fn-tic items"></span><small>Items</small></button> <</if>> </div>
<<set _tab to ($fnTab is "people" ? "people" : ($fnTab is "items" ? "items" : "devices"))>> <<set _list to setup.fnList(_tab)>> <<set _ix to setup.indexList(_list)>> <div class="app-page fn-page"> <div class="fn-head">Finder</div> <div class="fn-body"> <<if _ix.length>> <<for _i range _ix>> <<set _it to _list[_i]>> <button type="button" class="fn-card" data-action="fn-open" @data-arg="_it.id"> <span @class="setup.fnGlyph(_it)"></span> <span class="fn-copy"> <b><<= _it.name>></b> <small><<= _it.kind>></small> <small><<= _it.preview || _it.place>></small> <em>Last location: <<= _it.lastSeen>></em> </span> <span class="fn-chev">›</span> </button> <</for>> <<elseif _tab is "people">> <div class="fn-empty">No people</div> <<elseif _tab is "items">> <div class="fn-empty">No items</div> <<else>> <div class="fn-empty">No devices</div> <</if>> </div> <<include "FnTabs">> </div>
<<set _it to setup.fnItem($fnId)>> <div class="app-page fn-page fn-detail"> <div class="fn-head"><<= _it.name || "Finder">></div> <div class="fn-blank"></div> <div class="fn-sheet"> <h2><<= _it.name>></h2> <p class="fn-kind"><<= _it.kind>></p> <p class="fn-place"><<= _it.place>></p> <<if _it.address>> <p class="fn-addr"><<= _it.address>></p> <</if>> <p class="fn-meta">Last location: <<= _it.lastSeen>></p> <<if _it.coords>> <p class="fn-meta"><<= _it.coords>></p> <</if>> <<if _it.battery neq "">> <p class="fn-batt"><<= _it.battery>>%</p> <</if>> <button type="button" class="fn-sound" data-action="flash">Play Sound</button> </div> </div>
<<if not setup.cdLogged()>> <<if $cdPage is "security">> <<include "CdSecurity">> <<else>> <<include "CdLogin">> <</if>> <<elseif $cdFile>> <<include "CdFile">> <<elseif $cdPage is "pattern">> <<include "CdPattern">> <<elseif $cdId>> <<include "CdFolder">> <<else>> <<include "CdHome">> <</if>>
<<set _d to setup.cdData()>> <div class="app-page gd-page gd-auth"> <div class="gd-auth-body"> <div class="gd-cloud"></div> <h1>Sign in</h1> <p class="gd-mail"><<= _d.email>></p> <label class="gd-field" id="gd-pass-wrap"> <span>Password</span> <input id="gd-pass" type="password" autocomplete="new-password" spellcheck="false"> </label> <div class="gd-err" id="gd-err"><<= $cdErr>></div> <button type="button" class="gd-btn" data-action="gd-next">Next</button> </div> </div>
<<set _d to setup.cdData()>> <div class="app-page gd-page gd-auth"> <div class="gd-auth-body"> <div class="gd-cloud"></div> <h1>Security question</h1> <p class="gd-mail"><<= _d.email>></p> <div class="gd-q"> <span class="gd-qmark">?</span> <b><<= _d.question>></b> </div> <label class="gd-field fill" id="gd-ans-wrap"> <span>Your answer</span> <input id="gd-ans" type="text" autocomplete="off" autocapitalize="off" spellcheck="false"> </label> <div class="gd-err" id="gd-err"><<= $cdErr>></div> <button type="button" class="gd-btn" data-action="gd-verify">Verify</button> </div> </div>
<<set _d to setup.cdData()>> <<set _folders to setup.cdFolders()>> <<set _ix to setup.indexList(_folders)>> <div class="app-page gd-page"> <div class="gd-head"> <button type="button" class="gd-search" data-action="flash">Search in Drive</button> <button type="button" class="gd-ava" data-action="flash"><<= setup.cdInitials()>></button> </div> <div class="gd-label">My Drive</div> <div class="gd-list"> <<for _i range _ix>> <<set _f to _folders[_i]>> <button type="button" class="gd-row" data-action="gd-folder" @data-arg="_f.id"> <span @class="setup.cdFoldIco(_f)"></span> <span class="gd-copy"> <b><<= _f.name>></b> <small><<= setup.cdCount(_f)>> files</small> </span> <span class="gd-more" data-action="flash">⋮</span> </button> <</for>> </div> <button type="button" class="gd-fab" data-action="flash">+</button> </div>
<<set _f to setup.cdFolder($cdId)>> <<set _files to setup.cdFiles(_f)>> <<set _ix to setup.indexList(_files)>> <div class="app-page gd-page"> <div class="gd-head folder"> <div class="gd-title"><<= _f.name>></div> <button type="button" class="gd-ico-btn" data-action="flash" aria-label="Search"></button> <button type="button" class="gd-more head" data-action="flash">⋮</button> </div> <div class="gd-list"> <<for _i range _ix>> <<set _doc to _files[_i]>> <button type="button" class="gd-row" data-action="gd-file" @data-arg="_doc.id"> <span @class="setup.cdFileIco(_doc)"></span> <span class="gd-copy"> <b><<= _doc.name>></b> <small><<= _doc.size>></small> </span> <span class="gd-more" data-action="flash">⋮</span> </button> <</for>> </div> </div>
<<set _f to setup.cdFolder($cdId)>> <div class="app-page gd-page gd-pat"> <div class="gd-pat-ico"></div> <h1><<= _f.name>></h1> <<if $cdPatErr>> <p class="gd-pat-sub err">Wrong pattern</p> <<else>> <p class="gd-pat-sub">Draw pattern</p> <</if>> <div class="gd-pat-wrap" id="gd-pattern"> <svg class="gd-pat-lines" id="gd-pat-lines" viewBox="0 0 100 100" preserveAspectRatio="none"></svg> <<for _i range setup.indexList(9)>> <span class="gd-dot" @data-i="_i"></span> <</for>> </div> <button type="button" class="gd-try" data-action="gd-pat-reset">Try again</button> </div>
<<set _doc to setup.cdFile($cdFile)>> <<set _kind to setup.cdFileKind(_doc)>> <<if _kind is "sheet">> <<include "CdSheet">> <<elseif _kind is "idcard">> <<include "CdIdcard">> <<elseif _kind is "video">> <<include "CdVideo">> <<else>> <<include "CdArticle">> <</if>>
<<set _doc to setup.cdFile($cdFile)>> <div class="app-page gd-page gd-doc"> <div class="gd-doc-head"> <span @class="setup.cdFileIco(_doc) + ' sm'"></span> <b><<= _doc.name>></b> <button type="button" class="gd-more head" data-action="flash">⋮</button> </div> <div class="gd-sheet"> <span @class="setup.cdFileIco(_doc)"></span> <p><<= _doc.name>></p> <small><<= _doc.size>></small> </div> </div>
<<set _doc to setup.cdFile($cdFile)>> <<set _paras to setup.cdParas(_doc)>> <div class="app-page gd-page gd-doc"> <div class="gd-doc-head"> <span @class="setup.cdFileIco(_doc) + ' sm'"></span> <b><<= _doc.name>></b> <button type="button" class="gd-more head" data-action="flash">⋮</button> </div> <div class="gd-article"> <<if _doc.title>> <h1><<= _doc.title>></h1> <</if>> <<for _i range setup.indexList(_paras)>> <p><<= _paras[_i]>></p> <</for>> </div> </div>
<<set _doc to setup.cdFile($cdFile)>> <div class="app-page gd-page gd-doc"> <div class="gd-doc-head"> <span @class="setup.cdFileIco(_doc) + ' sm'"></span> <b><<= _doc.name>></b> <button type="button" class="gd-more head" data-action="flash">⋮</button> </div> <div class="gd-video"> <<mediaFull setup.cdMedia(_doc)>> </div> </div>
<<set _doc to setup.cdFile($cdFile)>> <<set _rows to setup.cdFields(_doc)>> <<set _foot to setup.cdFoot(_doc)>> <div class="app-page gd-page gd-doc"> <div class="gd-doc-head"> <span @class="setup.cdFileIco(_doc) + ' sm'"></span> <b><<= _doc.name>></b> <button type="button" class="gd-more head" data-action="flash">⋮</button> </div> <div class="gd-article idcard"> <<if _doc.title>> <h1><<= _doc.title>></h1> <</if>> <<if _doc.banner>> <div class="gd-banner"><<= _doc.banner>></div> <</if>> <table class="gd-table"> <tr><th>Field</th><th>Value</th></tr> <<for _i range setup.indexList(_rows)>> <tr> <td><<= _rows[_i].label>></td> <td><<= _rows[_i].value>></td> </tr> <</for>> </table> <<for _i range setup.indexList(_foot)>> <p class="gd-foot"><<= _foot[_i]>></p> <</for>> <<if _doc.note>> <p class="gd-note"><<= _doc.note>></p> <</if>> </div> </div>
<<if $cupPage is "thread">> <<include "CupThread">> <<elseif $cupPage is "profile">> <<include "CupProfile">> <<elseif $cupTab is "star">> <<include "CupStar">> <<elseif $cupTab is "chat">> <<include "CupChats">> <<else>> <<include "CupHome">> <</if>>
<div class="cup-tabs"> <<if $cupTab is "home">> <button class="cup-tab on" type="button" data-action="cup-tab" data-arg="home" aria-label="Home"><span class="cup-tic house"></span></button> <<else>> <button class="cup-tab" type="button" data-action="cup-tab" data-arg="home" aria-label="Home"><span class="cup-tic house"></span></button> <</if>> <<if $cupTab is "star">> <button class="cup-tab on" type="button" data-action="cup-tab" data-arg="star" aria-label="Featured"><span class="cup-tic star"></span></button> <<else>> <button class="cup-tab" type="button" data-action="cup-tab" data-arg="star" aria-label="Featured"><span class="cup-tic star"></span></button> <</if>> <<if $cupTab is "chat">> <button class="cup-tab on" type="button" data-action="cup-tab" data-arg="chat" aria-label="Chats"><span class="cup-tic chat"></span></button> <<else>> <button class="cup-tab" type="button" data-action="cup-tab" data-arg="chat" aria-label="Chats"><span class="cup-tic chat"></span></button> <</if>> </div>
<<set _cards to setup.cupCardList(_p)>> <<for _i range setup.indexList(_cards)>> <<set _card to _cards[_i]>> <<if _card.type is "photo">> <div class="cup-photo"> <button class="cup-shot-open" type="button" data-action="open-media" @data-arg="_i"> <<mediaThumb setup.cupMedia(_card)>> </button> <<if _showCupActs>> <button class="cup-like-mini" type="button" data-action="flash" aria-label="Like"></button> <</if>> </div> <<else>> <div class="cup-prompt"> <small><<= _card.title>></small> <b><<= _card.text>></b> <<if _showCupActs>> <button class="cup-like-mini" type="button" data-action="flash" aria-label="Like"></button> <</if>> </div> <</if>> <</for>>
<div class="app-page cup-page"> <div class="cup-head"> <span></span> <div class="cup-title">Cupid</div> <span></span> </div> <div class="cup-main"> <div class="cup-scroll home" id="cup-home-scroll"></div> <div class="cup-float"> <button class="cup-skip" type="button" data-action="flash" aria-label="Skip">×</button> <button class="cup-heart" type="button" data-action="flash" aria-label="Like"></button> </div> </div> <<include "CupTabs">> </div>
<<set _feat to setup.cupFeatured()>> <div class="app-page cup-page"> <div class="cup-head"> <span></span> <div class="cup-title">Cupid</div> <span></span> </div> <div class="cup-main"> <div class="cup-feat-wrap"> <div class="cup-feat-row"> <<for _p range _feat>> <button class="cup-feat-card" type="button" data-action="cup-feat" @data-arg="_p.id"> <span class="cup-shot" @data-tone="setup.cupTone(_p.id, 0)"></span> <span class="cup-feat-who"> <span class="cup-ava cup-ini" @data-tone="setup.cupTone(_p.id, 1)"><<= setup.cupIni(_p.name)>></span> <b><<= _p.name>></b> </span> </button> <</for>> </div> </div> </div> <<include "CupTabs">> </div>
<div class="app-page cup-page"> <div class="cup-head"> <span></span> <div class="cup-title">Cupid</div> <span></span> </div> <div class="cup-main"> <div class="cup-scroll home"> <div id="cup-feed"></div> </div> </div> <<include "CupTabs">> </div>
<<set _chats to setup.cupChats()>> <div class="app-page cup-page"> <div class="cup-head"> <span></span> <div class="cup-title">Cupid</div> <span></span> </div> <div class="cup-main"> <div class="cup-scroll chats"> <<for _th range _chats>> <button class="cup-row" type="button" data-action="cup-open" @data-arg="_th.id"> <span class="cup-ava cup-ini" @data-tone="setup.cupTone(_th.id, 0)"><<= setup.cupIni(_th.name)>></span> <span class="cup-row-main"> <span class="cup-row-top"> <b><<= _th.name>></b> <small><<= _th.when>></small> </span> <span class="cup-row-prev"><<= setup.cupPreview(_th)>></span> </span> </button> <</for>> </div> </div> <<include "CupTabs">> </div>
<<set _th to setup.cupChat($cupId)>> <div class="app-page cup-page cup-thread-page"> <div class="cup-head chat"> <span></span> <button class="cup-person" type="button" data-action="cup-profile" @data-arg="_th.id"> <span class="cup-ava cup-ini" @data-tone="setup.cupTone(_th.id, 0)"><<= setup.cupIni(_th.name)>></span> <span> <b><<= _th.name>> <<if _th.emoji>><<= _th.emoji>><</if>></b> </span> </button> <span></span> </div> <div class="cup-thread" id="cup-chat"> <<for _msg range _th.messages>> <<if _msg.type is "day">> <div class="cup-day"><<= setup.dayChip(_msg.text)>></div> <<elseif _msg.from is "me">> <div @class="'cup-bubble me' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg>> <small><<= _msg.time>> ✓</small> </div> <<else>> <div @class="'cup-bubble them' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg>> <small><<= _msg.time>></small> </div> <</if>> <</for>> </div> <div class="cup-compose"> <button class="cup-plus" type="button" data-action="flash">+</button> <button class="cup-input" type="button" data-action="flash">Message...</button> <button class="cup-send" type="button" data-action="flash" aria-label="Send"></button> </div> </div>
<<if $qrPage is "thread">> <<include "QrThread">> <<elseif $qrPage is "chats">> <<include "QrChats">> <<else>> <<include "QrHome">> <</if>>
<<set _qr to setup.qrData()>> <<set _photos to setup.qrGallery()>> <div class="app-page qr-page"> <div class="qr-head"> <span></span> <div class="qr-title">QR Scanner</div> <span></span> </div> <div class="qr-body"> <div class="qr-hero"></div> <h1>QR Scanner</h1> <p>Scan a QR code from an image in your gallery. No camera needed.</p> <button class="qr-choose" type="button" data-action="qr-pick">Choose an image</button> </div> <<if $qrSheet is "pick">> <div class="qr-mask"> <div class="qr-sheet pick"> <div class="qr-sheet-bar"></div> <div class="qr-pick-head"> <div>Select an image</div> <button type="button" data-action="qr-sheet" data-arg="" aria-label="Close">×</button> </div> <div class="qr-pick-scroll"> <div class="qr-grid"> <<for _i range setup.indexList(_photos)>> <button class="qr-cell" type="button" data-action="qr-scan" @data-arg="_i"> <img @src="_photos[_i].src" alt=""> </button> <</for>> </div> </div> </div> </div> <<elseif $qrSheet is "miss">> <div class="qr-mask mid" data-action="qr-sheet" data-arg=""> <div class="qr-sheet card" data-action="qr-hold"> <div class="qr-sheet-bar"></div> <div class="qr-status miss"></div> <h2>No QR code found</h2> <p>We couldn't find a QR code in this image.<br>Please try another one.</p> <div class="qr-tips"> <b>Tips</b> <ul> <li>Make sure the image contains a visible QR code</li> <li>Try zooming in on the QR code before taking the screenshot</li> <li>Ensure the image is clear and well-lit</li> </ul> </div> <button class="qr-btn blue" type="button" data-action="qr-again">Try again</button> </div> </div> <<elseif $qrSheet is "hit">> <div class="qr-mask mid" data-action="qr-sheet" data-arg=""> <div class="qr-sheet card" data-action="qr-hold"> <div class="qr-sheet-bar"></div> <div class="qr-status hit"></div> <h2>QR Code detected!</h2> <div class="qr-result"> <div class="qr-result-label">QR Code content</div> <small>Text content</small> <div class="qr-result-box"><<= _qr.content>></div> </div> <button class="qr-btn green" type="button" data-action="qr-open">Open</button> <button class="qr-btn ghost" type="button" data-action="qr-again">Scan another</button> </div> </div> <</if>> </div>
<<set _chats to setup.qrThreads()>> <div class="app-page qr-page qr-inbox"> <div class="qr-head chat"> <span></span> <div class="qr-title left">Messages</div> <span></span> </div> <div class="qr-chat-list"> <<for _i range setup.indexList(_chats)>> <<set _th to _chats[_i]>> <button class="qr-row" type="button" data-action="qr-thread" @data-arg="_th.id"> <<personAva _th "qr-ava">> <span class="qr-row-main"> <span class="qr-row-top"> <b><<= _th.name>> <<if _th.emoji>><<= _th.emoji>><</if>></b> <small><<= _th.when>></small> </span> <span class="qr-row-prev"><<= setup.qrPreview(_th)>></span> </span> </button> <</for>> </div> </div>
<<set _th to setup.qrThread($qrThread)>> <div class="app-page qr-page qr-inbox qr-thread-page"> <div class="qr-head chat"> <span></span> <button class="qr-person" type="button" data-action="flash"> <<personAva _th "qr-ava sm">> <span><<= _th.name>> <<if _th.emoji>><<= _th.emoji>><</if>></span> </button> <span></span> </div> <div class="qr-thread" id="qr-chat"> <<for _msg range _th.messages>> <<if _msg.type is "day">> <div class="qr-day"><<= setup.dayChip(_msg.text)>></div> <<elseif setup.msgMine(_msg)>> <div @class="'qr-bubble me' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg>> <<if _msg.time>><small><<= _msg.time>> ✓</small><</if>> </div> <<else>> <div @class="'qr-bubble them' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg>> <<if _msg.time>><small><<= _msg.time>></small><</if>> </div> <</if>> <</for>> </div> <div class="qr-compose"> <button class="qr-plus" type="button" data-action="flash">+</button> <button class="qr-field" type="button" data-action="flash">Message...</button> <button class="qr-send" type="button" data-action="flash" aria-label="Send"></button> </div> </div>
<<if $mfId>> <<include "MfAlbum">> <<else>> <<include "MfHome">> <</if>>
<<set _rec to setup.mfRecents()>> <<set _hist to setup.mfListened()>> <<set _pls to setup.mfList("playlists")>> <<set _pods to setup.mfList("podcasts")>> <div class="app-page mf-page"> <div class="mf-head"> <span></span> <div class="mf-title">Musicfy</div> <span></span> </div> <div class="mf-scroll"> <<if _rec.length>> <div class="mf-recents"> <<for _i range setup.indexList(_rec)>> <<set _p to _rec[_i]>> <button class="mf-recent" type="button" data-action="mf-open" @data-arg="_p.id"> <img @src="setup.mfSrc(_p.cover)" alt=""> <span><<= _p.chip || _p.name>></span> </button> <</for>> </div> <</if>> <<if _hist.length>> <h2>Recently listened</h2> <div class="mf-listened"> <<for _i range setup.indexList(_hist)>> <<set _t to _hist[_i]>> <button class="mf-listen" type="button" data-action="flash"> <img @src="setup.mfSrc(_t.cover)" alt=""> <span> <b><<= _t.name>></b> <small><<= _t.artist>></small> </span> <<if _t.when>> <small class="mf-when"><<= _t.when>></small> <</if>> </button> <</for>> </div> <</if>> <<if _pls.length>> <h2>Playlists</h2> <div class="mf-row"> <<for _i range setup.indexList(_pls)>> <<set _p to _pls[_i]>> <button class="mf-card" type="button" data-action="mf-open" @data-arg="_p.id"> <img @src="setup.mfSrc(_p.cover)" alt=""> <b><<= _p.name>></b> <small><<= _p.sub>></small> </button> <</for>> </div> <</if>> <<if _pods.length>> <h2>Podcasts</h2> <div class="mf-row"> <<for _i range setup.indexList(_pods)>> <<set _p to _pods[_i]>> <button class="mf-card" type="button" data-action="mf-open" @data-arg="_p.id"> <img @src="setup.mfSrc(_p.cover)" alt=""> <b><<= _p.name>></b> <small><<= _p.sub>></small> </button> <</for>> </div> <</if>> </div> </div>
<<set _p to setup.mfItem($mfId)>> <<set _tracks to setup.mfTracks(_p)>> <div class="app-page mf-page mf-album"> <div class="mf-hero" @style="'background:linear-gradient(180deg,' + _p.color + ',#121212)'"> <div class="mf-hero-art"> <img @src="setup.mfSrc(_p.cover)" alt=""> </div> </div> <div class="mf-album-body"> <h1><<= _p.name>></h1> <p><<= _p.sub>></p> <div class="mf-meta"><span class="mf-face"></span> <<= _p.songs>> songs • <<= _p.mins>> min</div> <div class="mf-tools"> <button type="button" data-action="flash" class="mf-ico heart" aria-label="Like"></button> <button type="button" data-action="flash" class="mf-ico down" aria-label="Download"></button> <button type="button" data-action="flash" class="mf-ico more" aria-label="More"></button> <span class="mf-tools-spacer"></span> <button type="button" data-action="flash" class="mf-ico shuffle" aria-label="Shuffle"></button> <button type="button" data-action="flash" class="mf-play" aria-label="Play"></button> </div> <div class="mf-tracks"> <<for _i range setup.indexList(_tracks)>> <<set _t to _tracks[_i]>> <button class="mf-track" type="button" data-action="flash"> <img @src="setup.mfSrc(_t.cover)" alt=""> <span> <b><<= _t.name>></b> <small><<= _t.artist>></small> </span> <i class="mf-ico more sm"></i> </button> <</for>> </div> </div> </div>
<<if $netView is "history">> <<include "NetHistory">> <<elseif $netView is "private">> <<include "NetPrivate">> <<elseif $netView is "tabs">> <<include "NetTabs">> <<else>> <<include "NetPage">> <</if>>
<<set _tab to setup.netTab($netTab)>> <<set _blocks to setup.netBlocks(_tab)>> <div class="app-page net-page"> <div class="net-chrome"> <div class="net-q"><<= _tab.query>></div> </div> <div class="net-addr-row"> <span class="net-a">A</span> <div class="net-addr"><span class="net-lock"></span> <<= _tab.host>></div> <button class="net-reload" type="button" data-action="flash" aria-label="Reload"></button> </div> <div class="net-scroll"> <<for _i range setup.indexList(_blocks)>> <<set _b to _blocks[_i]>> <<if _b.kind is "hero">> <div class="net-hero"> <h1><<= _tab.query>></h1> <p>About <<= _tab.about>> results (<<= _tab.time>> seconds)</p> </div> <<elseif _b.kind is "featured">> <div class="net-block"> <<if _b.kicker>><div class="net-kicker"><<= _b.kicker>></div><</if>> <div class="net-rtitle"><<= _b.title>></div> <p class="net-snip"><<= _b.snippet>></p> <<if _b.image>> <img class="net-shot" @src="setup.netSrc(_b.image)" alt=""> <</if>> </div> <<elseif _b.kind is "ask">> <<set _qs to setup.netAsk(_b)>> <div class="net-block"> <div class="net-kicker tight"><<= _b.title>></div> <<for _j range setup.indexList(_qs)>> <<set _q to _qs[_j]>> <div class="net-ask"> <span class="net-qmark">?</span> <span><<= _q.q>></span> </div> <</for>> </div> <<else>> <div class="net-block"> <div class="net-rtitle"><<= _b.title>></div> <p class="net-snip"><<= _b.snippet>></p> <<if _b.image>> <img class="net-shot" @src="setup.netSrc(_b.image)" alt=""> <</if>> </div> <</if>> <</for>> </div> <div class="net-bar"> <button type="button" data-action="flash" class="net-tool back" aria-label="Back"></button> <button type="button" data-action="flash" class="net-tool fwd" aria-label="Forward"></button> <button type="button" data-action="flash" class="net-tool share" aria-label="Share"></button> <button type="button" data-action="flash" class="net-tool book" aria-label="Bookmark"></button> <button type="button" data-action="net-tabs" class="net-tool tabs" aria-label="Tabs"></button> </div> </div>
<<set _tabs to setup.netTabs()>> <div class="app-page net-page net-tabs-page"> <div class="net-tabs-head"> <span></span> <div class="net-tabs-title"><<= _tabs.length>> tabs</div> <span></span> </div> <div class="net-tab-scroll"> <div class="net-tab-grid"> <<for _i range setup.indexList(_tabs)>> <<set _t to _tabs[_i]>> <button class="net-card" type="button" data-action="net-open" @data-arg="_t.id"> <span class="net-globe"></span> <span class="net-card-foot"> <span class="net-badge" @data-badge="_t.badge"></span> <span class="net-card-q"><<= _t.short>></span> </span> </button> <</for>> </div> </div> <div class="net-priv-bar"> <button type="button" data-action="net-private">Private pages</button> <button type="button" data-action="flash" class="net-plus" aria-label="New tab">+</button> </div> <<if $netLock>> <div class="net-mask" data-action="net-lock-close"> <div class="net-lock-card" data-action="net-hold"> <div class="net-lock-ico"></div> <div class="net-lock-title">Private Browsing</div> <div class="net-lock-sub">Enter password to continue</div> <div class="net-pass"><span class="net-pass-text"><<= setup.netPassMask()>></span></div> <button class="net-go" type="button" data-action="net-pin-go">Continue</button> <div class="keypad net-keys"> <button class="key" type="button" data-action="pin-digit" data-arg="1">1</button> <button class="key" type="button" data-action="pin-digit" data-arg="2">2</button> <button class="key" type="button" data-action="pin-digit" data-arg="3">3</button> <button class="key" type="button" data-action="pin-digit" data-arg="4">4</button> <button class="key" type="button" data-action="pin-digit" data-arg="5">5</button> <button class="key" type="button" data-action="pin-digit" data-arg="6">6</button> <button class="key" type="button" data-action="pin-digit" data-arg="7">7</button> <button class="key" type="button" data-action="pin-digit" data-arg="8">8</button> <button class="key" type="button" data-action="pin-digit" data-arg="9">9</button> <div></div> <button class="key" type="button" data-action="pin-digit" data-arg="0">0</button> <button class="key key-del" type="button" data-action="pin-del">⌫</button> </div> </div> </div> <</if>> </div>
<<set _tabs to setup.netPrivate()>> <div class="app-page net-page net-tabs-page"> <div class="net-tabs-head"> <span></span> <div class="net-tabs-title"><<= _tabs.length>> private tabs</div> <span></span> </div> <div class="net-tab-scroll"> <div class="net-tab-grid"> <<for _i range setup.indexList(_tabs)>> <<set _t to _tabs[_i]>> <button class="net-card" type="button" data-action="net-open" @data-arg="_t.id"> <span class="net-globe"></span> <span class="net-card-foot"> <span class="net-badge" @data-badge="_t.badge"></span> <span class="net-card-q"><<= _t.short>></span> </span> </button> <</for>> </div> </div> <div class="net-priv-bar"> <button type="button" data-action="net-history">Search history</button> <button type="button" data-action="net-main-tabs">Regular tabs</button> </div> </div>
<<set _hist to setup.netHistory()>> <div class="app-page net-page net-hist-page"> <div class="net-hist-head"> <button class="net-hist-back" type="button" data-action="net-hist-back">‹</button> <div class="net-hist-title">Search History</div> <span></span> </div> <div class="net-hist-scroll"> <<for _i range setup.indexList(_hist)>> <<set _h to _hist[_i]>> <div class="net-hist-row"> <span class="net-hist-mag"></span> <span> <b><<= _h.q>></b> <small><<= _h.when>></small> </span> </div> <</for>> </div> </div>
<<set _tab to ($ttTab is "upcoming" ? "upcoming" : "past")>> <<set _trips to setup.ttList(_tab)>> <div class="app-page tt-page"> <div class="tt-head"> <span></span> <div class="tt-title">TrainTrip</div> <span></span> <div class="tt-tabs"> <<if _tab is "upcoming">> <button class="tt-tab on" type="button" data-action="tt-tab" data-arg="upcoming">Upcoming</button> <button class="tt-tab" type="button" data-action="tt-tab" data-arg="past">Past</button> <<else>> <button class="tt-tab" type="button" data-action="tt-tab" data-arg="upcoming">Upcoming</button> <button class="tt-tab on" type="button" data-action="tt-tab" data-arg="past">Past</button> <</if>> </div> </div> <div class="tt-scroll"> <<if _trips.length is 0>> <div class="empty-msg">No journeys.</div> <<else>> <<for _i range setup.indexList(_trips)>> <<set _t to _trips[_i]>> <<set _stops to setup.ttStops(_t)>> <div class="tt-card"> <div class="tt-card-top"> <span class="tt-train"></span> <b><<= setup.dayChip(_t.date)>></b> <span class="tt-num"><<= _t.number>></span> </div> <div class="tt-body"> <div class="tt-stops"> <<for _j range setup.indexList(_stops)>> <<set _st to _stops[_j]>> <div class="tt-stop"> <span class="tt-time"><<= _st.time>></span> <span class="tt-rail"><i></i></span> <span class="tt-stn"><<= _st.name>></span> </div> <</for>> </div> <div class="tt-dur">Total duration: <<= _t.duration>></div> <div class="tt-meta"> <div><small>PASSENGER</small><b><<= _t.passenger>></b></div> <div><small>COACH</small><b><<= _t.coach>></b></div> <div><small>SEAT</small><b><<= _t.seat>></b></div> </div> <div class="tt-ref"><span>Ref.</span><b><<= _t.ref>></b></div> </div> </div> <</for>> <</if>> </div> </div>
<<include setup.icPassage()>>
<div class="ic-tabs"> <<if $icTab is "chat" and not $icPage>> <button class="ic-tab on chat" type="button" data-action="ic-tab" data-arg="chat" aria-label="Chat"></button> <<else>> <button class="ic-tab chat" type="button" data-action="ic-tab" data-arg="chat" aria-label="Chat"></button> <</if>> <<if $icTab is "camera">> <button class="ic-tab on cam" type="button" data-action="ic-tab" data-arg="camera" aria-label="Camera"></button> <<else>> <button class="ic-tab cam" type="button" data-action="ic-tab" data-arg="camera" aria-label="Camera"></button> <</if>> <<if $icTab is "stories" and not $icPage>> <button class="ic-tab on people" type="button" data-action="ic-tab" data-arg="stories" aria-label="Stories"></button> <<else>> <button class="ic-tab people" type="button" data-action="ic-tab" data-arg="stories" aria-label="Stories"></button> <</if>> </div>
<div class="app-page ic-page ic-cam"> <div class="ic-cam-fill"></div> <div class="ic-cam-mark"></div> <div class="ic-cam-tools"> <button class="ic-tool gallery" type="button" data-action="ic-mem" aria-label="Memories"></button> <button class="ic-shutter" type="button" data-action="flash" aria-label="Shutter"></button> <button class="ic-tool flip" type="button" data-action="flash" aria-label="Flip camera"></button> </div> <<include "IcTabs">> </div>
<<set _snaps to setup.icSnaps()>> <div class="app-page ic-page ic-mem"> <div class="ic-mem-head"> <div class="ic-mem-title">Memories</div> <div class="ic-mem-tools"> <button class="ic-ico search" type="button" data-action="flash" aria-label="Search"></button> <button class="ic-ico more" type="button" data-action="flash" aria-label="More"></button> </div> </div> <div class="ic-mem-tabs"> <button class="ic-mem-tab on" type="button" data-action="ic-mem-tab" data-arg="snaps">Snaps</button> <button class="ic-mem-tab" type="button" data-action="ic-mem-tab" data-arg="eyes">My Eyes Only</button> </div> <div class="ic-mem-scroll"> <div class="ic-grid"> <<for _i range setup.indexList(_snaps)>> <button class="ic-cell" type="button" data-action="ic-photo" @data-arg="'snaps,' + _i"> <<mediaThumb _snaps[_i]>> </button> <</for>> </div> </div> <<include "IcTabs">> </div>
<<set _eyes to setup.icEyes()>> <div class="app-page ic-page ic-mem"> <div class="ic-mem-head"> <div class="ic-mem-title">Memories</div> <div class="ic-mem-tools"> <button class="ic-ico search" type="button" data-action="flash" aria-label="Search"></button> <button class="ic-ico more" type="button" data-action="flash" aria-label="More"></button> </div> </div> <div class="ic-mem-tabs"> <button class="ic-mem-tab" type="button" data-action="ic-mem-tab" data-arg="snaps">Snaps</button> <button class="ic-mem-tab on" type="button" data-action="ic-mem-tab" data-arg="eyes">My Eyes Only</button> </div> <div class="ic-mem-scroll"> <div class="ic-grid"> <<for _i range setup.indexList(_eyes)>> <button class="ic-cell" type="button" data-action="ic-photo" @data-arg="'eyes,' + _i"> <<mediaThumb _eyes[_i]>> </button> <</for>> </div> </div> <<include "IcTabs">> </div>
<div class="app-page ic-page ic-mem ic-eyes-pin"> <div class="ic-mem-head"> <div class="ic-mem-title">Memories</div> <div class="ic-mem-tools"> <button class="ic-ico search" type="button" data-action="flash" aria-label="Search"></button> <button class="ic-ico more" type="button" data-action="flash" aria-label="More"></button> </div> </div> <div class="ic-mem-tabs"> <button class="ic-mem-tab" type="button" data-action="ic-mem-tab" data-arg="snaps">Snaps</button> <button class="ic-mem-tab on" type="button" data-action="ic-mem-tab" data-arg="eyes">My Eyes Only</button> </div> <div class="ic-pin-wrap"> <div class="ic-lock"></div> <div class="ic-pin-title">My Eyes Only</div> <div class="ic-pin-dots"> <<for _i range setup.indexList(setup.icPin().length || 4)>> <<if setup.icPinBuf().length gt _i>> <span class="ic-pin-dot on"></span> <<else>> <span class="ic-pin-dot"></span> <</if>> <</for>> </div> <div class="ic-keys"> <button type="button" data-action="ic-digit" data-arg="1">1</button> <button type="button" data-action="ic-digit" data-arg="2">2</button> <button type="button" data-action="ic-digit" data-arg="3">3</button> <button type="button" data-action="ic-digit" data-arg="4">4</button> <button type="button" data-action="ic-digit" data-arg="5">5</button> <button type="button" data-action="ic-digit" data-arg="6">6</button> <button type="button" data-action="ic-digit" data-arg="7">7</button> <button type="button" data-action="ic-digit" data-arg="8">8</button> <button type="button" data-action="ic-digit" data-arg="9">9</button> <span></span> <button type="button" data-action="ic-digit" data-arg="0">0</button> <button class="ic-key-del" type="button" data-action="ic-del" aria-label="Delete"></button> </div> </div> <<include "IcTabs">> </div>
<<set _list to setup.icAlbumList($icAlbum)>> <<set _p to _list[$icPhoto]>> <div class="photo-full"> <div class="photo-full-img"> <<if _p>> <<mediaFull _p>> <<mediaStamp _p>> <<else>> <div class="empty-msg">Photo missing.</div> <</if>> </div> <<galleryNav>> </div>
<<set _me to setup.icMe()>> <<set _chats to setup.icThreads()>> <div class="app-page ic-page ic-chat-list"> <div class="ic-chat-head"> <span></span> <button class="ic-me-pic" type="button" data-action="flash"><img @src="setup.personSrc(_me)" alt=""></button> <div class="ic-chat-title">Chat</div> <button class="ic-ico addperson" type="button" data-action="flash" aria-label="Add"></button> <button class="ic-ico search" type="button" data-action="flash" aria-label="Search"></button> <button class="ic-ico more" type="button" data-action="flash" aria-label="More"></button> </div> <div class="ic-chat-scroll"> <<for _th range _chats>> <button class="ic-chat-row" type="button" data-action="ic-thread" @data-arg="_th.id"> <<if setup.icIsGroup(_th) and not _th.pic>> <span class="ic-group-ava"></span> <<else>> <img @src="setup.icSrc(_th.pic)" alt=""> <</if>> <span class="ic-chat-copy"> <b><<= setup.icIsGroup(_th) ? setup.icGroupTitle(_th) : _th.name>></b> <small><<= _th.preview>></small> </span> <small class="ic-chat-when"><<= _th.when>></small> </button> <</for>> </div> <<include "IcTabs">> </div>
<<set _th to setup.icThread($icThread)>> <<set _group to setup.icIsGroup(_th)>> <div class="app-page ic-page ic-thread"> <div class="ic-th-head"> <span></span> <<if _group and not _th.pic>> <span class="ic-group-ava"></span> <<else>> <img class="ic-th-ava" @src="setup.icSrc(_th.pic)" alt=""> <</if>> <span class="ic-th-who"> <<if _group>> <b><<= setup.icGroupTitle(_th)>></b> <<else>> <b><<= _th.name>></b> <small>@<<= _th.handle>></small> <</if>> </span> <button class="ic-th-ico video" type="button" data-action="flash" aria-label="Video"></button> <button class="ic-th-ico call" type="button" data-action="flash" aria-label="Call"></button> <button class="ic-ico more" type="button" data-action="flash" aria-label="More"></button> </div> <div class="ic-th-scroll" id="ic-chat"> <<for _i range setup.indexList(_th.messages)>> <<set _m to _th.messages[_i]>> <<if _m.type is "day">> <div class="ic-day"><<= setup.icDayLabel(_m.text)>></div> <<else>> <<set _color to setup.icColorClass(_th, _m)>> <div @class="setup.icStackClass(_th, _th.messages, _i)"> <<if not setup.icIsCont(_th.messages, _i)>> <div class="ic-tag-row"> <small @class="'ic-tag ' + _color"><<= setup.icSenderName(_th, _m)>></small> <<if setup.icMsgTime(_m)>> <small class="ic-time"><<= setup.icMsgTime(_m)>></small> <</if>> </div> <</if>> <<if _m.type is "shot">> <div @class="'ic-shot ' + _color"> <<if _m.kind is "video">> <span class="ic-shot-bubble video"></span> <<else>> <span class="ic-shot-bubble photo"></span> <</if>> <span>Screenshot</span> <span class="ic-shot-cam"></span> </div> <<else>> <div @class="'ic-line ' + _color + (setup.chatImage(_m) ? ' has-shot' : '')"> <<chatBody _m "deleted">> </div> <</if>> </div> <</if>> <</for>> </div> <div class="ic-compose"> <button class="ic-compose-cam" type="button" data-action="flash" aria-label="Camera"></button> <button class="ic-compose-in" type="button" data-action="flash">Send a chat</button> <button class="ic-compose-mic" type="button" data-action="flash" aria-label="Voice"></button> </div> </div>
<<set _me to setup.icMe()>> <<set _friends to setup.icFriendGroups()>> <<set _disc to setup.icDiscover()>> <div class="app-page ic-page ic-stories"> <div class="ic-chat-head"> <span></span> <button class="ic-me-pic" type="button" data-action="flash"><img @src="setup.personSrc(_me)" alt=""></button> <div class="ic-chat-title">Stories</div> <button class="ic-ico addperson" type="button" data-action="flash" aria-label="Add"></button> <button class="ic-ico search" type="button" data-action="flash" aria-label="Search"></button> <button class="ic-ico more" type="button" data-action="flash" aria-label="More"></button> </div> <div class="ic-st-scroll"> <div class="ic-st-label">Friends</div> <div class="ic-friends"> <<for _g range _friends>> <button class="ic-friend" type="button" data-action="ic-story" @data-arg="'friends|' + _g.openId"> <span class="ic-ring <<= _g.fresh ? 'fresh' : ''>>"><img @src="setup.personSrc(_g)" alt=""></span> <small><<= _g.first || _g.name>></small> </button> <</for>> </div> <div class="ic-st-label">For you</div> <div class="ic-disc"> <<for _d range _disc>> <button class="ic-card" type="button" data-action="ic-story" @data-arg="'discover|' + _d.id"> <<mediaThumb setup.asMedia(_d)>> <span class="ic-card-copy"> <b><<= _d.name>></b> <small><<= setup.dayChip(_d.when)>></small> </span> </button> <</for>> </div> </div> <<include "IcTabs">> </div>
<<set _pack to setup.storyPack()>> <<set _st to _pack.item>> <div class="ic-story-full"> <div class="ic-story-bars"><<storyBars _pack>></div> <div class="ic-story-top"> <img @src="setup.personSrc(_pack)" alt=""> <b><<= _pack.first || _pack.name>></b> </div> <<if setup.isVideo(setup.asMedia(_st))>> <<mediaFull setup.asMedia(_st) "ic-story-bg story-player">> <<else>> <img class="ic-story-bg" @src="setup.icSrc(_st.image)" alt=""> <</if>> <button class="story-hit" type="button" data-action="story-pause" aria-label="Pause"></button> <div class="story-pause-ico"></div> <<storyNav>> </div>
<<if $healthTab is "sleep">> <<include "HealthSleep">> <<else>> <<include "HealthHeart">> <</if>>
<div class="hl-tabs"> <<if $healthTab is "heart">> <button class="hl-tab on" type="button" data-action="health-tab" data-arg="heart"> <span class="hl-tab-ico heart"></span> Heart </button> <button class="hl-tab" type="button" data-action="health-tab" data-arg="sleep"> <span class="hl-tab-ico bed"></span> Sleep </button> <<else>> <button class="hl-tab" type="button" data-action="health-tab" data-arg="heart"> <span class="hl-tab-ico heart"></span> Heart </button> <button class="hl-tab on" type="button" data-action="health-tab" data-arg="sleep"> <span class="hl-tab-ico bed"></span> Sleep </button> <</if>> </div>
<<set _days to setup.healthHeart()>> <div class="app-page hl-page"> <div class="app-top"> <span></span> <div class="app-title">Health</div> </div> <<include "HealthTabs">> <div class="hl-scroll"> <<for _day range _days>> <div class="hl-date"><<= setup.dayChip(_day.date)>></div> <div class="hl-card"> <<for _row range _day.rows>> <div class="hl-bpm"> <span class="hl-heart"></span> <span class="hl-bpm-val"><b><<= _row.bpm>></b> <small>BPM</small></span> <span class="hl-bpm-time"><<= _row.time>></span> </div> <</for>> </div> <</for>> </div> </div>
<<set _nights to setup.healthSleep()>> <div class="app-page hl-page"> <div class="app-top"> <span></span> <div class="app-title">Health</div> </div> <<include "HealthTabs">> <div class="hl-scroll"> <<for _n range _nights>> <div class="hl-sleep"> <<if _n.date>> <div class="hl-sleep-title"><span class="hl-bed"></span><<= setup.dayChip(_n.date)>></div> <</if>> <div class="hl-sleep-row"> <span><small>Bedtime</small><b><<= _n.bed>></b></span> <span><small>Wake up</small><b><<= _n.wake>></b></span> </div> </div> <</for>> </div> </div>
<<if not $gptId>><<set $gptId to setup.gptDefaultId()>><</if>> <<set _chat to setup.gptChat($gptId)>> <<set _chats to setup.gptChats()>> <div class="app-page gpt-page"> <div class="gpt-head"> <span></span> <div class="gpt-title"><<= _chat.title>></div> <button class="mail-ico-btn" type="button" data-action="gpt-menu">☰</button> </div> <div class="gpt-scroll"> <<if _chat.created>> <div class="gpt-created">Conversation created on <<= _chat.created>></div> <</if>> <<for _m range _chat.messages>> <<if _m.from is "me">> <div @class="'gpt-bubble me' + (setup.chatImage(_m) ? ' has-shot' : '')"> <<if setup.chatImage(_m)>> <<chatBody _m>> <<else>> <<= _m.text>> <</if>> </div> <<else>> <div @class="'gpt-bubble ai' + (setup.chatImage(_m) ? ' has-shot' : '')"> <<if setup.chatImage(_m)>> <<chatBody _m>> <</if>> <<for _line range _m.lines>> <<if _line>> <div><<= _line>></div> <<else>> <div class="gpt-gap"></div> <</if>> <</for>> </div> <</if>> <</for>> </div> <div class="gpt-compose"> <button class="gpt-input" type="button" data-action="flash">Message TalkGPT...</button> <button class="gpt-send" type="button" data-action="flash" aria-label="Send"></button> </div> <<if $gptMenu>> <button class="mail-scrim" type="button" data-action="gpt-menu"></button> <div class="mail-drawer gpt-drawer"> <div class="gpt-drawer-top">Chats</div> <div class="mail-drawer-list"> <<for _c range _chats>> <button type="button" data-action="gpt-open" @data-arg="_c.id"><<= _c.title>></button> <</for>> </div> </div> <</if>> </div>
<<set _workouts to setup.fitWorkouts()>> <<set _open to setup.fitItem($fitId)>> <div class="app-page fit-page"> <div class="fit-head"> <span></span> <div class="fit-title">Fitness</div> <span></span> </div> <div class="fit-scroll"> <<for _w range _workouts>> <button class="fit-card" type="button" data-action="fit-open" @data-arg="_w.id"> <div class="fit-card-top"> <span class="fit-emoji"><<= _w.icon>></span> <span class="fit-card-copy"> <b><<= _w.name>></b> <small><<= setup.dayChip(_w.date)>></small> </span> <span class="fit-chev">›</span> </div> <div class="fit-stats<<if _w.km>> three<</if>>"> <div class="fit-stat"> <span class="fit-mark clock"></span> <b><<= _w.duration>></b> <small>Duration</small> </div> <<if _w.km>> <div class="fit-stat"> <span class="fit-mark path"></span> <b><<= _w.km>></b> <small>Distance</small> </div> <</if>> <div class="fit-stat"> <span class="fit-mark flame"></span> <b><<= _w.kcal>></b> <small>Calories</small> </div> </div> </button> <</for>> </div> <<if $fitId>> <button class="call-scrim" type="button" data-action="fit-close"></button> <div class="fit-sheet"> <div class="fit-handle"></div> <div class="fit-sheet-top"> <span class="fit-emoji dark"><<= _open.icon>></span> <span class="fit-card-copy"> <b><<= _open.name>></b> <small><<if _open.fullDate>><<= setup.dayChip(_open.fullDate)>><<else>><<= setup.dayChip(_open.date)>><</if>></small> </span> </div> <div class="fit-sheet-row"> <span class="fit-mark clock"></span> <div> <small>Time</small> <b><<= _open.when>></b> </div> </div> <div class="fit-sheet-row"> <span class="fit-mark clock"></span> <div> <small>Duration</small> <b><<= _open.duration>></b> </div> </div> <<if _open.km>> <div class="fit-sheet-row"> <span class="fit-mark path"></span> <div> <small>Distance</small> <b><<= _open.km>></b> </div> </div> <</if>> <div class="fit-sheet-row"> <span class="fit-mark flame"></span> <div> <small>Calories</small> <b><<= _open.kcal>></b> </div> </div> <<if _open.notes>> <div class="fit-notes"> <small>Notes</small> <div><<= _open.notes>></div> </div> <</if>> </div> <</if>> </div>
<<if $callContact>> <<include "CallContact">> <<elseif $callTab is "contacts">> <<include "CallContacts">> <<elseif $callTab is "keypad">> <<include "CallKeypad">> <<elseif $callTab is "favorites">> <<include "CallFavs">> <<else>> <<include "CallRecents">> <</if>>
<div class="call-tabs"> <<if $callTab is "recents">> <button class="call-tab on" type="button" data-action="call-tab" data-arg="recents"><span class="call-tab-ico clock"></span>Recent</button> <<else>> <button class="call-tab" type="button" data-action="call-tab" data-arg="recents"><span class="call-tab-ico clock"></span>Recent</button> <</if>> <<if $callTab is "contacts">> <button class="call-tab on" type="button" data-action="call-tab" data-arg="contacts"><span class="call-tab-ico people"></span>Contacts</button> <<else>> <button class="call-tab" type="button" data-action="call-tab" data-arg="contacts"><span class="call-tab-ico people"></span>Contacts</button> <</if>> <<if $callTab is "keypad">> <button class="call-tab on" type="button" data-action="call-tab" data-arg="keypad"><span class="call-tab-ico pad"></span>Keypad</button> <<else>> <button class="call-tab" type="button" data-action="call-tab" data-arg="keypad"><span class="call-tab-ico pad"></span>Keypad</button> <</if>> <<if $callTab is "favorites">> <button class="call-tab on" type="button" data-action="call-tab" data-arg="favorites"><span class="call-tab-ico star"></span>Favorites</button> <<else>> <button class="call-tab" type="button" data-action="call-tab" data-arg="favorites"><span class="call-tab-ico star"></span>Favorites</button> <</if>> </div>
<<set _rows to setup.callRecents()>> <div class="app-page call-page"> <div class="call-head"> <span></span> <div class="call-title">Recents</div> <button class="call-more" type="button" data-action="flash">⋮</button> </div> <div class="call-scroll"> <<for _r range _rows>> <button class="call-row" type="button" data-action="call-log" @data-arg="_r.id"> <<personAva _r "msg-ava call-ava">> <span class="call-row-main"> <b><<= _r.name>></b> <small> <<if _r.dir is "out">><span class="call-dir out"></span> <<else>><span class="call-dir in"></span> <</if>> <<= _r.when>> · <<= _r.duration>> </small> </span> <span class="call-row-handset"></span> </button> <</for>> </div> <<include "CallTabs">> <<if $callId>><<include "CallLogSheet">><</if>> </div>
<<set _r to setup.callRecent($callId)>> <button class="call-scrim" type="button" data-action="call-sheet-close"></button> <div class="call-sheet"> <div class="call-sheet-person"> <<personAva _r "msg-ava call-ava">> <div> <div class="call-sheet-name"><<= _r.name>></div> <div class="call-sheet-num"><<= _r.phone || "">></div> </div> </div> <div class="call-sheet-label">Call details</div> <div class="call-detail"> <<if _r.dir is "out">> <span class="call-dir out lg"></span> <span class="call-out-copy">Outgoing call</span> <<else>> <span class="call-dir in lg"></span> <span class="call-in-copy">Incoming call</span> <</if>> </div> <div class="call-detail dim"><span class="call-mini clock"></span> <<= _r.when>></div> <div class="call-detail dim"><span class="call-mini timer"></span> Duration: <<= _r.duration>></div> <div class="call-sheet-acts"> <button type="button" data-action="flash"><span class="call-round purple"></span>Call</button> <button type="button" data-action="flash"><span class="call-round blue"></span>Video</button> </div> </div>
<<set _groups to setup.callGroups()>> <div class="app-page call-page"> <div class="call-head"> <span></span> <div class="call-title">Contacts</div> <button class="call-more" type="button" data-action="flash">⋮</button> </div> <div class="call-scroll"> <<for _g range _groups>> <div class="call-letter"><<= _g.letter>></div> <<for _c range _g.people>> <button class="call-row" type="button" data-action="call-person" @data-arg="_c.id"> <<personAva _c "msg-ava call-ava">> <span class="call-row-main"> <b><<= _c.name>></b> <small><<= _c.phone || "">></small> </span> <span class="call-row-handset"></span> </button> <</for>> <</for>> </div> <<include "CallTabs">> </div>
<<set _th to setup.callContact($callContact)>> <div class="app-page msg-page msg-contact-page"> <div class="msg-head msg-contact-head"> <span></span> <span></span> <span></span> </div> <div class="msg-contact-scroll"> <<personAva _th "msg-ava xl">> <div class="msg-contact-name"><<= _th.name>></div> <div class="msg-actions"> <button type="button" data-action="flash" data-tone="message"><span class="msg-act-ico chat"></span><small>Message</small></button> <button type="button" data-action="flash" data-tone="call"><span class="msg-act-ico handset"></span><small>Call</small></button> <button type="button" data-action="flash" data-tone="video"><span class="msg-act-ico video"></span><small>Video</small></button> <button type="button" data-action="flash" data-tone="mail"><span class="msg-act-ico mail"></span><small>Mail</small></button> </div> <div class="msg-info-card"> <div class="msg-info-row"> <span class="msg-info-ico handset"></span> <span> <small>Phone</small> <b><<= _th.phone || "">></b> </span> </div> <div class="msg-info-row"> <span class="msg-info-ico star"></span> <span> <small>Favorite</small> <<if _th.favorite>> <b>Yes</b> <<else>> <b>No</b> <</if>> </span> </div> </div> </div> </div>
<div class="app-page call-page"> <div class="call-head"> <span></span> <div class="call-title">Keypad</div> <span></span> </div> <div class="dial-wrap"> <div class="dial-display" id="dial-display"><<= setup.dialBuf()>></div> <div class="dial-pad"> <button type="button" data-action="dial-key" data-arg="1">1</button> <button type="button" data-action="dial-key" data-arg="2">2<small>ABC</small></button> <button type="button" data-action="dial-key" data-arg="3">3<small>DEF</small></button> <button type="button" data-action="dial-key" data-arg="4">4<small>GHI</small></button> <button type="button" data-action="dial-key" data-arg="5">5<small>JKL</small></button> <button type="button" data-action="dial-key" data-arg="6">6<small>MNO</small></button> <button type="button" data-action="dial-key" data-arg="7">7<small>PQRS</small></button> <button type="button" data-action="dial-key" data-arg="8">8<small>TUV</small></button> <button type="button" data-action="dial-key" data-arg="9">9<small>WXYZ</small></button> <button type="button" data-action="dial-key" data-arg="*">*</button> <button type="button" data-action="dial-key" data-arg="0">0<small>+</small></button> <button type="button" data-action="dial-key" data-arg="#">#</button> </div> <div class="dial-actions"> <span></span> <<if setup.dialBuf()>> <button class="dial-go on" id="dial-call" type="button" data-action="flash" aria-label="Call"></button> <<else>> <button class="dial-go" id="dial-call" type="button" data-action="flash" aria-label="Call"></button> <</if>> <<if setup.dialBuf()>> <button class="dial-clear on" id="dial-clear" type="button" data-action="dial-clear" aria-label="Clear"></button> <<else>> <button class="dial-clear" id="dial-clear" type="button" data-action="dial-clear" aria-label="Clear"></button> <</if>> </div> </div> <<include "CallTabs">> </div>
<<set _favs to setup.callFavs()>> <div class="app-page call-page"> <div class="call-head"> <span></span> <div class="call-title">Favorites</div> <button class="call-more" type="button" data-action="flash">⋮</button> </div> <div class="call-scroll call-fav-grid"> <<for _c range _favs>> <button class="call-fav" type="button" data-action="call-fav" @data-arg="_c.id"> <<personAva _c "msg-ava call-ava lg">> <span class="call-fav-star"></span> <b><<= _c.name>></b> <small><<= _c.phone || "">></small> <span class="call-fav-icos"> <span class="call-fav-handset"></span> <span class="call-fav-chat"></span> </span> </button> <</for>> </div> <<include "CallTabs">> <<if $callFavSheet>><<include "CallFavSheet">><</if>> </div>
<button class="call-scrim" type="button" data-action="call-sheet-close"></button> <div class="call-sheet slim"> <button class="call-sheet-btn" type="button" data-action="flash"><span class="call-sheet-ico handset"></span>Call</button> <button class="call-sheet-btn" type="button" data-action="flash"><span class="call-sheet-ico video"></span>Video</button> <button class="call-sheet-btn" type="button" data-action="flash"><span class="call-sheet-ico star"></span>Remove from favorites</button> </div>
<<if $waContact>> <<include "WaContact">> <<elseif $waThread>> <<include "WaThread">> <<else>> <<include "WaList">> <</if>>
<<set _threads to setup.waThreads()>> <div class="app-page wa-page"> <div class="wa-head"> <span></span> <div class="wa-title">Whatmsg</div> <span></span> </div> <div class="wa-list"> <<for _th range _threads>> <button class="wa-row" type="button" data-action="wa-open" @data-arg="_th.id"> <<personAva _th "wa-ava">> <span class="wa-row-main"> <span class="wa-row-top"> <b><<= _th.name>></b> <small><<= _th.when>></small> </span> <span class="wa-row-prev"><<= setup.waPreview(_th)>></span> </span> </button> <</for>> </div> </div>
<<set _th to setup.waThread($waThread)>> <div class="app-page wa-page wa-chat-page"> <div class="wa-head wa-chat-head"> <span></span> <button class="wa-name-btn" type="button" data-action="wa-contact" @data-arg="_th.id"> <<personAva _th "wa-ava sm">> <<= _th.name>> </button> <span class="wa-head-tools"> <button type="button" data-action="flash" aria-label="Video" class="wa-tool cam"></button> <button type="button" data-action="flash" aria-label="Call" class="wa-tool handset"></button> <button type="button" data-action="flash" class="wa-more" aria-label="More"></button> </span> </div> <div class="wa-chat" id="wa-chat"> <<for _msg range _th.messages>> <<if _msg.type is "day">> <div class="wa-day"><<= setup.dayChip(_msg.text)>></div> <<elseif setup.msgMine(_msg)>> <div @class="'wa-bubble mine' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg "deleted">> <small><<= _msg.time>> <span class="wa-ticks"></span></small> </div> <<else>> <div @class="'wa-bubble theirs' + (setup.chatImage(_msg) ? ' has-shot' : '')"> <<chatBody _msg "deleted">> <small><<= _msg.time>></small> </div> <</if>> <</for>> </div> <div class="wa-composer"> <div class="wa-field"> <button class="wa-emo" type="button" data-action="flash" aria-label="Emoji"></button> <span>Message</span> <button class="wa-clip" type="button" data-action="flash" aria-label="Attach"></button> <button class="wa-pic" type="button" data-action="flash" aria-label="Gallery"></button> </div> <button class="wa-mic" type="button" data-action="flash" aria-label="Voice"></button> </div> </div>
<<set _th to setup.waThread($waContact)>> <div class="app-page wa-page wa-profile-page"> <div class="wa-head"> <span></span> <div class="wa-title left"><<= _th.name>></div> <span></span> </div> <div class="wa-profile"> <<personAva _th "wa-ava xl">> <div class="wa-profile-name"><<= _th.name>></div> <div class="wa-profile-phone"><<= _th.phone || "">></div> <div class="wa-profile-card"> <small>About</small> <b><<= _th.about>></b> </div> <div class="wa-profile-acts"> <button type="button" data-action="flash"><span class="wa-p-ico chat"></span>Message</button> <button type="button" data-action="flash"><span class="wa-p-ico audio"></span>Audio</button> <button type="button" data-action="flash"><span class="wa-p-ico video"></span>Video</button> </div> </div> </div>
<<if $bnbTab is "favs">><<include "NbFavs">> <<elseif $bnbTab is "trips">><<include "NbTrips">> <<elseif $bnbTab is "profile">><<include "NbProfile">> <<else>><<include "NbExplore">> <</if>>
<div class="nb-tabs"> <<if $bnbTab is "explore">> <button class="nb-tab on" type="button" data-action="bnb-tab" data-arg="explore"><span class="nb-tab-ico search"></span>Explore</button> <<else>> <button class="nb-tab" type="button" data-action="bnb-tab" data-arg="explore"><span class="nb-tab-ico search"></span>Explore</button> <</if>> <<if $bnbTab is "favs">> <button class="nb-tab on" type="button" data-action="bnb-tab" data-arg="favs"><span class="nb-tab-ico heart"></span>Favorites</button> <<else>> <button class="nb-tab" type="button" data-action="bnb-tab" data-arg="favs"><span class="nb-tab-ico heart"></span>Favorites</button> <</if>> <<if $bnbTab is "trips">> <button class="nb-tab on" type="button" data-action="bnb-tab" data-arg="trips"><span class="nb-tab-ico plane"></span>Trips</button> <<else>> <button class="nb-tab" type="button" data-action="bnb-tab" data-arg="trips"><span class="nb-tab-ico plane"></span>Trips</button> <</if>> <<if $bnbTab is "profile">> <button class="nb-tab on" type="button" data-action="bnb-tab" data-arg="profile"><span class="nb-tab-ico user"></span>Profile</button> <<else>> <button class="nb-tab" type="button" data-action="bnb-tab" data-arg="profile"><span class="nb-tab-ico user"></span>Profile</button> <</if>> </div>
<<set _nbExplore to true>> <<set _cats to setup.bnbCats()>> <<set _stays to setup.bnbFeed()>> <div class="app-page nb-page"> <div class="nb-head"> <span></span> <div class="nb-title">Explore</div> <span></span> </div> <div class="nb-cats"> <<for _c range _cats>> <button class="nb-cat" type="button" data-action="flash"> <span @class="'nb-cat-ico ' + _c.icon"></span> <<= _c.name>> </button> <</for>> </div> <div class="nb-scroll"> <<for _s range _stays>> <<include "NbCard">> <</for>> </div> <<include "NbTabs">> </div>
<<set _slide to setup.bnbSlide(_s)>> <<set _pic to setup.bnbPic(_s, _slide)>> <div class="nb-card"> <div class="nb-photo"> <div class="nb-photo-media"> <<if _pic>> <<mediaThumb setup.asMedia(_pic)>> <</if>> </div> <<if _s.fav>> <button class="nb-heart on" type="button" data-action="bnb-heart" @data-arg="_s.id" aria-label="Favorite"></button> <<else>> <button class="nb-heart" type="button" data-action="bnb-heart" @data-arg="_s.id" aria-label="Favorite"></button> <</if>> <<if setup.indexList(_s.photos).length gt 1>> <button class="nb-arrow prev" type="button" data-action="bnb-slide" data-dir="prev" @data-arg="_s.id" aria-label="Previous photo">‹</button> <button class="nb-arrow next" type="button" data-action="bnb-slide" data-dir="next" @data-arg="_s.id" aria-label="Next photo">›</button> <span class="nb-dots"> <<for _i range setup.indexList(_s.photos)>> <<if _i is _slide>> <i class="on"></i> <<else>> <i></i> <</if>> <</for>> </span> <</if>> </div> <div class="nb-card-row"> <b><<= _s.place>></b> <span class="nb-rate">★ <<= _s.rating>></span> </div> <<if not _nbExplore>> <<if _s.kind>> <div class="nb-card-sub"><<= _s.kind>></div> <</if>> <<if _s.dates>> <div class="nb-card-sub"><<= _s.dates>></div> <</if>> <</if>> <<if _s.price>> <div class="nb-card-price"><<= _s.price>></div> <</if>> </div>
<<set _stays to setup.bnbFavs()>> <div class="app-page nb-page"> <div class="nb-head lefty"> <span></span> <div class="nb-title left">Favorites</div> <span></span> </div> <div class="nb-scroll"> <<if _stays.length is 0>> <div class="nb-empty"> <span class="nb-empty-ico heart"></span> <b>No favorites yet</b> <p>When you find a place you like, tap the heart to add it to your favorites.</p> </div> <<else>> <<for _s range _stays>> <<include "NbCard">> <</for>> <</if>> </div> <<include "NbTabs">> </div>
<<set _trips to setup.bnbTrips($bnbTrip)>> <div class="app-page nb-page"> <div class="nb-head"> <span></span> <div class="nb-title">Trips</div> <span></span> </div> <div class="nb-trip-switch"> <<if $bnbTrip is "upcoming">> <button class="on" type="button" data-action="bnb-trip" data-arg="upcoming">Upcoming</button> <button type="button" data-action="bnb-trip" data-arg="past">Past</button> <<else>> <button type="button" data-action="bnb-trip" data-arg="upcoming">Upcoming</button> <button class="on" type="button" data-action="bnb-trip" data-arg="past">Past</button> <</if>> </div> <div class="nb-scroll"> <<if _trips.length is 0>> <div class="nb-empty"> <span class="nb-empty-ico plane"></span> <<if $bnbTrip is "upcoming">> <b>No upcoming trips</b> <p>When you book a place, it will appear here</p> <<else>> <b>No past trips</b> <p>Completed stays will appear here</p> <</if>> </div> <<else>> <<for _t range _trips>> <button class="nb-trip" type="button" data-action="flash"> <span class="nb-trip-pic"><img @src="setup.bnbSrc(_t.photo)" alt=""></span> <span class="nb-trip-copy"> <b><<= _t.name>></b> <small><<= _t.when>></small> </span> <span class="nb-chev">›</span> </button> <</for>> <</if>> </div> <<include "NbTabs">> </div>
<<set _me to setup.bnbMe()>> <div class="app-page nb-page"> <div class="nb-head"> <span></span> <div class="nb-title">Profile</div> <span></span> </div> <div class="nb-scroll nb-profile"> <button class="nb-me" type="button" data-action="flash"> <span class="nb-avatar"> <img @src="setup.personSrc(_me)" alt=""> <span class="nb-avatar-fallback"><<= setup.msgInitials(_me.name)>></span> </span> <span> <b><<= _me.name>></b> <small>View profile</small> </span> </button> <div class="nb-sec">Settings</div> <button class="nb-set" type="button" data-action="flash"><span class="nb-set-ico person"></span>Personal information<span class="nb-chev">›</span></button> <button class="nb-set" type="button" data-action="flash"><span class="nb-set-ico card"></span>Payments and payouts<span class="nb-chev">›</span></button> <button class="nb-set" type="button" data-action="flash"><span class="nb-set-ico lock"></span>Login and security<span class="nb-chev">›</span></button> <button class="nb-set" type="button" data-action="flash"><span class="nb-set-ico lang"></span>Translation<span class="nb-chev">›</span></button> <button class="nb-set" type="button" data-action="flash"><span class="nb-set-ico bell"></span>Notifications<span class="nb-chev">›</span></button> <button class="nb-set" type="button" data-action="flash"><span class="nb-set-ico shield"></span>Privacy and sharing<span class="nb-chev">›</span></button> </div> <<include "NbTabs">> </div>
<<if $setPage is "time">><<include "SetTime">> <<else>><<include "SetHome">> <</if>>
<<set _d to setup.setData()>> <<set _me to setup.appMe(_d)>> <div class="app-page set-page"> <div class="set-head"> <span></span> <div class="set-title">Settings</div> <span></span> </div> <div class="set-scroll"> <button class="set-card set-row" type="button" data-action="flash"> <span class="set-ava"> <<if _me.pic>> <img @src="setup.personSrc(_me)" alt=""> <<else>> <<= setup.setInitials()>> <</if>> </span> <span class="set-copy"><b><<= setup.setOwnerName()>></b></span> <span class="set-chev">›</span> </button> <div class="set-card"> <div class="set-row"> <span class="set-ico plane"></span> <span class="set-copy"><b>Airplane Mode</b></span> <<if _d.airplane>> <button class="set-sw on" type="button" data-action="set-toggle" data-arg="airplane" aria-label="Airplane Mode"></button> <<else>> <button class="set-sw" type="button" data-action="set-toggle" data-arg="airplane" aria-label="Airplane Mode"></button> <</if>> </div> <button class="set-row" type="button" data-action="flash"> <span class="set-ico wifi"></span> <span class="set-copy"><b>Wi-Fi</b><small>My network</small></span> <span class="set-chev">›</span> </button> <div class="set-row"> <span class="set-ico bt"></span> <span class="set-copy"><b>Bluetooth</b><small>Yes</small></span> <<if _d.bluetooth>> <button class="set-sw on" type="button" data-action="set-toggle" data-arg="bluetooth" aria-label="Bluetooth"></button> <<else>> <button class="set-sw" type="button" data-action="set-toggle" data-arg="bluetooth" aria-label="Bluetooth"></button> <</if>> </div> </div> <div class="set-card"> <div class="set-row"> <span class="set-ico moon"></span> <span class="set-copy"><b>Dark mode</b></span> <<if _d.dark>> <button class="set-sw on" type="button" data-action="set-toggle" data-arg="dark" aria-label="Dark mode"></button> <<else>> <button class="set-sw" type="button" data-action="set-toggle" data-arg="dark" aria-label="Dark mode"></button> <</if>> </div> </div> <div class="set-card"> <button class="set-row" type="button" data-action="set-page" data-arg="time"> <span class="set-ico hour"></span> <span class="set-copy"><b>Screen Time</b></span> <span class="set-chev">›</span> </button> <button class="set-row" type="button" data-action="flash"> <span class="set-ico info"></span> <span class="set-copy"><b>About</b></span> <span class="set-chev">›</span> </button> <button class="set-row" type="button" data-action="flash"> <span class="set-ico down"></span> <span class="set-copy"><b>Software Update</b></span> <span class="set-chev">›</span> </button> </div> </div> </div>
<<set _days to setup.setDays()>> <<set _used to setup.setUsed()>> <<set _avg to setup.setAvg()>> <div class="app-page set-page"> <div class="set-head time"> <span></span> <div class="set-title">Screen Time</div> <span></span> </div> <div class="set-scroll"> <div class="set-card st-card"> <div class="st-avg-label">Daily average</div> <div class="st-avg"><<= setup.setFmt(_avg)>></div> <div class="st-chart"> <<for _d range _days>> <div class="st-col"> <span class="st-bar-slot"> <<if _d.today>> <span class="st-bar today" @style="'height:' + setup.setDayH(_d.mins) + '%'"></span> <<else>> <span class="st-bar" @style="'height:' + setup.setDayH(_d.mins) + '%'"></span> <</if>> </span> <small><<= _d.label>></small> </div> <</for>> </div> </div> <div class="st-sec">Most used</div> <div class="set-card st-used"> <<for _u range _used>> <div class="st-app"> <img class="st-app-ico" @src="setup.setIcon(_u)" alt=""> <span class="st-app-copy"> <span class="st-app-top"> <b><<= _u.name>></b> <small><<= setup.setFmt(_u.mins)>></small> </span> <span class="st-track"><i @style="'width:' + setup.setBar(_u.mins) + '%'"></i></span> </span> </div> <</for>> </div> </div> </div>