image_purple.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="template:media-width" content="1024">
  6. <meta name="template:media-height" content="1024">
  7. <style>
  8. html {
  9. margin: 0;
  10. padding: 0;
  11. }
  12. body {
  13. margin: 0;
  14. padding: 0;
  15. width: 1080px;
  16. background: #302b63;
  17. font-family: 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
  18. position: relative;
  19. overflow: hidden;
  20. }
  21. .page-container {
  22. width: 1080px;
  23. height: 1920px;
  24. padding: 60px 60px 70px 60px;
  25. box-sizing: border-box;
  26. display: flex;
  27. flex-direction: column;
  28. justify-content: space-between;
  29. position: relative;
  30. z-index: 1;
  31. }
  32. /* Background decorative elements */
  33. .bg-decoration {
  34. position: absolute;
  35. top: 0;
  36. left: 0;
  37. width: 100%;
  38. height: 100%;
  39. z-index: 0;
  40. overflow: hidden;
  41. pointer-events: none;
  42. }
  43. /* Grid pattern background */
  44. .dot-pattern {
  45. position: absolute;
  46. top: 0;
  47. left: 0;
  48. width: 100%;
  49. height: 100%;
  50. background-image:
  51. linear-gradient(rgba(255, 165, 0, 0.1) 1px, transparent 1px),
  52. linear-gradient(90deg, rgba(255, 165, 0, 0.1) 1px, transparent 1px);
  53. background-size: 40px 40px;
  54. opacity: 0.4;
  55. }
  56. .circle-1 {
  57. position: absolute;
  58. width: 600px;
  59. height: 600px;
  60. border-radius: 50%;
  61. background: radial-gradient(circle at 30% 30%, rgba(255, 165, 0, 0.15), transparent);
  62. top: -250px;
  63. right: -200px;
  64. border: 3px solid rgba(255, 165, 0, 0.2);
  65. box-shadow: inset 0 0 120px rgba(255, 165, 0, 0.1),
  66. 0 0 60px rgba(255, 165, 0, 0.2);
  67. }
  68. .circle-2 {
  69. position: absolute;
  70. width: 450px;
  71. height: 450px;
  72. border-radius: 50%;
  73. background: radial-gradient(circle at 60% 60%, rgba(255, 215, 0, 0.2), transparent);
  74. bottom: 50px;
  75. left: -150px;
  76. filter: blur(50px);
  77. }
  78. .circle-3 {
  79. position: absolute;
  80. width: 300px;
  81. height: 300px;
  82. border-radius: 50%;
  83. border: 4px solid rgba(255, 140, 0, 0.3);
  84. background: transparent;
  85. top: 35%;
  86. right: 40px;
  87. box-shadow: 0 0 40px rgba(255, 140, 0, 0.4);
  88. }
  89. .triangle {
  90. position: absolute;
  91. width: 0;
  92. height: 0;
  93. border-left: 180px solid transparent;
  94. border-right: 180px solid transparent;
  95. border-bottom: 300px solid rgba(255, 165, 0, 0.08);
  96. top: 45%;
  97. left: -60px;
  98. transform: rotate(-35deg);
  99. filter: blur(3px);
  100. }
  101. .square-1 {
  102. position: absolute;
  103. width: 160px;
  104. height: 160px;
  105. background: linear-gradient(135deg, rgba(255, 165, 0, 0.12), transparent);
  106. top: 15%;
  107. right: -60px;
  108. transform: rotate(35deg);
  109. border: 3px solid rgba(255, 165, 0, 0.25);
  110. box-shadow: 0 0 30px rgba(255, 165, 0, 0.2);
  111. }
  112. .square-2 {
  113. position: absolute;
  114. width: 100px;
  115. height: 100px;
  116. border: 4px solid rgba(255, 215, 0, 0.4);
  117. background: transparent;
  118. bottom: 25%;
  119. left: 60px;
  120. transform: rotate(-15deg);
  121. box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
  122. }
  123. /* Glowing lines */
  124. .line-1, .line-2, .line-3 {
  125. position: absolute;
  126. height: 3px;
  127. background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.6), transparent);
  128. box-shadow: 0 0 15px rgba(255, 165, 0, 0.4);
  129. }
  130. .line-1 {
  131. width: 400px;
  132. top: 20%;
  133. right: 100px;
  134. transform: rotate(15deg);
  135. }
  136. .line-2 {
  137. width: 280px;
  138. top: 55%;
  139. left: 100px;
  140. transform: rotate(-20deg);
  141. }
  142. .line-3 {
  143. width: 320px;
  144. bottom: 18%;
  145. right: 120px;
  146. transform: rotate(10deg);
  147. }
  148. /* Hexagon decorations */
  149. .hexagon-1, .hexagon-2 {
  150. position: absolute;
  151. width: 80px;
  152. height: 46px;
  153. background: rgba(255, 165, 0, 0.1);
  154. border-left: 3px solid rgba(255, 165, 0, 0.4);
  155. border-right: 3px solid rgba(255, 165, 0, 0.4);
  156. }
  157. .hexagon-1::before, .hexagon-2::before,
  158. .hexagon-1::after, .hexagon-2::after {
  159. content: "";
  160. position: absolute;
  161. width: 0;
  162. border-left: 40px solid transparent;
  163. border-right: 40px solid transparent;
  164. }
  165. .hexagon-1::before, .hexagon-2::before {
  166. bottom: 100%;
  167. border-bottom: 23px solid rgba(255, 165, 0, 0.4);
  168. }
  169. .hexagon-1::after, .hexagon-2::after {
  170. top: 100%;
  171. border-top: 23px solid rgba(255, 165, 0, 0.4);
  172. }
  173. .hexagon-1 {
  174. top: 25%;
  175. left: 120px;
  176. }
  177. .hexagon-2 {
  178. bottom: 30%;
  179. right: 140px;
  180. transform: rotate(30deg);
  181. }
  182. /* Header with tech decoration */
  183. .topic-wrapper {
  184. position: relative;
  185. text-align: center;
  186. padding: 40px 0;
  187. }
  188. .topic-decoration {
  189. position: absolute;
  190. top: -35px;
  191. left: 50%;
  192. transform: translateX(-50%);
  193. display: flex;
  194. gap: 10px;
  195. align-items: center;
  196. }
  197. .topic-dot {
  198. width: 14px;
  199. height: 14px;
  200. border-radius: 50%;
  201. box-shadow: 0 0 20px currentColor;
  202. }
  203. .topic-dot:nth-child(1) {
  204. background: #FF8C00;
  205. color: #FF8C00;
  206. }
  207. .topic-dot:nth-child(2) {
  208. background: #FFD700;
  209. color: #FFD700;
  210. width: 18px;
  211. height: 18px;
  212. }
  213. .topic-dot:nth-child(3) {
  214. background: #FFA500;
  215. color: #FFA500;
  216. }
  217. /* Title accent decoration */
  218. .topic-accent {
  219. position: absolute;
  220. top: 0;
  221. left: 50%;
  222. transform: translateX(-50%);
  223. width: 150px;
  224. height: 5px;
  225. background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.8), transparent);
  226. border-radius: 10px;
  227. box-shadow: 0 0 20px rgba(255, 165, 0, 0.5);
  228. }
  229. .title {
  230. font-size: 78px;
  231. font-weight: 700;
  232. background: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  233. -webkit-background-clip: text;
  234. -webkit-text-fill-color: transparent;
  235. background-clip: text;
  236. line-height: 1.25;
  237. letter-spacing: 2px;
  238. padding: 25px 0;
  239. position: relative;
  240. display: inline-block;
  241. filter: drop-shadow(0 4px 20px rgba(255, 165, 0, 0.4));
  242. }
  243. .title::before,
  244. .title::after {
  245. content: '';
  246. position: absolute;
  247. border-radius: 50%;
  248. background: linear-gradient(135deg, rgba(255, 165, 0, 0.6), rgba(255, 215, 0, 0.5));
  249. box-shadow: 0 0 25px rgba(255, 165, 0, 0.6);
  250. }
  251. .title::before {
  252. top: -15px;
  253. left: -25px;
  254. width: 25px;
  255. height: 25px;
  256. }
  257. .title::after {
  258. bottom: -10px;
  259. right: -20px;
  260. width: 30px;
  261. height: 30px;
  262. }
  263. .topic {
  264. font-size: 74px;
  265. font-weight: bold;
  266. color: #FFD700;
  267. line-height: 1.3;
  268. text-shadow: 0 0 30px rgba(255, 215, 0, 0.5),
  269. 0 4px 20px rgba(0,0,0,0.4);
  270. padding: 20px 0;
  271. position: relative;
  272. display: inline-block;
  273. letter-spacing: 3px;
  274. }
  275. .topic::before,
  276. .topic::after {
  277. content: '';
  278. position: absolute;
  279. width: 90px;
  280. height: 4px;
  281. background: linear-gradient(90deg, transparent, rgba(255, 165, 0, 0.8), rgba(255, 215, 0, 0.6));
  282. top: 50%;
  283. box-shadow: 0 0 15px rgba(255, 165, 0, 0.6);
  284. }
  285. .topic::before {
  286. left: -110px;
  287. transform: scaleX(-1);
  288. }
  289. .topic::after {
  290. right: -110px;
  291. }
  292. /* Tech badge decoration */
  293. .bookmark-deco {
  294. position: absolute;
  295. top: -10px;
  296. left: 70px;
  297. }
  298. /* Image container with tech frame */
  299. .image-wrapper {
  300. position: relative;
  301. }
  302. .image-container {
  303. width: 100%;
  304. height: 900px;
  305. display: flex;
  306. align-items: center;
  307. justify-content: center;
  308. position: relative;
  309. }
  310. .image-container img {
  311. width: 100%;
  312. height: 100%;
  313. border-radius: 16px;
  314. object-fit: cover;
  315. box-shadow: 0 0 60px rgba(255, 165, 0, 0.3),
  316. 0 20px 60px rgba(0, 0, 0, 0.6);
  317. border: 2px solid rgba(255, 165, 0, 0.3);
  318. }
  319. /* Corner tech decorations */
  320. .corner-deco {
  321. position: absolute;
  322. width: 80px;
  323. height: 80px;
  324. border: 5px solid rgba(255, 165, 0, 0.8);
  325. z-index: 2;
  326. filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.5));
  327. }
  328. .corner-deco.top-left {
  329. top: -20px;
  330. left: -20px;
  331. border-right: none;
  332. border-bottom: none;
  333. border-radius: 16px 0 0 0;
  334. }
  335. .corner-deco.bottom-right {
  336. bottom: -20px;
  337. right: -20px;
  338. border-left: none;
  339. border-top: none;
  340. border-radius: 0 0 16px 0;
  341. }
  342. .corner-deco.top-right {
  343. top: -20px;
  344. right: -20px;
  345. border-left: none;
  346. border-bottom: none;
  347. border-radius: 0 16px 0 0;
  348. width: 40px;
  349. height: 40px;
  350. border-color: rgba(255, 215, 0, 0.9);
  351. }
  352. .corner-deco.bottom-left {
  353. bottom: -20px;
  354. left: -20px;
  355. border-right: none;
  356. border-top: none;
  357. border-radius: 0 0 0 16px;
  358. width: 40px;
  359. height: 40px;
  360. border-color: rgba(255, 140, 0, 0.9);
  361. }
  362. /* Side tech indicators */
  363. .side-badge-left, .side-badge-right {
  364. position: absolute;
  365. display: flex;
  366. flex-direction: column;
  367. gap: 15px;
  368. }
  369. .side-badge-left {
  370. left: -30px;
  371. top: 50%;
  372. transform: translateY(-50%);
  373. }
  374. .side-badge-right {
  375. right: -30px;
  376. top: 50%;
  377. transform: translateY(-50%);
  378. }
  379. .badge-circle {
  380. width: 20px;
  381. height: 20px;
  382. border-radius: 50%;
  383. border: 3px solid rgba(255, 165, 0, 0.6);
  384. background: transparent;
  385. box-shadow: 0 0 12px rgba(255, 165, 0, 0.4);
  386. }
  387. .badge-circle.filled {
  388. background: rgba(255, 215, 0, 0.8);
  389. box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
  390. }
  391. /* Quote section */
  392. .text-wrapper {
  393. position: relative;
  394. }
  395. .text {
  396. font-size: 46px;
  397. color: #FFF8DC;
  398. text-align: center;
  399. line-height: 1.8;
  400. padding: 35px 70px;
  401. position: relative;
  402. height: 237.6px;
  403. display: flex;
  404. align-items: center;
  405. justify-content: center;
  406. text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4),
  407. 0 0 20px rgba(255, 165, 0, 0.2);
  408. letter-spacing: 1px;
  409. }
  410. .quote-icon-left {
  411. position: absolute;
  412. top: 0px;
  413. left: 0px;
  414. opacity: 0.25;
  415. transform: rotate(180deg);
  416. filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.4));
  417. }
  418. .quote-icon-right {
  419. position: absolute;
  420. bottom: 0px;
  421. right: 0px;
  422. opacity: 0.25;
  423. filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.4));
  424. }
  425. /* Accent tech bars */
  426. .accent-bar-left, .accent-bar-right {
  427. position: absolute;
  428. width: 6px;
  429. height: 180px;
  430. top: 50%;
  431. transform: translateY(-50%);
  432. border-radius: 10px;
  433. }
  434. .accent-bar-left {
  435. left: 15px;
  436. background: linear-gradient(180deg, rgba(255, 140, 0, 0.8), rgba(255, 140, 0, 0.2));
  437. box-shadow: 0 0 25px rgba(255, 140, 0, 0.6);
  438. }
  439. .accent-bar-right {
  440. right: 15px;
  441. background: linear-gradient(180deg, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.2));
  442. box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
  443. }
  444. /* Footer with tech design */
  445. .footer {
  446. display: flex;
  447. align-items: center;
  448. justify-content: space-between;
  449. padding: 25px 5px;
  450. border-top: 3px solid rgba(255, 165, 0, 0.5);
  451. position: relative;
  452. }
  453. .footer::before {
  454. content: '';
  455. position: absolute;
  456. top: -5px;
  457. left: 0;
  458. width: 160px;
  459. height: 5px;
  460. background: linear-gradient(90deg, rgba(255, 165, 0, 0.9), transparent);
  461. box-shadow: 0 0 15px rgba(255, 165, 0, 0.6);
  462. }
  463. .footer::after {
  464. content: '';
  465. position: absolute;
  466. top: -5px;
  467. right: 0;
  468. width: 100px;
  469. height: 5px;
  470. background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.9));
  471. box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
  472. }
  473. .author {
  474. display: flex;
  475. flex-direction: column;
  476. gap: 8px;
  477. }
  478. .author-name {
  479. font-size: 36px;
  480. font-weight: bold;
  481. color: #FFD700;
  482. display: flex;
  483. align-items: center;
  484. gap: 12px;
  485. text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  486. }
  487. .author-badges {
  488. display: flex;
  489. gap: 8px;
  490. align-items: center;
  491. }
  492. .author-badge {
  493. width: 12px;
  494. height: 12px;
  495. border-radius: 50%;
  496. box-shadow: 0 0 18px currentColor;
  497. }
  498. .author-badge.cyan {
  499. background: #FF8C00;
  500. color: #FF8C00;
  501. }
  502. .author-badge.pink {
  503. background: #FFD700;
  504. color: #FFD700;
  505. }
  506. .author-desc {
  507. font-size: 26px;
  508. color: rgba(255, 248, 220, 0.9);
  509. line-height: 1.3;
  510. text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  511. }
  512. .logo-wrapper {
  513. display: flex;
  514. flex-direction: column;
  515. align-items: flex-end;
  516. gap: 8px;
  517. }
  518. .logo {
  519. font-size: 28px;
  520. font-weight: bold;
  521. color: #FFD700;
  522. letter-spacing: 2px;
  523. position: relative;
  524. text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  525. }
  526. .logo::before {
  527. content: '';
  528. position: absolute;
  529. left: -22px;
  530. top: 50%;
  531. transform: translateY(-50%);
  532. width: 12px;
  533. height: 12px;
  534. background: #FFA500;
  535. border-radius: 50%;
  536. box-shadow: 0 0 18px #FFA500;
  537. }
  538. .logo-dots {
  539. display: flex;
  540. gap: 5px;
  541. }
  542. .logo-dot {
  543. width: 7px;
  544. height: 7px;
  545. border-radius: 50%;
  546. background: rgba(255, 165, 0, 0.6);
  547. box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
  548. }
  549. </style>
  550. </head>
  551. <body>
  552. <!-- Background decorations -->
  553. <div class="bg-decoration">
  554. <div class="dot-pattern"></div>
  555. <div class="circle-1"></div>
  556. <div class="circle-2"></div>
  557. <div class="circle-3"></div>
  558. <div class="triangle"></div>
  559. <div class="square-1"></div>
  560. <div class="square-2"></div>
  561. <div class="line-1"></div>
  562. <div class="line-2"></div>
  563. <div class="line-3"></div>
  564. <div class="hexagon-1"></div>
  565. <div class="hexagon-2"></div>
  566. </div>
  567. <div class="page-container">
  568. <div class="topic-wrapper">
  569. <div class="topic-accent"></div>
  570. <div class="topic-decoration">
  571. <div class="topic-dot"></div>
  572. <div class="topic-dot"></div>
  573. <div class="topic-dot"></div>
  574. </div>
  575. <!-- Tech badge decoration -->
  576. <svg class="bookmark-deco" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="rgba(255, 165, 0, 0.6)" stroke-width="2">
  577. <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
  578. </svg>
  579. <div class="title">{{title}}</div>
  580. </div>
  581. <div class="image-wrapper">
  582. <div class="corner-deco top-left"></div>
  583. <div class="corner-deco bottom-right"></div>
  584. <div class="corner-deco top-right"></div>
  585. <div class="corner-deco bottom-left"></div>
  586. <!-- Side badges -->
  587. <div class="side-badge-left">
  588. <div class="badge-circle filled"></div>
  589. <div class="badge-circle"></div>
  590. <div class="badge-circle"></div>
  591. </div>
  592. <div class="side-badge-right">
  593. <div class="badge-circle"></div>
  594. <div class="badge-circle filled"></div>
  595. <div class="badge-circle"></div>
  596. </div>
  597. <div class="image-container">
  598. <img src="{{image}}" alt="Frame Image">
  599. </div>
  600. </div>
  601. <div class="text-wrapper">
  602. <!-- Quote SVG icons -->
  603. <svg class="quote-icon-left" width="90" height="90" viewBox="0 0 24 24" fill="rgba(255, 165, 0, 0.6)">
  604. <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
  605. </svg>
  606. <svg class="quote-icon-right" width="90" height="90" viewBox="0 0 24 24" fill="rgba(255, 165, 0, 0.6)">
  607. <path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
  608. </svg>
  609. <!-- Accent bars -->
  610. <div class="accent-bar-left"></div>
  611. <div class="accent-bar-right"></div>
  612. <div class="text">{{text}}</div>
  613. </div>
  614. <div class="footer">
  615. <div class="author">
  616. <div class="author-name">
  617. <div class="author-badges">
  618. <div class="author-badge cyan"></div>
  619. <div class="author-badge pink"></div>
  620. </div>
  621. {{author=@Pixelle.AI}}
  622. </div>
  623. <div class="author-desc">{{describe=Open Source Omnimodal AI Creative Agent}}</div>
  624. </div>
  625. <div class="logo-wrapper">
  626. <div class="logo">{{brand=Pixelle-Video}}</div>
  627. <div class="logo-dots">
  628. <div class="logo-dot"></div>
  629. <div class="logo-dot"></div>
  630. <div class="logo-dot"></div>
  631. <div class="logo-dot"></div>
  632. </div>
  633. </div>
  634. </div>
  635. </div>
  636. </body>
  637. </html>