{"id":1448,"date":"2025-08-26T06:49:25","date_gmt":"2025-08-26T06:49:25","guid":{"rendered":"https:\/\/gkanamaria.sites.sch.gr\/?p=1448"},"modified":"2025-08-27T16:08:59","modified_gmt":"2025-08-27T16:08:59","slug":"%ce%b5%ce%bd%cf%8c%cf%84%ce%b7%cf%84%ce%b1-2-%cf%84%ce%bf-%cf%85%ce%bb%ce%b9%ce%ba%cf%8c-%cf%84%ce%bf%cf%85-%cf%85%cf%80%ce%bf%ce%bb%ce%bf%ce%b3%ce%b9%cf%83%cf%84%ce%ae-2","status":"publish","type":"post","link":"https:\/\/gkanamaria.sites.sch.gr\/?p=1448","title":{"rendered":"\u0395\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1 2 – \u03a4\u03bf \u03c5\u03bb\u03b9\u03ba\u03cc \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae"},"content":{"rendered":"\n\n \n\n \n \n \u0395\u03be\u03b5\u03c1\u03b5\u03cd\u03bd\u03b7\u03c3\u03b7 \u03a5\u03bb\u03b9\u03ba\u03bf\u03cd \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <!-- Chosen Palette: Calm Harmony (Warm Neutrals with Soft Blue Accent) -->\n <!-- Application Structure Plan: A single-page, scrollable application with an anchor-based navigation bar at the top. The user can click a link in the navigation to smoothly scroll to the corresponding section of the page. This structure provides a complete overview on a single canvas, which is more intuitive than a multi-section dashboard for content that is meant to be consumed sequentially. Images have been added to each section to provide visual context and break up the text. The interactive elements (chart, expandable cards) are integrated directly into their respective sections. -->\n <!-- Visualization & Content Choices: Report Info: Storage Media (HDD, SSD, etc.) -> Goal: Compare speed, capacity, cost -> Viz: Interactive Bar Chart -> Interaction: User clicks buttons ('Speed', 'Capacity', 'Cost') to dynamically update the chart's data. Justification: A persistent, scrollable chart is a key feature of the single-page experience, allowing users to reference it easily. Library: Chart.js\/Canvas. Report Info: Devices & Computer Types -> Goal: Organize & Inform -> Method: Interactive Card Grid with Images -> Interaction: Click a card to see details. Justification: Images enhance the visual appeal and help in quickly identifying each type of computer. This format breaks down complex information into manageable, interactive chunks. Library: HTML\/CSS\/JS. -->\n <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n <style>\n html {\n scroll-behavior: smooth;\n }\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f5f5f4; \/* stone-100 *\/\n }\n .nav-card {\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n }\n .nav-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 400px;\n }\n }\n .device-card {\n cursor: pointer;\n transition: background-color 0.2s;\n }\n .device-card .details {\n display: none;\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.5s ease-in-out;\n }\n .device-card.open .details {\n display: block;\n max-height: 500px;\n }\n main {\n max-width: 1400px !important;\n width: 95% !important;\n}\n <\/style>\n<\/head>\n<body class=\"text-slate-800\">\n\n <header class=\"bg-white shadow-md sticky top-0 z-50\">\n <div class=\"mx-auto px-4 py-6 text-center max-w-none\">\n <h1 class=\"text-3xl md:text-4xl font-bold text-slate-900\">\u0395\u03be\u03b5\u03c1\u03b5\u03cd\u03bd\u03b7\u03c3\u03b5 \u03c4\u03bf \u03a5\u03bb\u03b9\u03ba\u03cc \u03c4\u03bf\u03c5 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae<\/h1>\n <p class=\"mt-2 text-slate-600\">\u039c\u03b9\u03b1 \u03b4\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03b9\u03ae\u03b3\u03b7\u03c3\u03b7 \u03c3\u03c4\u03b1 \u03bc\u03ad\u03c1\u03b7 \u03c0\u03bf\u03c5 \u03c3\u03c5\u03bd\u03b8\u03ad\u03c4\u03bf\u03c5\u03bd \u03ad\u03bd\u03b1\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae.<\/p>\n <\/div>\n <nav id=\"main-nav\" class=\"bg-white border-t border-slate-200\">\n <div class=\"mx-auto px-4 py-4 overflow-x-auto whitespace-nowrap max-w-none\">\n <a href=\"#intro\" class=\"nav-card inline-block text-center px-4 py-2 rounded-lg hover:bg-slate-100\">\u03a4\u03b9 \u0395\u03af\u03bd\u03b1\u03b9 Hardware;<\/a>\n <a href=\"#cpu\" class=\"nav-card inline-block text-center px-4 py-2 rounded-lg hover:bg-slate-100\">\u039a\u03b5\u03bd\u03c4\u03c1\u03b9\u03ba\u03ae \u039c\u03bf\u03bd\u03ac\u03b4\u03b1<\/a>\n <a href=\"#input\" class=\"nav-card inline-block text-center px-4 py-2 rounded-lg hover:bg-slate-100\">\u03a3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u0395\u03b9\u03c3\u03cc\u03b4\u03bf\u03c5<\/a>\n <a href=\"#output\" class=\"nav-card inline-block text-center px-4 py-2 rounded-lg hover:bg-slate-100\">\u03a3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u0395\u03be\u03cc\u03b4\u03bf\u03c5<\/a>\n <a href=\"#storage\" class=\"nav-card inline-block text-center px-4 py-2 rounded-lg hover:bg-slate-100\">\u039c\u03bd\u03ae\u03bc\u03b7 & \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7<\/a>\n <a href=\"#types\" class=\"nav-card inline-block text-center px-4 py-2 rounded-lg hover:bg-slate-100\">\u0395\u03af\u03b4\u03b7 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ce\u03bd<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main class=\"w-full px-4 md:px-8 py-4 md:py-8 space-y-12\">\n \n <section id=\"intro\" class=\"bg-white p-6 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold mb-4 text-blue-600\">\u03a4\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03a5\u03bb\u03b9\u03ba\u03cc (Hardware);<\/h3>\n <img decoding=\"async\" src=\"https:\/\/dimpapp.gr\/wp-content\/uploads\/2016\/03\/PC-parts.png\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c3\u03c5\u03bd\u03bf\u03bb\u03b9\u03ba\u03ae\u03c2 \u03ac\u03c0\u03bf\u03c8\u03b7\u03c2 \u03c5\u03bb\u03b9\u03ba\u03bf\u03cd\" class=\"w-full rounded-lg mb-4\">\n <p class=\"mb-4\">\u03a6\u03b1\u03bd\u03c4\u03ac\u03c3\u03bf\u03c5 \u03cc\u03c4\u03b9 \u03bf \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u03c3\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03b1\u03bd \u03ad\u03bd\u03b1 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 Lego. \u03a4\u03b1 \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9\u03b1 \u03c0\u03bf\u03c5 \u03b2\u03bb\u03ad\u03c0\u03b5\u03b9\u03c2 \u03ba\u03b1\u03b9 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03b1\u03b3\u03b3\u03af\u03be\u03b5\u03b9\u03c2, \u03b4\u03b7\u03bb\u03b1\u03b4\u03ae \u03c4\u03b1 **\u03c6\u03c5\u03c3\u03b9\u03ba\u03ac \u03bc\u03ad\u03c1\u03b7**, \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03c5\u03bb\u03b9\u03ba\u03cc \u03c4\u03bf\u03c5 (hardware). \u0395\u03af\u03bd\u03b1\u03b9 \u03cc\u03bb\u03b1 \u03c4\u03b1 \u03b5\u03be\u03b1\u03c1\u03c4\u03ae\u03bc\u03b1\u03c4\u03b1, \u03b1\u03c0\u03cc \u03c4\u03bf \u03c0\u03bf\u03bd\u03c4\u03af\u03ba\u03b9 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03bf\u03b8\u03cc\u03bd\u03b7, \u03bc\u03ad\u03c7\u03c1\u03b9 \u03c4\u03b1 \u03bc\u03b9\u03ba\u03c1\u03ac \u03ba\u03c5\u03ba\u03bb\u03ce\u03bc\u03b1\u03c4\u03b1 \u03bc\u03ad\u03c3\u03b1 \u03c3\u03c4\u03bf \u03ba\u03bf\u03c5\u03c4\u03af \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae.<\/p>\n <p>\u03a4\u03bf \u03c5\u03bb\u03b9\u03ba\u03cc \u03b5\u03af\u03bd\u03b1\u03b9 \u03b1\u03c5\u03c4\u03cc \u03c0\u03bf\u03c5 \u03ba\u03ac\u03bd\u03b5\u03b9 \u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae \u03bd\u03b1 \u03bb\u03b5\u03b9\u03c4\u03bf\u03c5\u03c1\u03b3\u03b5\u03af. \u03a7\u03c9\u03c1\u03af\u03c2 \u03b1\u03c5\u03c4\u03cc, \u03bf \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03af\u03c0\u03bf\u03c4\u03b1 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03bf \u03b1\u03c0\u03cc \u03ad\u03bd\u03b1 \u03ac\u03b4\u03b5\u03b9\u03bf \u03ba\u03bf\u03c5\u03c4\u03af! \u039a\u03ac\u03b8\u03b5 \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9 \u03ad\u03c7\u03b5\u03b9 \u03ad\u03bd\u03b1\u03bd \u03b5\u03b9\u03b4\u03b9\u03ba\u03cc \u03c1\u03cc\u03bb\u03bf, \u03ba\u03b1\u03b9 \u03cc\u03bb\u03b1 \u03bc\u03b1\u03b6\u03af \u03c3\u03c5\u03bd\u03b5\u03c1\u03b3\u03ac\u03b6\u03bf\u03bd\u03c4\u03b1\u03b9 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03c0\u03b1\u03af\u03b6\u03b5\u03b9\u03c2 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1, \u03bd\u03b1 \u03b3\u03c1\u03ac\u03c6\u03b5\u03b9\u03c2 \u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03bd\u03b1 \u03bc\u03b9\u03bb\u03ac\u03c2 \u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03c6\u03af\u03bb\u03bf\u03c5\u03c2 \u03c3\u03bf\u03c5.<\/p>\n <\/section>\n\n <section id=\"cpu\" class=\"bg-white p-6 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold mb-4 text-blue-600\">\u0397 \u039a\u03b5\u03bd\u03c4\u03c1\u03b9\u03ba\u03ae \u039c\u03bf\u03bd\u03ac\u03b4\u03b1: \u03a4\u03bf \u039c\u03c5\u03b1\u03bb\u03cc \u03c4\u03bf\u03c5 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae<\/h3>\n <img decoding=\"async\" src=\"https:\/\/assets.kotsovolos.gr\/product\/273144-b.jpg\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u039a\u03b5\u03bd\u03c4\u03c1\u03b9\u03ba\u03ae\u03c2 \u039c\u03bf\u03bd\u03ac\u03b4\u03b1\u03c2 \u0395\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1\u03c2\" class=\"w-full rounded-lg mb-4\">\n <p class=\"mb-4\">\u0397 \u039a\u03b5\u03bd\u03c4\u03c1\u03b9\u03ba\u03ae \u039c\u03bf\u03bd\u03ac\u03b4\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf \u03ba\u03bf\u03c5\u03c4\u03af \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae \u03c3\u03bf\u03c5. \u039c\u03ad\u03c3\u03b1 \u03c4\u03b7\u03c2 \u03ba\u03c1\u03cd\u03b2\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c4\u03b1 \u03c0\u03b9\u03bf \u03c3\u03b7\u03bc\u03b1\u03bd\u03c4\u03b9\u03ba\u03ac \u03b5\u03be\u03b1\u03c1\u03c4\u03ae\u03bc\u03b1\u03c4\u03b1 \u03c0\u03bf\u03c5 \u03ba\u03ac\u03bd\u03bf\u03c5\u03bd \u03cc\u03bb\u03b7 \u03c4\u03b7 “\u03c3\u03ba\u03ad\u03c8\u03b7”.<\/p>\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div class=\"bg-stone-100 p-4 rounded-lg\">\n <h4 class=\"font-bold text-lg\">\u0395\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03b1\u03c3\u03c4\u03ae\u03c2 (CPU) \ud83e\udde0<\/h4>\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03bf **\u03b5\u03b3\u03ba\u03ad\u03c6\u03b1\u03bb\u03bf\u03c2** \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae. \u0395\u03ba\u03c4\u03b5\u03bb\u03b5\u03af \u03cc\u03bb\u03b5\u03c2 \u03c4\u03b9\u03c2 \u03b5\u03bd\u03c4\u03bf\u03bb\u03ad\u03c2 \u03ba\u03b1\u03b9 \u03ba\u03ac\u03bd\u03b5\u03b9 \u03cc\u03bb\u03bf\u03c5\u03c2 \u03c4\u03bf\u03c5\u03c2 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03bf\u03cd\u03c2 \u03bc\u03b5 \u03b1\u03c0\u03af\u03c3\u03c4\u03b5\u03c5\u03c4\u03b7 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1. \u038c\u03c3\u03bf \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf\u03c2 \u03bf \u03b5\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03b1\u03c3\u03c4\u03ae\u03c2, \u03c4\u03cc\u03c3\u03bf \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1 “\u03c3\u03ba\u03ad\u03c6\u03c4\u03b5\u03c4\u03b1\u03b9” \u03bf \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2.<\/p>\n <\/div>\n <div class=\"bg-stone-100 p-4 rounded-lg\">\n <h4 class=\"font-bold text-lg\">\u039a\u03cd\u03c1\u03b9\u03b1 \u039c\u03bd\u03ae\u03bc\u03b7 (RAM) \u26a1<\/h4>\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03b7 **\u03c0\u03c1\u03bf\u03c3\u03c9\u03c1\u03b9\u03bd\u03ae \u03bc\u03bd\u03ae\u03bc\u03b7** \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae. \u0391\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03cd\u03b5\u03b9 \u03b4\u03b5\u03b4\u03bf\u03bc\u03ad\u03bd\u03b1 \u03c0\u03bf\u03c5 \u03c7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c4\u03b1\u03b9 \u03bf \u03b5\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03b1\u03c3\u03c4\u03ae\u03c2 \u03ac\u03bc\u03b5\u03c3\u03b1. \u038c\u03c4\u03b1\u03bd \u03ba\u03bb\u03b5\u03af\u03bd\u03b5\u03b9\u03c2 \u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae, \u03b1\u03c5\u03c4\u03ae \u03b7 \u03bc\u03bd\u03ae\u03bc\u03b7 \u03b1\u03b4\u03b5\u03b9\u03ac\u03b6\u03b5\u03b9. \u0398\u03b1 \u03bc\u03ac\u03b8\u03bf\u03c5\u03bc\u03b5 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1 \u03b3\u03b9’ \u03b1\u03c5\u03c4\u03ae \u03c3\u03c4\u03b7\u03bd \u03b5\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1 “\u039c\u03bd\u03ae\u03bc\u03b7 & \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7”.<\/p>\n <\/div>\n <div class=\"bg-stone-100 p-4 rounded-lg\">\n <h4 class=\"font-bold text-lg\">\u039c\u03b7\u03c4\u03c1\u03b9\u03ba\u03ae \u03a0\u03bb\u03b1\u03ba\u03ad\u03c4\u03b1 (Motherboard) \ud83d\udee3\ufe0f<\/h4>\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03bc\u03b5\u03b3\u03ac\u03bb\u03b7 \u03c0\u03bb\u03b1\u03ba\u03ad\u03c4\u03b1 \u03c0\u03bf\u03c5 \u03c3\u03c5\u03bd\u03b4\u03ad\u03b5\u03b9 \u03cc\u03bb\u03b1 \u03c4\u03b1 \u03b5\u03be\u03b1\u03c1\u03c4\u03ae\u03bc\u03b1\u03c4\u03b1 \u03bc\u03b5\u03c4\u03b1\u03be\u03cd \u03c4\u03bf\u03c5\u03c2. \u0395\u03af\u03bd\u03b1\u03b9 \u03c3\u03b1\u03bd \u03c4\u03bf **\u03bd\u03b5\u03c5\u03c1\u03b9\u03ba\u03cc \u03c3\u03cd\u03c3\u03c4\u03b7\u03bc\u03b1** \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae, \u03c0\u03bf\u03c5 \u03b5\u03c0\u03b9\u03c4\u03c1\u03ad\u03c0\u03b5\u03b9 \u03c3\u03c4\u03bf\u03bd \u03b5\u03b3\u03ba\u03ad\u03c6\u03b1\u03bb\u03bf (CPU) \u03bd\u03b1 \u03bc\u03b9\u03bb\u03ac\u03b5\u03b9 \u03bc\u03b5 \u03c4\u03b1 \u03c5\u03c0\u03cc\u03bb\u03bf\u03b9\u03c0\u03b1 \u03bc\u03ad\u03c1\u03b7.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"input\" class=\"bg-white p-6 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold mb-4 text-blue-600\">\u03a3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u0395\u03b9\u03c3\u03cc\u03b4\u03bf\u03c5: \u03a0\u03ce\u03c2 “\u039c\u03b9\u03bb\u03ac\u03bc\u03b5” \u03c3\u03c4\u03bf\u03bd \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae<\/h3>\n <p class=\"mb-4\">\u039f\u03b9 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u03b5\u03b9\u03c3\u03cc\u03b4\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03b1 “\u03b1\u03c5\u03c4\u03b9\u03ac” \u03ba\u03b1\u03b9 \u03c4\u03b1 “\u03c7\u03ad\u03c1\u03b9\u03b1” \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae. \u03a4\u03b9\u03c2 \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03bf\u03cd\u03bc\u03b5 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03c4\u03bf\u03c5 \u03b4\u03ce\u03c3\u03bf\u03c5\u03bc\u03b5 \u03b4\u03b5\u03b4\u03bf\u03bc\u03ad\u03bd\u03b1 \u03ba\u03b1\u03b9 \u03b5\u03bd\u03c4\u03bf\u03bb\u03ad\u03c2. \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03ba\u03ac\u03c1\u03c4\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03ac\u03b8\u03b5\u03b9\u03c2 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1.<\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/www.data-media.gr\/i\/303248\/PT-1254.webp\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c0\u03bb\u03b7\u03ba\u03c4\u03c1\u03bf\u03bb\u03bf\u03b3\u03af\u03bf\u03c5\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\u2328\ufe0f \u03a0\u03bb\u03b7\u03ba\u03c4\u03c1\u03bf\u03bb\u03cc\u03b3\u03b9\u03bf<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u038c\u03c4\u03b1\u03bd \u03c0\u03b1\u03c4\u03ac\u03c2 \u03ad\u03bd\u03b1 \u03c0\u03bb\u03ae\u03ba\u03c4\u03c1\u03bf, \u03b4\u03af\u03bd\u03b5\u03b9\u03c2 \u03bc\u03b9\u03b1 \u03b5\u03bd\u03c4\u03bf\u03bb\u03ae \u03c3\u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae. \u0395\u03af\u03bd\u03b1\u03b9 \u03bf \u03c0\u03b9\u03bf \u03c3\u03c5\u03bd\u03b7\u03b8\u03b9\u03c3\u03bc\u03ad\u03bd\u03bf\u03c2 \u03c4\u03c1\u03cc\u03c0\u03bf\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b3\u03c1\u03ac\u03c8\u03b5\u03b9\u03c2 \u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03bf \u03ae \u03bd\u03b1 \u03b4\u03ce\u03c3\u03b5\u03b9\u03c2 \u03b5\u03bd\u03c4\u03bf\u03bb\u03ad\u03c2.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/cdn.plaisio.gr\/mms\/Product-Images\/PlaisioGr\/2\/7\/2\/9\/0\/1\/6\/2729016_1.jpg\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c0\u03bf\u03bd\u03c4\u03b9\u03ba\u03b9\u03bf\u03cd\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\uddb1\ufe0f \u03a0\u03bf\u03bd\u03c4\u03af\u03ba\u03b9<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03b5\u03af\u03c4\u03b1\u03b9 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03af\u03c7\u03bd\u03b5\u03b9\u03c2 \u03ba\u03b1\u03b9 \u03bd\u03b1 \u03b5\u03c0\u03b9\u03bb\u03ad\u03b3\u03b5\u03b9\u03c2 \u03c0\u03c1\u03ac\u03b3\u03bc\u03b1\u03c4\u03b1 \u03c3\u03c4\u03b7\u03bd \u03bf\u03b8\u03cc\u03bd\u03b7. \u0395\u03af\u03bd\u03b1\u03b9 \u03c3\u03b1\u03bd \u03bd\u03b1 \u03ad\u03c7\u03b5\u03b9\u03c2 \u03ad\u03bd\u03b1 \u03bc\u03b1\u03b3\u03b9\u03ba\u03cc \u03c1\u03b1\u03b2\u03b4\u03af \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b1\u03b3\u03b3\u03af\u03b6\u03b5\u03b9\u03c2 \u03c4\u03b1 \u03b1\u03bd\u03c4\u03b9\u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03b1 \u03b1\u03c0\u03cc \u03bc\u03b1\u03ba\u03c1\u03b9\u03ac.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/assets.kotsovolos.gr\/product\/216483-b.jpg\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03bc\u03b9\u03ba\u03c1\u03bf\u03c6\u03ce\u03bd\u03bf\u03c5\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83c\udfa4 \u039c\u03b9\u03ba\u03c1\u03cc\u03c6\u03c9\u03bd\u03bf<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c0\u03b5\u03b9 \u03c4\u03b7 \u03c6\u03c9\u03bd\u03ae \u03c3\u03bf\u03c5 \u03c3\u03b5 \u03c8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc \u03c3\u03ae\u03bc\u03b1 \u03c0\u03bf\u03c5 \u03bf \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af \u03bd\u03b1 \u03ba\u03b1\u03c4\u03b1\u03bb\u03ac\u03b2\u03b5\u03b9, \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03b9\u03bb\u03ae\u03c3\u03b5\u03b9\u03c2 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03ba\u03bb\u03ae\u03c3\u03b7 \u03ae \u03bd\u03b1 \u03b7\u03c7\u03bf\u03b3\u03c1\u03b1\u03c6\u03ae\u03c3\u03b5\u03b9\u03c2 \u03ba\u03ac\u03c4\u03b9.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/encrypted-tbn0.gstatic.com\/images?q=tbn:ANd9GcQS85xe9LQxZFQyCK4KATvtT3FtsCP-2dOhGg&s\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03ba\u03ac\u03bc\u03b5\u03c1\u03b1\u03c2\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\udcf7 Web \u039a\u03ac\u03bc\u03b5\u03c1\u03b1<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03bc\u03b9\u03ba\u03c1\u03ae \u03ba\u03ac\u03bc\u03b5\u03c1\u03b1 \u03c0\u03bf\u03c5 \u03c3\u03c4\u03ad\u03bb\u03bd\u03b5\u03b9 \u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c3\u03bf\u03c5 \u03c3\u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae, \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03ba\u03ac\u03bd\u03b5\u03b9\u03c2 \u03b2\u03b9\u03bd\u03c4\u03b5\u03bf\u03ba\u03bb\u03ae\u03c3\u03b5\u03b9\u03c2 \u03bc\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03c6\u03af\u03bb\u03bf\u03c5\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03b7\u03bd \u03bf\u03b9\u03ba\u03bf\u03b3\u03ad\u03bd\u03b5\u03b9\u03ac \u03c3\u03bf\u03c5.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/assets.kotsovolos.gr\/product\/284362-b.jpg\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c3\u03b1\u03c1\u03c9\u03c4\u03ae\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\udcc4 \u03a3\u03b1\u03c1\u03c9\u03c4\u03ae\u03c2 (Scanner)<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>“\u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b6\u03b5\u03b9” \u03ad\u03bd\u03b1 \u03ad\u03b3\u03b3\u03c1\u03b1\u03c6\u03bf \u03ae \u03bc\u03b9\u03b1 \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b7 \u03bc\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c0\u03b5\u03b9 \u03c3\u03b5 \u03c8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc \u03b1\u03c1\u03c7\u03b5\u03af\u03bf, \u03ce\u03c3\u03c4\u03b5 \u03bd\u03b1 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03c4\u03b7\u03bd \u03b1\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03cd\u03c3\u03b5\u03b9\u03c2 \u03ae \u03bd\u03b1 \u03c4\u03b7\u03bd \u03b5\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03b1\u03c3\u03c4\u03b5\u03af\u03c2 \u03c3\u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/gforgadget.gr\/wp-content\/uploads\/2021\/07\/42f8a0a9-usb-joystick-%CE%B3%CE%B9%CE%B1-pc-gforgadget1-1200x1200.webp\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c7\u03b5\u03b9\u03c1\u03b9\u03c3\u03c4\u03b7\u03c1\u03af\u03bf\u03c5\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83c\udfae \u03a7\u03b5\u03b9\u03c1\u03b9\u03c3\u03c4\u03ae\u03c1\u03b9\u03bf (Joystick)<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03b5\u03af\u03c4\u03b1\u03b9 \u03ba\u03c5\u03c1\u03af\u03c9\u03c2 \u03b3\u03b9\u03b1 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1! \u03a3\u03bf\u03c5 \u03b5\u03c0\u03b9\u03c4\u03c1\u03ad\u03c0\u03b5\u03b9 \u03bd\u03b1 \u03b5\u03bb\u03ad\u03b3\u03c7\u03b5\u03b9\u03c2 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03bf\u03c7\u03ae\u03bc\u03b1\u03c4\u03b1 \u03bc\u03ad\u03c3\u03b1 \u03c3\u03c4\u03bf \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 \u03bc\u03b5 \u03b1\u03ba\u03c1\u03af\u03b2\u03b5\u03b9\u03b1.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"output\" class=\"bg-white p-6 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold mb-4 text-blue-600\">\u03a3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u0395\u03be\u03cc\u03b4\u03bf\u03c5: \u03a0\u03ce\u03c2 \u03bc\u03b1\u03c2 “\u0391\u03c0\u03b1\u03bd\u03c4\u03ac\u03b5\u03b9” \u03bf \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2<\/h3>\n <p class=\"mb-4\">\u039f\u03b9 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u03b5\u03be\u03cc\u03b4\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03b1 “\u03bc\u03ac\u03c4\u03b9\u03b1” \u03ba\u03b1\u03b9 \u03c4\u03bf “\u03c3\u03c4\u03cc\u03bc\u03b1” \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae. \u039c\u03b1\u03c2 \u03b4\u03b5\u03af\u03c7\u03bd\u03bf\u03c5\u03bd \u03c4\u03b1 \u03b1\u03c0\u03bf\u03c4\u03b5\u03bb\u03ad\u03c3\u03bc\u03b1\u03c4\u03b1 \u03c4\u03b7\u03c2 \u03b4\u03bf\u03c5\u03bb\u03b5\u03b9\u03ac\u03c2 \u03c0\u03bf\u03c5 \u03ad\u03ba\u03b1\u03bd\u03b5. \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03ba\u03ac\u03c1\u03c4\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03ac\u03b8\u03b5\u03b9\u03c2 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1.<\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F5F5F4\/334155?text=Monitor\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03bf\u03b8\u03cc\u03bd\u03b7\u03c2\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\udda5\ufe0f \u039f\u03b8\u03cc\u03bd\u03b7<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u0395\u03bc\u03c6\u03b1\u03bd\u03af\u03b6\u03b5\u03b9 \u03c4\u03b1 \u03c0\u03ac\u03bd\u03c4\u03b1: \u03b5\u03b9\u03ba\u03cc\u03bd\u03b5\u03c2, \u03b2\u03af\u03bd\u03c4\u03b5\u03bf, \u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b1 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1 \u03c0\u03bf\u03c5 \u03c0\u03b1\u03af\u03b6\u03b5\u03b9\u03c2. \u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03ba\u03cd\u03c1\u03b9\u03bf \u03c0\u03b1\u03c1\u03ac\u03b8\u03c5\u03c1\u03bf \u03c3\u03c4\u03bf\u03bd \u03c8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc \u03ba\u03cc\u03c3\u03bc\u03bf \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F5F5F4\/334155?text=Printer\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03b5\u03ba\u03c4\u03c5\u03c0\u03c9\u03c4\u03ae\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\udda8\ufe0f \u0395\u03ba\u03c4\u03c5\u03c0\u03c9\u03c4\u03ae\u03c2<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u039c\u03b5\u03c4\u03b1\u03c6\u03ad\u03c1\u03b5\u03b9 \u03cc,\u03c4\u03b9 \u03b2\u03bb\u03ad\u03c0\u03b5\u03b9\u03c2 \u03c3\u03c4\u03b7\u03bd \u03bf\u03b8\u03cc\u03bd\u03b7 (\u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03bf \u03ae \u03b5\u03b9\u03ba\u03cc\u03bd\u03b5\u03c2) \u03c3\u03c4\u03bf \u03c7\u03b1\u03c1\u03c4\u03af. \u03a5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03ba\u03b1\u03b9 3D \u03b5\u03ba\u03c4\u03c5\u03c0\u03c9\u03c4\u03ad\u03c2 \u03c0\u03bf\u03c5 \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bd \u03bd\u03b1 \u03c6\u03c4\u03b9\u03ac\u03be\u03bf\u03c5\u03bd \u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b9\u03ba\u03ac \u03b1\u03bd\u03c4\u03b9\u03ba\u03b5\u03af\u03bc\u03b5\u03bd\u03b1!<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F5F5F4\/334155?text=Speakers\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03b7\u03c7\u03b5\u03af\u03c9\u03bd\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\udd0a \u0397\u03c7\u03b5\u03af\u03b1<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u03a0\u03b1\u03c1\u03ac\u03b3\u03bf\u03c5\u03bd \u03ae\u03c7\u03bf. \u03a7\u03ac\u03c1\u03b7 \u03c3\u03b5 \u03b1\u03c5\u03c4\u03ac \u03b1\u03ba\u03bf\u03cd\u03bc\u03b5 \u03bc\u03bf\u03c5\u03c3\u03b9\u03ba\u03ae, \u03c4\u03bf\u03c5\u03c2 \u03b4\u03b9\u03b1\u03bb\u03cc\u03b3\u03bf\u03c5\u03c2 \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03c4\u03b1\u03b9\u03bd\u03af\u03b1 \u03ae \u03c4\u03bf\u03c5\u03c2 \u03ae\u03c7\u03bf\u03c5\u03c2 \u03b5\u03bd\u03cc\u03c2 \u03c0\u03b1\u03b9\u03c7\u03bd\u03b9\u03b4\u03b9\u03bf\u03cd.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F5F5F4\/334155?text=Touchscreen\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03bf\u03b8\u03cc\u03bd\u03b7\u03c2 \u03b1\u03c6\u03ae\u03c2\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\udc46 \u039f\u03b8\u03cc\u03bd\u03b7 \u0391\u03c6\u03ae\u03c2<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u0391\u03c5\u03c4\u03ae \u03b5\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03b1 \u03b5\u03b9\u03b4\u03b9\u03ba\u03ae \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae! \u0395\u03af\u03bd\u03b1\u03b9 \u03ba\u03b1\u03b9 \u03b5\u03b9\u03c3\u03cc\u03b4\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03b5\u03be\u03cc\u03b4\u03bf\u03c5. \u039c\u03b1\u03c2 \u03b4\u03b5\u03af\u03c7\u03bd\u03b5\u03b9 \u03c4\u03b7\u03bd \u03b5\u03b9\u03ba\u03cc\u03bd\u03b1 (\u03ad\u03be\u03bf\u03b4\u03bf\u03c2) \u03ba\u03b1\u03b9 \u03c4\u03b1\u03c5\u03c4\u03cc\u03c7\u03c1\u03bf\u03bd\u03b1 \u03c4\u03b7\u03c2 \u03b4\u03af\u03bd\u03bf\u03c5\u03bc\u03b5 \u03b5\u03bd\u03c4\u03bf\u03bb\u03ad\u03c2 \u03b1\u03b3\u03b3\u03af\u03b6\u03bf\u03bd\u03c4\u03ac\u03c2 \u03c4\u03b7\u03bd (\u03b5\u03af\u03c3\u03bf\u03b4\u03bf\u03c2). \u03a4\u03b9\u03c2 \u03b2\u03c1\u03af\u03c3\u03ba\u03bf\u03c5\u03bc\u03b5 \u03c3\u03c4\u03b1 \u03ba\u03b9\u03bd\u03b7\u03c4\u03ac \u03ba\u03b1\u03b9 \u03c4\u03b1 tablet.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"storage\" class=\"bg-white p-6 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold mb-4 text-blue-600\">\u039c\u03bd\u03ae\u03bc\u03b7 & \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7: \u03a0\u03c1\u03bf\u03c3\u03c9\u03c1\u03b9\u03bd\u03ae \u03ba\u03b1\u03b9 \u039c\u03cc\u03bd\u03b9\u03bc\u03b7<\/h3>\n <p class=\"mb-4\">\u039f \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u03ad\u03c7\u03b5\u03b9 \u03b4\u03cd\u03bf \u03b5\u03af\u03b4\u03b7 \u03bc\u03bd\u03ae\u03bc\u03b7\u03c2, \u03cc\u03c0\u03c9\u03c2 \u03ba\u03b9 \u03b5\u03bc\u03b5\u03af\u03c2! \u039c\u03af\u03b1 \u03b3\u03b9\u03b1 \u03c4\u03b1 \u03c0\u03c1\u03ac\u03b3\u03bc\u03b1\u03c4\u03b1 \u03c0\u03bf\u03c5 \u03c3\u03ba\u03b5\u03c6\u03c4\u03cc\u03bc\u03b1\u03c3\u03c4\u03b5 \u03c4\u03ce\u03c1\u03b1 \u03ba\u03b1\u03b9 \u03bc\u03af\u03b1 \u03b3\u03b9\u03b1 \u03c4\u03b9\u03c2 \u03b1\u03bd\u03b1\u03bc\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2 \u03c0\u03bf\u03c5 \u03ba\u03c1\u03b1\u03c4\u03ac\u03bc\u03b5 \u03b3\u03b9\u03b1 \u03c0\u03ac\u03bd\u03c4\u03b1.<\/p>\n <div class=\"grid md:grid-cols-2 gap-6 mb-8\">\n <div class=\"bg-blue-100 p-4 rounded-lg border-l-4 border-blue-500\">\n <h4 class=\"font-bold text-lg\">\u039c\u03bd\u03ae\u03bc\u03b7 RAM: \u039f \u03a0\u03ac\u03b3\u03ba\u03bf\u03c2 \u03c4\u03b7\u03c2 \u039a\u03bf\u03c5\u03b6\u03af\u03bd\u03b1\u03c2 \ud83c\udf73<\/h4>\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x200\/F5F5F4\/334155?text=RAM+Memory\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03bc\u03bd\u03ae\u03bc\u03b7\u03c2 RAM\" class=\"w-full rounded-lg my-2\">\n <p>\u03a3\u03ba\u03ad\u03c8\u03bf\u03c5 \u03c4\u03b7 RAM \u03c3\u03b1\u03bd \u03c4\u03bf\u03bd \u03c0\u03ac\u03b3\u03ba\u03bf \u03c4\u03b7\u03c2 \u03ba\u03bf\u03c5\u03b6\u03af\u03bd\u03b1\u03c2. \u038c\u03c3\u03bf \u03bc\u03b1\u03b3\u03b5\u03b9\u03c1\u03b5\u03cd\u03b5\u03b9\u03c2, \u03ad\u03c7\u03b5\u03b9\u03c2 \u03cc\u03bb\u03b1 \u03c4\u03b1 \u03c5\u03bb\u03b9\u03ba\u03ac \u03b5\u03ba\u03b5\u03af \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03c4\u03b1 \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03b5\u03af\u03c2 \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1. \u0391\u03bb\u03bb\u03ac \u03cc\u03c4\u03b1\u03bd \u03c4\u03b5\u03bb\u03b5\u03b9\u03ce\u03c3\u03b5\u03b9\u03c2, \u03c4\u03bf\u03bd \u03ba\u03b1\u03b8\u03b1\u03c1\u03af\u03b6\u03b5\u03b9\u03c2. \u0388\u03c4\u03c3\u03b9 \u03ba\u03b1\u03b9 \u03b7 RAM, \u03ba\u03c1\u03b1\u03c4\u03ac\u03b5\u03b9 \u03c0\u03c1\u03bf\u03c3\u03c9\u03c1\u03b9\u03bd\u03ac \u03cc,\u03c4\u03b9 \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03b5\u03af\u03c2, \u03b1\u03bb\u03bb\u03ac \u03c4\u03b1 “\u03be\u03b5\u03c7\u03bd\u03ac\u03b5\u03b9” \u03cc\u03c4\u03b1\u03bd \u03ba\u03bb\u03b5\u03af\u03c3\u03b5\u03b9\u03c2 \u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae.<\/p>\n <\/div>\n <div class=\"bg-green-100 p-4 rounded-lg border-l-4 border-green-500\">\n <h4 class=\"font-bold text-lg\">\u0391\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03c5\u03c4\u03b9\u03ba\u03ac \u039c\u03ad\u03c3\u03b1: \u03a4\u03b1 \u039d\u03c4\u03bf\u03c5\u03bb\u03ac\u03c0\u03b9\u03b1 \ud83d\uddc4\ufe0f<\/h4>\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x200\/F5F5F4\/334155?text=Storage+Media\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03b1\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03c5\u03c4\u03b9\u03ba\u03ce\u03bd \u03bc\u03ad\u03c3\u03c9\u03bd\" class=\"w-full rounded-lg my-2\">\n <p>\u0391\u03c5\u03c4\u03ac \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03b1\u03bd \u03c4\u03b1 \u03bd\u03c4\u03bf\u03c5\u03bb\u03ac\u03c0\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03bf \u03c8\u03c5\u03b3\u03b5\u03af\u03bf. \u0391\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03cd\u03bf\u03c5\u03bd \u03c4\u03b1 \u03b1\u03c1\u03c7\u03b5\u03af\u03b1 \u03c3\u03bf\u03c5 (\u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b5\u03c2, \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1, \u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b5\u03c2) \u03bc\u03cc\u03bd\u03b9\u03bc\u03b1, \u03b1\u03ba\u03cc\u03bc\u03b1 \u03ba\u03b9 \u03cc\u03c4\u03b1\u03bd \u03bf \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03ba\u03bb\u03b5\u03b9\u03c3\u03c4\u03cc\u03c2. \u0395\u03af\u03bd\u03b1\u03b9 \u03b7 \u03bc\u03cc\u03bd\u03b9\u03bc\u03b7 “\u03b1\u03c0\u03bf\u03b8\u03ae\u03ba\u03b7” \u03c3\u03bf\u03c5.<\/p>\n <\/div>\n <\/div>\n <h4 class=\"text-xl font-bold mb-4 text-center\">\u03a3\u03cd\u03b3\u03ba\u03c1\u03b9\u03bd\u03b5 \u03c4\u03b1 \u0391\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03c5\u03c4\u03b9\u03ba\u03ac \u039c\u03ad\u03c3\u03b1<\/h4>\n <div class=\"text-center mb-4\">\n <button data-type=\"speed\" class=\"chart-btn bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600\">\u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1<\/button>\n <button data-type=\"capacity\" class=\"chart-btn bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600\">\u03a7\u03c9\u03c1\u03b7\u03c4\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1<\/button>\n <button data-type=\"cost\" class=\"chart-btn bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600\">\u039a\u03cc\u03c3\u03c4\u03bf\u03c2<\/button>\n <\/div>\n <div class=\"chart-container\">\n <canvas id=\"storageChart\"><\/canvas>\n <\/div>\n <\/section>\n\n <section id=\"types\" class=\"bg-white p-6 rounded-lg shadow-lg\">\n <h3 class=\"text-2xl font-bold mb-4 text-blue-600\">\u0395\u03af\u03b4\u03b7 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ce\u03bd: \u0391\u03c0\u03cc \u03c4\u03bf \u0393\u03c1\u03b1\u03c6\u03b5\u03af\u03bf \u03bc\u03ad\u03c7\u03c1\u03b9 \u03c4\u03bf \u0394\u03b9\u03ac\u03c3\u03c4\u03b7\u03bc\u03b1<\/h3>\n <p class=\"mb-4\">\u039f\u03b9 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2 \u03b4\u03b5\u03bd \u03ad\u03c7\u03bf\u03c5\u03bd \u03cc\u03bb\u03bf\u03b9 \u03c4\u03bf \u03af\u03b4\u03b9\u03bf \u03bc\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03ae \u03c4\u03b7\u03bd \u03af\u03b4\u03b9\u03b1 \u03b4\u03cd\u03bd\u03b1\u03bc\u03b7. \u03a5\u03c0\u03ac\u03c1\u03c7\u03bf\u03c5\u03bd \u03c0\u03bf\u03bb\u03bb\u03bf\u03af \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03bf\u03af \u03c4\u03cd\u03c0\u03bf\u03b9 \u03b3\u03b9\u03b1 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03b4\u03bf\u03c5\u03bb\u03b5\u03b9\u03ad\u03c2. \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03ba\u03ac\u03c1\u03c4\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bc\u03ac\u03b8\u03b5\u03b9\u03c2 \u03c0\u03b5\u03c1\u03b9\u03c3\u03c3\u03cc\u03c4\u03b5\u03c1\u03b1.<\/p>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F5F5F4\/334155?text=Desktop+PC\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae \u03b3\u03c1\u03b1\u03c6\u03b5\u03af\u03bf\u03c5\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\udda5\ufe0f \u03a0\u03c1\u03bf\u03c3\u03c9\u03c0\u03b9\u03ba\u03bf\u03af \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03bf\u03b9 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2 \u03c0\u03bf\u03c5 \u03ad\u03c7\u03bf\u03c5\u03bc\u03b5 \u03c3\u03c4\u03b1 \u03c3\u03c0\u03af\u03c4\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03b1 \u03c3\u03c7\u03bf\u03bb\u03b5\u03af\u03b1 \u03bc\u03b1\u03c2. \u03a0\u03b5\u03c1\u03b9\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03bf\u03c5\u03bd \u03c4\u03bf\u03c5\u03c2 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2 \u03b3\u03c1\u03b1\u03c6\u03b5\u03af\u03bf\u03c5 (Desktop) \u03ba\u03b1\u03b9 \u03c4\u03bf\u03c5\u03c2 \u03c6\u03bf\u03c1\u03b7\u03c4\u03bf\u03cd\u03c2 (Laptop).<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F5F5F4\/334155?text=Smartphone\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03ad\u03be\u03c5\u03c0\u03bd\u03bf\u03c5 \u03c4\u03b7\u03bb\u03b5\u03c6\u03ce\u03bd\u03bf\u03c5\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\udcf1 \u0395\u03bd\u03c3\u03c9\u03bc\u03b1\u03c4\u03c9\u03bc\u03ad\u03bd\u03bf\u03b9 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03bc\u03b9\u03ba\u03c1\u03bf\u03af \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2 “\u03ba\u03c1\u03c5\u03bc\u03bc\u03ad\u03bd\u03bf\u03b9” \u03bc\u03ad\u03c3\u03b1 \u03c3\u03b5 \u03ac\u03bb\u03bb\u03b5\u03c2 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2, \u03cc\u03c0\u03c9\u03c2 \u03c4\u03b1 \u03ad\u03be\u03c5\u03c0\u03bd\u03b1 \u03c4\u03b7\u03bb\u03ad\u03c6\u03c9\u03bd\u03b1 (Smartphones), \u03bf\u03b9 \u03c0\u03b1\u03b9\u03c7\u03bd\u03b9\u03b4\u03bf\u03bc\u03b7\u03c7\u03b1\u03bd\u03ad\u03c2 \u03ba\u03b1\u03b9 \u03bf\u03b9 \u03ad\u03be\u03c5\u03c0\u03bd\u03b5\u03c2 \u03c4\u03b7\u03bb\u03b5\u03bf\u03c1\u03ac\u03c3\u03b5\u03b9\u03c2.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F5F5F4\/334155?text=Mainframe\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03bc\u03b5\u03b3\u03ac\u03bb\u03bf\u03c5 \u03c3\u03c5\u03c3\u03c4\u03ae\u03bc\u03b1\u03c4\u03bf\u03c2\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83c\udfe2 \u039c\u03b5\u03b3\u03ac\u03bb\u03b1 \u03a3\u03c5\u03c3\u03c4\u03ae\u03bc\u03b1\u03c4\u03b1 (Mainframes)<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03c4\u03b5\u03c1\u03ac\u03c3\u03c4\u03b9\u03bf\u03b9, \u03c0\u03b1\u03bd\u03af\u03c3\u03c7\u03c5\u03c1\u03bf\u03b9 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2 \u03c0\u03bf\u03c5 \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03bf\u03cd\u03bd\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03bc\u03b5\u03b3\u03ac\u03bb\u03b5\u03c2 \u03b5\u03c4\u03b1\u03b9\u03c1\u03b5\u03af\u03b5\u03c2 \u03ba\u03b1\u03b9 \u03c4\u03c1\u03ac\u03c0\u03b5\u03b6\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b9\u03b1\u03c7\u03b5\u03b9\u03c1\u03af\u03b6\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c4\u03b5\u03c1\u03ac\u03c3\u03c4\u03b9\u03bf \u03cc\u03b3\u03ba\u03bf \u03b4\u03b5\u03b4\u03bf\u03bc\u03ad\u03bd\u03c9\u03bd \u03c4\u03b1\u03c5\u03c4\u03cc\u03c7\u03c1\u03bf\u03bd\u03b1.<\/p>\n <\/div>\n <\/div>\n <div class=\"device-card bg-stone-100 p-4 rounded-lg\">\n <img decoding=\"async\" src=\"https:\/\/placehold.co\/400x300\/F5F5F4\/334155?text=Supercomputer\" alt=\"\u0395\u03b9\u03ba\u03cc\u03bd\u03b1 \u03c5\u03c0\u03b5\u03c1\u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\" class=\"w-full rounded-lg mb-2\">\n <h4 class=\"font-bold text-lg\">\ud83d\ude80 \u03a5\u03c0\u03b5\u03c1\u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2 (Supercomputers)<\/h4>\n <div class=\"details mt-2 text-sm\">\n <p>\u0395\u03af\u03bd\u03b1\u03b9 \u03bf\u03b9 \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf\u03b9 \u03ba\u03b1\u03b9 \u03b4\u03c5\u03bd\u03b1\u03c4\u03bf\u03af \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ad\u03c2 \u03c3\u03c4\u03bf\u03bd \u03ba\u03cc\u03c3\u03bc\u03bf! \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03bf\u03cd\u03bd\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03b5\u03c0\u03b9\u03c3\u03c4\u03ae\u03bc\u03bf\u03bd\u03b5\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03bb\u03cd\u03bd\u03bf\u03c5\u03bd \u03c4\u03b5\u03c1\u03ac\u03c3\u03c4\u03b9\u03b1 \u03c0\u03c1\u03bf\u03b2\u03bb\u03ae\u03bc\u03b1\u03c4\u03b1, \u03cc\u03c0\u03c9\u03c2 \u03b7 \u03c0\u03c1\u03cc\u03b2\u03bb\u03b5\u03c8\u03b7 \u03c4\u03bf\u03c5 \u03ba\u03b1\u03b9\u03c1\u03bf\u03cd \u03ae \u03b7 \u03c0\u03c1\u03bf\u03c3\u03bf\u03bc\u03bf\u03af\u03c9\u03c3\u03b7 \u03c4\u03bf\u03c5 \u03c3\u03cd\u03bc\u03c0\u03b1\u03bd\u03c4\u03bf\u03c2.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n let storageChart;\n const deviceCards = document.querySelectorAll('.device-card');\n deviceCards.forEach(card => {\n card.addEventListener('click', () => {\n card.classList.toggle('open');\n });\n });\n\n const storageData = {\n labels: ['\u03a3\u03ba\u03bb\u03b7\u03c1\u03cc\u03c2 \u0394\u03af\u03c3\u03ba\u03bf\u03c2 (HDD)', '\u0394\u03af\u03c3\u03ba\u03bf\u03c2 SSD', 'USB Flash Drive', '\u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7 Cloud'],\n speed: {\n label: '\u03a3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ae \u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1',\n data: [2, 8, 5, 1],\n backgroundColor: 'rgba(59, 130, 246, 0.7)'\n },\n capacity: {\n label: '\u03a3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ae \u03a7\u03c9\u03c1\u03b7\u03c4\u03b9\u03ba\u03cc\u03c4\u03b7\u03c4\u03b1',\n data: [9, 7, 3, 10],\n backgroundColor: 'rgba(34, 197, 94, 0.7)'\n },\n cost: {\n label: '\u03a3\u03c7\u03b5\u03c4\u03b9\u03ba\u03cc \u039a\u03cc\u03c3\u03c4\u03bf\u03c2 \u03b1\u03bd\u03ac GB',\n data: [1, 6, 4, 2],\n backgroundColor: 'rgba(239, 68, 68, 0.7)'\n }\n };\n\n const chartBtns = document.querySelectorAll('.chart-btn');\n\n function updateChart(type) {\n if (!storageChart) return;\n const chartData = storageData[type];\n storageChart.data.datasets[0].label = chartData.label;\n storageChart.data.datasets[0].data = chartData.data;\n storageChart.data.datasets[0].backgroundColor = chartData.backgroundColor;\n storageChart.update();\n\n chartBtns.forEach(btn => {\n if(btn.dataset.type === type) {\n btn.classList.remove('bg-slate-500', 'hover:bg-slate-600');\n btn.classList.add('bg-blue-500', 'hover:bg-blue-600');\n } else {\n btn.classList.remove('bg-blue-500', 'hover:bg-blue-600');\n btn.classList.add('bg-slate-500', 'hover:bg-slate-600');\n }\n });\n }\n\n chartBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n updateChart(btn.dataset.type);\n });\n });\n\n function createStorageChart() {\n const ctx = document.getElementById('storageChart').getContext('2d');\n storageChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: storageData.labels,\n datasets: [{\n label: storageData.speed.label,\n data: storageData.speed.data,\n backgroundColor: storageData.speed.backgroundColor,\n borderColor: 'rgba(59, 130, 246, 1)',\n borderWidth: 1\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n indexAxis: 'y',\n scales: {\n x: {\n beginAtZero: true,\n ticks: {\n display: false\n }\n },\n y: {\n ticks: {\n font: {\n size: 10\n }\n }\n }\n },\n plugins: {\n legend: {\n display: true,\n position: 'top',\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n label += ' (\u03a3\u03c7\u03b5\u03c4\u03b9\u03ba\u03ae \u03c4\u03b9\u03bc\u03ae: ' + context.raw + '\/10)';\n return label;\n }\n }\n }\n }\n }\n });\n }\n\n createStorageChart();\n });\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color has-medium-font-size wp-elements-bafec775355ed50af7e94658032f8f09 wp-block-paragraph\"><strong>\u0394\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1 1: \u039c\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03b2\u03c1\u03b5\u03b9\u03c2 \u03c4\u03b1 \u03bc\u03ad\u03c1\u03b7 \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae;<\/strong><\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=1083707\" width=\"986\" height=\"639\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"\u03a4\u03bf \u03c5\u03bb\u03b9\u03ba\u03cc \u03c4\u03bf\u03c5 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae (\u039f\u03bd\u03cc\u03bc\u03b1\u03c4\u03b1 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ce\u03bd \u03b1\u03c0\u03cc \u03c4\u03bf \u03c3\u03c7\u03bf\u03bb\u03b9\u03ba\u03cc \u03b2\u03b9\u03b2\u03bb\u03af\u03bf)\"><\/iframe>\n<script src=\"https:\/\/content.e-me.edu.gr\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color has-medium-font-size wp-elements-b07fbe81a4661eb7c3f2cf454aa91104 wp-block-paragraph\"><strong>\u0394\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1 2: \u0393\u03b9\u03b1 \u03c0\u03bf\u03b9\u03bf \u03bb\u03cc\u03b3\u03bf \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03b5\u03af\u03c2 \u03c4\u03b7\u03bd \u03ba\u03ac\u03b8\u03b5 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae;<\/strong><\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=53805\" width=\"2000\" height=\"1800\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" title=\"\u03a5\u03bb\u03b9\u03ba\u03cc \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae: \u0393\u03b9\u03b1\u03c4\u03af \u03c7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03b9\u03b5\u03af\u03c4\u03b1\u03b9 \u03ba\u03ac\u03b8\u03b5 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ae;\"><\/iframe><script src=\"https:\/\/content.e-me.edu.gr\/wp-content\/plugins\/h5p\/h5p-php-library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color has-medium-font-size wp-elements-9925345a0715e44397c5c7714f62e05d wp-block-paragraph\"><strong>\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 1: \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u03b5\u03b9\u03c3\u03cc\u03b4\u03bf\u03c5<\/strong>: <a href=\"https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=795939\">https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=795939<\/a><\/p>\n\n\n\n<p class=\"has-vivid-green-cyan-color has-text-color has-link-color has-medium-font-size wp-elements-2653c3cd4653b99c351874e50a66eebb wp-block-paragraph\"><strong>\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 2: \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u03b5\u03be\u03cc\u03b4\u03bf\u03c5:<\/strong> <a href=\"https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=795943\">https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=795943<\/a><\/p>\n\n\n\n<p class=\"has-vivid-cyan-blue-color has-text-color has-link-color has-medium-font-size wp-elements-310a70ea2f0ab99edb1e7307b70d48ca wp-block-paragraph\"><strong>\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 3: \u03c0\u03b5\u03c1\u03b9\u03c6\u03b5\u03c1\u03b5\u03b9\u03b1\u03ba\u03ad\u03c2 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2:<\/strong> <a href=\"https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=489875\">https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=489875<\/a><\/p>\n\n\n\n<p class=\"has-luminous-vivid-amber-color has-text-color has-link-color has-medium-font-size wp-elements-0e7e635788a4445c5583862a998b2795 wp-block-paragraph\"><strong>\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 4: \u03c0\u03b5\u03c1\u03b9\u03c6\u03b5\u03c1\u03b5\u03b9\u03b1\u03ba\u03ad\u03c2 \u03c3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u03b5\u03b9\u03c3\u03cc\u03b4\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03b5\u03be\u03cc\u03b4\u03bf\u03c5:<\/strong> <a href=\"https:\/\/photodentro.edu.gr\/v\/item\/ds\/8521\/1019\">https:\/\/photodentro.edu.gr\/v\/item\/ds\/8521\/1019<\/a><\/p>\n\n\n\n<p class=\"has-pale-pink-color has-text-color has-link-color has-medium-font-size wp-elements-091edbdd89235c5722e73d7142a0d4a0 wp-block-paragraph\"><strong>\u0386\u03c3\u03ba\u03b7\u03c3\u03b75: <\/strong><span style=\"text-decoration: underline;\">\u03a3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03b9\u03ba\u03bf\u03cd \u03c3\u03c5\u03c3\u03c4\u03ae\u03bc\u03b1\u03c4\u03bf\u03c2<\/span>: <a href=\"https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=619944\">https:\/\/content.e-me.edu.gr\/wp-admin\/admin-ajax.php?action=h5p_embed&id=619944<\/a><\/p>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color has-medium-font-size wp-elements-01b02a40f8c7585024745e637aa7d2d3 wp-block-paragraph\"><strong>\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 6: \u03a3\u03c4\u03b1\u03c5\u03c1\u03cc\u03bb\u03b5\u03be\u03bf: \u03a4\u03bf \u03a5\u03bb\u03b9\u03ba\u03cc \u03c4\u03bf\u03c5 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae: <\/strong><a href=\"https:\/\/photodentro.edu.gr\/v\/item\/ds\/8521\/3437\">https:\/\/photodentro.edu.gr\/v\/item\/ds\/8521\/3437<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0395\u03be\u03b5\u03c1\u03b5\u03cd\u03bd\u03b7\u03c3\u03b7 \u03a5\u03bb\u03b9\u03ba\u03bf\u03cd \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae \u0395\u03be\u03b5\u03c1\u03b5\u03cd\u03bd\u03b7\u03c3\u03b5 \u03c4\u03bf \u03a5\u03bb\u03b9\u03ba\u03cc \u03c4\u03bf\u03c5 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae \u039c\u03b9\u03b1 \u03b4\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ae \u03c0\u03b5\u03c1\u03b9\u03ae\u03b3\u03b7\u03c3\u03b7 \u03c3\u03c4\u03b1 \u03bc\u03ad\u03c1\u03b7 \u03c0\u03bf\u03c5 \u03c3\u03c5\u03bd\u03b8\u03ad\u03c4\u03bf\u03c5\u03bd \u03ad\u03bd\u03b1\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae. \u03a4\u03b9 \u0395\u03af\u03bd\u03b1\u03b9 Hardware; \u039a\u03b5\u03bd\u03c4\u03c1\u03b9\u03ba\u03ae \u039c\u03bf\u03bd\u03ac\u03b4\u03b1 \u03a3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u0395\u03b9\u03c3\u03cc\u03b4\u03bf\u03c5 \u03a3\u03c5\u03c3\u03ba\u03b5\u03c5\u03ad\u03c2 \u0395\u03be\u03cc\u03b4\u03bf\u03c5 \u039c\u03bd\u03ae\u03bc\u03b7 & \u0391\u03c0\u03bf\u03b8\u03ae\u03ba\u03b5\u03c5\u03c3\u03b7 \u0395\u03af\u03b4\u03b7 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ce\u03bd \u03a4\u03b9 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c4\u03bf \u03a5\u03bb\u03b9\u03ba\u03cc (Hardware); \u03a6\u03b1\u03bd\u03c4\u03ac\u03c3\u03bf\u03c5 \u03cc\u03c4\u03b9 \u03bf \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u03c3\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03b1\u03bd \u03ad\u03bd\u03b1 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9 Lego. \u03a4\u03b1 \u03ba\u03bf\u03bc\u03bc\u03ac\u03c4\u03b9\u03b1 \u03c0\u03bf\u03c5 \u03b2\u03bb\u03ad\u03c0\u03b5\u03b9\u03c2 \u03ba\u03b1\u03b9 \u03bc\u03c0\u03bf\u03c1\u03b5\u03af\u03c2 \u03bd\u03b1 \u03b1\u03b3\u03b3\u03af\u03be\u03b5\u03b9\u03c2, \u03b4\u03b7\u03bb\u03b1\u03b4\u03ae […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[5,40],"tags":[],"class_list":["post-1448","post","type-post","status-publish","format-standard","hentry","category-5","category--2----","entry"],"_links":{"self":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1448"}],"version-history":[{"count":39,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1448\/revisions"}],"predecessor-version":[{"id":1491,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1448\/revisions\/1491"}],"wp:attachment":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}