/ index.html
index.html
1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 2 <title>ようこそ ~chan</title> 3 <script> 4 console.log('links:') 5 window.onload = () => { 6 for (const link of document.getElementsByTagName('a')) { 7 const url = link.getAttribute('href') 8 if (url.includes('/') && url.length === 2) { 9 link.setAttribute('href', 'javascript:alert("/b/ is the only working board in this demo, so we\'ll redirect you there instead");window.location.href="b/index.html"') 10 } 11 } 12 } 13 </script> 14 <style> 15 body { 16 background-color: #fcf7fc; 17 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='15px' width='15px'><text x='0' y='15' fill='grey' font-size='7'>•</text></svg>"); 18 display: flex; 19 justify-content: center; 20 letter-spacing: 2px; 21 line-height: 25px; 22 height: 100%; 23 } 24 25 /* styles for laptops and tablets */ 26 @media only screen and (min-width: 800px) { 27 #frontpage-box { 28 display: inline-block; 29 background-color: white; 30 width: 650px; 31 padding: 25px; 32 border-color: black; 33 margin-top: 35px; 34 margin-bottom: 35px; 35 border-width: 1px; 36 border-style: solid; 37 height: 80%; 38 /* based and kirtaner pilled */ 39 min-height: 650px; 40 max-height: 720px; 41 box-shadow: 12px 12px; 42 border-radius: 5%; 43 font-size: 14px; 44 } 45 footer { 46 position: absolute; 47 bottom: 20px; 48 padding: 0px; 49 background-color: #fcf7fc; 50 border-radius: 4px; 51 font-weight: bold; 52 } 53 } 54 55 hr { 56 margin-top: 30px; 57 margin-bottom: 20px; 58 } 59 60 /* styles for laptops and tablets */ 61 @media only screen and (max-height: 800px) { 62 footer { 63 display: none; 64 } 65 } 66 67 /* styles for laptops and tablets */ 68 @media only screen and (max-width: 799px) { 69 #frontpage-box { 70 background-color: white; 71 } 72 } 73 74 #welcome-title { 75 margin-top: 0px; 76 text-align: center; 77 } 78 79 /* Used in the footer */ 80 .heart-emoticon { 81 color: red; 82 font-weight: bolder; 83 font-size: normal; 84 } 85 86 #board-list>li::marker { 87 content: ""; 88 background: lightgray; 89 border-radius: 1ch; 90 padding-inline: 1ch; 91 margin-inline-end: 1ch; 92 } 93 94 .board-link { 95 color: #f2aeba; 96 font-family: 'Courier New', Courier, monospace; 97 font-weight: bold; 98 } 99 100 #load-more { 101 font-style: italic; 102 text-decoration: none; 103 text-underline-offset: 3px; 104 text-decoration-thickness: 1px; 105 color: lightgray; 106 margin-top: 4px; 107 } 108 109 #load-more:hover { 110 font-weight: bolder; 111 } 112 </style> 113 114 <body> 115 <main id="frontpage-box"> 116 <h1 id="welcome-title">welcome to %chan</h1> 117 <p id="welcome-message"> 118 %chan (pronounced <em>cen-chan</em>) is Urbit's repressed id where anyone can share 119 anonymously. Feel free to pick a board below and jump right into a discussion. 120 </p> 121 <ul id="board-list"> 122 <u>Top boards</u> 123 <li><a class='board-link' href="b/index.html">/b/</a> - random</li> 124 <li><a class='board-link' href="n/">/i/</a> - raids and invasions</li> 125 <li><a class='board-link' href="a/">/a/</a> - animuuuu xd</li> 126 <li><a class='board-link' href="x/">/x/</a> - conspiracy theories</li> 127 <li><a class='board-link' href="λ/">/λ/</a> - code & programming</li> 128 <li><a class='board-link' href="~/">/~/</a> - urbit memes</li> 129 <li><a class='board-link' href="g/">/g/</a> - computers</li> 130 <li><a class='board-link' href="♡/">/♥/</a> - love and dating</li> 131 <a href="#" onclick="alert('not implemented yet (sorry!)')" id="load-more">(view more...)</a> <!-- takes you to a list of all boards, sorted by popularity --> 132 </ul> 133 134 <hr /> 135 136 <ul> 137 <u>FAQ:</u> 138 <li>Stars can create boards</li> 139 <li>Planets can post</li> 140 <li>Moons and comets can browse</li> 141 <li>Customize your %chan: <a onclick="alert('not implemented yet (sorry!)')" class="board-link" href="#">settings</a></li> 142 <li>Illegal and lewd boards will be delisted</li> 143 <li>This is ~motluc-nammex's index</li> 144 <li>Docs: 145 <a class="board-link" href="https://gitgud.io/darigo/cen-chan"> 146 gitgud.io/darigo/cen-chan 147 </a> 148 </li> 149 </ul> 150 151 </main> 152 <footer>あいしてる</footer> 153 </body>