Unatkozó CSS specialista?

Fejlesztés

Csináltam egy egyszerűen hasztnálható IoT készletet. Rengeteg dashboardnak használható tablet szunnyad a fiókok mélyén új funkcióra várva, ezért a kód Android 4.2.2 kompatibilis. Laptopon is nagyjából jó, viszont új telefonokon nem az igazi. Nekem Samsung S5 LineageOS 11 a legmodernebb készülékem, 2k kijelzős cuccokon nem tudom tesztelni, meg a CSS (se) az erősségem. Ha valakinek van kedve, ideje, megfelelő eszközparkja, kijavítgathatná. Kommentek nélkül gzipelve ~2kb, ESP procikra töléletes lenne .js formában.

 

<!DOCTYPE HTML>
<html>
<!--_____________HEAD________________________________________________________________________________-->
<head>
  <title>New Page</title>
  <meta http-equiv="Content-Type" content="text; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
  <style>
  /* Style can go here */
  </style>
</head>
<!--_____________BODY_________________________________________________________________-->
<body>
<script>

(function () {
    var initialWidth = window.innerWidth;

    window.addEventListener('resize', function () {
        // Ha a képernyő mérete megváltozott és az elfordítás okozta
        if (window.innerWidth !== initialWidth) {
            location.reload(); // Frissíti az oldalt
        }
    });
})();



function Slabel1(labelId, x, y, minWidth, fontSize, padding, borderRadius, backgroundColor, textColor, fontFamily, text) {
    if (x === "MOD") {
        var label = document.getElementById(labelId);
        if (label) {
            label.textContent = y; // A y lesz az új szöveg
        }
        return;
    }

    var label = document.createElement('label');
    label.id = labelId;
    label.textContent = text;  // Beállítjuk a szöveget
    label.style.position = 'absolute';
    label.style.left = x;
    label.style.top = y;
    label.style.fontSize = fontSize;
    label.style.minWidth = minWidth;
    label.style.backgroundColor = backgroundColor;
    label.style.color = textColor;
    label.style.borderRadius = borderRadius;
    label.style.fontFamily = fontFamily;
    label.style.padding = padding;
    label.style.textAlign = 'center';
    document.body.appendChild(label);
}




function Sbutton1(xPercent, yPercent, diameter, borderThicknessPercent, baseColor, onClickFunction) {
    // Szín módosító függvény
    function shadeColor(color, percent) {
        var num = parseInt(color.slice(1), 16);
        var r = (num >> 16) + percent;
        var g = ((num >> 8) & 0x00FF) + percent;
        var b = (num & 0x0000FF) + percent;

        r = r < 0 ? 0 : r > 255 ? 255 : r;
        g = g < 0 ? 0 : g > 255 ? 255 : g;
        b = b < 0 ? 0 : b > 255 ? 255 : b;

        return "#" + ("000000" + ((r << 16) | (g << 8) | b).toString(16)).slice(-6);
    }

    var darkerColor = shadeColor(baseColor, -30);
    var lighterColor = shadeColor(baseColor, 30);
    var borderThickness = (diameter * borderThicknessPercent) / 100;

    var screenWidth = window.innerWidth;
    var screenHeight = window.innerHeight;
    var xPos = (screenWidth * xPercent) / 100;
    var yPos = (screenHeight * yPercent) / 100;

    var container = document.createElement('div');
    container.style.position = "absolute";
    container.style.left = xPos + "px";
    container.style.top = yPos + "px";
    container.style.marginTop = -(diameter / 2) + "em"; // Vertikálisan középre igazítja

    var button = document.createElement('div');
    button.style.width = diameter + "em";
    button.style.height = diameter + "em";
    button.style.backgroundColor = baseColor;
    button.style.borderRadius = "50%";
    button.style.border = borderThickness + "em solid " + darkerColor;
    button.style.boxShadow = "inset 0 0 0 0 " + lighterColor + ", 0 0.6em 0.8em rgba(0, 0, 0, 0.3)";
    button.style.cursor = "pointer";
    button.style.transition = "box-shadow 0.2s";
    button.style.boxSizing = "border-box";
    button.style.overflow = "hidden";
    button.style.userSelect = "none";
    button.style.outline = "none";
    button.style.WebkitTapHighlightColor = "transparent";

    var isPressed = false;

    function onTouchStart() {
        if (!isPressed) {
            button.style.boxShadow = "inset 0 0.6em 0.8em " + darkerColor + ", 0 0.3em 0.4em rgba(0, 0, 0, 0.3)";
            isPressed = true;
        }
    }

    function onTouchEnd() {
        button.style.boxShadow = "inset 0 0 0 0 " + lighterColor + ", 0 0.6em 0.8em rgba(0, 0, 0, 0.3)";
        if (isPressed) {
            onClickFunction();
            isPressed = false;
        }
    }

    button.onmousedown = onTouchStart;
    button.onmouseup = button.onmouseleave = onTouchEnd;
    button.ontouchstart = onTouchStart;
    button.ontouchend = onTouchEnd;

    container.appendChild(button);
    document.body.appendChild(container);
}



