index.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <html>
  2. <!--
  3. SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
  4. SPDX-License-Identifier: MIT
  5. -->
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. <link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,700" rel="stylesheet">
  9. <title>WebRTC examples! | Pion</title>
  10. </head>
  11. <style>
  12. body {
  13. font-family: "Quicksand", sans-serif;
  14. font-weight: 400;
  15. margin: 4em 10%;
  16. }
  17. .container {
  18. display: flex;
  19. flex-wrap: wrap;
  20. justify-content: center;
  21. }
  22. .card {
  23. box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  24. transition: 0.3s;
  25. margin: 20px auto;
  26. flex-grow: 1;
  27. max-width: 500px;
  28. }
  29. .card:hover {
  30. box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  31. }
  32. .content {
  33. line-height: 1.2em;
  34. padding: 0 16px;
  35. }
  36. .header {
  37. color:#ffffff;
  38. background-image: linear-gradient(225deg, #eb6562 0%, #E53935 100%);
  39. padding: 6px 16px 3px 16px;
  40. }
  41. h3 {
  42. margin: 0;
  43. }
  44. </style>
  45. <body>
  46. <h1>Pion WebRTC examples</h1>
  47. <div class="container">
  48. {{range .}}
  49. <div class="card">
  50. <div class="header">
  51. <h3>{{ .Title }}</h3>
  52. </div>
  53. <div class="content">
  54. <p>{{ .Description }}</p>
  55. {{ if .IsJS}}<p><a href="/example/js/{{ .Link }}/">Run JavaScript</a></p>{{ end }}
  56. {{ if .IsWASM}}<p><a href="/example/wasm/{{ .Link }}/">Run WASM</a></p>{{ end }}
  57. </div>
  58. </div>
  59. {{else}}
  60. <li><strong>No examples found!</strong></li>
  61. {{end}}
  62. </div>
  63. </body>
  64. </html>