-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
5 lines (5 loc) · 6.08 KB
/
index.html
1
2
3
4
5
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Twitchat Mobile View</title><!-- Keywords --><meta name="keywords" content="Extension Chromium Twitch Mobile View Browser Desktop Chrome Opera Brave Edge"><!-- Google Meta Tags --><link rel="canonical" href="https://hardysd.github.io/TwitchatMobileView/"><meta name="robots" content="index"><!-- Meta Tags --><meta name="title" content="Twitchat Mobile View"><meta name="description" content="Chromium extension that places the Twitch Chat below the Video Stream Player when the Twitch window width is thin."><!-- Open Graph / Facebook / Linkedin / Slack --><meta property="og:type" content="website"><meta property="og:url" content="https://hardysd.github.io/TwitchatMobileView/"><meta property="og:title" content="Twitchat Mobile View"><meta property="og:description" content="Chromium extension that places the Twitch Chat below the Video Stream Player when the Twitch window width is thin."><meta property="og:image" content="https://res.cloudinary.com/dhsd/image/upload/v1695514403/TwitchatMobileView/TwitchatMobileView_Logo_aleplp.png"><!-- Twitter --><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://hardysd.github.io/TwitchatMobileView/"><meta property="twitter:title" content="Twitchat Mobile View"><meta property="twitter:description" content="Chromium extension that places the Twitch Chat below the Video Stream Player when the Twitch window width is thin."><meta property="twitter:image" content="https://res.cloudinary.com/dhsd/image/upload/v1695514403/TwitchatMobileView/TwitchatMobileView_Logo_aleplp.png"><link rel="shortcut icon" href="/TwitchatMobileView/TwitchatMobileViewFavicon.ico" type="image/x-icon"><style>:root{color-scheme:dark;color:#e6e5e5}body{display:flex;justify-content:center}.bounds{width:652px;text-align:center;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.highlight{color:#0ff}.main-title{color:#ffe100;text-shadow:-2px 3px 0px #f00}.twitch-url{text-decoration:none;color:#9146ff}img{border-radius:14px;overflow:hidden;box-shadow:0 0 10px #88d2e4}@media (max-width: 650px){.bounds{padding:0 10px}}@media (max-width: 620px){img[width="600px"]{width:calc(100vw - 20px)}}@media (max-width: 420px){img[width="400px"]{width:calc(100vw - 20px)}}nav{display:flex;border-bottom:1px solid #ff00b3;padding:6px 0}.logo,.urls{flex:1}.logo{text-align:start}.logo a{display:inline-block;background-image:url(https://res.cloudinary.com/dhsd/image/upload/v1695514403/TwitchatMobileView/TwitchatMobileView_Logo_aleplp.png);background-position:center;background-size:cover;width:40px;height:40px;border-radius:6px;box-shadow:0 0 10px #0ff}.urls{display:flex;justify-content:end;align-items:center;column-gap:2em}.urls a{text-decoration:none;color:#fcd58d}.urls a:hover{color:#ff7300}h2,p{text-align:start}p{text-indent:24px}
h3,p{text-align:start}h2,li{margin:60px 0}
</style><script type="module">const h=`:host{position:relative}.container{display:flex;justify-content:center}p{color:#ff0;margin:32px 0}.slider{display:flex;justify-content:center;border-radius:10px;overflow:hidden;position:absolute;box-shadow:0 0 30px #7a00ff;animation-name:sizingShadow;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate}@keyframes sizingShadow{to{box-shadow:0 0 40px #0ff}}.highlight{color:#0ff}@media (max-width: 1106px){img{aspect-ratio:16 / 9;width:calc(100vw - 82px);height:auto}}
`;class i extends HTMLElement{static get styles(){return h}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.reactivity()}count=0;images=[{html:'<span class="highlight">Mobile View</span> in your Desktop Browser... forget pop-up chat',url:"https://res.cloudinary.com/dhsd/image/upload/v1695698872/TwitchatMobileView/imagen_1_jrb5xs.webp",alt:"Showing the application working, forget about using pop-up chat"},{html:'Participate in multiple stream chats <span class="highlight">comfortably</span>',url:"https://res.cloudinary.com/dhsd/image/upload/v1695698873/TwitchatMobileView/imagen_2_g52qsz.webp",alt:"Participate in multiple stream chats comfortably"},{html:'Do other activities and <span class="highlight">participate</span> in the Twitch chat <span class="highlight">anytime</span>.',url:"https://res.cloudinary.com/dhsd/image/upload/v1695698873/TwitchatMobileView/imagen_3_m8qyoq.webp",alt:"Do other activities and participate in the Twitch chat whenever you want to."},{html:'Pass mouse over the streamer avatar to <span class="highlight">see the stream information</span>',url:"https://res.cloudinary.com/dhsd/image/upload/v1695698872/TwitchatMobileView/imagen_4_mnbfg6.webp",alt:"See the stream information (title and tags)"}];render(){this.shadowRoot.innerHTML=`<style>${i.styles}</style><p class="inner-html">${this.images[this.count].html}</p><div class="container"><div class="slider"><button class="btn-left">⪦</button><img width="1024px" height="576px" src="${this.images[this.count].url}" alt="${this.images[this.count].alt}"><button class="btn-right">⪧</button></div></div>`}reactivity(){const s=this.shadowRoot.querySelector(".inner-html"),o=this.shadowRoot.querySelector(".btn-left"),n=this.shadowRoot.querySelector(".btn-right"),e=this.shadowRoot.querySelector("img"),a=t=>{s.innerHTML=this.images[t].html,e.src=this.images[t].url,e.alt=this.images[t].alt};o.addEventListener("click",t=>{this.count!==0&&(this.count--,a(this.count))}),n.addEventListener("click",t=>{this.count!==this.images.length-1&&(this.count++,a(this.count))})}}customElements.define("slider-img",i);</script></head>
<body><div class="bounds"><nav><div class="logo"><a href="/TwitchatMobileView"></a></div><div class="urls"><a href="/TwitchatMobileView/about">About</a><a href="/TwitchatMobileView/bugs">Bugs</a><a href="https://chrome.google.com/webstore/detail/twitchat-mobile-view/ncjiglockclnhlmikdjhnoncdbipalgh" target="_blank">Download</a></div></nav><h1 class="main-title">Twitchat Mobile View </h1><slider-img></slider-img><div></div></div></body></html>