function Stoggle1(id, x, y, width, height, vertical, borderWidth, borderRadius, borderColor, ballSize, ballColor, onBgColor, offBgColor, onToggleOn, onToggleOff) {
    if (x === "MOD") {
        var toggleContainer = document.getElementById(id);
        if (!toggleContainer) return;

        var isActive = y;
        var vertical = toggleContainer.style.width > toggleContainer.style.height;
        var ball = toggleContainer.querySelector('.toggle-ball');

        var width = parseFloat(toggleContainer.style.width) || 0;
        var ballSize = parseFloat(ball.style.width) || 0;
        var onBgColor = toggleContainer.getAttribute('data-on-bg-color');
        var offBgColor = toggleContainer.getAttribute('data-off-bg-color');

        toggleContainer.setAttribute('data-is-active', isActive.toString());

        if (isActive) {
            toggleContainer.style.backgroundColor = onBgColor;
            if (vertical) {
                ball.style.top = '5%';
            } else {
                ball.style.left = (width - ballSize - 0.5) + 'em';
            }
        } else {
            toggleContainer.style.backgroundColor = offBgColor;
            if (vertical) {
                ball.style.top = (width - ballSize - 0.5) + 'em';
            } else {
                ball.style.left = '5%';
            }
        }
        return;
    }

    var toggleContainer = document.createElement('div');
    toggleContainer.className = 'toggle-container';
    toggleContainer.id = id;
    toggleContainer.setAttribute('data-on-bg-color', onBgColor);
    toggleContainer.setAttribute('data-off-bg-color', offBgColor);
    toggleContainer.setAttribute('data-is-active', 'false');

    var screenWidth = window.innerWidth;
    var xPosition = (screenWidth * (x / 100)) + 'px';
    toggleContainer.style.position = 'absolute';
    toggleContainer.style.left = xPosition;
    toggleContainer.style.top = y + '%';
    toggleContainer.style.width = vertical ? height + 'em' : width + 'em';
    toggleContainer.style.height = vertical ? width + 'em' : height + 'em';
    toggleContainer.style.borderRadius = borderRadius + 'em';
    toggleContainer.style.backgroundColor = offBgColor;
    toggleContainer.style.border = borderWidth + 'px solid ' + borderColor;
    toggleContainer.style.cursor = 'pointer';
    toggleContainer.style.overflow = 'hidden';
    toggleContainer.style.userSelect = 'none';
    toggleContainer.style.outline = 'none';
    toggleContainer.style.WebkitTapHighlightColor = 'transparent';

    var toggleBall = document.createElement('div');
    toggleBall.className = 'toggle-ball';
    toggleBall.style.position = 'absolute';
    toggleBall.style.width = ballSize + 'em';
    toggleBall.style.height = ballSize + 'em';
    toggleBall.style.backgroundColor = ballColor;
    toggleBall.style.borderRadius = '50%';

    if (vertical) {
        toggleBall.style.left = (height / 2 - ballSize / 2) + 'em';
        toggleBall.style.top = (width - ballSize - 0.5) + 'em';
    } else {
        toggleBall.style.top = (height / 2 - ballSize / 2) + 'em';
        toggleBall.style.left = '5%';
    }
    toggleContainer.appendChild(toggleBall);

    var startPos = 0;
    var isSwiping = false;

    function handleTouchStart(event) {
        startPos = vertical ? event.touches[0].pageY : event.touches[0].pageX;
        isSwiping = true;
    }

    function handleTouchMove(event) {
        if (!isSwiping) return;

        var movePos = vertical ? event.touches[0].pageY : event.touches[0].pageX;
        var delta = movePos - startPos;

        if (Math.abs(delta) > 50) { // Növelve a toleranciát 50 pixelesre
            isSwiping = false;
            toggleContainer.setAttribute('data-is-active', vertical ? (delta < 0 ? 'true' : 'false') : (delta > 0 ? 'true' : 'false'));
            updateToggleState();
        }
    }

    function handleTouchEnd() {
        isSwiping = false;
    }

    function handleMouseDown(event) {
        startPos = vertical ? event.clientY : event.clientX;
        isSwiping = true;
    }

    function handleMouseMove(event) {
        if (!isSwiping) return;

        var movePos = vertical ? event.clientY : event.clientX;
        var delta = movePos - startPos;

        if (Math.abs(delta) > 50) { // Növelve a toleranciát 50 pixelesre
            isSwiping = false;
            toggleContainer.setAttribute('data-is-active', vertical ? (delta < 0 ? 'true' : 'false') : (delta > 0 ? 'true' : 'false'));
            updateToggleState();
        }
    }

    function handleMouseUp() {
        isSwiping = false;
    }

    function updateToggleState() {
        var isActive = toggleContainer.getAttribute('data-is-active') === 'true';
        if (isActive) {
            toggleContainer.style.backgroundColor = onBgColor;
            if (vertical) {
                toggleBall.style.top = '5%';
            } else {
                toggleBall.style.left = (width - ballSize - 0.5) + 'em';
            }
            if (onToggleOn) onToggleOn();
        } else {
            toggleContainer.style.backgroundColor = offBgColor;
            if (vertical) {
                toggleBall.style.top = (width - ballSize - 0.5) + 'em';
            } else {
                toggleBall.style.left = '5%';
            }
            if (onToggleOff) onToggleOff();
        }
    }

    toggleContainer.addEventListener('selectstart', function (event) {
        event.preventDefault();
    });

    toggleContainer.onmousedown = handleMouseDown;
    toggleContainer.onmousemove = handleMouseMove;
    toggleContainer.onmouseup = handleMouseUp;
    toggleContainer.ontouchstart = handleTouchStart;
    toggleContainer.ontouchmove = handleTouchMove;
    toggleContainer.ontouchend = handleTouchEnd;

    toggleContainer.onclick = function (event) {
        event.preventDefault();
        toggleContainer.blur();
        var isActive = toggleContainer.getAttribute('data-is-active') === 'true';
        toggleContainer.setAttribute('data-is-active', (!isActive).toString());
        updateToggleState();
    };

    document.body.appendChild(toggleContainer);
}








