\u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u039a\u03cc\u03c3\u03bc\u03bf\u03c2<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #FDFBF7;\n color: #4A4A4A;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0;\n line-height: 1.5;\n }\n\n \/* \u0392\u03b1\u03c3\u03b9\u03ba\u03ad\u03c2 \u03ba\u03bb\u03ac\u03c3\u03b5\u03b9\u03c2 CSS, \u03b5\u03bd\u03c3\u03c9\u03bc\u03b1\u03c4\u03c9\u03bc\u03ad\u03bd\u03b5\u03c2 *\/\n .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }\n .bg-white\\\/80 { background-color: rgba(255, 255, 255, 0.8); }\n .backdrop-blur-md { backdrop-filter: blur(12px); }\n .sticky { position: sticky; }\n .top-0 { top: 0; }\n .z-10 { z-index: 10; }\n .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }\n .w-full { width: 100%; }\n .mx-auto { margin-left: auto; margin-right: auto; }\n .px-4 { padding-left: 1rem; padding-right: 1rem; }\n .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n .lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n .flex { display: flex; }\n .items-center { align-items: center; }\n .justify-between { justify-content: space-between; }\n .h-16 { height: 4rem; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .font-bold { font-weight: 700; }\n .text-amber-600 { color: #D97706; }\n .hidden { display: none; }\n .sm\\:flex { display: flex; }\n .sm\\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-right: 0; margin-left: 2rem; }\n .mb-16 { margin-bottom: 4rem; }\n .scroll-mt-24 { scroll-margin-top: 6rem; }\n .text-center { text-align: center; }\n .mb-8 { margin-bottom: 2rem; }\n .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n .tracking-tight { letter-spacing: -0.025em; }\n .mt-2 { margin-top: 0.5rem; }\n .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n .max-w-7xl { max-width: 80rem; }\n .card {\n background-color: #FFFFFF;\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n padding: 2rem;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n }\n .flex-col { flex-direction: column; }\n .items-center { align-items: center; }\n .mb-2 { margin-bottom: 0.5rem; }\n .w-full { width: 100%; }\n .h-2 { height: 0.5rem; }\n .bg-gray-200 { background-color: #E5E7EB; }\n .rounded-lg { border-radius: 0.5rem; }\n .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }\n .cursor-pointer { cursor: pointer; }\n .mt-6 { margin-top: 1.5rem; }\n .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .mt-4 { margin-top: 1rem; }\n .text-gray-600 { color: #6B7280; }\n .grid { display: grid; }\n .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .lg\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .gap-8 { gap: 2rem; }\n .items-start { align-items: flex-start; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .mb-4 { margin-bottom: 1rem; }\n .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }\n .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }\n .block { display: block; }\n .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n .font-medium { font-weight: 500; }\n .text-gray-700 { color: #4B5563; }\n .mt-1 { margin-top: 0.25rem; }\n .btn {\n background-color: #F59E0B;\n color: white;\n font-weight: 600;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.3s ease;\n border: none;\n cursor: pointer;\n }\n .btn:hover {\n background-color: #D97706;\n }\n input, select {\n border: 1px solid #D1D5DB;\n border-radius: 0.5rem;\n padding: 0.5rem 0.75rem;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n box-sizing: border-box;\n }\n input:focus, select:focus {\n outline: none;\n border-color: #F59E0B;\n box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);\n }\n .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }\n .font-semibold { font-weight: 600; }\n .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .text-amber-600 { color: #D97706; }\n .my-4 { margin-top: 1rem; margin-bottom: 1rem; }\n .text-amber-700 { color: #B45309; }\n .text-green-700 { color: #047857; }\n .bg-amber-50 { background-color: #FFFBEB; }\n .rounded-lg { border-radius: 0.5rem; }\n .p-6 { padding: 1.5rem; }\n .flex-col { flex-direction: column; }\n .justify-center { justify-content: center; }\n .items-center { align-items: center; }\n .text-center { text-align: center; }\n .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .mt-6 { margin-top: 1.5rem; }\n .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n .text-red-500 { color: #EF4444; }\n .hover\\:text-red-700:hover { color: #B91C1C; }\n .p-8 { padding: 2rem; }\n \n @media (min-width: 640px) {\n .sm\\:flex { display: flex; }\n .sm\\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-right: 0; margin-left: 2rem; }\n .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .sm\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .sm\\:w-1\\\/2 { width: 50%; }\n }\n @media (min-width: 768px) {\n .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n }\n @media (min-width: 1024px) {\n .lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n }\n\n .nav-link {\n transition: all 0.3s ease;\n border-bottom: 2px solid transparent;\n font-weight: 500;\n padding: 0.5rem 0;\n cursor: pointer;\n text-decoration: none;\n color: #4A4A4A;\n }\n\n .nav-link:hover {\n color: #D97706;\n border-bottom-color: #D97706;\n }\n\n section:target {\n padding-top: 100px;\n margin-top: -100px;\n }\n \n .seeder-input {\n background-color: #F3F4F6;\n border: 1px solid #D1D5DB;\n border-radius: 0.25rem;\n padding: 0.5rem;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n \n .remove-seeder {\n background-color: #EF4444;\n color: white;\n border: none;\n border-radius: 0.25rem;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n font-size: 0.75rem;\n }\n <\/style>\n<\/head>\n<body>\n <header class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-10 shadow-sm\">\n <nav class=\"w-full mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <h1 class=\"text-2xl font-bold text-amber-600\">\u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u039a\u03cc\u03c3\u03bc\u03bf\u03c2<\/h1>\n <div class=\"hidden sm:flex sm:space-x-8\">\n <a href=\"#section-bits\" class=\"nav-link\">Bits & Bytes<\/a>\n <a href=\"#section-units\" class=\"nav-link\">\u039c\u03bf\u03bd\u03ac\u03b4\u03b5\u03c2<\/a>\n <a href=\"#section-storage\" class=\"nav-link\">\u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2<\/a>\n <a href=\"#section-speed\" class=\"nav-link\">\u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1<\/a>\n <\/div>\n <\/div>\n <\/nav>\n <\/header>\n\n <main class=\"w-full mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n \n <section id=\"section-bits\" class=\"mb-16\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold tracking-tight\">\u03a4\u03b1 \u0398\u03b5\u03bc\u03ad\u03bb\u03b9\u03b1: Bits & Bytes<\/h2>\n <p class=\"mt-2 text-lg max-w-7xl mx-auto\">\n \u039a\u03ac\u03b8\u03b5 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03af\u03b1 \u03c3\u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae, \u03b1\u03c0\u03cc \u03ad\u03bd\u03b1 \u03b3\u03c1\u03ac\u03bc\u03bc\u03b1 \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bc\u03b9\u03b1 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7 \u03c4\u03b1\u03b9\u03bd\u03af\u03b1, \u03b1\u03bd\u03b1\u03c0\u03b1\u03c1\u03af\u03c3\u03c4\u03b1\u03c4\u03b1\u03b9 \u03bc\u03b5 bits, \u03b4\u03b7\u03bb\u03b1\u03b4\u03ae 0 \u03ba\u03b1\u03b9 1. \u0391\u03c2 \u03b4\u03bf\u03cd\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b5\u03c2 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03af\u03b5\u03c2 \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 \u03ba\u03c9\u03b4\u03b9\u03ba\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03bf\u03c5\u03bc\u03b5 \u03b1\u03bb\u03bb\u03ac\u03b6\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03c4\u03c9\u03bd bits.\n <\/p>\n <\/div>\n <div class=\"card p-8 max-w-7xl mx-auto\">\n <div class=\"flex flex-col items-center\">\n <label for=\"bit-slider\" class=\"text-lg font-medium mb-2\">\u0395\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc Bits: <span id=\"bit-count\" class=\"font-bold text-amber-600\">3<\/span><\/label>\n <input id=\"bit-slider\" type=\"range\" min=\"1\" max=\"8\" value=\"3\" class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer\">\n <p class=\"mt-6 text-xl text-center\">\n \u039c\u03b5 <span id=\"bit-display\" class=\"font-bold text-2xl text-amber-600\">3<\/span> bits, \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03ae\u03c3\u03bf\u03c5\u03bc\u03b5 \n <span id=\"combinations-display\" class=\"font-bold text-2xl text-amber-600\">8<\/span> \n \u03bc\u03bf\u03bd\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03c3\u03c5\u03bd\u03b4\u03c5\u03b1\u03c3\u03bc\u03bf\u03cd\u03c2.\n <\/p>\n <p id=\"example-text\" class=\"mt-4 text-gray-600 text-center\"><\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"section-units\" class=\"mb-16\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold tracking-tight\">\u039c\u03b5\u03c4\u03c1\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc \u03a7\u03ce\u03c1\u03bf<\/h2>\n <p class=\"mt-2 text-lg max-w-7xl mx-auto\">\n \u0391\u03c0\u03cc \u03ad\u03bd\u03b1 \u03b1\u03c0\u03bb\u03cc \u03ad\u03b3\u03b3\u03c1\u03b1\u03c6\u03bf \u03bc\u03ad\u03c7\u03c1\u03b9 \u03c4\u03b1 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1 \u03bc\u03b1\u03c2, \u03cc\u03bb\u03b1 \u03ba\u03b1\u03c4\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03bf\u03c5\u03bd \u03c7\u03ce\u03c1\u03bf. \u0391\u03c2 \u03b4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b9\u03c2 \u03bc\u03bf\u03bd\u03ac\u03b4\u03b5\u03c2 \u03bc\u03ad\u03c4\u03c1\u03b7\u03c3\u03b7\u03c2 \u03ba\u03b1\u03b9 \u03b1\u03c2 \u03bc\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c8\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b9\u03bc\u03ad\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03ba\u03b1\u03c4\u03b1\u03bb\u03ac\u03b2\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7\u03bd \u03ba\u03bb\u03af\u03bc\u03b1\u03ba\u03b1 \u03c4\u03bf\u03c5 \u03c8\u03b7\u03c6\u03b9\u03b1\u03ba\u03bf\u03cd \u03c7\u03ce\u03c1\u03bf\u03c5.\n <\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-start max-w-7xl mx-auto\">\n <div class=\"card p-8\">\n <h3 class=\"text-2xl font-bold mb-4\">\u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03bf\u03c0\u03ad\u03b1\u03c2 \u039c\u03bf\u03bd\u03ac\u03b4\u03c9\u03bd<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label for=\"input-value\" class=\"block text-sm font-medium text-gray-700\">\u03a4\u03b9\u03bc\u03ae<\/label>\n <input type=\"number\" id=\"input-value\" value=\"1\" class=\"mt-1 block w-full\">\n <\/div>\n <div>\n <label for=\"input-unit\" class=\"block text-sm font-medium text-gray-700\">\u0391\u03c0\u03cc<\/label>\n <select id=\"input-unit\" class=\"mt-1 block w-full\">\n <option value=\"B\">Bytes (B)<\/option>\n <option value=\"KB\">Kilobytes (KB)<\/option>\n <option value=\"MB\">Megabytes (MB)<\/option>\n <option value=\"GB\" selected>Gigabytes (GB)<\/option>\n <option value=\"TB\">Terabytes (TB)<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card p-8\">\n <h3 class=\"text-2xl font-bold mb-4\">\u0391\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1 \u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03bf\u03c0\u03ae\u03c2<\/h3>\n <div id=\"results-container\" class=\"space-y-2\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"section-storage\" class=\"mb-16\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold tracking-tight\">\u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u0391\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03c5\u03c4\u03b9\u03ba\u03bf\u03cd \u03a7\u03ce\u03c1\u03bf\u03c5<\/h2>\n <p class=\"mt-2 text-lg max-w-7xl mx-auto\">\n \u03a0\u03cc\u03c3\u03bf \u03c7\u03ce\u03c1\u03bf \u03c0\u03b9\u03ac\u03bd\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03b2\u03b9\u03b2\u03bb\u03af\u03bf \u03ae \u03bc\u03b9\u03b1 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1; \u03a0\u03cc\u03c3\u03b1 \u03b1\u03c1\u03c7\u03b5\u03af\u03b1 \u03c7\u03c9\u03c1\u03ac\u03bd\u03b5 \u03c3\u03b5 \u03ad\u03bd\u03b1 USB stick; \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 \u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03b9\u03c2 \u03c0\u03cc\u03c3\u03bf \u03c7\u03ce\u03c1\u03bf \u03c7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c3\u03b1\u03b9 \u03b3\u03b9\u03b1 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03b9\u03b1\u03ba\u03ac \u03c3\u03bf\u03c5 \u03b1\u03c1\u03c7\u03b5\u03af\u03b1.\n <\/p>\n <\/div>\n <div class=\"grid lg:grid-cols-2 gap-8 max-w-7xl mx-auto\">\n <div class=\"card p-8\">\n <h3 class=\"text-2xl font-bold mb-4\">\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03bf \u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2<\/h3>\n <div class=\"space-y-6\">\n \n <div>\n <p class=\"font-semibold text-lg mb-2\">\ud83d\udcd6 \u0392\u03b9\u03b2\u03bb\u03af\u03bf<\/p>\n <div class=\"grid sm:grid-cols-3 gap-4\">\n <input type=\"number\" id=\"book-pages\" placeholder=\"\u03a3\u03b5\u03bb\u03af\u03b4\u03b5\u03c2\" value=\"500\" class=\"w-full\">\n <input type=\"number\" id=\"book-lines\" placeholder=\"\u0393\u03c1\u03b1\u03bc\u03bc\u03ad\u03c2\/\u03c3\u03b5\u03bb.\" value=\"40\" class=\"w-full\">\n <input type=\"number\" id=\"book-chars\" placeholder=\"\u03a7\u03b1\u03c1.\/\u03b3\u03c1\u03b1\u03bc\u03bc\u03ae\" value=\"50\" class=\"w-full\">\n <\/div>\n <\/div>\n \n <div>\n <p class=\"font-semibold text-lg mb-2\">\ud83d\udcf7 \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 (\u0391\u03c3\u03c5\u03bc\u03c0\u03af\u03b5\u03c3\u03c4\u03b7)<\/p>\n <div class=\"grid sm:grid-cols-2 gap-4\">\n <select id=\"photo-resolution\" class=\"w-full\">\n <option value=\"2073600\">FullHD (1920×1080)<\/option>\n <option value=\"8294400\">4K (3840×2160)<\/option>\n <option value=\"12000000\">12 MP<\/option>\n <\/select>\n <select id=\"photo-depth\" class=\"w-full\">\n <option value=\"24\">24-bit (Truecolor)<\/option>\n <option value=\"32\">32-bit (\u039c\u03b5 \u03ba\u03b1\u03bd\u03ac\u03bb\u03b9 Alpha)<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button onclick=\"calculateStorage()\" class=\"btn w-full\">\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5<\/button>\n <\/div>\n <\/div>\n <div class=\"card p-8\">\n <h3 class=\"text-2xl font-bold mb-4\">\u0391\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1<\/h3>\n <div class=\"space-y-4\">\n <p class=\"text-lg\">\u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u0392\u03b9\u03b2\u03bb\u03af\u03bf\u03c5: <span id=\"book-size-result\" class=\"font-bold text-amber-600\">1 MB<\/span><\/p>\n <p class=\"text-lg\">\u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\u03c2: <span id=\"photo-size-result\" class=\"font-bold text-amber-600\">5.93 MB<\/span><\/p>\n <hr class=\"my-4\" style=\"border-top: 1px solid #E5E7EB;\">\n <h4 class=\"text-xl font-bold\">\u03a0\u03cc\u03c3\u03b1 \u03c7\u03c9\u03c1\u03ac\u03bd\u03b5 \u03c3\u03b5…<\/h4>\n <select id=\"storage-device\" class=\"w-full\">\n <option value=\"32\">USB Stick (32 GB)<\/option>\n <option value=\"128\">\u039a\u03ac\u03c1\u03c4\u03b1 SD (128 GB)<\/option>\n <option value=\"1000\">\u03a3\u03ba\u03bb\u03b7\u03c1\u03cc\u03c2 \u0394\u03af\u03c3\u03ba\u03bf\u03c2 (1 TB)<\/option>\n <\/select>\n <p id=\"storage-fit-result\" class=\"mt-2 text-lg\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"section-speed\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold tracking-tight\">\u0394\u03b5\u03b4\u03bf\u03bc\u03ad\u03bd\u03b1 \u03c3\u03b5 \u039a\u03af\u03bd\u03b7\u03c3\u03b7<\/h2>\n <p class=\"mt-2 text-lg max-w-7xl mx-auto\">\n \u03a3\u03b5 \u03c0\u03cc\u03c3\u03bf \u03c7\u03c1\u03cc\u03bd\u03bf \u03b8\u03b1 \u03ba\u03b1\u03c4\u03ad\u03b2\u03b5\u03b9 \u03c4\u03bf \u03b1\u03b3\u03b1\u03c0\u03b7\u03bc\u03ad\u03bd\u03bf \u03c3\u03bf\u03c5 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9; \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03bf\u03bd \u03c7\u03c1\u03cc\u03bd\u03bf \u03bb\u03ae\u03c8\u03b7\u03c2 \u03b5\u03bd\u03cc\u03c2 \u03b1\u03c1\u03c7\u03b5\u03af\u03bf\u03c5 \u03bc\u03b5 \u03b2\u03ac\u03c3\u03b7 \u03c4\u03b7\u03bd \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c4\u03b7\u03c2 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03ae\u03c2 \u03c3\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03b4\u03b5\u03c2 \u03c0\u03ce\u03c2 \u03b7 \u03c4\u03b5\u03c7\u03bd\u03bf\u03bb\u03bf\u03b3\u03af\u03b1 BitTorrent \u03bc\u03c0\u03bf\u03c1\u03b5\u03af \u03bd\u03b1 \u03b5\u03c0\u03b9\u03c4\u03b1\u03c7\u03cd\u03bd\u03b5\u03b9 \u03c4\u03b1 \u03c0\u03c1\u03ac\u03b3\u03bc\u03b1\u03c4\u03b1.\n <\/p>\n <\/div>\n <div class=\"card p-8 max-w-7xl mx-auto\">\n <div class=\"grid md:grid-cols-2 gap-8\">\n <div>\n <h3 class=\"text-2xl font-bold mb-4\">\u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u039b\u03ae\u03c8\u03b7\u03c2<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label for=\"file-size\" class=\"block text-sm font-medium\">\u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u0391\u03c1\u03c7\u03b5\u03af\u03bf\u03c5 (GB)<\/label>\n <input type=\"number\" id=\"file-size\" value=\"36\" class=\"mt-1 w-full\">\n <\/div>\n <div>\n <label for=\"download-speed\" class=\"block text-sm font-medium\">\u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03ae\u03c2 \u03c3\u03bf\u03c5 (Mbps)<\/label>\n <input type=\"number\" id=\"download-speed\" value=\"80\" class=\"mt-1 w-full\">\n <\/div>\n <hr style=\"border-top: 1px solid #E5E7EB; margin-top: 1.5rem; margin-bottom: 1.5rem;\">\n <div id=\"bittorrent-section\">\n <h4 class=\"text-lg font-semibold\">\u03a0\u03c1\u03bf\u03c3\u03bf\u03bc\u03bf\u03af\u03c9\u03c3\u03b7 BitTorrent<\/h4>\n <p class=\"text-sm text-gray-600 mb-2\">\u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c3\u03b5 \u03c6\u03af\u03bb\u03bf\u03c5\u03c2 \u03c0\u03bf\u03c5 \u03bc\u03bf\u03b9\u03c1\u03ac\u03b6\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c4\u03bf \u03b1\u03c1\u03c7\u03b5\u03af\u03bf.<\/p>\n <div id=\"seeders-container\" class=\"space-y-2\">\n \n <\/div>\n <button onclick=\"addSeeder()\" class=\"mt-2 text-sm text-amber-600 font-semibold hover:text-amber-800\" style=\"color: #D97706;\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u0391\u03c0\u03bf\u03c3\u03c4\u03bf\u03bb\u03ad\u03b1<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-amber-50 rounded-lg p-6 flex flex-col justify-center items-center text-center\">\n <h3 class=\"text-2xl font-bold mb-4\">\u0395\u03ba\u03c4\u03b9\u03bc\u03ce\u03bc\u03b5\u03bd\u03bf\u03c2 \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u039b\u03ae\u03c8\u03b7\u03c2<\/h3>\n <div id=\"speed-results\">\n \n <\/div>\n <\/div>\n <\/div>\n <div class=\"text-center mt-6\">\n <button onclick=\"calculateDownloadTime()\" class=\"btn\">\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03a7\u03c1\u03cc\u03bd\u03bf<\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n \/\/ Bits and Bytes Calculator\n function updateBitsDisplay() {\n const bitSlider = document.getElementById('bit-slider');\n const bitCount = document.getElementById('bit-count');\n const bitDisplay = document.getElementById('bit-display');\n const combinationsDisplay = document.getElementById('combinations-display');\n const exampleText = document.getElementById('example-text');\n \n const bits = parseInt(bitSlider.value);\n const combinations = Math.pow(2, bits);\n \n bitCount.textContent = bits;\n bitDisplay.textContent = bits;\n combinationsDisplay.textContent = combinations;\n \n \/\/ Update example text based on bits\n const examples = {\n 1: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: \u039d\u03b1\u03b9 (1) \u03ae \u038c\u03c7\u03b9 (0) - 2 \u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ad\u03c2\",\n 2: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 4 \u03ba\u03b1\u03c4\u03b5\u03c5\u03b8\u03cd\u03bd\u03c3\u03b5\u03b9\u03c2 (\u0392\u03cc\u03c1\u03b5\u03b9\u03b1, \u039d\u03cc\u03c4\u03b9\u03b1, \u0391\u03bd\u03b1\u03c4\u03bf\u03bb\u03b9\u03ba\u03ac, \u0394\u03c5\u03c4\u03b9\u03ba\u03ac)\",\n 3: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 8 \u03c7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1 \u03ae 8 \u03bd\u03cc\u03c4\u03b5\u03c2 \u03bc\u03bf\u03c5\u03c3\u03b9\u03ba\u03ae\u03c2\",\n 4: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 16 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03bf\u03af \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b5\u03c2 (0-9, A-F)\",\n 5: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 32 \u03b3\u03c1\u03ac\u03bc\u03bc\u03b1\u03c4\u03b1 \u03c4\u03bf\u03c5 \u03b1\u03bb\u03c6\u03b1\u03b2\u03ae\u03c4\u03bf\u03c5\",\n 6: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 64 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03ba\u03b1\u03c4\u03b1\u03c3\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2\",\n 7: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 128 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b5\u03c2 ASCII\",\n 8: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 1 Byte - 256 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c4\u03b9\u03bc\u03ad\u03c2 (0-255)\"\n };\n \n exampleText.textContent = examples[bits] || `${combinations} \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03bf\u03af \u03c3\u03c5\u03bd\u03b4\u03c5\u03b1\u03c3\u03bc\u03bf\u03af`;\n }\n\n \/\/ Units Converter\n function convertUnits() {\n const value = parseFloat(document.getElementById('input-value').value) || 0;\n const unit = document.getElementById('input-unit').value;\n const resultsContainer = document.getElementById('results-container');\n \n \/\/ Convert to bytes first\n const unitMultipliers = {\n 'B': 1,\n 'KB': 1024,\n 'MB': 1024 * 1024,\n 'GB': 1024 * 1024 * 1024,\n 'TB': 1024 * 1024 * 1024 * 1024\n };\n \n const bytes = value * unitMultipliers[unit];\n \n \/\/ Convert to all units\n const results = {\n 'B': bytes,\n 'KB': bytes \/ 1024,\n 'MB': bytes \/ (1024 * 1024),\n 'GB': bytes \/ (1024 * 1024 * 1024),\n 'TB': bytes \/ (1024 * 1024 * 1024 * 1024)\n };\n \n let html = '';\n for (const [u, val] of Object.entries(results)) {\n if (u !== unit) {\n const formatVal = val >= 1 ? val.toLocaleString('el-GR', {maximumFractionDigits: 2}) : val.toExponential(2);\n html += `<p><strong>${formatVal}<\/strong> ${u}<\/p>`;\n }\n }\n \n resultsContainer.innerHTML = html;\n }\n\n \/\/ Storage Calculator\n function calculateStorage() {\n \/\/ Book calculation\n const pages = parseInt(document.getElementById('book-pages').value) || 0;\n const lines = parseInt(document.getElementById('book-lines').value) || 0;\n const chars = parseInt(document.getElementById('book-chars').value) || 0;\n \n const totalChars = pages * lines * chars;\n const bookSizeBytes = totalChars; \/\/ 1 char = 1 byte (ASCII)\n const bookSizeMB = bookSizeBytes \/ (1024 * 1024);\n \n document.getElementById('book-size-result').textContent = \n bookSizeMB > 1 ? `${bookSizeMB.toFixed(2)} MB` : `${(bookSizeBytes \/ 1024).toFixed(0)} KB`;\n \n \/\/ Photo calculation\n const resolution = parseInt(document.getElementById('photo-resolution').value);\n const depth = parseInt(document.getElementById('photo-depth').value);\n \n const photoSizeBytes = resolution * (depth \/ 8);\n const photoSizeMB = photoSizeBytes \/ (1024 * 1024);\n \n document.getElementById('photo-size-result').textContent = `${photoSizeMB.toFixed(2)} MB`;\n \n \/\/ Update storage fit calculation\n updateStorageFit();\n }\n\n function updateStorageFit() {\n const bookSizeText = document.getElementById('book-size-result').textContent;\n const photoSizeText = document.getElementById('photo-size-result').textContent;\n const storageCapacity = parseInt(document.getElementById('storage-device').value);\n \n \/\/ Extract sizes in MB\n const bookSizeMB = parseFloat(bookSizeText.includes('MB') ? bookSizeText : (parseFloat(bookSizeText) \/ 1024));\n const photoSizeMB = parseFloat(photoSizeText);\n const storageCapacityMB = storageCapacity * 1024; \/\/ GB to MB\n \n const booksCount = Math.floor(storageCapacityMB \/ bookSizeMB);\n const photosCount = Math.floor(storageCapacityMB \/ photoSizeMB);\n \n document.getElementById('storage-fit-result').innerHTML = \n `\ud83d\udcd6 ${booksCount.toLocaleString('el-GR')} \u03b2\u03b9\u03b2\u03bb\u03af\u03b1<br>\ud83d\udcf7 ${photosCount.toLocaleString('el-GR')} \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b5\u03c2`;\n }\n\n \/\/ BitTorrent Seeder Management\n let seederCount = 0;\n\n function addSeeder() {\n seederCount++;\n const seedersContainer = document.getElementById('seeders-container');\n \n const seederDiv = document.createElement('div');\n seederDiv.className = 'seeder-input';\n seederDiv.id = `seeder-${seederCount}`;\n seederDiv.innerHTML = `\n <span>\u03a6\u03af\u03bb\u03bf\u03c2 ${seederCount}:<\/span>\n <input type=\"number\" value=\"50\" placeholder=\"Mbps\" style=\"width: 80px; margin: 0 0.5rem;\">\n <span>Mbps<\/span>\n <button class=\"remove-seeder\" onclick=\"removeSeeder(${seederCount})\">\u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7<\/button>\n `;\n \n seedersContainer.appendChild(seederDiv);\n }\n\n function removeSeeder(id) {\n const seederDiv = document.getElementById(`seeder-${id}`);\n if (seederDiv) {\n seederDiv.remove();\n }\n }\n\n function calculateDownloadTime() {\n const fileSize = parseFloat(document.getElementById('file-size').value) || 0; \/\/ GB\n const userSpeed = parseFloat(document.getElementById('download-speed').value) || 0; \/\/ Mbps\n \n \/\/ Convert file size to bits\n const fileSizeBits = fileSize * 8 * 1024 * 1024 * 1024; \/\/ GB to bits\n const userSpeedBps = userSpeed * 1000000; \/\/ Mbps to bps\n \n \/\/ Calculate regular download time\n const regularTimeSeconds = fileSizeBits \/ userSpeedBps;\n \n \/\/ Calculate BitTorrent download time\n let totalSpeed = userSpeedBps;\n const seederInputs = document.querySelectorAll('#seeders-container input[type=\"number\"]');\n \n seederInputs.forEach(input => {\n const seederSpeed = parseFloat(input.value) || 0;\n totalSpeed += seederSpeed * 1000000; \/\/ Add seeder speed in bps\n });\n \n const torrentTimeSeconds = fileSizeBits \/ totalSpeed;\n \n \/\/ Format time display\n function formatTime(seconds) {\n if (seconds < 60) return `${Math.round(seconds)} \u03b4\u03b5\u03c5\u03c4\u03b5\u03c1\u03cc\u03bb\u03b5\u03c0\u03c4\u03b1`;\n if (seconds < 3600) return `${Math.round(seconds \/ 60)} \u03bb\u03b5\u03c0\u03c4\u03ac`;\n if (seconds < 86400) return `${Math.round(seconds \/ 3600)} \u03ce\u03c1\u03b5\u03c2`;\n return `${Math.round(seconds \/ 86400)} \u03bc\u03ad\u03c1\u03b5\u03c2`;\n }\n \n const speedResults = document.getElementById('speed-results');\n speedResults.innerHTML = `\n <div class=\"space-y-4\">\n <div>\n <h4 class=\"font-bold text-lg\">\u039a\u03b1\u03bd\u03bf\u03bd\u03b9\u03ba\u03ae \u039b\u03ae\u03c8\u03b7<\/h4>\n <p class=\"text-2xl font-bold text-amber-600\">${formatTime(regularTimeSeconds)}<\/p>\n <\/div>\n ${seederInputs.length > 0 ? `\n <div>\n <h4 class=\"font-bold text-lg\">\u039c\u03b5 BitTorrent<\/h4>\n <p class=\"text-2xl font-bold text-green-700\">${formatTime(torrentTimeSeconds)}<\/p>\n <p class=\"text-sm text-gray-600 mt-1\">\n ${Math.round(((regularTimeSeconds - torrentTimeSeconds) \/ regularTimeSeconds) * 100)}% \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1!\n <\/p>\n <\/div>\n ` : ''}\n <\/div>\n `;\n }\n\n \/\/ Event Listeners\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Initialize Bits & Bytes\n document.getElementById('bit-slider').addEventListener('input', updateBitsDisplay);\n updateBitsDisplay();\n \n \/\/ Initialize Units Converter\n document.getElementById('input-value').addEventListener('input', convertUnits);\n document.getElementById('input-unit').addEventListener('change', convertUnits);\n convertUnits();\n \n \/\/ Initialize Storage Calculator\n calculateStorage();\n document.getElementById('storage-device').addEventListener('change', updateStorageFit);\n \n \/\/ Initialize Speed Calculator\n calculateDownloadTime();\n \n \/\/ Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"el\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2 \u03a0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae\u03c2<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f3f4f6;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\n\n <div class=\"w-full max-w-7xl mx-auto bg-white rounded-xl shadow-2xl p-8 space-y-8\">\n <h1 class=\"text-3xl font-bold text-center text-gray-800 mb-6\">\u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2<\/h1>\n\n \n <div class=\"bg-gray-50 p-6 rounded-lg border border-gray-200\">\n <h2 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 1<\/h2>\n <p class=\"text-gray-600 mb-4\">\n \u039f \u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7\u03c2 \u03ad\u03c7\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 40 Mbps\/10 Mbps \u03ba\u03b1\u03b9 \u03b7 \u0395\u03b9\u03c1\u03ae\u03bd\u03b7 \u03bc\u03b9\u03b1 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 80 Mbps\/10 Mbps. \u0398\u03ad\u03bb\u03bf\u03c5\u03bd \u03bd\u03b1 \u03ba\u03b1\u03c4\u03b5\u03b2\u03ac\u03c3\u03bf\u03c5\u03bd \u03ad\u03bd\u03b1 \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03b1\u03c0\u03cc \u03c4\u03b7 \u03a3\u03bf\u03c6\u03af\u03b1, \u03b7 \u03bf\u03c0\u03bf\u03af\u03b1 \u03ad\u03c7\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 20 Mbps\/5 Mbps. \u03a0\u03cc\u03c3\u03b7 \u03ce\u03c1\u03b1 \u03b8\u03b1 \u03c7\u03c1\u03b5\u03b9\u03b1\u03c3\u03c4\u03b5\u03af \u03bd\u03b1 \u03ba\u03b1\u03c4\u03ad\u03b2\u03b5\u03b9 \u03c4\u03bf \u03b2\u03af\u03bd\u03c4\u03b5\u03bf, \u03b1\u03bd \u03c4\u03bf \u03bc\u03ad\u03b3\u03b5\u03b8\u03cc\u03c2 \u03c4\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 9 GB, \u03c3\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7; \u03a0\u03bf\u03b9\u03bf \u03c0\u03b1\u03b9\u03b4\u03af \u03b8\u03b1 \u03ba\u03b1\u03c4\u03b5\u03b2\u03ac\u03c3\u03b5\u03b9 \u03c4\u03bf \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1;\n <\/p>\n <div class=\"bg-blue-50 p-4 rounded-md mb-4\">\n <p class=\"text-sm text-blue-800\">\n <strong>\u03a5\u03c0\u03cc\u03b4\u03b5\u03b9\u03be\u03b7:<\/strong> \u0397 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 download \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03b1\u03c0\u03cc: download \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c0\u03b1\u03c1\u03b1\u03bb\u03ae\u03c0\u03c4\u03b7 \u03ae upload \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03b1\u03c0\u03bf\u03c3\u03c4\u03bf\u03bb\u03ad\u03b1.\n <\/p>\n <\/div>\n <div class=\"space-y-4\">\n <div>\n <label for=\"dimitrisTime\" class=\"block text-sm font-medium text-gray-700\">\u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7 (\u03bb\u03b5\u03c0\u03c4\u03ac):<\/label>\n <input type=\"number\" id=\"dimitrisTime\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2\" step=\"0.01\">\n <\/div>\n <div>\n <label for=\"eiriniTime\" class=\"block text-sm font-medium text-gray-700\">\u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u0395\u03b9\u03c1\u03ae\u03bd\u03b7\u03c2 (\u03bb\u03b5\u03c0\u03c4\u03ac):<\/label>\n <input type=\"number\" id=\"eiriniTime\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2\" step=\"0.01\">\n <\/div>\n <div>\n <label for=\"winner\" class=\"block text-sm font-medium text-gray-700\">\u03a0\u03bf\u03b9\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf\u03c2 (\u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7\u03c2, \u0395\u03b9\u03c1\u03ae\u03bd\u03b7, \u039a\u03b1\u03bd\u03ad\u03bd\u03b1\u03c2):<\/label>\n <input type=\"text\" id=\"winner\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2\" placeholder=\"\u03c0.\u03c7. \u039a\u03b1\u03bd\u03ad\u03bd\u03b1\u03c2\">\n <\/div>\n <div class=\"flex justify-center mt-4\">\n <button id=\"checkBtn1\" class=\"px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors\">\n \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u0391\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7\u03c2\n <\/button>\n <\/div>\n <div id=\"result1\" class=\"mt-4 p-3 rounded-md text-center hidden\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-gray-50 p-6 rounded-lg border border-gray-200\">\n <h2 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 2<\/h2>\n <p class=\"text-gray-600 mb-4\">\n \u0397 \u039c\u03b1\u03c1\u03af\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03c5\u03c0\u03b5\u03cd\u03b8\u03c5\u03bd\u03b7 \u03bc\u03b7\u03c7\u03b1\u03bd\u03bf\u03c1\u03b3\u03ac\u03bd\u03c9\u03c3\u03b7\u03c2 \u03c4\u03b7\u03c2 \u0395\u03b8\u03bd\u03b9\u03ba\u03ae\u03c2 \u0392\u03b9\u03b2\u03bb\u03b9\u03bf\u03b8\u03ae\u03ba\u03b7\u03c2. \u0388\u03c7\u03b5\u03b9 \u03c8\u03b7\u03c6\u03b9\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03b5\u03b9 1.000.000 \u03b2\u03b9\u03b2\u03bb\u03af\u03b1, \u03c4\u03b1 \u03bf\u03c0\u03bf\u03af\u03b1 \u03ba\u03b1\u03c4\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03bf\u03c5\u03bd \u03c7\u03ce\u03c1\u03bf 10 TB \u03c3\u03b5 \u03c4\u03c1\u03b5\u03b9\u03c2 \u03c3\u03ba\u03bb\u03b7\u03c1\u03bf\u03cd\u03c2 \u03b4\u03af\u03c3\u03ba\u03bf\u03c5\u03c2. \u0398\u03ad\u03bb\u03b5\u03b9 \u03bd\u03b1 \u03c4\u03b1 \u03c3\u03c4\u03b5\u03af\u03bb\u03b5\u03b9 \u03cc\u03bb\u03b1 \u03c3\u03c4\u03b7 \u03b4\u03b9\u03b5\u03c5\u03b8\u03cd\u03bd\u03c4\u03c1\u03b9\u03ac \u03c4\u03b7\u03c2, \u03c4\u03b7\u03bd \u0391\u03c3\u03b7\u03bc\u03af\u03bd\u03b1, \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03c3\u03b5 \u03ac\u03bb\u03bb\u03b7 \u03c0\u03cc\u03bb\u03b7, \u03bc\u03b5 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03bf\u03c0\u03c4\u03b9\u03ba\u03ae\u03c2 \u03af\u03bd\u03b1\u03c2 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1\u03c2 1 Gbps (download\/upload). \u03a0\u03cc\u03c3\u03b5\u03c2 \u03ce\u03c1\u03b5\u03c2 \u03b8\u03b1 \u03c7\u03c1\u03b5\u03b9\u03b1\u03c3\u03c4\u03b5\u03af \u03b7 \u0391\u03c3\u03b7\u03bc\u03af\u03bd\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03ba\u03b1\u03c4\u03b5\u03b2\u03ac\u03c3\u03b5\u03b9 \u03cc\u03bb\u03b1 \u03c4\u03b1 \u03b2\u03b9\u03b2\u03bb\u03af\u03b1;\n <\/p>\n <div class=\"bg-blue-50 p-4 rounded-md mb-4\">\n <p class=\"text-sm text-blue-800\">\n <strong>\u03a5\u03c0\u03cc\u03b4\u03b5\u03b9\u03be\u03b7:<\/strong> 1 TB = 1000 GB, 1 GB = 1000 MB, \u03ba\u03c4\u03bb. (\u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac prefixes)\n <\/p>\n <\/div>\n <div class=\"space-y-4\">\n <div>\n <label for=\"timeHours\" class=\"block text-sm font-medium text-gray-700\">\u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 (\u03ce\u03c1\u03b5\u03c2):<\/label>\n <input type=\"number\" id=\"timeHours\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2\" step=\"0.01\">\n <\/div>\n <div class=\"flex justify-center mt-4\">\n <button id=\"checkBtn2\" class=\"px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors\">\n \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u0391\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7\u03c2\n <\/button>\n <\/div>\n <div id=\"result2\" class=\"mt-4 p-3 rounded-md text-center hidden\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-yellow-50 p-6 rounded-lg border border-yellow-200\">\n <h3 class=\"text-lg font-semibold text-yellow-800 mb-3\">\ud83d\udca1 \u0392\u03bf\u03ae\u03b8\u03b5\u03b9\u03b1 \u03b3\u03b9\u03b1 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03bf\u03cd\u03c2<\/h3>\n <div class=\"text-sm text-yellow-700 space-y-2\">\n <p><strong>\u0392\u03ae\u03bc\u03b1 1:<\/strong> \u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c8\u03c4\u03b5 \u03c4\u03bf \u03bc\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03b1\u03c1\u03c7\u03b5\u03af\u03bf\u03c5 \u03c3\u03b5 bits<\/p>\n <p><strong>\u0392\u03ae\u03bc\u03b1 2:<\/strong> \u0392\u03c1\u03b5\u03af\u03c4\u03b5 \u03c4\u03b7\u03bd \u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 (\u03c4\u03bf \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03b1\u03c0\u03cc download\/upload)<\/p>\n <p><strong>\u0392\u03ae\u03bc\u03b1 3:<\/strong> \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 = \u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03c3\u03b5 bits \u00f7 \u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c3\u03b5 bps<\/p>\n <p><strong>\u0392\u03ae\u03bc\u03b1 4:<\/strong> \u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c8\u03c4\u03b5 \u03c3\u03b5 \u03bb\u03b5\u03c0\u03c4\u03ac \u03ae \u03ce\u03c1\u03b5\u03c2<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('checkBtn1').addEventListener('click', function() {\n const dimitrisTimeInput = document.getElementById('dimitrisTime').value;\n const eiriniTimeInput = document.getElementById('eiriniTime').value;\n const winnerInput = document.getElementById('winner').value.trim().toLowerCase();\n const resultDiv = document.getElementById('result1');\n\n \/\/ \u03a3\u03c9\u03c3\u03c4\u03bf\u03af \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03bf\u03af:\n \/\/ 9 GB = 9 \u00d7 1000\u00b3 bytes = 9,000,000,000 bytes\n \/\/ \u03c3\u03b5 bits = 9,000,000,000 \u00d7 8 = 72,000,000,000 bits\n \/\/ \u0397 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf upload \u03c4\u03b7\u03c2 \u03a3\u03bf\u03c6\u03af\u03b1\u03c2 (5 Mbps)\n \/\/ 5 Mbps = 5,000,000 bps\n \/\/ \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03c3\u03b5 \u03b4\u03b5\u03c5\u03c4\u03b5\u03c1\u03cc\u03bb\u03b5\u03c0\u03c4\u03b1 = 72,000,000,000 \/ 5,000,000 = 14,400 s\n \/\/ \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03c3\u03b5 \u03bb\u03b5\u03c0\u03c4\u03ac = 14,400 \/ 60 = 240 \u03bb\u03b5\u03c0\u03c4\u03ac\n const correctTime = 240;\n const correctWinner = '\u03ba\u03b1\u03bd\u03ad\u03bd\u03b1\u03c2';\n\n let isCorrect = true;\n let message = '';\n let detailedMessage = '';\n\n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03c7\u03c1\u03cc\u03bd\u03bf\u03c5 \u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7\n if (Math.abs(parseFloat(dimitrisTimeInput) - correctTime) > 1) {\n isCorrect = false;\n message += '\u039f \u03c7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03bd \u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03cc\u03c2. ';\n }\n\n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03c7\u03c1\u03cc\u03bd\u03bf\u03c5 \u0395\u03b9\u03c1\u03ae\u03bd\u03b7\u03c2\n if (Math.abs(parseFloat(eiriniTimeInput) - correctTime) > 1) {\n isCorrect = false;\n message += '\u039f \u03c7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b7\u03bd \u0395\u03b9\u03c1\u03ae\u03bd\u03b7 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03cc\u03c2. ';\n }\n\n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03bd\u03b9\u03ba\u03b7\u03c4\u03ae\n if (winnerInput !== '\u03ba\u03b1\u03bd\u03ad\u03bd\u03b1\u03c2' && winnerInput !== '\u03ba\u03b1\u03bd\u03b5\u03b9\u03c2' && winnerInput !== '\u03af\u03b4\u03b9\u03bf\u03c2' && winnerInput !== '\u03b9\u03b4\u03b9\u03bf\u03c2') {\n isCorrect = false;\n message += '\u0397 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03c4\u03bf \u03c0\u03bf\u03b9\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf\u03c2 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. ';\n }\n\n if (isCorrect) {\n detailedMessage = '\u03a3\u03c5\u03b3\u03c7\u03b1\u03c1\u03b7\u03c4\u03ae\u03c1\u03b9\u03b1! \u0397 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. \u039a\u03b1\u03b9 \u03bf\u03b9 \u03b4\u03cd\u03bf \u03ba\u03b1\u03c4\u03b5\u03b2\u03ac\u03b6\u03bf\u03c5\u03bd \u03bc\u03b5 \u03c4\u03b7\u03bd \u03af\u03b4\u03b9\u03b1 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 (5 Mbps - \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2 \u03b1\u03c0\u03cc upload \u03a3\u03bf\u03c6\u03af\u03b1\u03c2) \u03c3\u03b5 240 \u03bb\u03b5\u03c0\u03c4\u03ac.';\n resultDiv.textContent = detailedMessage;\n resultDiv.classList.remove('hidden', 'bg-red-200', 'text-red-700');\n resultDiv.classList.add('bg-green-200', 'text-green-700');\n } else {\n detailedMessage = '\u039b\u03c5\u03c0\u03ac\u03bc\u03b1\u03b9, \u03b7 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. ' + message + \n '\u03a3\u03c5\u03bc\u03b2\u03bf\u03c5\u03bb\u03ae: \u0397 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf upload \u03c4\u03b7\u03c2 \u03a3\u03bf\u03c6\u03af\u03b1\u03c2 (5 Mbps). 9 GB = 72 Gbits \/ 5 Mbps = 14400s = 240 \u03bb\u03b5\u03c0\u03c4\u03ac \u03b3\u03b9\u03b1 \u03b1\u03bc\u03c6\u03cc\u03c4\u03b5\u03c1\u03bf\u03c5\u03c2.';\n resultDiv.textContent = detailedMessage;\n resultDiv.classList.remove('hidden', 'bg-green-200', 'text-green-700');\n resultDiv.classList.add('bg-red-200', 'text-red-700');\n }\n });\n\n document.getElementById('checkBtn2').addEventListener('click', function() {\n const timeInput = document.getElementById('timeHours').value;\n const resultDiv = document.getElementById('result2');\n\n \/\/ \u03a3\u03c9\u03c3\u03c4\u03bf\u03af \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03bf\u03af:\n \/\/ 10 TB = 10 \u00d7 1000\u2074 bytes = 10,000,000,000,000 bytes\n \/\/ \u03c3\u03b5 bits = 10,000,000,000,000 \u00d7 8 = 80,000,000,000,000 bits (80 Tbits)\n \/\/ 1 Gbps = 1,000,000,000 bps\n \/\/ \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03c3\u03b5 \u03b4\u03b5\u03c5\u03c4\u03b5\u03c1\u03cc\u03bb\u03b5\u03c0\u03c4\u03b1 = 80,000,000,000,000 \/ 1,000,000,000 = 80,000 s\n \/\/ \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03c3\u03b5 \u03ce\u03c1\u03b5\u03c2 = 80,000 \/ 3600 = 22.22 \u03ce\u03c1\u03b5\u03c2\n const correctTime = 22.22;\n\n let detailedMessage = '';\n\n if (Math.abs(parseFloat(timeInput) - correctTime) < 0.5) {\n detailedMessage = '\u03a3\u03c5\u03b3\u03c7\u03b1\u03c1\u03b7\u03c4\u03ae\u03c1\u03b9\u03b1! \u0397 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. 10 TB = 80 Tbits \/ 1 Gbps = 80,000s = 22.22 \u03ce\u03c1\u03b5\u03c2.';\n resultDiv.textContent = detailedMessage;\n resultDiv.classList.remove('hidden', 'bg-red-200', 'text-red-700');\n resultDiv.classList.add('bg-green-200', 'text-green-700');\n } else {\n detailedMessage = '\u039b\u03c5\u03c0\u03ac\u03bc\u03b1\u03b9, \u03b7 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. \u03a3\u03c5\u03bc\u03b2\u03bf\u03c5\u03bb\u03ae: 10 TB = 10,000 GB = 80,000 Gb (Gigabits) \/ 1 Gbps = 80,000s = 22.22 \u03ce\u03c1\u03b5\u03c2.';\n resultDiv.textContent = detailedMessage;\n resultDiv.classList.remove('hidden', 'bg-green-200', 'text-green-700');\n resultDiv.classList.add('bg-red-200', 'text-red-700');\n }\n });\n\n \/\/ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 event listeners \u03b3\u03b9\u03b1 real-time validation\n document.getElementById('dimitrisTime').addEventListener('input', function() {\n const resultDiv = document.getElementById('result1');\n if (!resultDiv.classList.contains('hidden')) {\n resultDiv.classList.add('hidden');\n }\n });\n\n document.getElementById('eiriniTime').addEventListener('input', function() {\n const resultDiv = document.getElementById('result1');\n if (!resultDiv.classList.contains('hidden')) {\n resultDiv.classList.add('hidden');\n }\n });\n\n document.getElementById('winner').addEventListener('input', function() {\n const resultDiv = document.getElementById('result1');\n if (!resultDiv.classList.contains('hidden')) {\n resultDiv.classList.add('hidden');\n }\n });\n\n document.getElementById('timeHours').addEventListener('input', function() {\n const resultDiv = document.getElementById('result2');\n if (!resultDiv.classList.contains('hidden')) {\n resultDiv.classList.add('hidden');\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u039a\u03cc\u03c3\u03bc\u03bf\u03c2 \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u039a\u03cc\u03c3\u03bc\u03bf\u03c2 Bits & Bytes \u039c\u03bf\u03bd\u03ac\u03b4\u03b5\u03c2 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03a4\u03b1 \u0398\u03b5\u03bc\u03ad\u03bb\u03b9\u03b1: Bits & Bytes \u039a\u03ac\u03b8\u03b5 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03af\u03b1 \u03c3\u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae, \u03b1\u03c0\u03cc \u03ad\u03bd\u03b1 \u03b3\u03c1\u03ac\u03bc\u03bc\u03b1 \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bc\u03b9\u03b1 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7 \u03c4\u03b1\u03b9\u03bd\u03af\u03b1, \u03b1\u03bd\u03b1\u03c0\u03b1\u03c1\u03af\u03c3\u03c4\u03b1\u03c4\u03b1\u03b9 \u03bc\u03b5 bits, \u03b4\u03b7\u03bb\u03b1\u03b4\u03ae 0 \u03ba\u03b1\u03b9 1. \u0391\u03c2 \u03b4\u03bf\u03cd\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b5\u03c2 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03af\u03b5\u03c2 \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 \u03ba\u03c9\u03b4\u03b9\u03ba\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03bf\u03c5\u03bc\u03b5 \u03b1\u03bb\u03bb\u03ac\u03b6\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03c4\u03c9\u03bd bits. \u0395\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc Bits: 3 \u039c\u03b5 3 bits, \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 […]<\/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":[1,6],"tags":[],"class_list":["post-1373","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-6","entry"],"_links":{"self":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1373","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=1373"}],"version-history":[{"count":25,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1373\/revisions"}],"predecessor-version":[{"id":1400,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1373\/revisions\/1400"}],"wp:attachment":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1373,"date":"2025-08-24T07:54:10","date_gmt":"2025-08-24T07:54:10","guid":{"rendered":"https:\/\/gkanamaria.sites.sch.gr\/?p=1373"},"modified":"2025-08-24T11:58:26","modified_gmt":"2025-08-24T11:58:26","slug":"%ce%b5%ce%bd%cf%8c%cf%84%ce%b7%cf%84%ce%b1-1-%cf%88%ce%b7%cf%86%ce%b9%ce%b1%ce%ba%cf%8c%cf%82-%ce%ba%cf%8c%cf%83%ce%bc%ce%bf%cf%82-%ce%b2-%ce%b3%cf%85%ce%bc%ce%bd%ce%b1%cf%83%ce%af%ce%bf%cf%85","status":"publish","type":"post","link":"https:\/\/gkanamaria.sites.sch.gr\/?p=1373","title":{"rendered":"\u0395\u03bd\u03cc\u03c4\u03b7\u03c4\u03b1 1. \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u03ba\u03cc\u03c3\u03bc\u03bf\u03c2 \u0392’ \u0393\u03c5\u03bc\u03bd\u03b1\u03c3\u03af\u03bf\u03c5"},"content":{"rendered":"\n\n\n\n \n \n \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u039a\u03cc\u03c3\u03bc\u03bf\u03c2<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #FDFBF7;\n color: #4A4A4A;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n margin: 0;\n line-height: 1.5;\n }\n\n \/* \u0392\u03b1\u03c3\u03b9\u03ba\u03ad\u03c2 \u03ba\u03bb\u03ac\u03c3\u03b5\u03b9\u03c2 CSS, \u03b5\u03bd\u03c3\u03c9\u03bc\u03b1\u03c4\u03c9\u03bc\u03ad\u03bd\u03b5\u03c2 *\/\n .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }\n .bg-white\\\/80 { background-color: rgba(255, 255, 255, 0.8); }\n .backdrop-blur-md { backdrop-filter: blur(12px); }\n .sticky { position: sticky; }\n .top-0 { top: 0; }\n .z-10 { z-index: 10; }\n .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }\n .w-full { width: 100%; }\n .mx-auto { margin-left: auto; margin-right: auto; }\n .px-4 { padding-left: 1rem; padding-right: 1rem; }\n .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n .lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n .py-12 { padding-top: 3rem; padding-bottom: 3rem; }\n .flex { display: flex; }\n .items-center { align-items: center; }\n .justify-between { justify-content: space-between; }\n .h-16 { height: 4rem; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .font-bold { font-weight: 700; }\n .text-amber-600 { color: #D97706; }\n .hidden { display: none; }\n .sm\\:flex { display: flex; }\n .sm\\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-right: 0; margin-left: 2rem; }\n .mb-16 { margin-bottom: 4rem; }\n .scroll-mt-24 { scroll-margin-top: 6rem; }\n .text-center { text-align: center; }\n .mb-8 { margin-bottom: 2rem; }\n .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n .tracking-tight { letter-spacing: -0.025em; }\n .mt-2 { margin-top: 0.5rem; }\n .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n .max-w-7xl { max-width: 80rem; }\n .card {\n background-color: #FFFFFF;\n border-radius: 0.75rem;\n box-shadow: 0 4px 6px -1px rgb(0 0 0 \/ 0.1), 0 2px 4px -2px rgb(0 0 0 \/ 0.1);\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n padding: 2rem;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1);\n }\n .flex-col { flex-direction: column; }\n .items-center { align-items: center; }\n .mb-2 { margin-bottom: 0.5rem; }\n .w-full { width: 100%; }\n .h-2 { height: 0.5rem; }\n .bg-gray-200 { background-color: #E5E7EB; }\n .rounded-lg { border-radius: 0.5rem; }\n .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }\n .cursor-pointer { cursor: pointer; }\n .mt-6 { margin-top: 1.5rem; }\n .text-xl { font-size: 1.25rem; line-height: 1.75rem; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .mt-4 { margin-top: 1rem; }\n .text-gray-600 { color: #6B7280; }\n .grid { display: grid; }\n .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .lg\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .gap-8 { gap: 2rem; }\n .items-start { align-items: flex-start; }\n .text-2xl { font-size: 1.5rem; line-height: 2rem; }\n .mb-4 { margin-bottom: 1rem; }\n .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }\n .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }\n .block { display: block; }\n .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n .font-medium { font-weight: 500; }\n .text-gray-700 { color: #4B5563; }\n .mt-1 { margin-top: 0.25rem; }\n .btn {\n background-color: #F59E0B;\n color: white;\n font-weight: 600;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n transition: background-color 0.3s ease;\n border: none;\n cursor: pointer;\n }\n .btn:hover {\n background-color: #D97706;\n }\n input, select {\n border: 1px solid #D1D5DB;\n border-radius: 0.5rem;\n padding: 0.5rem 0.75rem;\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\n box-sizing: border-box;\n }\n input:focus, select:focus {\n outline: none;\n border-color: #F59E0B;\n box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);\n }\n .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }\n .font-semibold { font-weight: 600; }\n .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .text-amber-600 { color: #D97706; }\n .my-4 { margin-top: 1rem; margin-bottom: 1rem; }\n .text-amber-700 { color: #B45309; }\n .text-green-700 { color: #047857; }\n .bg-amber-50 { background-color: #FFFBEB; }\n .rounded-lg { border-radius: 0.5rem; }\n .p-6 { padding: 1.5rem; }\n .flex-col { flex-direction: column; }\n .justify-center { justify-content: center; }\n .items-center { align-items: center; }\n .text-center { text-align: center; }\n .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .mt-6 { margin-top: 1.5rem; }\n .text-sm { font-size: 0.875rem; line-height: 1.25rem; }\n .text-red-500 { color: #EF4444; }\n .hover\\:text-red-700:hover { color: #B91C1C; }\n .p-8 { padding: 2rem; }\n \n @media (min-width: 640px) {\n .sm\\:flex { display: flex; }\n .sm\\:space-x-8 > :not([hidden]) ~ :not([hidden]) { margin-right: 0; margin-left: 2rem; }\n .sm\\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }\n .sm\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .sm\\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n .sm\\:w-1\\\/2 { width: 50%; }\n }\n @media (min-width: 768px) {\n .md\\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n }\n @media (min-width: 1024px) {\n .lg\\:px-8 { padding-left: 2rem; padding-right: 2rem; }\n }\n\n .nav-link {\n transition: all 0.3s ease;\n border-bottom: 2px solid transparent;\n font-weight: 500;\n padding: 0.5rem 0;\n cursor: pointer;\n text-decoration: none;\n color: #4A4A4A;\n }\n\n .nav-link:hover {\n color: #D97706;\n border-bottom-color: #D97706;\n }\n\n section:target {\n padding-top: 100px;\n margin-top: -100px;\n }\n \n .seeder-input {\n background-color: #F3F4F6;\n border: 1px solid #D1D5DB;\n border-radius: 0.25rem;\n padding: 0.5rem;\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n \n .remove-seeder {\n background-color: #EF4444;\n color: white;\n border: none;\n border-radius: 0.25rem;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n font-size: 0.75rem;\n }\n <\/style>\n<\/head>\n<body>\n <header class=\"bg-white\/80 backdrop-blur-md sticky top-0 z-10 shadow-sm\">\n <nav class=\"w-full mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between h-16\">\n <h1 class=\"text-2xl font-bold text-amber-600\">\u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u039a\u03cc\u03c3\u03bc\u03bf\u03c2<\/h1>\n <div class=\"hidden sm:flex sm:space-x-8\">\n <a href=\"#section-bits\" class=\"nav-link\">Bits & Bytes<\/a>\n <a href=\"#section-units\" class=\"nav-link\">\u039c\u03bf\u03bd\u03ac\u03b4\u03b5\u03c2<\/a>\n <a href=\"#section-storage\" class=\"nav-link\">\u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2<\/a>\n <a href=\"#section-speed\" class=\"nav-link\">\u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1<\/a>\n <\/div>\n <\/div>\n <\/nav>\n <\/header>\n\n <main class=\"w-full mx-auto px-4 sm:px-6 lg:px-8 py-12\">\n \n <section id=\"section-bits\" class=\"mb-16\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold tracking-tight\">\u03a4\u03b1 \u0398\u03b5\u03bc\u03ad\u03bb\u03b9\u03b1: Bits & Bytes<\/h2>\n <p class=\"mt-2 text-lg max-w-7xl mx-auto\">\n \u039a\u03ac\u03b8\u03b5 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03af\u03b1 \u03c3\u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae, \u03b1\u03c0\u03cc \u03ad\u03bd\u03b1 \u03b3\u03c1\u03ac\u03bc\u03bc\u03b1 \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bc\u03b9\u03b1 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7 \u03c4\u03b1\u03b9\u03bd\u03af\u03b1, \u03b1\u03bd\u03b1\u03c0\u03b1\u03c1\u03af\u03c3\u03c4\u03b1\u03c4\u03b1\u03b9 \u03bc\u03b5 bits, \u03b4\u03b7\u03bb\u03b1\u03b4\u03ae 0 \u03ba\u03b1\u03b9 1. \u0391\u03c2 \u03b4\u03bf\u03cd\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b5\u03c2 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03af\u03b5\u03c2 \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 \u03ba\u03c9\u03b4\u03b9\u03ba\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03bf\u03c5\u03bc\u03b5 \u03b1\u03bb\u03bb\u03ac\u03b6\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03c4\u03c9\u03bd bits.\n <\/p>\n <\/div>\n <div class=\"card p-8 max-w-7xl mx-auto\">\n <div class=\"flex flex-col items-center\">\n <label for=\"bit-slider\" class=\"text-lg font-medium mb-2\">\u0395\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc Bits: <span id=\"bit-count\" class=\"font-bold text-amber-600\">3<\/span><\/label>\n <input id=\"bit-slider\" type=\"range\" min=\"1\" max=\"8\" value=\"3\" class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer\">\n <p class=\"mt-6 text-xl text-center\">\n \u039c\u03b5 <span id=\"bit-display\" class=\"font-bold text-2xl text-amber-600\">3<\/span> bits, \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 \u03b4\u03b7\u03bc\u03b9\u03bf\u03c5\u03c1\u03b3\u03ae\u03c3\u03bf\u03c5\u03bc\u03b5 \n <span id=\"combinations-display\" class=\"font-bold text-2xl text-amber-600\">8<\/span> \n \u03bc\u03bf\u03bd\u03b1\u03b4\u03b9\u03ba\u03bf\u03cd\u03c2 \u03c3\u03c5\u03bd\u03b4\u03c5\u03b1\u03c3\u03bc\u03bf\u03cd\u03c2.\n <\/p>\n <p id=\"example-text\" class=\"mt-4 text-gray-600 text-center\"><\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"section-units\" class=\"mb-16\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold tracking-tight\">\u039c\u03b5\u03c4\u03c1\u03ce\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc \u03a7\u03ce\u03c1\u03bf<\/h2>\n <p class=\"mt-2 text-lg max-w-7xl mx-auto\">\n \u0391\u03c0\u03cc \u03ad\u03bd\u03b1 \u03b1\u03c0\u03bb\u03cc \u03ad\u03b3\u03b3\u03c1\u03b1\u03c6\u03bf \u03bc\u03ad\u03c7\u03c1\u03b9 \u03c4\u03b1 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9\u03b1 \u03bc\u03b1\u03c2, \u03cc\u03bb\u03b1 \u03ba\u03b1\u03c4\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03bf\u03c5\u03bd \u03c7\u03ce\u03c1\u03bf. \u0391\u03c2 \u03b4\u03bf\u03cd\u03bc\u03b5 \u03c4\u03b9\u03c2 \u03bc\u03bf\u03bd\u03ac\u03b4\u03b5\u03c2 \u03bc\u03ad\u03c4\u03c1\u03b7\u03c3\u03b7\u03c2 \u03ba\u03b1\u03b9 \u03b1\u03c2 \u03bc\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c8\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b9\u03bc\u03ad\u03c2 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03ba\u03b1\u03c4\u03b1\u03bb\u03ac\u03b2\u03bf\u03c5\u03bc\u03b5 \u03c4\u03b7\u03bd \u03ba\u03bb\u03af\u03bc\u03b1\u03ba\u03b1 \u03c4\u03bf\u03c5 \u03c8\u03b7\u03c6\u03b9\u03b1\u03ba\u03bf\u03cd \u03c7\u03ce\u03c1\u03bf\u03c5.\n <\/p>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-start max-w-7xl mx-auto\">\n <div class=\"card p-8\">\n <h3 class=\"text-2xl font-bold mb-4\">\u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03bf\u03c0\u03ad\u03b1\u03c2 \u039c\u03bf\u03bd\u03ac\u03b4\u03c9\u03bd<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label for=\"input-value\" class=\"block text-sm font-medium text-gray-700\">\u03a4\u03b9\u03bc\u03ae<\/label>\n <input type=\"number\" id=\"input-value\" value=\"1\" class=\"mt-1 block w-full\">\n <\/div>\n <div>\n <label for=\"input-unit\" class=\"block text-sm font-medium text-gray-700\">\u0391\u03c0\u03cc<\/label>\n <select id=\"input-unit\" class=\"mt-1 block w-full\">\n <option value=\"B\">Bytes (B)<\/option>\n <option value=\"KB\">Kilobytes (KB)<\/option>\n <option value=\"MB\">Megabytes (MB)<\/option>\n <option value=\"GB\" selected>Gigabytes (GB)<\/option>\n <option value=\"TB\">Terabytes (TB)<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"card p-8\">\n <h3 class=\"text-2xl font-bold mb-4\">\u0391\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1 \u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03bf\u03c0\u03ae\u03c2<\/h3>\n <div id=\"results-container\" class=\"space-y-2\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n \n <section id=\"section-storage\" class=\"mb-16\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold tracking-tight\">\u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u0391\u03c0\u03bf\u03b8\u03b7\u03ba\u03b5\u03c5\u03c4\u03b9\u03ba\u03bf\u03cd \u03a7\u03ce\u03c1\u03bf\u03c5<\/h2>\n <p class=\"mt-2 text-lg max-w-7xl mx-auto\">\n \u03a0\u03cc\u03c3\u03bf \u03c7\u03ce\u03c1\u03bf \u03c0\u03b9\u03ac\u03bd\u03b5\u03b9 \u03ad\u03bd\u03b1 \u03b2\u03b9\u03b2\u03bb\u03af\u03bf \u03ae \u03bc\u03b9\u03b1 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1; \u03a0\u03cc\u03c3\u03b1 \u03b1\u03c1\u03c7\u03b5\u03af\u03b1 \u03c7\u03c9\u03c1\u03ac\u03bd\u03b5 \u03c3\u03b5 \u03ad\u03bd\u03b1 USB stick; \u03a7\u03c1\u03b7\u03c3\u03b9\u03bc\u03bf\u03c0\u03bf\u03af\u03b7\u03c3\u03b5 \u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03b4\u03b5\u03b9\u03c2 \u03c0\u03cc\u03c3\u03bf \u03c7\u03ce\u03c1\u03bf \u03c7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c3\u03b1\u03b9 \u03b3\u03b9\u03b1 \u03c4\u03b1 \u03c8\u03b7\u03c6\u03b9\u03b1\u03ba\u03ac \u03c3\u03bf\u03c5 \u03b1\u03c1\u03c7\u03b5\u03af\u03b1.\n <\/p>\n <\/div>\n <div class=\"grid lg:grid-cols-2 gap-8 max-w-7xl mx-auto\">\n <div class=\"card p-8\">\n <h3 class=\"text-2xl font-bold mb-4\">\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03bf \u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2<\/h3>\n <div class=\"space-y-6\">\n \n <div>\n <p class=\"font-semibold text-lg mb-2\">\ud83d\udcd6 \u0392\u03b9\u03b2\u03bb\u03af\u03bf<\/p>\n <div class=\"grid sm:grid-cols-3 gap-4\">\n <input type=\"number\" id=\"book-pages\" placeholder=\"\u03a3\u03b5\u03bb\u03af\u03b4\u03b5\u03c2\" value=\"500\" class=\"w-full\">\n <input type=\"number\" id=\"book-lines\" placeholder=\"\u0393\u03c1\u03b1\u03bc\u03bc\u03ad\u03c2\/\u03c3\u03b5\u03bb.\" value=\"40\" class=\"w-full\">\n <input type=\"number\" id=\"book-chars\" placeholder=\"\u03a7\u03b1\u03c1.\/\u03b3\u03c1\u03b1\u03bc\u03bc\u03ae\" value=\"50\" class=\"w-full\">\n <\/div>\n <\/div>\n \n <div>\n <p class=\"font-semibold text-lg mb-2\">\ud83d\udcf7 \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 (\u0391\u03c3\u03c5\u03bc\u03c0\u03af\u03b5\u03c3\u03c4\u03b7)<\/p>\n <div class=\"grid sm:grid-cols-2 gap-4\">\n <select id=\"photo-resolution\" class=\"w-full\">\n <option value=\"2073600\">FullHD (1920×1080)<\/option>\n <option value=\"8294400\">4K (3840×2160)<\/option>\n <option value=\"12000000\">12 MP<\/option>\n <\/select>\n <select id=\"photo-depth\" class=\"w-full\">\n <option value=\"24\">24-bit (Truecolor)<\/option>\n <option value=\"32\">32-bit (\u039c\u03b5 \u03ba\u03b1\u03bd\u03ac\u03bb\u03b9 Alpha)<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button onclick=\"calculateStorage()\" class=\"btn w-full\">\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5<\/button>\n <\/div>\n <\/div>\n <div class=\"card p-8\">\n <h3 class=\"text-2xl font-bold mb-4\">\u0391\u03c0\u03bf\u03c4\u03ad\u03bb\u03b5\u03c3\u03bc\u03b1<\/h3>\n <div class=\"space-y-4\">\n <p class=\"text-lg\">\u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u0392\u03b9\u03b2\u03bb\u03af\u03bf\u03c5: <span id=\"book-size-result\" class=\"font-bold text-amber-600\">1 MB<\/span><\/p>\n <p class=\"text-lg\">\u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\u03c2: <span id=\"photo-size-result\" class=\"font-bold text-amber-600\">5.93 MB<\/span><\/p>\n <hr class=\"my-4\" style=\"border-top: 1px solid #E5E7EB;\">\n <h4 class=\"text-xl font-bold\">\u03a0\u03cc\u03c3\u03b1 \u03c7\u03c9\u03c1\u03ac\u03bd\u03b5 \u03c3\u03b5…<\/h4>\n <select id=\"storage-device\" class=\"w-full\">\n <option value=\"32\">USB Stick (32 GB)<\/option>\n <option value=\"128\">\u039a\u03ac\u03c1\u03c4\u03b1 SD (128 GB)<\/option>\n <option value=\"1000\">\u03a3\u03ba\u03bb\u03b7\u03c1\u03cc\u03c2 \u0394\u03af\u03c3\u03ba\u03bf\u03c2 (1 TB)<\/option>\n <\/select>\n <p id=\"storage-fit-result\" class=\"mt-2 text-lg\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"section-speed\">\n <div class=\"text-center mb-8\">\n <h2 class=\"text-3xl font-bold tracking-tight\">\u0394\u03b5\u03b4\u03bf\u03bc\u03ad\u03bd\u03b1 \u03c3\u03b5 \u039a\u03af\u03bd\u03b7\u03c3\u03b7<\/h2>\n <p class=\"mt-2 text-lg max-w-7xl mx-auto\">\n \u03a3\u03b5 \u03c0\u03cc\u03c3\u03bf \u03c7\u03c1\u03cc\u03bd\u03bf \u03b8\u03b1 \u03ba\u03b1\u03c4\u03ad\u03b2\u03b5\u03b9 \u03c4\u03bf \u03b1\u03b3\u03b1\u03c0\u03b7\u03bc\u03ad\u03bd\u03bf \u03c3\u03bf\u03c5 \u03c0\u03b1\u03b9\u03c7\u03bd\u03af\u03b4\u03b9; \u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03c4\u03bf\u03bd \u03c7\u03c1\u03cc\u03bd\u03bf \u03bb\u03ae\u03c8\u03b7\u03c2 \u03b5\u03bd\u03cc\u03c2 \u03b1\u03c1\u03c7\u03b5\u03af\u03bf\u03c5 \u03bc\u03b5 \u03b2\u03ac\u03c3\u03b7 \u03c4\u03b7\u03bd \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c4\u03b7\u03c2 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03ae\u03c2 \u03c3\u03bf\u03c5 \u03ba\u03b1\u03b9 \u03b4\u03b5\u03c2 \u03c0\u03ce\u03c2 \u03b7 \u03c4\u03b5\u03c7\u03bd\u03bf\u03bb\u03bf\u03b3\u03af\u03b1 BitTorrent \u03bc\u03c0\u03bf\u03c1\u03b5\u03af \u03bd\u03b1 \u03b5\u03c0\u03b9\u03c4\u03b1\u03c7\u03cd\u03bd\u03b5\u03b9 \u03c4\u03b1 \u03c0\u03c1\u03ac\u03b3\u03bc\u03b1\u03c4\u03b1.\n <\/p>\n <\/div>\n <div class=\"card p-8 max-w-7xl mx-auto\">\n <div class=\"grid md:grid-cols-2 gap-8\">\n <div>\n <h3 class=\"text-2xl font-bold mb-4\">\u03a1\u03c5\u03b8\u03bc\u03af\u03c3\u03b5\u03b9\u03c2 \u039b\u03ae\u03c8\u03b7\u03c2<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label for=\"file-size\" class=\"block text-sm font-medium\">\u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u0391\u03c1\u03c7\u03b5\u03af\u03bf\u03c5 (GB)<\/label>\n <input type=\"number\" id=\"file-size\" value=\"36\" class=\"mt-1 w-full\">\n <\/div>\n <div>\n <label for=\"download-speed\" class=\"block text-sm font-medium\">\u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03a3\u03cd\u03bd\u03b4\u03b5\u03c3\u03ae\u03c2 \u03c3\u03bf\u03c5 (Mbps)<\/label>\n <input type=\"number\" id=\"download-speed\" value=\"80\" class=\"mt-1 w-full\">\n <\/div>\n <hr style=\"border-top: 1px solid #E5E7EB; margin-top: 1.5rem; margin-bottom: 1.5rem;\">\n <div id=\"bittorrent-section\">\n <h4 class=\"text-lg font-semibold\">\u03a0\u03c1\u03bf\u03c3\u03bf\u03bc\u03bf\u03af\u03c9\u03c3\u03b7 BitTorrent<\/h4>\n <p class=\"text-sm text-gray-600 mb-2\">\u03a0\u03c1\u03cc\u03c3\u03b8\u03b5\u03c3\u03b5 \u03c6\u03af\u03bb\u03bf\u03c5\u03c2 \u03c0\u03bf\u03c5 \u03bc\u03bf\u03b9\u03c1\u03ac\u03b6\u03bf\u03bd\u03c4\u03b1\u03b9 \u03c4\u03bf \u03b1\u03c1\u03c7\u03b5\u03af\u03bf.<\/p>\n <div id=\"seeders-container\" class=\"space-y-2\">\n \n <\/div>\n <button onclick=\"addSeeder()\" class=\"mt-2 text-sm text-amber-600 font-semibold hover:text-amber-800\" style=\"color: #D97706;\">+ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 \u0391\u03c0\u03bf\u03c3\u03c4\u03bf\u03bb\u03ad\u03b1<\/button>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"bg-amber-50 rounded-lg p-6 flex flex-col justify-center items-center text-center\">\n <h3 class=\"text-2xl font-bold mb-4\">\u0395\u03ba\u03c4\u03b9\u03bc\u03ce\u03bc\u03b5\u03bd\u03bf\u03c2 \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u039b\u03ae\u03c8\u03b7\u03c2<\/h3>\n <div id=\"speed-results\">\n \n <\/div>\n <\/div>\n <\/div>\n <div class=\"text-center mt-6\">\n <button onclick=\"calculateDownloadTime()\" class=\"btn\">\u03a5\u03c0\u03bf\u03bb\u03cc\u03b3\u03b9\u03c3\u03b5 \u03a7\u03c1\u03cc\u03bd\u03bf<\/button>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n \/\/ Bits and Bytes Calculator\n function updateBitsDisplay() {\n const bitSlider = document.getElementById('bit-slider');\n const bitCount = document.getElementById('bit-count');\n const bitDisplay = document.getElementById('bit-display');\n const combinationsDisplay = document.getElementById('combinations-display');\n const exampleText = document.getElementById('example-text');\n \n const bits = parseInt(bitSlider.value);\n const combinations = Math.pow(2, bits);\n \n bitCount.textContent = bits;\n bitDisplay.textContent = bits;\n combinationsDisplay.textContent = combinations;\n \n \/\/ Update example text based on bits\n const examples = {\n 1: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: \u039d\u03b1\u03b9 (1) \u03ae \u038c\u03c7\u03b9 (0) - 2 \u03b5\u03c0\u03b9\u03bb\u03bf\u03b3\u03ad\u03c2\",\n 2: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 4 \u03ba\u03b1\u03c4\u03b5\u03c5\u03b8\u03cd\u03bd\u03c3\u03b5\u03b9\u03c2 (\u0392\u03cc\u03c1\u03b5\u03b9\u03b1, \u039d\u03cc\u03c4\u03b9\u03b1, \u0391\u03bd\u03b1\u03c4\u03bf\u03bb\u03b9\u03ba\u03ac, \u0394\u03c5\u03c4\u03b9\u03ba\u03ac)\",\n 3: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 8 \u03c7\u03c1\u03ce\u03bc\u03b1\u03c4\u03b1 \u03ae 8 \u03bd\u03cc\u03c4\u03b5\u03c2 \u03bc\u03bf\u03c5\u03c3\u03b9\u03ba\u03ae\u03c2\",\n 4: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 16 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03bf\u03af \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b5\u03c2 (0-9, A-F)\",\n 5: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 32 \u03b3\u03c1\u03ac\u03bc\u03bc\u03b1\u03c4\u03b1 \u03c4\u03bf\u03c5 \u03b1\u03bb\u03c6\u03b1\u03b2\u03ae\u03c4\u03bf\u03c5\",\n 6: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 64 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03ba\u03b1\u03c4\u03b1\u03c3\u03c4\u03ac\u03c3\u03b5\u03b9\u03c2\",\n 7: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 128 \u03c7\u03b1\u03c1\u03b1\u03ba\u03c4\u03ae\u03c1\u03b5\u03c2 ASCII\",\n 8: \"\u03a0\u03b1\u03c1\u03ac\u03b4\u03b5\u03b9\u03b3\u03bc\u03b1: 1 Byte - 256 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c4\u03b9\u03bc\u03ad\u03c2 (0-255)\"\n };\n \n exampleText.textContent = examples[bits] || `${combinations} \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03bf\u03af \u03c3\u03c5\u03bd\u03b4\u03c5\u03b1\u03c3\u03bc\u03bf\u03af`;\n }\n\n \/\/ Units Converter\n function convertUnits() {\n const value = parseFloat(document.getElementById('input-value').value) || 0;\n const unit = document.getElementById('input-unit').value;\n const resultsContainer = document.getElementById('results-container');\n \n \/\/ Convert to bytes first\n const unitMultipliers = {\n 'B': 1,\n 'KB': 1024,\n 'MB': 1024 * 1024,\n 'GB': 1024 * 1024 * 1024,\n 'TB': 1024 * 1024 * 1024 * 1024\n };\n \n const bytes = value * unitMultipliers[unit];\n \n \/\/ Convert to all units\n const results = {\n 'B': bytes,\n 'KB': bytes \/ 1024,\n 'MB': bytes \/ (1024 * 1024),\n 'GB': bytes \/ (1024 * 1024 * 1024),\n 'TB': bytes \/ (1024 * 1024 * 1024 * 1024)\n };\n \n let html = '';\n for (const [u, val] of Object.entries(results)) {\n if (u !== unit) {\n const formatVal = val >= 1 ? val.toLocaleString('el-GR', {maximumFractionDigits: 2}) : val.toExponential(2);\n html += `<p><strong>${formatVal}<\/strong> ${u}<\/p>`;\n }\n }\n \n resultsContainer.innerHTML = html;\n }\n\n \/\/ Storage Calculator\n function calculateStorage() {\n \/\/ Book calculation\n const pages = parseInt(document.getElementById('book-pages').value) || 0;\n const lines = parseInt(document.getElementById('book-lines').value) || 0;\n const chars = parseInt(document.getElementById('book-chars').value) || 0;\n \n const totalChars = pages * lines * chars;\n const bookSizeBytes = totalChars; \/\/ 1 char = 1 byte (ASCII)\n const bookSizeMB = bookSizeBytes \/ (1024 * 1024);\n \n document.getElementById('book-size-result').textContent = \n bookSizeMB > 1 ? `${bookSizeMB.toFixed(2)} MB` : `${(bookSizeBytes \/ 1024).toFixed(0)} KB`;\n \n \/\/ Photo calculation\n const resolution = parseInt(document.getElementById('photo-resolution').value);\n const depth = parseInt(document.getElementById('photo-depth').value);\n \n const photoSizeBytes = resolution * (depth \/ 8);\n const photoSizeMB = photoSizeBytes \/ (1024 * 1024);\n \n document.getElementById('photo-size-result').textContent = `${photoSizeMB.toFixed(2)} MB`;\n \n \/\/ Update storage fit calculation\n updateStorageFit();\n }\n\n function updateStorageFit() {\n const bookSizeText = document.getElementById('book-size-result').textContent;\n const photoSizeText = document.getElementById('photo-size-result').textContent;\n const storageCapacity = parseInt(document.getElementById('storage-device').value);\n \n \/\/ Extract sizes in MB\n const bookSizeMB = parseFloat(bookSizeText.includes('MB') ? bookSizeText : (parseFloat(bookSizeText) \/ 1024));\n const photoSizeMB = parseFloat(photoSizeText);\n const storageCapacityMB = storageCapacity * 1024; \/\/ GB to MB\n \n const booksCount = Math.floor(storageCapacityMB \/ bookSizeMB);\n const photosCount = Math.floor(storageCapacityMB \/ photoSizeMB);\n \n document.getElementById('storage-fit-result').innerHTML = \n `\ud83d\udcd6 ${booksCount.toLocaleString('el-GR')} \u03b2\u03b9\u03b2\u03bb\u03af\u03b1<br>\ud83d\udcf7 ${photosCount.toLocaleString('el-GR')} \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b5\u03c2`;\n }\n\n \/\/ BitTorrent Seeder Management\n let seederCount = 0;\n\n function addSeeder() {\n seederCount++;\n const seedersContainer = document.getElementById('seeders-container');\n \n const seederDiv = document.createElement('div');\n seederDiv.className = 'seeder-input';\n seederDiv.id = `seeder-${seederCount}`;\n seederDiv.innerHTML = `\n <span>\u03a6\u03af\u03bb\u03bf\u03c2 ${seederCount}:<\/span>\n <input type=\"number\" value=\"50\" placeholder=\"Mbps\" style=\"width: 80px; margin: 0 0.5rem;\">\n <span>Mbps<\/span>\n <button class=\"remove-seeder\" onclick=\"removeSeeder(${seederCount})\">\u0391\u03c6\u03b1\u03af\u03c1\u03b5\u03c3\u03b7<\/button>\n `;\n \n seedersContainer.appendChild(seederDiv);\n }\n\n function removeSeeder(id) {\n const seederDiv = document.getElementById(`seeder-${id}`);\n if (seederDiv) {\n seederDiv.remove();\n }\n }\n\n function calculateDownloadTime() {\n const fileSize = parseFloat(document.getElementById('file-size').value) || 0; \/\/ GB\n const userSpeed = parseFloat(document.getElementById('download-speed').value) || 0; \/\/ Mbps\n \n \/\/ Convert file size to bits\n const fileSizeBits = fileSize * 8 * 1024 * 1024 * 1024; \/\/ GB to bits\n const userSpeedBps = userSpeed * 1000000; \/\/ Mbps to bps\n \n \/\/ Calculate regular download time\n const regularTimeSeconds = fileSizeBits \/ userSpeedBps;\n \n \/\/ Calculate BitTorrent download time\n let totalSpeed = userSpeedBps;\n const seederInputs = document.querySelectorAll('#seeders-container input[type=\"number\"]');\n \n seederInputs.forEach(input => {\n const seederSpeed = parseFloat(input.value) || 0;\n totalSpeed += seederSpeed * 1000000; \/\/ Add seeder speed in bps\n });\n \n const torrentTimeSeconds = fileSizeBits \/ totalSpeed;\n \n \/\/ Format time display\n function formatTime(seconds) {\n if (seconds < 60) return `${Math.round(seconds)} \u03b4\u03b5\u03c5\u03c4\u03b5\u03c1\u03cc\u03bb\u03b5\u03c0\u03c4\u03b1`;\n if (seconds < 3600) return `${Math.round(seconds \/ 60)} \u03bb\u03b5\u03c0\u03c4\u03ac`;\n if (seconds < 86400) return `${Math.round(seconds \/ 3600)} \u03ce\u03c1\u03b5\u03c2`;\n return `${Math.round(seconds \/ 86400)} \u03bc\u03ad\u03c1\u03b5\u03c2`;\n }\n \n const speedResults = document.getElementById('speed-results');\n speedResults.innerHTML = `\n <div class=\"space-y-4\">\n <div>\n <h4 class=\"font-bold text-lg\">\u039a\u03b1\u03bd\u03bf\u03bd\u03b9\u03ba\u03ae \u039b\u03ae\u03c8\u03b7<\/h4>\n <p class=\"text-2xl font-bold text-amber-600\">${formatTime(regularTimeSeconds)}<\/p>\n <\/div>\n ${seederInputs.length > 0 ? `\n <div>\n <h4 class=\"font-bold text-lg\">\u039c\u03b5 BitTorrent<\/h4>\n <p class=\"text-2xl font-bold text-green-700\">${formatTime(torrentTimeSeconds)}<\/p>\n <p class=\"text-sm text-gray-600 mt-1\">\n ${Math.round(((regularTimeSeconds - torrentTimeSeconds) \/ regularTimeSeconds) * 100)}% \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1!\n <\/p>\n <\/div>\n ` : ''}\n <\/div>\n `;\n }\n\n \/\/ Event Listeners\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Initialize Bits & Bytes\n document.getElementById('bit-slider').addEventListener('input', updateBitsDisplay);\n updateBitsDisplay();\n \n \/\/ Initialize Units Converter\n document.getElementById('input-value').addEventListener('input', convertUnits);\n document.getElementById('input-unit').addEventListener('change', convertUnits);\n convertUnits();\n \n \/\/ Initialize Storage Calculator\n calculateStorage();\n document.getElementById('storage-device').addEventListener('change', updateStorageFit);\n \n \/\/ Initialize Speed Calculator\n calculateDownloadTime();\n \n \/\/ Smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function (e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"el\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>\u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2 \u03a0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03b9\u03ba\u03ae\u03c2<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f3f4f6;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\n\n <div class=\"w-full max-w-7xl mx-auto bg-white rounded-xl shadow-2xl p-8 space-y-8\">\n <h1 class=\"text-3xl font-bold text-center text-gray-800 mb-6\">\u0394\u03b9\u03b1\u03b4\u03c1\u03b1\u03c3\u03c4\u03b9\u03ba\u03ad\u03c2 \u0391\u03c3\u03ba\u03ae\u03c3\u03b5\u03b9\u03c2<\/h1>\n\n \n <div class=\"bg-gray-50 p-6 rounded-lg border border-gray-200\">\n <h2 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 1<\/h2>\n <p class=\"text-gray-600 mb-4\">\n \u039f \u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7\u03c2 \u03ad\u03c7\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 40 Mbps\/10 Mbps \u03ba\u03b1\u03b9 \u03b7 \u0395\u03b9\u03c1\u03ae\u03bd\u03b7 \u03bc\u03b9\u03b1 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 80 Mbps\/10 Mbps. \u0398\u03ad\u03bb\u03bf\u03c5\u03bd \u03bd\u03b1 \u03ba\u03b1\u03c4\u03b5\u03b2\u03ac\u03c3\u03bf\u03c5\u03bd \u03ad\u03bd\u03b1 \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03b1\u03c0\u03cc \u03c4\u03b7 \u03a3\u03bf\u03c6\u03af\u03b1, \u03b7 \u03bf\u03c0\u03bf\u03af\u03b1 \u03ad\u03c7\u03b5\u03b9 \u03bc\u03b9\u03b1 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 20 Mbps\/5 Mbps. \u03a0\u03cc\u03c3\u03b7 \u03ce\u03c1\u03b1 \u03b8\u03b1 \u03c7\u03c1\u03b5\u03b9\u03b1\u03c3\u03c4\u03b5\u03af \u03bd\u03b1 \u03ba\u03b1\u03c4\u03ad\u03b2\u03b5\u03b9 \u03c4\u03bf \u03b2\u03af\u03bd\u03c4\u03b5\u03bf, \u03b1\u03bd \u03c4\u03bf \u03bc\u03ad\u03b3\u03b5\u03b8\u03cc\u03c2 \u03c4\u03bf\u03c5 \u03b5\u03af\u03bd\u03b1\u03b9 9 GB, \u03c3\u03b5 \u03ba\u03ac\u03b8\u03b5 \u03c0\u03b5\u03c1\u03af\u03c0\u03c4\u03c9\u03c3\u03b7; \u03a0\u03bf\u03b9\u03bf \u03c0\u03b1\u03b9\u03b4\u03af \u03b8\u03b1 \u03ba\u03b1\u03c4\u03b5\u03b2\u03ac\u03c3\u03b5\u03b9 \u03c4\u03bf \u03b2\u03af\u03bd\u03c4\u03b5\u03bf \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03b1;\n <\/p>\n <div class=\"bg-blue-50 p-4 rounded-md mb-4\">\n <p class=\"text-sm text-blue-800\">\n <strong>\u03a5\u03c0\u03cc\u03b4\u03b5\u03b9\u03be\u03b7:<\/strong> \u0397 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 download \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03b1\u03c0\u03cc: download \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c0\u03b1\u03c1\u03b1\u03bb\u03ae\u03c0\u03c4\u03b7 \u03ae upload \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03b1\u03c0\u03bf\u03c3\u03c4\u03bf\u03bb\u03ad\u03b1.\n <\/p>\n <\/div>\n <div class=\"space-y-4\">\n <div>\n <label for=\"dimitrisTime\" class=\"block text-sm font-medium text-gray-700\">\u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7 (\u03bb\u03b5\u03c0\u03c4\u03ac):<\/label>\n <input type=\"number\" id=\"dimitrisTime\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2\" step=\"0.01\">\n <\/div>\n <div>\n <label for=\"eiriniTime\" class=\"block text-sm font-medium text-gray-700\">\u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u0395\u03b9\u03c1\u03ae\u03bd\u03b7\u03c2 (\u03bb\u03b5\u03c0\u03c4\u03ac):<\/label>\n <input type=\"number\" id=\"eiriniTime\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2\" step=\"0.01\">\n <\/div>\n <div>\n <label for=\"winner\" class=\"block text-sm font-medium text-gray-700\">\u03a0\u03bf\u03b9\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf\u03c2 (\u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7\u03c2, \u0395\u03b9\u03c1\u03ae\u03bd\u03b7, \u039a\u03b1\u03bd\u03ad\u03bd\u03b1\u03c2):<\/label>\n <input type=\"text\" id=\"winner\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2\" placeholder=\"\u03c0.\u03c7. \u039a\u03b1\u03bd\u03ad\u03bd\u03b1\u03c2\">\n <\/div>\n <div class=\"flex justify-center mt-4\">\n <button id=\"checkBtn1\" class=\"px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors\">\n \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u0391\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7\u03c2\n <\/button>\n <\/div>\n <div id=\"result1\" class=\"mt-4 p-3 rounded-md text-center hidden\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-gray-50 p-6 rounded-lg border border-gray-200\">\n <h2 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0386\u03c3\u03ba\u03b7\u03c3\u03b7 2<\/h2>\n <p class=\"text-gray-600 mb-4\">\n \u0397 \u039c\u03b1\u03c1\u03af\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03b7 \u03c5\u03c0\u03b5\u03cd\u03b8\u03c5\u03bd\u03b7 \u03bc\u03b7\u03c7\u03b1\u03bd\u03bf\u03c1\u03b3\u03ac\u03bd\u03c9\u03c3\u03b7\u03c2 \u03c4\u03b7\u03c2 \u0395\u03b8\u03bd\u03b9\u03ba\u03ae\u03c2 \u0392\u03b9\u03b2\u03bb\u03b9\u03bf\u03b8\u03ae\u03ba\u03b7\u03c2. \u0388\u03c7\u03b5\u03b9 \u03c8\u03b7\u03c6\u03b9\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03b5\u03b9 1.000.000 \u03b2\u03b9\u03b2\u03bb\u03af\u03b1, \u03c4\u03b1 \u03bf\u03c0\u03bf\u03af\u03b1 \u03ba\u03b1\u03c4\u03b1\u03bb\u03b1\u03bc\u03b2\u03ac\u03bd\u03bf\u03c5\u03bd \u03c7\u03ce\u03c1\u03bf 10 TB \u03c3\u03b5 \u03c4\u03c1\u03b5\u03b9\u03c2 \u03c3\u03ba\u03bb\u03b7\u03c1\u03bf\u03cd\u03c2 \u03b4\u03af\u03c3\u03ba\u03bf\u03c5\u03c2. \u0398\u03ad\u03bb\u03b5\u03b9 \u03bd\u03b1 \u03c4\u03b1 \u03c3\u03c4\u03b5\u03af\u03bb\u03b5\u03b9 \u03cc\u03bb\u03b1 \u03c3\u03c4\u03b7 \u03b4\u03b9\u03b5\u03c5\u03b8\u03cd\u03bd\u03c4\u03c1\u03b9\u03ac \u03c4\u03b7\u03c2, \u03c4\u03b7\u03bd \u0391\u03c3\u03b7\u03bc\u03af\u03bd\u03b1, \u03c0\u03bf\u03c5 \u03b2\u03c1\u03af\u03c3\u03ba\u03b5\u03c4\u03b1\u03b9 \u03c3\u03b5 \u03ac\u03bb\u03bb\u03b7 \u03c0\u03cc\u03bb\u03b7, \u03bc\u03b5 \u03c3\u03cd\u03bd\u03b4\u03b5\u03c3\u03b7 \u03bf\u03c0\u03c4\u03b9\u03ba\u03ae\u03c2 \u03af\u03bd\u03b1\u03c2 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1\u03c2 1 Gbps (download\/upload). \u03a0\u03cc\u03c3\u03b5\u03c2 \u03ce\u03c1\u03b5\u03c2 \u03b8\u03b1 \u03c7\u03c1\u03b5\u03b9\u03b1\u03c3\u03c4\u03b5\u03af \u03b7 \u0391\u03c3\u03b7\u03bc\u03af\u03bd\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03ba\u03b1\u03c4\u03b5\u03b2\u03ac\u03c3\u03b5\u03b9 \u03cc\u03bb\u03b1 \u03c4\u03b1 \u03b2\u03b9\u03b2\u03bb\u03af\u03b1;\n <\/p>\n <div class=\"bg-blue-50 p-4 rounded-md mb-4\">\n <p class=\"text-sm text-blue-800\">\n <strong>\u03a5\u03c0\u03cc\u03b4\u03b5\u03b9\u03be\u03b7:<\/strong> 1 TB = 1000 GB, 1 GB = 1000 MB, \u03ba\u03c4\u03bb. (\u03b4\u03b5\u03ba\u03b1\u03b4\u03b9\u03ba\u03ac prefixes)\n <\/p>\n <\/div>\n <div class=\"space-y-4\">\n <div>\n <label for=\"timeHours\" class=\"block text-sm font-medium text-gray-700\">\u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 (\u03ce\u03c1\u03b5\u03c2):<\/label>\n <input type=\"number\" id=\"timeHours\" class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2\" step=\"0.01\">\n <\/div>\n <div class=\"flex justify-center mt-4\">\n <button id=\"checkBtn2\" class=\"px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors\">\n \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u0391\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7\u03c2\n <\/button>\n <\/div>\n <div id=\"result2\" class=\"mt-4 p-3 rounded-md text-center hidden\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-yellow-50 p-6 rounded-lg border border-yellow-200\">\n <h3 class=\"text-lg font-semibold text-yellow-800 mb-3\">\ud83d\udca1 \u0392\u03bf\u03ae\u03b8\u03b5\u03b9\u03b1 \u03b3\u03b9\u03b1 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03bf\u03cd\u03c2<\/h3>\n <div class=\"text-sm text-yellow-700 space-y-2\">\n <p><strong>\u0392\u03ae\u03bc\u03b1 1:<\/strong> \u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c8\u03c4\u03b5 \u03c4\u03bf \u03bc\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03b1\u03c1\u03c7\u03b5\u03af\u03bf\u03c5 \u03c3\u03b5 bits<\/p>\n <p><strong>\u0392\u03ae\u03bc\u03b1 2:<\/strong> \u0392\u03c1\u03b5\u03af\u03c4\u03b5 \u03c4\u03b7\u03bd \u03c0\u03c1\u03b1\u03b3\u03bc\u03b1\u03c4\u03b9\u03ba\u03ae \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 (\u03c4\u03bf \u03bc\u03b9\u03ba\u03c1\u03cc\u03c4\u03b5\u03c1\u03bf \u03b1\u03c0\u03cc download\/upload)<\/p>\n <p><strong>\u0392\u03ae\u03bc\u03b1 3:<\/strong> \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 = \u039c\u03ad\u03b3\u03b5\u03b8\u03bf\u03c2 \u03c3\u03b5 bits \u00f7 \u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c3\u03b5 bps<\/p>\n <p><strong>\u0392\u03ae\u03bc\u03b1 4:<\/strong> \u039c\u03b5\u03c4\u03b1\u03c4\u03c1\u03ad\u03c8\u03c4\u03b5 \u03c3\u03b5 \u03bb\u03b5\u03c0\u03c4\u03ac \u03ae \u03ce\u03c1\u03b5\u03c2<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.getElementById('checkBtn1').addEventListener('click', function() {\n const dimitrisTimeInput = document.getElementById('dimitrisTime').value;\n const eiriniTimeInput = document.getElementById('eiriniTime').value;\n const winnerInput = document.getElementById('winner').value.trim().toLowerCase();\n const resultDiv = document.getElementById('result1');\n\n \/\/ \u03a3\u03c9\u03c3\u03c4\u03bf\u03af \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03bf\u03af:\n \/\/ 9 GB = 9 \u00d7 1000\u00b3 bytes = 9,000,000,000 bytes\n \/\/ \u03c3\u03b5 bits = 9,000,000,000 \u00d7 8 = 72,000,000,000 bits\n \/\/ \u0397 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf upload \u03c4\u03b7\u03c2 \u03a3\u03bf\u03c6\u03af\u03b1\u03c2 (5 Mbps)\n \/\/ 5 Mbps = 5,000,000 bps\n \/\/ \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03c3\u03b5 \u03b4\u03b5\u03c5\u03c4\u03b5\u03c1\u03cc\u03bb\u03b5\u03c0\u03c4\u03b1 = 72,000,000,000 \/ 5,000,000 = 14,400 s\n \/\/ \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03c3\u03b5 \u03bb\u03b5\u03c0\u03c4\u03ac = 14,400 \/ 60 = 240 \u03bb\u03b5\u03c0\u03c4\u03ac\n const correctTime = 240;\n const correctWinner = '\u03ba\u03b1\u03bd\u03ad\u03bd\u03b1\u03c2';\n\n let isCorrect = true;\n let message = '';\n let detailedMessage = '';\n\n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03c7\u03c1\u03cc\u03bd\u03bf\u03c5 \u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7\n if (Math.abs(parseFloat(dimitrisTimeInput) - correctTime) > 1) {\n isCorrect = false;\n message += '\u039f \u03c7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03bf\u03bd \u0394\u03b7\u03bc\u03ae\u03c4\u03c1\u03b7 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03cc\u03c2. ';\n }\n\n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03c7\u03c1\u03cc\u03bd\u03bf\u03c5 \u0395\u03b9\u03c1\u03ae\u03bd\u03b7\u03c2\n if (Math.abs(parseFloat(eiriniTimeInput) - correctTime) > 1) {\n isCorrect = false;\n message += '\u039f \u03c7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03b3\u03b9\u03b1 \u03c4\u03b7\u03bd \u0395\u03b9\u03c1\u03ae\u03bd\u03b7 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03cc\u03c2. ';\n }\n\n \/\/ \u0388\u03bb\u03b5\u03b3\u03c7\u03bf\u03c2 \u03bd\u03b9\u03ba\u03b7\u03c4\u03ae\n if (winnerInput !== '\u03ba\u03b1\u03bd\u03ad\u03bd\u03b1\u03c2' && winnerInput !== '\u03ba\u03b1\u03bd\u03b5\u03b9\u03c2' && winnerInput !== '\u03af\u03b4\u03b9\u03bf\u03c2' && winnerInput !== '\u03b9\u03b4\u03b9\u03bf\u03c2') {\n isCorrect = false;\n message += '\u0397 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b3\u03b9\u03b1 \u03c4\u03bf \u03c0\u03bf\u03b9\u03bf\u03c2 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c0\u03b9\u03bf \u03b3\u03c1\u03ae\u03b3\u03bf\u03c1\u03bf\u03c2 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. ';\n }\n\n if (isCorrect) {\n detailedMessage = '\u03a3\u03c5\u03b3\u03c7\u03b1\u03c1\u03b7\u03c4\u03ae\u03c1\u03b9\u03b1! \u0397 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. \u039a\u03b1\u03b9 \u03bf\u03b9 \u03b4\u03cd\u03bf \u03ba\u03b1\u03c4\u03b5\u03b2\u03ac\u03b6\u03bf\u03c5\u03bd \u03bc\u03b5 \u03c4\u03b7\u03bd \u03af\u03b4\u03b9\u03b1 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 (5 Mbps - \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03b9\u03c3\u03bc\u03cc\u03c2 \u03b1\u03c0\u03cc upload \u03a3\u03bf\u03c6\u03af\u03b1\u03c2) \u03c3\u03b5 240 \u03bb\u03b5\u03c0\u03c4\u03ac.';\n resultDiv.textContent = detailedMessage;\n resultDiv.classList.remove('hidden', 'bg-red-200', 'text-red-700');\n resultDiv.classList.add('bg-green-200', 'text-green-700');\n } else {\n detailedMessage = '\u039b\u03c5\u03c0\u03ac\u03bc\u03b1\u03b9, \u03b7 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. ' + message + \n '\u03a3\u03c5\u03bc\u03b2\u03bf\u03c5\u03bb\u03ae: \u0397 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03c0\u03b5\u03c1\u03b9\u03bf\u03c1\u03af\u03b6\u03b5\u03c4\u03b1\u03b9 \u03b1\u03c0\u03cc \u03c4\u03bf upload \u03c4\u03b7\u03c2 \u03a3\u03bf\u03c6\u03af\u03b1\u03c2 (5 Mbps). 9 GB = 72 Gbits \/ 5 Mbps = 14400s = 240 \u03bb\u03b5\u03c0\u03c4\u03ac \u03b3\u03b9\u03b1 \u03b1\u03bc\u03c6\u03cc\u03c4\u03b5\u03c1\u03bf\u03c5\u03c2.';\n resultDiv.textContent = detailedMessage;\n resultDiv.classList.remove('hidden', 'bg-green-200', 'text-green-700');\n resultDiv.classList.add('bg-red-200', 'text-red-700');\n }\n });\n\n document.getElementById('checkBtn2').addEventListener('click', function() {\n const timeInput = document.getElementById('timeHours').value;\n const resultDiv = document.getElementById('result2');\n\n \/\/ \u03a3\u03c9\u03c3\u03c4\u03bf\u03af \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03bc\u03bf\u03af:\n \/\/ 10 TB = 10 \u00d7 1000\u2074 bytes = 10,000,000,000,000 bytes\n \/\/ \u03c3\u03b5 bits = 10,000,000,000,000 \u00d7 8 = 80,000,000,000,000 bits (80 Tbits)\n \/\/ 1 Gbps = 1,000,000,000 bps\n \/\/ \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03c3\u03b5 \u03b4\u03b5\u03c5\u03c4\u03b5\u03c1\u03cc\u03bb\u03b5\u03c0\u03c4\u03b1 = 80,000,000,000,000 \/ 1,000,000,000 = 80,000 s\n \/\/ \u03a7\u03c1\u03cc\u03bd\u03bf\u03c2 \u03c3\u03b5 \u03ce\u03c1\u03b5\u03c2 = 80,000 \/ 3600 = 22.22 \u03ce\u03c1\u03b5\u03c2\n const correctTime = 22.22;\n\n let detailedMessage = '';\n\n if (Math.abs(parseFloat(timeInput) - correctTime) < 0.5) {\n detailedMessage = '\u03a3\u03c5\u03b3\u03c7\u03b1\u03c1\u03b7\u03c4\u03ae\u03c1\u03b9\u03b1! \u0397 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. 10 TB = 80 Tbits \/ 1 Gbps = 80,000s = 22.22 \u03ce\u03c1\u03b5\u03c2.';\n resultDiv.textContent = detailedMessage;\n resultDiv.classList.remove('hidden', 'bg-red-200', 'text-red-700');\n resultDiv.classList.add('bg-green-200', 'text-green-700');\n } else {\n detailedMessage = '\u039b\u03c5\u03c0\u03ac\u03bc\u03b1\u03b9, \u03b7 \u03b1\u03c0\u03ac\u03bd\u03c4\u03b7\u03c3\u03b7 \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c9\u03c3\u03c4\u03ae. \u03a3\u03c5\u03bc\u03b2\u03bf\u03c5\u03bb\u03ae: 10 TB = 10,000 GB = 80,000 Gb (Gigabits) \/ 1 Gbps = 80,000s = 22.22 \u03ce\u03c1\u03b5\u03c2.';\n resultDiv.textContent = detailedMessage;\n resultDiv.classList.remove('hidden', 'bg-green-200', 'text-green-700');\n resultDiv.classList.add('bg-red-200', 'text-red-700');\n }\n });\n\n \/\/ \u03a0\u03c1\u03bf\u03c3\u03b8\u03ae\u03ba\u03b7 event listeners \u03b3\u03b9\u03b1 real-time validation\n document.getElementById('dimitrisTime').addEventListener('input', function() {\n const resultDiv = document.getElementById('result1');\n if (!resultDiv.classList.contains('hidden')) {\n resultDiv.classList.add('hidden');\n }\n });\n\n document.getElementById('eiriniTime').addEventListener('input', function() {\n const resultDiv = document.getElementById('result1');\n if (!resultDiv.classList.contains('hidden')) {\n resultDiv.classList.add('hidden');\n }\n });\n\n document.getElementById('winner').addEventListener('input', function() {\n const resultDiv = document.getElementById('result1');\n if (!resultDiv.classList.contains('hidden')) {\n resultDiv.classList.add('hidden');\n }\n });\n\n document.getElementById('timeHours').addEventListener('input', function() {\n const resultDiv = document.getElementById('result2');\n if (!resultDiv.classList.contains('hidden')) {\n resultDiv.classList.add('hidden');\n }\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u039a\u03cc\u03c3\u03bc\u03bf\u03c2 \u03a8\u03b7\u03c6\u03b9\u03b1\u03ba\u03cc\u03c2 \u039a\u03cc\u03c3\u03bc\u03bf\u03c2 Bits & Bytes \u039c\u03bf\u03bd\u03ac\u03b4\u03b5\u03c2 \u03a5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae\u03c2 \u03a4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1 \u03a4\u03b1 \u0398\u03b5\u03bc\u03ad\u03bb\u03b9\u03b1: Bits & Bytes \u039a\u03ac\u03b8\u03b5 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03af\u03b1 \u03c3\u03c4\u03bf\u03bd \u03c5\u03c0\u03bf\u03bb\u03bf\u03b3\u03b9\u03c3\u03c4\u03ae, \u03b1\u03c0\u03cc \u03ad\u03bd\u03b1 \u03b3\u03c1\u03ac\u03bc\u03bc\u03b1 \u03bc\u03ad\u03c7\u03c1\u03b9 \u03bc\u03b9\u03b1 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7 \u03c4\u03b1\u03b9\u03bd\u03af\u03b1, \u03b1\u03bd\u03b1\u03c0\u03b1\u03c1\u03af\u03c3\u03c4\u03b1\u03c4\u03b1\u03b9 \u03bc\u03b5 bits, \u03b4\u03b7\u03bb\u03b1\u03b4\u03ae 0 \u03ba\u03b1\u03b9 1. \u0391\u03c2 \u03b4\u03bf\u03cd\u03bc\u03b5 \u03c0\u03cc\u03c3\u03b5\u03c2 \u03b4\u03b9\u03b1\u03c6\u03bf\u03c1\u03b5\u03c4\u03b9\u03ba\u03ad\u03c2 \u03c0\u03bb\u03b7\u03c1\u03bf\u03c6\u03bf\u03c1\u03af\u03b5\u03c2 \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 \u03ba\u03c9\u03b4\u03b9\u03ba\u03bf\u03c0\u03bf\u03b9\u03ae\u03c3\u03bf\u03c5\u03bc\u03b5 \u03b1\u03bb\u03bb\u03ac\u03b6\u03bf\u03bd\u03c4\u03b1\u03c2 \u03c4\u03bf\u03bd \u03b1\u03c1\u03b9\u03b8\u03bc\u03cc \u03c4\u03c9\u03bd bits. \u0395\u03c0\u03af\u03bb\u03b5\u03be\u03b5 \u0391\u03c1\u03b9\u03b8\u03bc\u03cc Bits: 3 \u039c\u03b5 3 bits, \u03bc\u03c0\u03bf\u03c1\u03bf\u03cd\u03bc\u03b5 \u03bd\u03b1 […]<\/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":[1,6],"tags":[],"class_list":["post-1373","post","type-post","status-publish","format-standard","hentry","category-uncategorized","category-6","entry"],"_links":{"self":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1373","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=1373"}],"version-history":[{"count":25,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1373\/revisions"}],"predecessor-version":[{"id":1400,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=\/wp\/v2\/posts\/1373\/revisions\/1400"}],"wp:attachment":[{"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gkanamaria.sites.sch.gr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}