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>
  • 2038 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-