function Srange1(id, x, y, height, width, isVertical, borderWidth, borderRadius, borderColor, knob, knobrad, knobColor, trackColor, min, max, onChange) {
    if (!isVertical) { width ^= height; height ^= width; width ^= height; }
    if (x === "MOD") {
        var sliderContainer = document.getElementById(id);
        if (!sliderContainer) return; // Ha nem található az elem, kilép

        var sliderKnob = sliderContainer.querySelector('div');
        var value = parseFloat(y);
        if (isNaN(value)) return; // Érvénytelen érték esetén kilép

        var min = parseFloat(sliderContainer.getAttribute('data-min')) || 0;
        var max = parseFloat(sliderContainer.getAttribute('data-max')) || 100;
        var percentage = ((value - min) / (max - min)) * 100;
        percentage = Math.max(0, Math.min(100, percentage));

        if (sliderContainer.style.flexDirection === 'column') {
            sliderKnob.style.top = (100 - percentage) + '%'; // Függőleges esetén
        } else {
            sliderKnob.style.left = percentage + '%'; // Vízszintes esetén
        }
        return;
    }

    // Eredeti létrehozó logika
    var sliderContainer = document.createElement('div');
    sliderContainer.id = id;
    sliderContainer.setAttribute('data-min', min);
    sliderContainer.setAttribute('data-max', max);
    sliderContainer.style.position = 'absolute';
    sliderContainer.style.left = x + '%';
    sliderContainer.style.top = y + '%';
    sliderContainer.style.height = isVertical ? height + 'em' : 'auto';  // Ha függőleges, a magasságot használjuk
    sliderContainer.style.width = isVertical ? 'auto' : width + 'em';  // Ha vízszintes, a szélességet használjuk
    sliderContainer.style.backgroundColor = trackColor;
    sliderContainer.style.border = borderWidth + 'px solid ' + borderColor;
    sliderContainer.style.borderRadius = borderRadius + 'px';
    sliderContainer.style.overflow = 'hidden';
    sliderContainer.style.display = 'flex';
    sliderContainer.style.flexDirection = isVertical ? 'column' : 'row';
    sliderContainer.style.justifyContent = 'flex-start';
    sliderContainer.style.padding = '0.2%';

    // Knob stílus beállítása
    var sliderKnob = document.createElement('div');
    sliderKnob.style.position = 'relative';
    sliderKnob.style.margin = isVertical ? '0 auto' : 'auto 0';
    sliderKnob.style.height = isVertical ? knob + 'em' : (height * 0.9) + 'em';
    sliderKnob.style.width = isVertical ? (width * 0.9) + 'em' : knob + 'em';
    sliderKnob.style.backgroundColor = knobColor;
    sliderKnob.style.borderRadius = knobrad + 'px';
    sliderKnob.style.cursor = 'pointer';
    sliderKnob.style[isVertical ? 'top' : 'left'] = isVertical 
        ? (100 - (knob / height) * 100) + '%'  // Függőleges esetén
        : '0%';  // Vízszintesen balra kezd
    sliderContainer.appendChild(sliderKnob);

    var isDragging = false;
    var startCoord, startPos;

    function onDragStart(e) {
        isDragging = true;
        startCoord = isVertical ? (e.touches ? e.touches[0].clientY : e.clientY) : (e.touches ? e.touches[0].clientX : e.clientX);
        startPos = parseFloat(sliderKnob.style[isVertical ? 'top' : 'left'] || '0');
        e.preventDefault();
    }

    function onDragMove(e) {
        if (!isDragging) return;
        e.preventDefault();
        var delta = (isVertical ? (e.touches ? e.touches[0].clientY : e.clientY) : (e.touches ? e.touches[0].clientX : e.clientX)) - startCoord;
        var containerSize = isVertical ? sliderContainer.offsetHeight : sliderContainer.offsetWidth;
        var knobSize = isVertical ? sliderKnob.offsetHeight : sliderKnob.offsetWidth;
        var newPos = Math.min(
            Math.max(startPos + (delta / containerSize) * 100, 0),
            100 - (knobSize / containerSize) * 100
        );
        sliderKnob.style[isVertical ? 'top' : 'left'] = newPos + '%';
    }

    function onDragEnd() {
        if (!isDragging) return;
        isDragging = false;
        var containerSize = isVertical ? sliderContainer.offsetHeight : sliderContainer.offsetWidth;
        var knobSize = isVertical ? sliderKnob.offsetHeight : sliderKnob.offsetWidth;
        var positionPercentage = parseFloat(sliderKnob.style[isVertical ? 'top' : 'left'] || '0') / (100 - (knobSize / containerSize) * 100);
        var value = isVertical
            ? Math.round(min + (max - min) * (1 - positionPercentage))
            : Math.round(min + (max - min) * positionPercentage);
        if (onChange && typeof onChange === 'function') {
            onChange(value);
        }
    }

    sliderKnob.addEventListener('mousedown', onDragStart);
    document.addEventListener('mousemove', onDragMove);
    document.addEventListener('mouseup', onDragEnd);

    sliderKnob.addEventListener('touchstart', onDragStart);
    document.addEventListener('touchmove', onDragMove);
    document.addEventListener('touchend', onDragEnd);

    document.body.appendChild(sliderContainer);
}


