<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoLCA</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="left-section">
        <h1>EcoLCA</h1>
        <div class="questions">
            <h2>Questions</h2>
            <table id="quizTable">
                <tr>
                    <td colspan="2"><strong>RAW MATERIAL EXTRACTION</strong></td>
                </tr>
                <tr>
                    <td>Q1. What is the emission factor of energy production used in raw material extraction?</td>
                    <td>
                        <select name="question1">
                            <option value="-1"></option>
                            <option value="3">&lt;0.1 kg CO₂/kWh</option>
                            <option value="2">0.1–0.3 kg CO₂/kWh</option>
                            <option value="1">&gt;0.3 kg CO₂/kWh</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q2. What percentage of raw materials used in your product are sourced from renewable or recycled materials?</td>
                    <td>
                        <select name="question2">
                            <option value="-1"></option>
                            <option value="3">&gt;70%</option>
                            <option value="2">30–70%</option>
                            <option value="1">&lt;30%</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q3. What percentage of raw material is extracted using methods that minimize habitat destruction or soil degradation?</td>
                    <td>
                        <select name="question3">
                            <option value="-1"></option>
                            <option value="3">&gt;80% of materials</option>
                            <option value="2">50–80% of materials</option>
                            <option value="1">&lt;50% of materials</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <!-- Storage -->
                <tr>
                    <td colspan="2"><strong>STORAGE</strong></td>
                </tr>
                <tr>
                    <td>Q4. What are the storage requirements for materials or samples?</td>
                    <td>
                        <select name="question4">
                            <option value="-1"></option>
                            <option value="3">No storage required</option>
                            <option value="2">Normal conditions (refrigerator)</option>
                            <option value="1">Special conditions (deep freeze, vacuum)</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q5. Is renewable energy used to power storage facilities?</td>
                    <td>
                        <select name="question5">
                            <option value="-1"></option>
                            <option value="3">Yes, fully powered by renewable energy</option>
                            <option value="2">Partially powered by renewable energy</option>
                            <option value="1">No renewable energy use</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q6. For how long are samples stored before analysis?</td>
                    <td>
                        <select name="question6">
                            <option value="-1"></option>
                            <option value="3">&lt;1 month</option>
                            <option value="2">1–6 months</option>
                            <option value="1">&gt;6 months</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <!-- Material Processing -->
                <tr>
                    <td colspan="2"><strong>MATERIAL PROCESSING</strong></td>
                </tr>
                <tr>
                    <td>Q7. What is the total energy consumption for material processing (kW)?</td>
                    <td>
                        <select name="question7">
                            <option value="-1"></option>
                            <option value="3">&lt;0.1 kW</option>
                            <option value="2">0.1–1.5 kW</option>
                            <option value="1">&gt;1.5 kW</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q8. What percentage of input material is converted into the final product (yield efficiency)?</td>
                    <td>
                        <select name="question8">
                            <option value="-1"></option>
                            <option value="3">&gt;90%</option>
                            <option value="2">70–90%</option>
                            <option value="1">&lt;70%</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q9. Are energy-efficient technologies implemented during processing?</td>
                    <td>
                        <select name="question9">
                            <option value="-1"></option>
                            <option value="3">Yes, implemented in all key stages</option>
                            <option value="2">Partially implemented</option>
                            <option value="1">No energy efficiency measures</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <!-- Distribution and Transportation -->
                <tr>
                    <td colspan="2"><strong>DISTRIBUTION AND TRANSPORTATION</strong></td>
                </tr>
                <tr>
                    <td>Q10. What is the average transportation distance for raw materials or products?</td>
                    <td>
                        <select name="question10">
                            <option value="-1"></option>
                            <option value="3">&lt;1 mile</option>
                            <option value="2">1–10 miles</option>
                            <option value="1">&gt;10 miles</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q11. Are low-carbon or eco-friendly transportation methods used?</td>
                    <td>
                        <select name="question11">
                            <option value="-1"></option>
                            <option value="3">Yes, for all transportation needs</option>
                            <option value="2">Yes, for &gt;50% of transportation needs</option>
                            <option value="1">No eco-friendly methods used</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q12. How are shipments consolidated during transportation?</td>
                    <td>
                        <select name="question12">
                            <option value="-1"></option>
                            <option value="3">&gt;10 tons or &gt;100 cubic meters per shipment</option>
                            <option value="2">1–10 tons or 10–100 cubic meters per shipment</option>
                            <option value="1">&lt;1 ton or &lt;10 cubic meters per shipment</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <!-- Use Phase -->
                <tr>
                    <td colspan="2"><strong>USE PHASE</strong></td>
                </tr>
                <tr>
                    <td>Q13. What is the energy efficiency of the product during use?</td>
                    <td>
                        <select name="question13">
                            <option value="-1"></option>
                            <option value="3">&gt;90% efficiency</option>
                            <option value="2">70–90% efficiency</option>
                            <option value="1">&lt;70% efficiency</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q14. How often does the product require maintenance during its lifetime?</td>
                    <td>
                        <select name="question14">
                            <option value="-1"></option>
                            <option value="3">≤1 maintenance/year</option>
                            <option value="2">2–4 maintenance/year</option>
                            <option value="1">&gt;4 maintenance/year</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q15. What is the expected product lifespan (years)?</td>
                    <td>
                        <select name="question15">
                            <option value="-1"></option>
                            <option value="3">&gt;10 years</option>
                            <option value="2">5–10 years</option>
                            <option value="1">&lt;5 years</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <!-- End-of-Life -->
                <tr>
                    <td colspan="2"><strong>END-OF-LIFE (DISPOSAL AND RECYCLING)</strong></td>
                </tr>
                <tr>
                    <td>Q16. How much waste is generated per unit weight of the product?</td>
                    <td>
                        <select name="question16">
                            <option value="-1"></option>
                            <option value="3">&lt;0.1 kg waste/kg product</option>
                            <option value="2">0.1–0.5 kg waste/kg product</option>
                            <option value="1">&gt;0.5 kg waste/kg product</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q17. How much of the end-of-life materials are suitable for recyclability or reuse?</td>
                    <td>
                        <select name="question17">
                            <option value="-1"></option>
                            <option value="3">&gt;90% of materials recyclable or reusable</option>
                            <option value="2">50–90% recyclable or reusable</option>
                            <option value="1">&lt;50% recyclable or reusable</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Q18. How much of the end-of-life materials and byproducts have been recycled for reuse?</td>
                    <td>
                        <select name="question18">
                            <option value="-1"></option>
                            <option value="3">&gt;90% of materials and byproducts</option>
                            <option value="2">50–90% materials and byproducts</option>
                            <option value="1">&lt;50% materials and byproducts</option>
                            <option value="0">Not Applicable</option>
                        </select>
                    </td>
                </tr>
            </table>
                    <td colspan="2">This application is for research purposes.</td>
                </tr>
                <tr>
                    <td colspan="2">                For any inquiries, please consult Prof. Dr. Fotouh R. Mansour 
                        <span style="color: blue; text-decoration: underline;">Fotouhrashed@pharm.tanta.edu.eg</span>.
                    </td>
                </tr>
                </tr>
                </tr>
            </table>
        </div>
    <div id="result"></div>.
    </div>
    <div class="frame">
