account.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>{{.Strings.Account.title}}</title>
  7. <link rel="stylesheet" href="/static/style/style.css" />
  8. <link rel="icon" type="image/svg+xml" href="/static/img/logo.svg">
  9. <link rel="apple-touch-icon" type="image/svg+xml" href="/static/img/logo.svg">
  10. </head>
  11. <body>
  12. <header class="w12 padding-bottom-_25 flex flex-row flex-justify-space flex-align-centre">
  13. <a href="/" class="decoration-none">
  14. <h1 class="inline valign-mid text sans margin-lr-1">a·muse</h1>
  15. </a>
  16. <div class="margin-lr-1 text">
  17. <nav>
  18. <label for="hamburger" class="cursor-hand">
  19. <img src="/users/{{.State.User.Username}}/avatar?size=small" class="border-radius-25 width-1_5"/>
  20. </label>
  21. <input type="checkbox" id="hamburger" class="display-none" />
  22. <ul class="absolute right top-1 padding-lr-1 padding-tb-_5 bg align-right list-style-none sans">
  23. <!--<li><a href="/users/{{.State.User.Username}}" class="decoration-none text-accent">{{.Strings.Global.account}}</a><span class="material-icon padding-lr-_5">&#xe851;</span></li>-->
  24. <li><a href="/users/{{.State.User.Username}}/watchlist" class="decoration-none text-accent">{{.Strings.Global.watchlist}}</a><span class="material-icon padding-lr-_5">&#xe04a;</span></li>
  25. <li><a href="/users/{{.State.User.Username}}/tvqueue" class="decoration-none text-accent">{{.Strings.Global.tv_queue}}</a><span class="material-icon padding-lr-_5">&#xe1b2;</span></li>
  26. <li><a href="/users/{{.State.User.Username}}/readlist" class="decoration-none text-accent">{{.Strings.Global.readlist}}</a><span class="material-icon padding-lr-_5">&#xe431;</span></li>
  27. <li><a href="/users/{{.State.User.Username}}/experiences" class="decoration-none text-accent">{{.Strings.Global.experiences}}</a><span class="material-icon padding-lr-_5">&#xe042;</span></li>
  28. <li class="bg-error">
  29. <form action="/users/{{.State.User.Username}}/sessions/{{.State.User.Session}}" method="POST" class="inline">
  30. <input type="hidden" value="DELETE" name="method" />
  31. <input type="submit" value="{{.Strings.Global.log_out}}" class="border-none bg-none font-normal text-accent padding-lr-0 cursor-hand font-1" />
  32. </form><span class="material-icon padding-lr-_5">&#xe7ff;</span>
  33. </li>
  34. </ul>
  35. </nav>
  36. </div>
  37. </header>
  38. <main class="centre">
  39. <div style="margin-top: 3rem;">
  40. <img src="/users/{{.State.User.Username}}/avatar?size=large" class="border-radius-25"/>
  41. <div class="font-2 margin-top-1">{{.Data.Username}}</div>
  42. </div>
  43. <div style="margin-top: 2rem;" class="centre">
  44. <form action="/users/{{.State.User.Username}}" method="POST">
  45. <div class="flex flex-centre">
  46. <input type="hidden" value="PUT" name="method" />
  47. <div style="height: 12rem; flex-direction: column; align-items: flex-start; justify-content: space-evenly" class="flex">
  48. <label for="avatar">{{.Strings.Account.avatar}}</label>
  49. <label for="timezone">{{.Strings.Account.timezone}}</label>
  50. <label for="country">{{.Strings.Account.country}}</label>
  51. <label for="language">{{.Strings.Account.language}}</label>
  52. <label for="calendar">{{.Strings.Account.calendar}}</label>
  53. </div>
  54. <div style="flex-direction: column; align-items: end; height: 12rem; justify-content: space-evenly;" class="flex">
  55. <input type="file" id="avatar" accept="image/*" name="avatar" />
  56. <select id="timezone" name="timezone">
  57. <optgroup>
  58. <option value="{{.Data.Timezone}}">{{.Data.Timezone}}</option>
  59. </optgroup>
  60. <optgroup> <!-- todo range timezones -->
  61. <option value="Europe/Warsaw">Europe/Warsaw</option>
  62. <option value="UTC">UTC</option>
  63. </optgroup>
  64. </select>
  65. <select id="country" name="country">
  66. <optgroup>
  67. <option value="{{.Data.Country}}">{{.Data.Country}}</option>
  68. </optgroup>
  69. <optgroup> <!-- todo range countries, maybe emoji flags -->
  70. <option value="US">US</option>
  71. <option value="PL">PL</option>
  72. </optgroup>
  73. </select>
  74. <select id="language" name="language">
  75. <optgroup>
  76. <option value="{{.Data.Language}}">{{.Data.Language}}</option>
  77. </optgroup>
  78. <optgroup> <!-- todo range countries -->
  79. <option value="en-GB">en-GB</option>
  80. <option value="pl-PL">pl-PL</option>
  81. </optgroup>
  82. </select>
  83. <input type="checkbox" id="calendar" {{if .Data.AutoCalendar}}checked=""{{end}} name="calendar" value="true">
  84. </div>
  85. </div>
  86. <div>
  87. <input type="submit" value="{{.Strings.Account.update}}" class="border-text hover-bg-dark-accent padding-tb-_25 cursor-hand text-black font-1" />
  88. </div>
  89. </form>
  90. <form action="/users/{{.State.User.Username}}" method="POST" style="margin-top: 2rem;">
  91. <div class="flex flex-centre">
  92. <input type="hidden" value="PUT" name="method" />
  93. <div style="margin-left: 2rem; margin-right: 2rem; height: 4rem; flex-direction: column; align-items: flex-start; justify-content: space-evenly" class="flex">
  94. <label for="password">{{.Strings.Signup.password}}</label>
  95. <label for="password2">{{.Strings.Signup.confirm_pass}}</label>
  96. </div>
  97. <div style="margin-left: 2rem; margin-right: 2rem; flex-direction: column; align-items: end; height: 4rem; justify-content: space-evenly;" class="flex">
  98. <input type="password" class="bg-none border-none border-bottom text" id="password" name="password" required="">
  99. <input type="password" class="bg-none border-none border-bottom text" id="password2" name="password2" required="">
  100. </div>
  101. </div>
  102. <div>
  103. <input type="submit" value="{{.Strings.Account.change_pass}}" class="border-text hover-bg-dark-accent padding-tb-_25 cursor-hand text-black font-1" />
  104. </div>
  105. </form>
  106. </div>
  107. </main>
  108. </body>
  109. </html>