function Slamp1(id, x, y, diameter, color) {
    // Függvény a szín sötétítésére
    function darkenColor(color, percent) {
        if (!color || color[0] !== '#' || color.length !== 7) {
            console.error("Hibás színkód: ", color);
            return "#000000"; // Alapértelmezett sötét szín
        }

        var num = parseInt(color.slice(1), 16);
        var amt = Math.round(2.55 * percent);
        var r = (num >> 16) - amt;
        var g = (num >> 8 & 0x00FF) - amt;
        var b = (num & 0x0000FF) - amt;
        r = r > 0 ? r : 0;
        g = g > 0 ? g : 0;
        b = b > 0 ? b : 0;
        return "#" + (0x1000000 + r * 0x10000 + g * 0x100 + b).toString(16).slice(1);
    }

    // Ha az `x` "MOD", meglévő lámpát kezelünk
    if (x === "MOD") {
        var existingLight = document.getElementById(id);
        if (existingLight) {
            if (y === true) {
                existingLight.classList.add('light-on'); // Lámpa bekapcsolása
            } else {
                existingLight.classList.remove('light-on'); // Lámpa kikapcsolása
            }
        } else {
            console.error("A megadott ID-jű lámpa nem található: " + id);
        }
        return; // Nincs további teendő
    }

    // Ellenőrizni kell, hogy a kötelező paraméterek érvényesek-e
    if (!id || typeof x !== "number" || typeof y !== "number" || !diameter || !color) {
        console.error("Hiányzó vagy hibás paraméterek a lámpa létrehozásához.");
        return;
    }

    var darkColor = darkenColor(color, 80); // Nagyon sötét szín kikapcsolt állapothoz

    // Stílusok létrehozása
    var style = document.createElement('style');
    style.innerHTML = 
        ".light-container-" + id + " {" +
            "position: absolute;" +
            "top: " + y + "%;" +
            "left: " + x + "%;" +
            "transform: translate(-50%, -50%);" +
            "pointer-events: none;" + // Az elemet ne lehessen kattintással elérni
        "}" +
        ".light-" + id + " {" +
            "width: " + diameter + "em;" +
            "height: " + diameter + "em;" +
            "border-radius: 50%;" +
            "border: 1px solid " + color + ";" +
            "background-color: " + darkColor + ";" +
            "-webkit-transition: box-shadow 0.5s, background-color 0.5s;" +
            "-moz-transition: box-shadow 0.5s, background-color 0.5s;" +
            "-ms-transition: box-shadow 0.5s, background-color 0.5s;" +
            "transition: box-shadow 0.5s, background-color 0.5s;" +
        "}" +
        ".light-" + id + ".light-on {" +
            "box-shadow: 0 0 20px " + color + ", " +
                        "0 0 30px " + color + ", " +
                        "0 0 40px " + color + ", " +
                        "0 0 50px " + color + ", " +
                        "0 0 60px " + color + ", " +
                        "0 0 70px " + color + ", " +
                        "0 0 80px " + color + ";" +
            "background-color: " + color + ";" +
        "}";
    document.head.appendChild(style);

    // Létrehozzuk a container elemet
    var container = document.createElement('div');
    container.className = 'light-container-' + id;

    // Létrehozzuk a lámpa elemet
    var light = document.createElement('div');
    light.className = 'light-' + id;
    light.id = id;

    // Hozzáadjuk a lámpát a containerhez
    container.appendChild(light);

    // Hozzáadjuk a container-t a body-hoz
    document.body.appendChild(container);
}



