lucavi | CODE ✦ XIV QUEST.

Lv90

Endwalker

Reward

190575

1000

Description Heart of ember, autumntide —
cooling swiftly in fading light.

Accept Decline

Inspired by the XIV quest accept/deny window. "Inspired"? It's just recreated to the best of my ability, a little bit of colour variation not withstanding. XIV Quest is:

✓ MOBILE RESPONSIVE
✓ COMMENT-FRIENDLY??? SOMEHOW??? WHY DID I DO THIS
✗ FLEX
✗ CUSTOMISABLE
✗ TESTED FOR EMAIL

Not much in the customisation aspect, outside of replacing quest text and quest image. However, the Accept and Decline buttons are real links, and you can put whatever you like in there!

The code is absolutely BONKERS here so I would be careful about trying to Frankenstein this one. And for anyone who is looking to use this and has to pick through the messy code. I'm sorry. This one's for you, nerds.

EXP and Gil images are taken directly from the Eorzean Database; frame is from GamerEscape. The Rewards and Description icons are a little bit different, but I couldn't find the proper ones so those are there instead, also from Eorzean Database.

Happy gaming!

XIV QUEST

<raw-code><div style="display:flex; justify-content:center;">
<div style="width:100%; max-width:450px; background:#ddd7cb; background:linear-gradient(to bottom, rgba(225,219,208,1) 0%, rgba(230,222,212,1) 100%);">
<div style="display:block; width:100%; padding:0 15px; font:normal 16px/1.25 'Trebuchet MS', sans-serif; background:#ddd7cb; background:linear-gradient(to bottom, rgba(225,219,208,1) 0%, rgba(230,222,212,1) 100%); border-radius:2px; box-shadow:0 0 2px #000;
  background:
  url('https://ffxiv.gamerescape.com/w/images/2/20/Questleftupcorner2a.png') no-repeat top left,
  url('https://ffxiv.gamerescape.com/w/images/1/19/Questrightupcorner2a.png') no-repeat top right,
  url('https://ffxiv.gamerescape.com/w/images/3/39/Questleftdowncorner2a.png') no-repeat bottom left,
  url('https://ffxiv.gamerescape.com/w/images/4/41/Questrightdowncorner2a.png') no-repeat bottom right,
  url('https://ffxiv.gamerescape.com/w/images/1/1c/Questtopborder.png') repeat-x top,
  url('https://ffxiv.gamerescape.com/w/images/0/09/Questbottomborder3a.png') repeat-x bottom,
  url('https://ffxiv.gamerescape.com/w/images/1/17/Questleftborder2b.png') repeat-y left,
  url('https://ffxiv.gamerescape.com/w/images/3/35/Questrightborder3h.png') repeat-y right;
  background-size: 100px auto, 100px auto, 100px auto, 100px auto, auto, auto 8px, 8px 100%, 8px 100%;">
  <div style="display:flex; justify-content:space-between; padding:20px 10px 10px; border-bottom:1px solid #b1b1b1;">

<div style="display:flex; justify-content:center; align-items:center; align-self:start; padding:5px; width:36px; aspect-ratio:1; font:normal 21px/1.0 'Arial Narrow', sans-serif; color:#fff; background:#232323; text-shadow:0 0 2px #000, 0 0 2px #000; border-radius:99rem; white-space:nowrap;">
    Lv90
  </div>
  <span style="align-self:center; padding:0 5px; font-size:clamp(21px,3.5vw,24px); color:#333; text-align:center;">
    Your quest name goes here!
  </span>
  <div style="width:36px;"></div>
  </div>
  <div style="padding:15px; text-align:initial; border-top:1px solid #f0ece2; border-bottom:1px solid #b1b1b1;">
  
  
  <div style="padding:50px; background:#333 url('QUEST_IMAGE_GOES_HERE') no-repeat center; background-size:cover; box-shadow:0 0 3px #000;"></div>

<span style="display:flex; gap:5px; align-items:center; padding:15px 0 5px; color:#fff; text-shadow:0 0 1px #000,0 0 2px #000,0 0 2px #000;"><img src="https://img.finalfantasyxiv.com/lds/h/7/0N4sUHgq12tDPko51qoKRw_pHs.png" style="display:inline; width:15px; padding:2px; background:#333; border-radius:99rem;">Reward</span>
  <div style="display:flex; flex-flow:row wrap; gap: 3px 10px; margin-left:20px; padding:10px 10px 5px; line-height:1; background: rgb(100,99,96); background: linear-gradient(to bottom, rgba(100,99,96,1) 0%, rgba(138,137,134,1) 60%, rgba(100,99,96,1) 100%); border:1px solid #646360; border-radius:3px; box-shadow:inset 0 0 3px #333;">
    
    <div name="EXP" style="display:flex; background:linear-gradient(to top, #33333380 0%, #33333380 20%, #00000000 21%, #00000000 100%);">
      <img src="https://img.finalfantasyxiv.com/lds/h/8/GShCUkaKnehhJU3Ox2t4wFSFc4.png" style="align-self:end; width:32px; aspect-ratio:1;" /><span style="align-self:end; font-family:Arial Narrow,sans-serif; font-size:clamp(18px,3.5vw,24px); color:#fff; text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000;">
        300
      </span>
    </div>
    
    <div name="GIL" style="display:flex; background:linear-gradient(to top, #33333380 0%, #33333380 20%, #00000000 21%, #00000000 100%);">
      <img src="https://img.finalfantasyxiv.com/lds/h/-/wGkGRitbxJJGDRYYLmwkaNtXRs.png" style="align-self:end; width:32px; aspect-ratio:1;" />  <span style="align-self:end;font-family:Arial Narrow,sans-serif; font-size:clamp(18px,3.5vw,24px); color:#fff; text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000;">
        100
      </span>
    </div>

</div>
  
  <span style="display:flex; gap:5px; align-items:center; padding:15px 0 7px; color:#fefefe; letter-spacing: 0.02em; text-shadow:0 0 1px #000,0 0 2px #000, 0 0 2px #000;"><img src="https://img.finalfantasyxiv.com/lds/h/8/V4ridy64VKVMvz_RAjvpmcfLsI.png" style="display:inline; width:15px; padding:2px; background:#333; border-radius:99rem;">Description</span>
  <span style="display:block; margin-left:20px; color:#333;">
    Your quest description text goes here.
  </span>
</div>

<div style="display:flex; flex-flow:row nowrap; justify-content:space-around; padding:15px 15px 20px; font-size:12px; border-top:1px solid #f0ece2;">
  <a style="text-decoration:none; width:40%; padding:2px; color:#fff; text-align:center; background:#2b2b2b; background:linear-gradient(to bottom, rgba(62,62,62,1) 0%, rgba(62,62,62,1) 48%, rgba(43,43,43,1) 52%, rgba(43,43,43,1) 100%);border-radius:99rem;box-shadow:0 0 2px #000;"
     href="LINKHERE">Accept</a>

<a style="text-decoration:none; width:40%; padding:2px; color:#fff; text-align:center; background:#2b2b2b; background:linear-gradient(to bottom, rgba(62,62,62,1) 0%, rgba(62,62,62,1) 48%, rgba(43,43,43,1) 52%, rgba(43,43,43,1) 100%);border-radius:99rem;box-shadow:0 0 2px #000;"
     href="LINKHERE">Decline</a>
</div>

</div>
</div>
</div></raw-code>

CODE ✦ XIV QUEST.

XIV QUEST

(frozen comment) XIV QUEST (COMMENT EXAMPLE)