WebOrbiton
v3.0.0.0

FlatlyPage

← Changes All versions
225 lines · 5.5 KB
  1. <?php
  2. require_once __DIR__ . '/../config.php';
  3. ​
  4. require_login();
  5. ​
  6. $blocks = [];
  7. if (isset($_POST['blocks'])) {
  8. $blocks = json_decode($_POST['blocks'], true) ?: [];
  9. } elseif (isset($_GET['blocks'])) {
  10. $blocks = json_decode($_GET['blocks'], true) ?: [];
  11. }
  12. ​
  13. $site_settings = get_site_settings();
  14. ?>
  15. <!DOCTYPE html>
  16. <html lang="en">
  17. ​
  18. <head>
  19. <meta charset="UTF-8">
  20. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21. <title>Preview</title>
  22. <?= admin_font_head() . font_head_html([get_text_font($site_settings)]) ?>
  23. <link rel="stylesheet" href="/css/style.css?v=<?= filemtime('/css/style.css'); ?>">
  24. <script src="/assets/js/admin-theme.js?v=<?= filemtime('/assets/js/admin-theme.js'); ?>"></script>
  25. <style>
  26. :root {
  27. --primary: <?= e($site_settings['primary_color'] ?? '#ffffff') ?>;
  28. }
  29. ​
  30. body {
  31. font-family: <?= font_family_css(get_text_font($site_settings)) ?>, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  32. margin: 0;
  33. padding: 0;
  34. min-height: 100vh;
  35. }
  36. ​
  37. .preview-scale {
  38. transform-origin: top left;
  39. }
  40. ​
  41. .video-wrapper {
  42. position: relative;
  43. padding-bottom: 56.25%;
  44. height: 0;
  45. overflow: hidden;
  46. background: #000;
  47. border-radius: 8px;
  48. }
  49. ​
  50. .video-wrapper iframe,
  51. .video-wrapper video {
  52. position: absolute;
  53. top: 0;
  54. left: 0;
  55. width: 100%;
  56. height: 100%;
  57. }
  58. ​
  59. .video-caption {
  60. text-align: center;
  61. margin-top: 12px;
  62. color: var(--text-muted);
  63. font-size: 0.875rem;
  64. }
  65. ​
  66. .gallery-grid {
  67. display: grid;
  68. grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  69. gap: 16px;
  70. margin-top: 32px;
  71. }
  72. ​
  73. .gallery-item {
  74. position: relative;
  75. overflow: hidden;
  76. border-radius: 8px;
  77. aspect-ratio: 4/3;
  78. }
  79. ​
  80. .gallery-item img {
  81. width: 100%;
  82. height: 100%;
  83. object-fit: cover;
  84. }
  85. ​
  86. .gallery-caption {
  87. position: absolute;
  88. bottom: 0;
  89. left: 0;
  90. right: 0;
  91. background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  92. color: white;
  93. padding: 12px;
  94. font-size: 0.875rem;
  95. }
  96. ​
  97. .faq-list {
  98. max-width: 800px;
  99. margin: 32px auto 0;
  100. }
  101. ​
  102. .faq-item {
  103. background: var(--bg-card);
  104. border: 1px solid var(--border);
  105. border-radius: 8px;
  106. margin-bottom: 12px;
  107. overflow: hidden;
  108. }
  109. ​
  110. .faq-question {
  111. padding: 20px;
  112. cursor: pointer;
  113. font-weight: 600;
  114. font-size: 1.125rem;
  115. list-style: none;
  116. user-select: none;
  117. }
  118. ​
  119. .faq-question::-webkit-details-marker {
  120. display: none;
  121. }
  122. ​
  123. .faq-answer {
  124. padding: 0 20px 20px;
  125. color: var(--text-muted);
  126. line-height: 1.6;
  127. }
  128. ​
  129. .team-grid {
  130. display: grid;
  131. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  132. gap: 32px;
  133. margin-top: 32px;
  134. }
  135. ​
  136. .team-member {
  137. text-align: center;
  138. }
  139. ​
  140. .team-photo {
  141. width: 120px;
  142. height: 120px;
  143. border-radius: 50%;
  144. object-fit: cover;
  145. margin-bottom: 16px;
  146. }
  147. ​
  148. .team-avatar {
  149. width: 120px;
  150. height: 120px;
  151. border-radius: 50%;
  152. background: var(--primary);
  153. color: white;
  154. display: flex;
  155. align-items: center;
  156. justify-content: center;
  157. font-size: 2rem;
  158. font-weight: 600;
  159. margin: 0 auto 16px;
  160. }
  161. ​
  162. .team-member h3 {
  163. margin: 0 0 4px;
  164. font-size: 1.25rem;
  165. }
  166. ​
  167. .team-role {
  168. color: var(--text-muted);
  169. font-size: 0.875rem;
  170. margin: 0 0 12px;
  171. }
  172. ​
  173. .team-bio {
  174. color: var(--text-muted);
  175. font-size: 0.9375rem;
  176. line-height: 1.6;
  177. margin: 12px 0;
  178. }
  179. ​
  180. .team-social {
  181. display: flex;
  182. gap: 12px;
  183. justify-content: center;
  184. margin-top: 16px;
  185. }
  186. ​
  187. .team-social-link {
  188. width: 32px;
  189. height: 32px;
  190. display: flex;
  191. align-items: center;
  192. justify-content: center;
  193. border-radius: 50%;
  194. background: var(--bg-card);
  195. border: 1px solid var(--border);
  196. color: var(--text);
  197. transition: all 0.2s;
  198. }
  199. ​
  200. .team-social-link:hover {
  201. background: var(--primary);
  202. color: white;
  203. border-color: var(--primary);
  204. }
  205. ​
  206. .team-social-link svg {
  207. width: 16px;
  208. height: 16px;
  209. }
  210. </style>
  211. </head>
  212. ​
  213. <body>
  214. <?php if (empty($blocks)): ?>
  215. <div style="display: flex; align-items: center; justify-content: center; min-height: 100vh; color: var(--text-muted); font-size: 0.875rem;">
  216. No content to preview
  217. </div>
  218. <?php else: ?>
  219. <?php foreach ($blocks as $block): ?>
  220. <?= render_block($block) ?>
  221. <?php endforeach; ?>
  222. <?php endif; ?>
  223. </body>
  224. ​
  225. </html>