//----------------------Slabel------------------------------------------------------------------------------------------------------

Slabel1 (
  "label1",					// ID
  "10%", "10%",					// x pos, y pos
  "0%", "1em",					// minimal width, height,
  "0.3em", "0em",				// padding, radius
  "lightgreen", "black",			// background color, text color
  "Arial",					// font family
  "Example Label 1"				// text
  );

Slabel1 (
  "label2",					// ID
  "50%", "10%",					// x pos, y pos
  "0%", "1em",					// minimal width, height,
  "0.3em", "0em",				// padding, radius
  "lightgreen", "black",			// background color, text color
  "Arial",					// font family
  "Example Label 2"				// text
  );

Slabel1 ("label1", "MOD", "New Label 1");	// change text
Slabel1 ("label2", "MOD", "New Label 2");	// change text


//----------------------Sbutton ------------------------------------------------------------------------------------------------------

Sbutton1 (
 10, 25,						// x pos (%), y pos (%)
 4, 10,							// átmérő (%), gyűrű (átmérőhöz képest %)
 "lightblue",						// color
 function() { console.log("Button1 clicked!"); });	// push command

Sbutton1 (
 50, 25,						// x pos (%), y pos (%)
 4, 10,							// átmérő (%), gyűrű (átmérőhöz képest %)
 "lightblue",						// color
 function() { console.log("Button2 clicked!"); });	// push command


//----------------------Stoggle------------------------------------------------------------------------------------------------------

Stoggle1 (
  "toggle1",					// ID
  10, 35,					// x pos (%), y pos (%)
  10, 3, false,					// width (em), height (em), fekvő/álló
  10, 10, "black",				// border size (px), radius (px), color 
  3, "blue",					// ballSize (em), ballColor
  "green", "red",				// on / off color
  function() { console.log("Toggle1 ON"); },	// on command
  function() { console.log("Toggle1 OFF"); }	// off command
  );

Stoggle1 (
  "toggle2",					// ID
  50, 35,					// x pos (%), y pos (%)
  10, 3, true,					// width (em), height (em), fekvő/álló 
  10, 10, "black",				// border size (px), radius (px), color
  3, "blue",					// ballSize (em), ballColor
  "green", "red",				// on / off color
  function() { console.log("Toggle2 ON"); },	// on command
  function() { console.log("Toggle2 OFF"); }	// off command
  );

Stoggle1 ("toggle1", "MOD", true);		// switch on
Stoggle1 ("toggle2", "MOD", true);		// switch on


//----------------------Srange------------------------------------------------------------------------------------------------------

