import { ParsedRequest } from './types' import { getTemplateCss } from './template-css' export function getChallengeHtml(parsedReq: ParsedRequest) { const { theme, fontSize, question, creatorName, creatorAvatarUrl, challengerAmount, challengerOutcome, creatorAmount, creatorOutcome, acceptedName, acceptedAvatarUrl, } = parsedReq const MAX_QUESTION_CHARS = 78 const truncatedQuestion = question.length > MAX_QUESTION_CHARS ? question.slice(0, MAX_QUESTION_CHARS) + '...' : question const hideAvatar = creatorAvatarUrl ? '' : 'hidden' const hideAcceptedAvatar = acceptedAvatarUrl ? '' : 'hidden' const accepted = acceptedName !== '' return `<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Generated Image</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.tailwindcss.com"></script> </head> <style> ${getTemplateCss(theme, fontSize)} </style> <body> <div class="px-24"> <div class="flex flex-col justify-between gap-16 pt-2"> <div class="flex flex-col text-indigo-700 mt-4 text-5xl leading-tight text-center"> ${truncatedQuestion} </div> <div class="flex flex-row grid grid-cols-3"> <div class="flex flex-col justify-center items-center ${ creatorOutcome === 'YES' ? 'text-primary' : 'text-red-500' }"> <!-- Creator user column--> <div class="flex flex-col align-bottom gap-6 items-center justify-center"> <p class="text-gray-900 text-4xl">${creatorName}</p> <img class="h-36 w-36 rounded-full bg-white flex items-center justify-center ${hideAvatar}" src="${creatorAvatarUrl}" alt="" /> </div> <div class="flex flex-row justify-center items-center gap-3 mt-6"> <div class="text-5xl">${'M$' + creatorAmount}</div> <div class="text-4xl">${'on'}</div> <div class="text-5xl ">${creatorOutcome}</div> </div> </div> <!-- VS--> <div class="flex flex-col text-gray-900 text-6xl mt-8 text-center"> VS </div> <div class="flex flex-col justify-center items-center ${ challengerOutcome === 'YES' ? 'text-primary' : 'text-red-500' }"> <!-- Unaccepted user column--> <div class="flex flex-col align-bottom gap-6 items-center justify-center ${accepted ? 'hidden' : ''}"> <p class="text-gray-900 text-4xl">You</p> <img class="h-36 w-36 rounded-full bg-white flex items-center justify-center " src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="" /> </div> <!-- Accepted user column--> <div class="flex flex-col align-bottom gap-6 items-center justify-center"> <p class="text-gray-900 text-4xl">${acceptedName}</p> <img class="h-36 w-36 rounded-full bg-white flex items-center justify-center ${hideAcceptedAvatar}" src="${acceptedAvatarUrl}" alt="" /> </div> <div class="flex flex-row justify-center items-center gap-3 mt-6"> <div class="text-5xl">${'M$' + challengerAmount}</div> <div class="text-4xl">${'on'}</div> <div class="text-5xl ">${challengerOutcome}</div> </div> </div> </div> </div> </div> <!-- Manifold logo --> <div class="flex flex-row justify-center absolute bottom-4 left-[24rem]"> <a class="flex flex-row gap-3" href="/"> <img class="sm:h-12 sm:w-12" src="https://manifold.markets/logo.png" width="40" height="40" alt='' /> <div class="hidden sm:flex font-major-mono lowercase mt-1 sm:text-3xl md:whitespace-nowrap" > Manifold Markets </div></a> </div> </div> </body> </html>` }