Desaigner

Presentation

This is regarding the extent of your design's responsiveness.

Content

Are the texts, visuals, and clips appropriately arranged and significant?

Interaction

It's about your ability to engage with design or to execute events on it.

Respondness

How much quickly your design can load with respect to time.

Navigation

Help's easily move between design screens.

Guide

Build lightning-fast, globally optimized designs.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desaigner</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
  }
  .container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  input[type="text"] {
    width: calc(100% - 120px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
  }
  button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  #loadingTime {
    margin-top: 20px;
    font-size: 18px;
  }
  #report {
    margin-top: 40px;
  }
  #report h2 {
    margin-bottom: 10px;
  }
  #chartContainer {
    width: 100%;
    height: 300px;
  }
</style>
</head>
<body>
  <div class="container">
    <h1 style="text-align: center;">Desaigner</h1>
    <h2>Responsive Checker</h2>
    <input type="text" id="responsiveURLInput" placeholder="Enter the web app URL">
    <button onclick="checkResponsiveness()">Check Responsiveness</button>
    <div id="responsiveResult"></div>

    <h2>Interaction Checker</h2>
    <input type="text" id="interactionURLInput" placeholder="Enter the web app URL">
    <button onclick="checkInteraction()">Check Interaction</button>
    <div id="interactionResult"></div>

    <h2>Content Checker</h2>
    <input type="text" id="contentURLInput" placeholder="Enter the web app URL">
    <button onclick="checkContent()">Check Content</button>
    <div id="contentResult"></div>

    <h2>Respondness Checker</h2>
    <input type="text" id="respondnessURLInput" placeholder="Enter the web app URL">
    <button onclick="checkLoadingTime()">Check Respondness</button>
    <div id="respondnessResult"></div>

    <h2>Navigation Checker</h2>
    <input type="text" id="navigationURLInput" placeholder="Enter the web app URL">
    <button onclick="checkNavigation()">Check Navigation</button>
    <div id="navigationResult"></div>

    <div id="report">
      <h2>Report</h2>
      <div id="chartContainer"></div>
    </div>
  </div>

<script>
  // Variables to store results
  let responsivePercentage = 0;
  let interactionPercentage = 0;
  let contentPercentage = 0;
  let respondnessPercentage = 0;
  let navigationPercentage = 0;

  // Functions for individual checks
  function checkResponsiveness() {
    // Implementation of responsiveness check
    // ...
    responsivePercentage = 80; // Example value
    displayReport();
  }

  function checkInteraction() {
    // Implementation of interaction check
    // ...
    interactionPercentage = 70; // Example value
    displayReport();
  }

  function checkContent() {
    // Implementation of content check
    // ...
    contentPercentage = 90; // Example value
    displayReport();
  }

  function checkLoadingTime() {
    // Implementation of loading time check
    // ...
    respondnessPercentage = 75; // Example value
    displayReport();
  }

  function checkNavigation() {
    // Implementation of navigation check
    // ...
    navigationPercentage = 85; // Example value
    displayReport();
  }

  // Function to display the report
  function displayReport() {
    const totalChecks = 5;
    const totalPercentage =
      (responsivePercentage + interactionPercentage + contentPercentage + respondnessPercentage + navigationPercentage) /
      totalChecks;

    // Update the chart
    var chart = new CanvasJS.Chart("chartContainer", {
      animationEnabled: true,
      theme: "light2",
      title: {
        text: "Tool Analysis Report"
      },
      data: [{
        type: "column",
        dataPoints: [
          { label: "Responsive", y: responsivePercentage },
          { label: "Interaction", y: interactionPercentage },
          { label: "Content", y: contentPercentage },
          { label: "Respondness", y: respondnessPercentage },
          { label: "Navigation", y: navigationPercentage }
        ]
      }]
    });
    chart.render();
  }
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
Instagram