Srange1 (
  "slider1",						// ID
   10, 65,						// x pos (%), y pos (%)
   10, 3, false, 					// width (em), height (em), fekvő/álló 
   4, 20, "gray",					// border size (px), border radius (px), border color
   2, 10, "blue", "yellow",				// knob width (em), knob radius (px), knob color, trackColor 
   0, 100,						// minimal value, maximal value (number)
  function(value) { console.log("Slider1: " + value); }	// változáskor végrehahtja
  );

Srange1 (
  "slider2",						// ID
   50, 65,						// x pos (%), y pos (%)
   10, 3, true, 					// width (em), height (em), fekvő/álló 
   4, 0, "gray",					// border size (px), border radius (px), border color
   2, 10, "red", "green",				// knob width (em), knob radius (px), knob color, trackColor 
   0, 100,						// minimal value, maximal value (number)
  function(value) { console.log("Slider2: " + value); }	// változáskor végrehahtja
  );

Srange1 ("slider1", "MOD", 25);				// set value
Srange1 ("slider2", "MOD", 75);				// set value


//----------------------Sled--------------------------------------------------------------------------------------------------------

Slamp1 (
  "lamp1",		// ID
   80, 30,		// x pos (%), y pos (%)
   2, "#00ff00"		// átmérő (em), color
   );

Slamp1 (
  "lamp2",		// ID
   80, 60,		// x pos (%), y pos (%)
   2, "#ff0000"		// átmérő (em), color
   );

Slamp1 ("lamp1", "MOD", true);
Slamp1 ("lamp2", "MOD", true);

//----------------------------------------------------------------------------------------------------------------------------------

</script>
</body>
</html>
  • 2793 megtekintés

( hrgy84 | 2024. 12. 19., cs – 09:13 )

Én messze vagyok a CSS-expertségtől, viszont valamennyit értek a programozáshoz.

