> ## Documentation Index
> Fetch the complete documentation index at: https://trickest.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Utilities Modules

> Explore a collection of powerful and efficient modules in the Utilities category to enhance your workflows.

export const ModuleCard = ({name, category, inputs, outputs, description, author, createdDate, iframeUrl}) => <a href={`${category.replace(/\s+/g, '-').toLowerCase()}/${name.replace(/\s+/g, '-').toLowerCase()}`} style={{
  textDecoration: 'none'
}}>
    <div style={{
  background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.02) 100%)',
  borderRadius: '16px',
  overflow: 'hidden',
  transition: 'transform 0.4s cubic-bezier(0.215,0.61,0.355,1), box-shadow 0.3s ease',
  height: '40rem',
  width: '100%',
  display: 'flex',
  marginBottom: '16px',
  flexDirection: 'column',
  border: '1px solid rgba(255, 255, 255, 0.1)',
  boxShadow: '0px 8px 32px -2px rgba(0, 0, 0, 0.25), 0px 1px 2px 0px rgba(255, 255, 255, 0.07)',
  backdropFilter: 'blur(8px)',
  position: 'relative',
  perspective: '1000px'
}} onMouseOver={e => {
  e.currentTarget.style.boxShadow = '0 8px 32px -2px rgba(0, 0, 0, 0.4)';
  e.currentTarget.style.transform = 'translateY(-4px) scale(1.02)';
}} onMouseOut={e => {
  e.currentTarget.style.boxShadow = '0px 8px 32px -2px rgba(0, 0, 0, 0.25), 0px 1px 2px 0px rgba(255, 255, 255, 0.07)';
  e.currentTarget.style.transform = 'translateY(0) scale(1)';
}}>
      <div style={{
  width: '100%',
  height: '300px',
  borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
  position: 'relative'
}}>
        <div style={{
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  background: 'linear-gradient(45deg, rgba(0, 163, 255, 0.1) 0%, rgba(0, 101, 255, 0.05) 100%)'
}} />
        <iframe src={iframeUrl} style={{
  width: '100%',
  height: '100%',
  border: 'none',
  position: 'relative',
  zIndex: 1,
  background: 'transparent'
}} scrolling="no" />
      </div>

      <div style={{
  padding: '1.5rem',
  display: 'flex',
  flexDirection: 'column',
  height: 'calc(100% - 300px)',
  gap: '10px'
}}>
        <h2 style={{
  color: '#ffffff',
  fontSize: '1.4rem',
  margin: 0,
  fontWeight: '600',
  lineHeight: '1.3'
}}>
          {name}
        </h2>

        <p style={{
  color: 'rgba(163, 179, 188, 0.8)',
  fontSize: '0.9rem',
  margin: 0,
  lineHeight: '1.4',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  display: '-webkit-box',
  WebkitLineClamp: 2,
  WebkitBoxOrient: 'vertical',
  flex: '0 0 auto',
  height: '2.7rem'
}}>
          {description}
        </p>

        <div style={{
  display: 'flex',
  flexDirection: 'column',
  gap: '12px',
  flex: 1,
  minHeight: '8rem'
}}>
          <div style={{
  flex: 1
}}>
            <div style={{
  display: 'flex',
  alignItems: 'center',
  gap: '8px',
  marginBottom: '4px',
  color: '#00a3ff',
  fontSize: '0.75rem'
}}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M5 12h14M12 5l7 7-7 7" />
              </svg>
              INPUTS
            </div>
            <div style={{
  display: 'flex',
  flexWrap: 'wrap',
  gap: '6px',
  paddingRight: '4px'
}}>
              {inputs.slice(0, 5).map((input, index) => <span key={index} style={{
  background: 'rgba(0, 163, 255, 0.1)',
  borderRadius: '6px',
  padding: '2px 8px',
  fontSize: '0.7rem',
  display: 'inline-flex',
  alignItems: 'center',
  gap: '4px',
  color: '#00a3ff',
  border: '1px solid rgba(0, 163, 255, 0.2)'
}}>
                  {input}
                </span>)}
              {inputs.length > 6 && <span style={{
  background: 'rgba(255, 255, 255, 0.05)',
  borderRadius: '4px',
  padding: '1px 6px',
  fontSize: '0.6rem',
  color: 'rgba(0, 163, 255, 0.6)',
  border: '1px solid rgba(0, 163, 255, 0.1)',
  display: 'inline-flex',
  alignItems: 'center'
}}>
                  +{inputs.length - 5}
                </span>}
            </div>
          </div>

          <div style={{
  flex: 1
}}>
            <div style={{
  display: 'flex',
  alignItems: 'center',
  gap: '8px',
  marginBottom: '4px',
  color: '#ff6b00',
  fontSize: '0.75rem'
}}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <circle cx="12" cy="12" r="10" /><path d="M8 12h8" />
              </svg>
              OUTPUTS
            </div>
            <div style={{
  display: 'flex',
  flexWrap: 'wrap',
  gap: '6px',
  paddingRight: '4px'
}}>
              {outputs.slice(0, 5).map((output, index) => <span key={index} style={{
  background: 'rgba(255, 107, 0, 0.1)',
  borderRadius: '6px',
  padding: '2px 8px',
  fontSize: '0.7rem',
  display: 'inline-flex',
  alignItems: 'center',
  gap: '4px',
  color: '#ff6b00',
  border: '1px solid rgba(255, 107, 0, 0.2)'
}}>
                  {output}
                </span>)}
              {outputs.length > 6 && <span style={{
  background: 'rgba(255, 255, 255, 0.05)',
  borderRadius: '4px',
  padding: '1px 6px',
  fontSize: '0.6rem',
  color: 'rgba(255, 107, 0, 0.6)',
  border: '1px solid rgba(255, 107, 0, 0.1)',
  display: 'inline-flex',
  alignItems: 'center'
}}>
                  +{outputs.length - 5}
                </span>}
            </div>
          </div>
        </div>
      </div>
      
      <div style={{
  borderTop: '1px solid rgba(255, 255, 255, 0.1)',
  padding: '1rem 1.5rem',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  background: 'rgba(0, 0, 0, 0.15)',
  marginTop: 'auto',
  fontSize: '0.8rem'
}}>
        <div style={{
  display: 'flex',
  alignItems: 'center',
  gap: '8px'
}}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(163, 179, 188, 0.8)" strokeWidth="2">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
          </svg>
          <span style={{
  color: 'rgba(163, 179, 188, 0.8)'
}}>{author}</span>
        </div>
        <div style={{
  display: 'flex',
  alignItems: 'center',
  gap: '8px'
}}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(163, 179, 188, 0.8)" strokeWidth="2">
            <circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" />
          </svg>
          <span style={{
  color: 'rgba(163, 179, 188, 0.8)'
}}>{createdDate}</span>
        </div>
      </div>
    </div>
  </a>;

<CardGroup cols={2}>
  <ModuleCard name="Generate Scan Report" category="Utilities" inputs={["sitemap", "findings", "hostname", "dns-records", "screenshots", "url-details", "port-details", "whois-records", "javascript-code", "web-technologies", "web-server-details", "network-service-details"]} outputs={["html-zip"]} description="Aggregates diverse data types from various modules into a consolidated, easy-to-review report" author="mhmdiaa-trickest" createdDate="2025-06-11" iframeUrl="https://editor.trickest.io/preview?workflow_url=https://trickest-public-workflow.s3.eu-central-1.amazonaws.com/1165cca8-e4dc-44e6-8554-41bce7068abf.json" />
</CardGroup>