welcome.blade.php 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta name="description" content="PixelFed is an activitypub based image sharing platform.">
  7. <title>Pixelfed - Federated Image Sharing</title>
  8. <meta property="og:site_name" content="Pixelfed">
  9. <meta property="og:title" content="Pixelfed">
  10. <meta property="og:type" content="article">
  11. <meta property="og:url" content="https://pixelfed.org">
  12. <meta property="og:description" content="Federated Image Sharing">
  13. <link rel="dns-prefetch" href="//pixelfed.nyc3.cdn.digitaloceanspaces.com">
  14. <link rel="dns-prefetch" href="//use.fontawesome.com">
  15. <link href="{{mix('css/app.css')}}" rel="stylesheet">
  16. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
  17. <link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
  18. <link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
  19. <style type="text/css">
  20. body { font-family: 'PT Sans', sans-serif;}
  21. </style>
  22. </head>
  23. <body>
  24. <main role="main">
  25. <div>
  26. <header>
  27. <div class="navbar navbar-expand-lg navbar-light bg-transparent">
  28. <div class="container d-flex justify-content-between navbar-nav mr-auto my-4">
  29. <a href="/" class="navbar-brand d-flex align-items-center">
  30. <img src="/img/logo.svg" width="40px" class="mr-2">
  31. <strong translated class="text-uppercase font-ptsn">pixelfed</strong>
  32. </a>
  33. <div class="d-inline-flex align-items-center">
  34. {{-- <a href="/login" class="font-ptsn font-weight-bold text-muted mr-4">Login</a> --}}
  35. <a href="/join" class="font-ptsn font-weight-bold text-muted mr-4">Join</a>
  36. {{-- <div class="dropdown">
  37. <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-toggle="dropdown" translated>
  38. 文A
  39. </a>
  40. <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  41. <a class="dropdown-item" href="?lng=en" translated>English</a>
  42. <a class="dropdown-item" href="?lng=ar" translated><bdi>عربى</bdi></a>
  43. <a class="dropdown-item" href="?lng=ca" translated>Català</a>
  44. <a class="dropdown-item" href="?lng=da" translated>Dansk</a>
  45. <a class="dropdown-item" href="?lng=de" translated>Deutsch</a>
  46. <a class="dropdown-item" href="?lng=es" translated>Español</a>
  47. <a class="dropdown-item" href="?lng=eo" translated>Esperanto</a>
  48. <a class="dropdown-item" href="?lng=fa" translated>فارسی</a>
  49. <a class="dropdown-item" href="?lng=fr" translated>Français</a>
  50. <a class="dropdown-item" href="?lng=gl" translated>Galego</a>
  51. <a class="dropdown-item" href="?lng=he" translated>עברית</a>
  52. <a class="dropdown-item" href="?lng=nl" translated>Nederlands</a>
  53. <a class="dropdown-item" href="?lng=no" translated>Norsk</a>
  54. <a class="dropdown-item" href="?lng=ms" translated>Melayu</a>
  55. <a class="dropdown-item" href="?lng=oc" translated>Occitan</a>
  56. <a class="dropdown-item" href="?lng=pl" translated>Polski</a>
  57. <a class="dropdown-item" href="?lng=fi" translated>Suomi</a>
  58. <a class="dropdown-item" href="?lng=sv" translated>Svenska</a>
  59. <a class="dropdown-item" href="?lng=pt-br" translated>Português do Brasil</a>
  60. <a class="dropdown-item" href="?lng=ru" translated>Русский</a>
  61. </div>
  62. </div> --}}
  63. </div>
  64. </div>
  65. </div>
  66. </header>
  67. <div class="container py-5">
  68. <div class="my-5 text-center">
  69. <p class="display-4 font-weight-bold font-ptsn mb-0 animated fadeInUp">Photo Sharing. For Everyone.</p>
  70. <p class="h3 text-muted py-4 animated fadeInUp">A free and ethical photo sharing platform.</p>
  71. <p class="pt-5">
  72. <div class="d-inline-block cursor-pointer card card-body text-primary shadow-sm border-0 preview-btn mb-3" data-id="1"><i class="far fa-map fa-lg px-0"></i> <span class="d-block">Timeline</span></div>
  73. <div class="d-inline-block cursor-pointer card card-body text-dark shadow-sm border-0 mx-4 preview-btn mb-3" data-id="2"><i class="far fa-plus-square fa-lg px-0"></i> <span class="d-block">Compose</span></div>
  74. <div class="d-inline-block cursor-pointer card card-body text-dark shadow-sm border-0 preview-btn mb-3" data-id="3"><i class="far fa-compass fa-lg px-0"></i> <span class="d-block">Discover</span></div>
  75. </p>
  76. </div>
  77. </div>
  78. <div class="container text-center pb-5 mb-5 animated fadeInUp">
  79. <picture>
  80. <img src="https://pixelfed.nyc3.cdn.digitaloceanspaces.com/media/Screen%20Shot%202019-02-05%20at%206.34.59%20PM.png?v=2" class="img-fluid rounded shadow-lg" id="carousel_features_img_1">
  81. <img src="https://pixelfed.nyc3.cdn.digitaloceanspaces.com/media/Screen%20Shot%202019-05-14%20at%208.15.02%20PM.png" class="d-none img-fluid rounded shadow-lg" id="carousel_features_img_2">
  82. <img src="https://pixelfed.nyc3.cdn.digitaloceanspaces.com/media/Screen%20Shot%202019-05-14%20at%208.12.27%20PM.png" class="d-none img-fluid rounded shadow-lg" id="carousel_features_img_3">
  83. </picture>
  84. </div>
  85. <div class="bg-kashmir my-5 py-5 d-flex align-items-center" style="min-height: 100vh;">
  86. <div class="text-white text-center container py-5">
  87. <!-- <p class="display-4 font-ptsn">Features</p> -->
  88. <div class="row pt-5">
  89. <div class="col-12 col-md-6 mb-5">
  90. <div class="card card-body bg-transparent border-light">
  91. <p class="h3 font-ptsn">Ad-Free</p>
  92. <p class="lead mb-0">No ads in timelines, or anywhere</p>
  93. </div>
  94. </div>
  95. <div class="col-12 col-md-6 mb-5">
  96. <div class="card card-body bg-transparent border-light">
  97. <p class="h3 font-ptsn">Chronological</p>
  98. <p class="lead mb-0">Timelines properly ordered, no algorithms</p>
  99. </div>
  100. </div>
  101. <!-- <div class="col-12 col-md-6 mb-5">
  102. <div class="card card-body bg-transparent border-light">
  103. <p class="h3 font-ptsn">Comments</p>
  104. <p class="lead mb-0">Optional threaded conversations</p>
  105. </div>
  106. </div>
  107. <div class="col-12 col-md-6 mb-5">
  108. <div class="card card-body bg-transparent border-light">
  109. <p class="h3 font-ptsn">Continuity</p>
  110. <p class="lead mb-0">Create a new post across devices</p>
  111. </div>
  112. </div> -->
  113. <!-- <div class="col-12 col-md-6 mb-5">
  114. <div class="card card-body bg-transparent border-light">
  115. <p class="h3 font-ptsn">Developer Friendly</p>
  116. <p class="lead mb-0">Extend the platform with our open APIs</p>
  117. </div>
  118. </div> -->
  119. <div class="col-12 col-md-6 mb-5">
  120. <div class="card card-body bg-transparent border-light">
  121. <p class="h3 font-ptsn">Discover</p>
  122. <p class="lead mb-0">Explore new content and creators</p>
  123. </div>
  124. </div>
  125. <div class="col-12 col-md-6 mb-5">
  126. <div class="card card-body bg-transparent border-light">
  127. <p class="h3 font-ptsn">Filters</p>
  128. <p class="lead mb-0">Add optional filters to your photos</p>
  129. </div>
  130. </div>
  131. <!-- <div class="col-12 col-md-6 mb-5">
  132. <div class="card card-body bg-transparent border-light">
  133. <p class="h3 font-ptsn">Help Center</p>
  134. <p class="lead mb-0">A helpful resource for admins and users</p>
  135. </div>
  136. </div>
  137. <div class="col-12 col-md-6 mb-5">
  138. <div class="card card-body bg-transparent border-light">
  139. <p class="h3 font-ptsn">Network</p>
  140. <p class="lead mb-0">A <a href="#" class="text-white font-weight-bold">federated network</a> of millions</p>
  141. </div>
  142. </div>
  143. <div class="col-12 col-md-6 mb-5">
  144. <div class="card card-body bg-transparent border-light">
  145. <p class="h3 font-ptsn">Optimized For Web</p>
  146. <p class="lead mb-0">No mobile app required for the full experience</p>
  147. </div>
  148. </div> -->
  149. <div class="col-12 col-md-6 mb-5">
  150. <div class="card card-body bg-transparent border-light">
  151. <p class="h3 font-ptsn">Photo Albums</p>
  152. <p class="lead mb-0">Share your photos, one post at a time</p>
  153. </div>
  154. </div>
  155. <div class="col-12 col-md-6 mb-5">
  156. <div class="card card-body bg-transparent border-light">
  157. <p class="h3 font-ptsn">Privacy Focused</p>
  158. <p class="lead mb-0">No 3rd party analytics or tracking included</p>
  159. </div>
  160. </div>
  161. <!-- <div class="col-12 col-md-6 mb-5">
  162. <div class="card card-body bg-transparent border-light">
  163. <p class="h3 font-ptsn">Safety Features</p>
  164. <p class="lead mb-0">Tools to empower user experiences and safety</p>
  165. </div>
  166. </div>
  167. <div class="col-12 col-md-6 mb-5">
  168. <div class="card card-body bg-transparent border-light">
  169. <p class="h3 font-ptsn">Self Hosted</p>
  170. <p class="lead mb-0">You can run your own instance or join one</p>
  171. </div>
  172. </div>
  173. <div class="col-12 col-md-6 mb-5">
  174. <div class="card card-body bg-transparent border-light">
  175. <p class="h3 font-ptsn">Stories</p>
  176. <p class="lead mb-0">Ephemeral posts that disappear after 24h</p>
  177. </div>
  178. </div>
  179. <div class="col-12 col-md-6 mb-5">
  180. <div class="card card-body bg-transparent border-light">
  181. <p class="h3 font-ptsn">Video</p>
  182. <p class="lead mb-0">You can run your own instance or join one</p>
  183. </div>
  184. </div> -->
  185. </div>
  186. </div>
  187. </div>
  188. <div class="d-block py-5"></div>
  189. <div class="container py-5 d-flex align-items-center justify-content-center" style="min-height: 100vh">
  190. <div class="my-5 text-center">
  191. <p class="display-4 font-weight-bold font-ptsn mb-5">
  192. <span class="">Create.</span>
  193. <span class="text-muted">Share. </span>
  194. <span style="color:#a0aec0">Discover.</span>
  195. </p>
  196. <p class="display-4 font-weight-bold font-ptsn mb-5">
  197. <span class="">Collect.</span>
  198. <span class="text-muted">Follow. </span>
  199. <span style="color:#a0aec0">Explore.</span>
  200. </p>
  201. <p class="display-4 font-weight-bold font-ptsn mb-5">
  202. <span class="">Curate.</span>
  203. <span class="text-muted">Comment. </span>
  204. <span style="color:#a0aec0">Like.</span>
  205. </p>
  206. </div>
  207. </div>
  208. <div class="d-block py-5"></div>
  209. <div class="bg-portrait mt-5 shadow">
  210. <div class="container-fluid">
  211. <div class="row" style="min-height: 100vh">
  212. <div class="col-12 col-md-5 bg-white d-flex align-items-center justify-content-center">
  213. <div class="p-5" style="color: #a0aec0;">
  214. <p class="h1 font-ptsn">Privacy</p>
  215. <p class="h1 font-ptsn">Safety</p>
  216. <p class="h1 font-ptsn">Security</p>
  217. <p class="h1 font-ptsn text-dark">For Everyone</p>
  218. </div>
  219. </div>
  220. <div class="col-12 col-md-7 d-flex align-items-center justify-content-center">
  221. <div class="p-3 p-md-5">
  222. <p>
  223. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>2FA</button>
  224. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Account Log</button>
  225. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Block Accounts</button>
  226. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Connected Devices</button>
  227. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Content Warnings</button>
  228. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Disable Comments</button>
  229. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Help Center</button>
  230. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Hidden Follower Count</button>
  231. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Mute Accounts</button>
  232. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Private Accounts</button>
  233. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Private Posts</button>
  234. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Reports</button>
  235. <button class="btn btn-outline-secondary font-ptsn mb-3" disabled>Unlisted Posts</button>
  236. </p>
  237. </div>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. <div class="d-block py-5"></div>
  243. <div class="container py-5 d-flex align-items-center justify-content-center" style="min-height: 100vh">
  244. <div class="my-5 text-center">
  245. <p class="display-4 font-weight-bold font-ptsn mb-5 pb-5">Built For The Open Web.</p>
  246. </div>
  247. </div>
  248. <div class="d-block py-5"></div>
  249. <div class="py-5">
  250. <div class="py-5 my-5 bg-skew d-flex align-items-center justify-content-center shadow" style="min-height: 40rem;">
  251. <div class="container text-center">
  252. <p class="display-4 font-ptsn">Open Source</p>
  253. <p class="py-5" style="color: #a0aec0;">
  254. <i class="fab fa-laravel fa-4x px-3"></i>
  255. <i class="fab fa-bootstrap fa-4x px-3"></i>
  256. <i class="fab fa-git fa-4x px-3"></i>
  257. <i class="fab fa-sass fa-4x px-3"></i>
  258. <i class="fab fa-vuejs fa-4x px-3"></i>
  259. </p>
  260. <p class="h3 font-ptsn">Run your <a href="https://docs.pixelfed.org/running-pixelfed/">own server</a>, or <a href="/join">join one</a></p>
  261. </div>
  262. </div>
  263. </div>
  264. <div class="d-block py-5"></div>
  265. <div class="container py-5 d-flex align-items-center justify-content-center" style="min-height: 100vh">
  266. <div class="my-5 text-center">
  267. <p class="display-4 font-weight-bold font-ptsn mb-0">A Network Of Millions.</p>
  268. <p class="h3 text-muted py-4">Follow your friends on other servers. <a href="https://fediverse.party/en/fediverse/" rel="nofollow noreferrer noopener">Learn more</a></p>
  269. </div>
  270. </div>
  271. <div class="d-block py-5"></div>
  272. </div>
  273. </main>
  274. <footer class="bg-white py-5">
  275. <div class="container">
  276. <div class="row">
  277. <div class="col-12 col-md">
  278. <img src="/img/logo.svg" class="img-fluid mb-3" width="22px" height="22px">
  279. <small class="d-block text-muted font-ptsn">Pixelfed</small>
  280. </div>
  281. <div class="col-6 col-md">
  282. <h5 class="font-ptsn">Resources</h5>
  283. <ul class="list-unstyled text-small">
  284. <li><a class="text-muted" href="/join">Join</a></li>
  285. <li><a class="text-muted" href="https://pixelfed.social/site/help" rel="nofollow noreferrer noopener">Help Center</a></li>
  286. <li><a class="text-muted" href="https://docs.pixelfed.org/running-pixelfed/">Install Pixelfed</a></li>
  287. <li><a class="text-muted" href="https://github.com/pixelfed/pixelfed/issues/new">Report an Issue</a></li>
  288. </ul>
  289. </div>
  290. <div class="col-6 col-md">
  291. <h5 class="font-ptsn">Links</h5>
  292. <ul class="list-unstyled text-small">
  293. <li><a class="text-muted" href="https://write.as/pixelfed" rel="nofollow">Blog</a></li>
  294. <li><a class="text-muted" href="https://docs.pixelfed.org">Documentation</a></li>
  295. <li><a class="text-muted" href="https://mastodon.social/@Pixelfed" rel="nofollow noreferrer noopener">Mastodon</a></li>
  296. <li><a class="text-muted" href="https://twitter.com/@Pixelfed" rel="nofollow noreferrer noopener">Twitter</a></li>
  297. </ul>
  298. </div>
  299. <div class="col-6 col-md">
  300. <h5 class="font-ptsn">Support</h5>
  301. <ul class="list-unstyled text-small">
  302. <li><a class="text-muted" href="https://www.patreon.com/dansup">Patreon</a></li>
  303. <li><a class="text-muted" href="https://liberapay.com/pixelfed">Liberapay</a></li>
  304. <li><a class="text-muted" href="https://opencollective.com/pixelfed" rel="nofollow noreferrer noopener">Open Collective</a></li>
  305. <li><a class="text-muted" href="https://github.com/pixelfed/pixelfed">GitHub</a></li>
  306. </ul>
  307. </div>
  308. </div>
  309. </div>
  310. </footer>
  311. <script type="text/javascript" src="{{mix('js/app.js')}}"></script>
  312. </body>
  313. </html>