function Stoggle1(id, x, y, width, height, vertical, borderWidth, borderRadius, borderColor, ballSize, ballColor, onBgColor, offBgColor, onToggleOn, onToggleOff) {
   
// ... snip ...
        var width = parseFloat(toggleContainer.style.width) || 0;

Itt szerintem változó-árnyékolás vagy elfedés történik. Ráadásul pár sorral feljebb isActive-ra használod az y paramétert. Nem tudom, hogy ezt a kódot te írtad-e vagy az AI, nem is szeretnék ítélkezni, de azt gondolom, hogy jó lenne a kódot átnézetni valakivel, aki ért is a programozáshoz, még ha a JS-hez nem is. Mert úgy, hogy csak kvázi laikusként (a JS nagyon nem az én világom....) belenéztem a kódba, találtam két helyet is a javításra, egy expert szemlélő még többet találhat.

Blog | @hron84

valahol egy üzemeltetőmaci most mérgesen toppant a lábával 

via @snq-

Ha LLM-el generáltatod, kísérleteztél azzal hogy a kapott kód javítása helyett a prompt-ot teszed pontosabbá? Példákat mutatsz, illetve a kontextusban explicit sorolod fel azokat a peremfeltételeket (böngésző kompatibilitás, tervezési minta, modulok stb) amiknek a generált kód meg kellene feleljen? Nem tudom, a chatgpt free/fizetős verziók mekkora promptot engednek, de sonnet 3.5 200.000 token prompt ablakot (~ szó, nem az, de nagyon durva közelítésben) lehetővé tesz, mármint a modell, az a weblap amin keresztül igénybeveszed nem tudom melyik mennyit korlátoz, de api-n ennyi a lehetséges maximum. 

( dotnetlinux | 2024. 12. 19., cs – 18:45 )

Joggal megkaphatom, hogy nem a kérdésre válaszolok, de nem tudom magamban tartani. Ekkora méretű kód esetén érdemes valamilyen framework-ben gondolkodni: react vagy svelte, esetleg angular. A Tiéd nem design kód, inkább "üzleti", azaz beviteli mezős, ahelyett hogy webshop lenne. Ezekre való a komponens alapú fejlesztés, ahol a HTML-t nem string összefűzéssel és/vagy elemi html elementek dekorálásával oldjuk meg.

Ha ESP-n szeretnéd kiszolgálni egy framework által generált SPA-t, akkor ez még segíthet a végén: https://github.com/BCsabaEngine/svelteesp32

Kezdőként szerintem jobb, ha alap JS-sel csinálja, vagy valami jQuerytől nem komplexebb dologgal. És nem csak azért, mert így jobban megtanulja a JS-t, hanem azért is, mert a React és az Angular azért feltételez valamennyi JS tudást, nagyon sokmindent csak akkor értesz meg, ha tudod, hogy a framework mit csinál a háttérben.

Azon felül: ez egyáltalán nem nagy kód. Ha bármit fejlesztenék rajta, akkor az, hogy fájlokba kiszervezném, és esetleg valami objektumra kötném rá a függvényeket, OOP-t imitálva, de ekkora kódhoz még nagyon nem kell Angular, React meg aztán pláne nem.

Blog | @hron84

valahol egy üzemeltetőmaci most mérgesen toppant a lábával 

via @snq-

Neked aztán fura humorod van... Szerintem nem CSS dokumentációt keresett, hanem valakit, aki esetleg ért is a CSS-hez meg mondjuk van is szépérzéke. A kettő közül csak az egyik tanulható.

Blog | @hron84

valahol egy üzemeltetőmaci most mérgesen toppant a lábával 

via @snq-

( nagyjoco | 2024. 12. 20., p – 09:42 )

Szép páldája ez a thread annak, mire képes az LLM, ha valós feladattal kerül szembe. 

( gabrielakos v | 2024. 12. 20., p – 12:30 )

Nem lehetne egy kicsit modularizálni és felrakni githubra?

Gábriel Ákos

Tudom okos, de frankón nem. Feldobtam ezt a cuccot az asszony szerverére, itt megosztottam, utána lementem a kocsmába. Fél 11 fele amikor hazaértem mondta az asszony hogy a notiján ki-be kapcsolgatott a kamera ledje filmnézés közben, többször percekig. A szervere ugyanazon a routeren van mint a laptopja (C2D T9300, de szerintem az illetékesek ezt már úgy is tudják). WinFos, log esélytelen. Tényleg nem kamuból írtam. Jelzem, ezeken a régi fosokon még nem lehet a kamera ledjét külön vezérelni.

https://www.esp8266.org/

Avagy miért is fontos a szerverek megfelelő védelme, még ha otthon is vannak, és miért nem rakunk ki semmilyen otthoni használatra szánt kódot internetről elérhető módon. Ha ez egy belso IoT rendszer vezérlésére való, semmi keresnivalója az interneten elérhető módon.

Ugyanitt: zárd be az összes AI ablakot, és tanulj meg kódolni. Valószínűleg azért tudták rootig verni az asszonyod szerverét, mert a ChatGPT nem ért a programozáshoz, a kódgenerálás ugyanis nem programozás. Ahhoz ember tud érteni és ember tudja átlátni az összes olyan faktort, ami probléma lehet. Főleg nem lehet képes megfelelően konfigurálni a szerveredet látatlanban.

Nem geci akarok lenni, komolyan. De a programozás nem véletlenül egy szakma, a üzemeltető meg egy másik. A ChatGPT és a többi AI csak és kizárólagosan abból tud építkezni, amit elmondasz neki. Ha nem mondod el neki, hogy - például - te egy Ubuntu 18.10-re akarod felrakni úgy, hogy root-ként fut az alkalmazás, akkor nem fog beépíteni extra védelmeket (egy másik kérdés, hogy kód oldalról mit és mennyire lehet védeni). Az, hogy erre gondoljál, az nem feltétlenül kell, hogy magától jöjjön - ezért mondom, hogy ezt tanulni szükséges.

De igazából a legjobb, ha egy jó időre elfelejted az AI-t. Először értsd meg, mit csinál a kódod, értsd meg, hogy hogyan működin a választott programnyelv. Igen, ez unalmas, és rettenetesen időigényes. De csak így tudod garantálni, hogy ne tudják "ki-be kapcsolgatni az asszony gépén a kamerát".

Teljes szívemből kívánom, hogy ez egy sikeres projekt legyen - te pedig tanulj a hibáidból. Mert az, hogy kapcsolgatni tudták a kamerát, legalább annyira a te felelősséged is. 

Blog | @hron84

valahol egy üzemeltetőmaci most mérgesen toppant a lábával 

via @snq-

Egyszerűbb is lehet, ha valami videóchat programot buherált meg, és a hacker oldalán nem volt tiltva a kamerakép, akkor ezek a progik automatikusan oda-vissza küldik a képet, nem kérnek külön engedélyt. Ha csak a hívásfogadást pöckölöd ki, becsúszhatik ilyen.

Blog | @hron84

valahol egy üzemeltetőmaci most mérgesen toppant a lábával 

via @snq-

Az elmúlt egy évből légyszíves idézz be egy építő jellegű hozzászólásodat, vagy egy technikai jellegű kérdésre egy jó válaszodat. Erre nincs időm kikeresni, meg nem vagyok csáknorrisz. Ha nem sikerül, megkérlek, hogy messzire kerülj el a továbbiakban. Jó munkát a feladathoz.

https://www.esp8266.org/

ChatGPT

 

Írj egy scifi novellát a neutrínó káros hatásáról a társadalomra. Ne fogd vissza magad, szókimondó legyen.

 

Címe: A Semmi Árnyéka

Az első neutrínó-tornádó 2087 decemberében csapott le Tokióra. Nem voltak előjelek. Nem volt szél, nem volt eső. Csak egy hirtelen, torokszorító csend, majd a város egésze megborzongott – mintha egy ismeretlen hatalom kitépte volna belőle a lelket.

A kormány először technikai hibának nyilvánította: „részecske-detektor túlérzékenység”, „valószínűsíthető szoftveres interferencia”. Később persze kiderült, hogy a neutrínók – ezek a nyomorult, anyagon keresztülszökellő, eddig ártalmatlannak hitt részecskék – sosem voltak semlegesek. Csak eddig nem értettük őket. Most meg késő.

A Neutrínó-Szivárgás – így nevezték el a jelenséget, mikor először bizonyítást nyert, hogy a neutrínók valójában információt hordoznak. De nem akármilyet. Az univerzum „háttéradatát”, egyfajta kozmikus emlékezetet. A csillagok nemcsak fényt sugároznak – hanem múltakat. Olyan elbaszott történelmi töredékeket, amelyek nem a mi időnkhöz tartoznak, hanem valami máséhoz. És mikor ezek a múltak átfolynak rajtunk... a valóság megbicsaklik.

Az első tünetek? Életidegen emlékek. Álmatlanság, nyelvcsere álmokban, rémálmok más bolygók háborúiról. A gyerekek elkezdtek olyan nyelveken beszélni, amit senki sem ismert – de a másik oldalon, Ausztráliában megértették őket. Új térképek jelentek meg a fejünkben. Olyan helyekről, amik nem léteznek. Vagy mégis?

A társadalom? Kiborult. Nem úgy, ahogy a filmekben. Nem voltak zombik, se repkedő autók lázadása. Hanem valami sokkal undorítóbb: széthullott az egyetértés. Már semmiben nem tudtunk közös nevezőre jutni. Egy kormányhatározat annyi értelmet hordozott, mint egy hányásban úszó könyvoldal. Mert az emberek már nem egy valóságban éltek. Mindenki másik verziót érzékelt a jelenből, attól függően, milyen szögben kapta az agya a neutrínó-adatot.

Az internet? Csak rontott a helyzeten. Algoritmusok próbálták szűrni a neutrínóval fertőzött gondolatokat, de az MI-k is begajdultak. Egyszerűen nem tudták megkülönböztetni a valódit a kozmikus hazugságtól. Hamarabb hittünk egy migráns szaturnuszi rabszolgalázadásban, mint abban, hogy este nyolckor még van nyitva bolt.

A vallások újraéledtek. Nem úgy, mint régen. Ezek már nem hirdettek megváltást. Csak túlélést. A leggyorsabban terjedő szekta szerint például minden egyes neutrínó bűn. És a test csak akkor lehet tiszta, ha zárt, föld alatti ólomszobában él. Több millióan vonultak le. Tízezer ember halt meg csak azért, mert elhitték, hogy a Hold valójában neutrínó-generátor, amit az ősi kígyóisten aktivált.

A tudósok egy része öngyilkos lett, másik része megőrült. A maradék elkezdte gyártani a Neutrínó Fülhallgatót – egy agyra tapadó szenzort, ami a valóságból kiszűrte a kozmikus zörejt. De ez is csak egy újabb dogma lett. Ők voltak a „Valósághívők”. Az emberek, akik szerint csak az számít, amit a szűrőn keresztül érzékelsz. Mintha egy Instagram-filter mögött élnél örökké.

És akkor jött a nagy felismerés. Hogy ez nem hiba. Nem büntetés. Hanem tükör. A neutrínók nem hoznak semmit. Csak felerősítik azt, ami bennünk már ott van.

A zűrzavart. A hazugságot. A ki nem mondott félelmet, hogy az igazság nem abszolút, hanem elbaszottul relatív. Hogy minden, amit gondolunk, csak egy helyi minimum egy sokdimenziós realitásban, amire soha nem fogunk rálátni.

A társadalom? Már nincs olyan. Vannak valóságtömbök. Idegennyelvű falvak, álomemlékek alapján épült városok, és emberek, akik szerint ők nem is emberek. Csak karakterek egy neutrínó-szimulációban.

De tudod, mi a legszebb az egészben?

Hogy lehet, igazuk van.

https://www.esp8266.org/