<div class="circle" id="result">0</div>
        <img src="g1.png" alt="G1" class="layer g1">
        <img src="g2.png" alt="G2" class="layer g2">
        <img src="g3.png" alt="G3" class="layer g3">
        <img src="g4.png" alt="G4" class="layer g4">
        <img src="g5.png" alt="G5" class="layer g5">
        <img src="g6.png" alt="G6" class="layer g6">
        <img src="g7.png" alt="G7" class="layer g7">
        <img src="g8.png" alt="g8" class="layer g8">
        <img src="y1.png" alt="y1" class="layer yy1">
        <img src="y2.png" alt="y2" class="layer yy2">
        <img src="y3.png" alt="y3" class="layer yy3">
        <img src="y4.png" alt="y4" class="layer yy4">
        <img src="y5.png" alt="y5" class="layer yy5">
        <img src="y6.png" alt="y6" class="layer yy6">
        <img src="y7.png" alt="y7" class="layer yy7">
        <img src="y8.png" alt="y8" class="layer yy8">
       	<img src="r1.png" alt="r1" class="layer rr1">
        <img src="r2.png" alt="r2" class="layer rr2">
        <img src="r3.png" alt="r3" class="layer rr3">
        <img src="r4.png" alt="r4" class="layer rr4">
        <img src="r5.png" alt="r5" class="layer rr5">
        <img src="r6.png" alt="r6" class="layer rr6">
        <img src="r7.png" alt="r7" class="layer rr7">
        <img src="r8.png" alt="r8" class="layer rr8">
         <img src="borders.png" alt="Base Image" class="base-image">
    </div>
    <script src="script.js"></script>
</body>
</html>

