Html semibold und bold schauen gleich aus?

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>   
Bild zu Frage
HTML, Webseite, CSS, Mozilla Firefox, Google Chrome, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code, Microsoft Edge
Pyhton Daten updaten?

Hallo

ich bin neu in der Python Welt und habe eine kleine Frage bezüglich arbeiten mit Daten (.txt)

Ich will ein Geldaufnahme Programm schreiben wo ich Daten speichern muss und regelmäßig updaten will.

Zum Programm: Nachdem mein Lohn kam will ich alle meine Kontostände aktualisieren und diese sollen dann gespeichert werden und auf Wunsch aufrufbar sein.

(Erfundenen Zahlen)

Hier ist das Dictunary in der TXT datei:

Bestände = {

"Sparbuch" : 1000,

"Girokonto" : 2000,

"Depot : 3000,

"Bar" : 4000

}

Mein Lohn (3.000€ ) kommt und ich verteile das Geld auf die Konten.

Hier fange ich in der Geldaufnahme.py Datei an:

Sparbuch1 = input("Was ist der Aktuelle stand? ") #verändert um +1.000

Girokonto2 = input("Was ist der Aktuelle stand? ") #verändert um +1.000

Depot3 = input("Was ist der Aktuelle stand? ")

Bar4 = input("Was ist der Aktuelle stand? ") #verändert um +1.000

Jetzt zu meinem ersten Problem:

Wie kann ich die Daten aus der txt datei in meiner .py Datei als Dictunary rüber holen und dann selbständig bearbeiten?

bzw

Die Bestände: Sparbuch/ Girokonto und Bar verändern sich um jeweils 1.000€

wie kann ich das in der Txt datei aktualisieren?

Zu meinem zweiten Problem:

Ich will nur den Bestand des Depotes wissen wie lese ich das gezielt aus der txt datei aus?

zu meinem Dritten Problem:

Ist txt datei das richtige hierfür?

Ich hoffe es war verständlich

danke schonmal im voraus 

HTML, Webseite, Java, JavaScript, Batch, cmd, PHP, Programmiersprache, Python, Webentwicklung, Python 3
HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

  • ...dass Content 1 von Opacity 100 auf 0 geht
  • ...dass Content 1 in Minus Y-Richtung 20px bewegt wird
  • ...dass Content 2 von Opacity 0 auf 100 geht
  • ...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

Animation, Technik, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
Warum nutzen wir alle nicht wieder alte Software?

Jetzt mal Hand aufs Herz. Wir wollen doch alle Geschwindigkeit oder nicht. Warum das also wegwerfen? Man könnte ja zumindest nutzen was schon erreicht wurde.

Ich weiß gleich kommen die folgenden Argumente:

- Es lohne sich nicht, da Hardware günstiger sei:

-> Das stimmt nicht. Milliarden Nutzer * 1500€ sind mehr als die Entwicklungskosten einee optimierung. Außerdem wäre das Wirtschaft und es heißt ja ComputerSCIENCE

- Es sei nicht nötig sich die Mühe zu machen da Computer das heute alles packen:

-> Das sah bei GTA6 jetzt nicht so aus! Und was ist mif skalierungsmöglichkeiten, Multitasking und Massendatenverarbeiting, Ernergiekosten, Überlastungen von Rechensystemen... Umweltschutz und Die Herstellung neuer Computerbauteile?

- Es liegt alles an OOP und Web:

-> Das gibts es schon ewig. Es erklärt nicht so wirklich viel davon.

- Geplante Alterung sei Notwendig da die Firmen sonst Pleite gehen:

-> Den Firmen die das tun platzt das Geld aus den Hosentaschen. Und außerdem geht das auch anders. Man kann auch alle paar Jahre eine Lizens erneuern oder es teuerer machen, aber ich denke nicht das Geld das Problem ist? Selbst wenn - Es wird immer zwischen den Themen herumgeschaukelt. Ich sehe das schon, Ich bin nicht auf den Kopf gefallen.

- Zeit zur Veröffentlichung und Marketing sei wichtiger:

-> Ich sprach nicht von dem Azubi nem Becker seine Webseite erstellt.

- Es war früher nicht schneller:

-> Doch war es erinnere dich bitte

- Die Hardware kann nicht mehr:

-> Doch kann Sie, alte Software beweißt es.

- Linux sei die Lösung

-> Schön wärs. Leider nur leichter aber nicht schneller.

- Treiber kann man nicht schreiben:

-> Wenn man sich nicht drüber unrerhällt kann man auch nichts gewinnen. Nicht versucht ist schon verloren.

Ds wird immer ständig zwischen diesen Punkten herumgereicht.

Hab ich was vergessen? Nun Realtalk mal bitte, es muss sich doch was ändern! Ihr könnt mir nicht erzählen das ihr das so wollt...

Computer, Computerspiele, Software, Windows, Microsoft, Studium, Technik, Linux, CPU, Grafikkarte, Hardware, Elektronik, HTML, programmieren, Business, RAM, Wissenschaft, Gaming, Anwendungsentwicklung, Assembler, developer, Industrie, Informatik, Python, Softwareentwicklung, Treiber, Software Update, Technologie und Wirtschaft
PHP Upload funktioniert auf PC aber nicht aufm Handy?

Hallo,

dieser Code funktioniert nicht auf Handy aber auf dem PC, hat wer tipps?

Clientseite (JavaScript):
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script></head>
<body>
<form id="fileUploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="fileInput" required>
    <button type="button" id="uploadButton">Hochladen</button>
</form>


<script>
    $(document).ready(function(){
        $('#uploadButton').on('click touchend', function(){
            var formData = new FormData($('#fileUploadForm')[0]);
            $.ajax({
                url: 'https://sub-upload.main.de/upload.php',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    console.log(response);
                    alert(response);
                },
                error: function(xhr, status, error){
                    alert(error + xhr.status);
                }
            });
        });
    });


</script>
</body>
</html>
Serverseite (upload.php):
<?php
$targetDirectory = '../uploads/';
header("Access-Control-Allow-Origin: https://sub.main.de");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");
if (!file_exists($targetDirectory)) {
    mkdir($targetDirectory, 0777, true);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $targetFile = $targetDirectory . basename($_FILES['file']['name']);
    if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFile)) {
        echo 'Die Datei wurde erfolgreich hochgeladen.';
    } else {
        echo 'Beim Hochladen der Datei ist ein Fehler aufgetreten.';
    }
} else {
    echo 'Keine Datei zum Hochladen gefunden.';
}
?>
HTML, Webseite, JavaScript, HTML5, Code, Datenbank, JQuery, MySQL, PHP, Programmiersprache, Webdesign, Webentwicklung
HTML Zufallsgenerator funktioniert nicht/keine Ausgabe?

Ich habe mir von ChatGPT einen Zufallsgenerator coden lassen. Jedoch kommt keine Augabe, bitte hilfe.

Das hier ist der Code btw

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Randomizer</title>

<style>

  body {

    font-family: Arial, sans-serif;

    text-align: center;

  }

  .column {

    float: left;

    width: 20%;

    padding: 10px;

  }

  /* Clear floats after the columns */

  .row:after {

    content: "";

    display: table;

    clear: both;

  }

</style>

</head>

<body>

  <h1>Randomizer</h1>

  <form>

    <div class="row">

      <!-- Column 1 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence1">Sentence 1:</label>

        <input type="text" id="sentence1" name="sentence1"><br><br>

        <label for="sentence6">Sentence 6:</label>

        <input type="text" id="sentence6" name="sentence6"><br><br>

        <label for="sentence11">Sentence 11:</label>

        <input type="text" id="sentence11" name="sentence11"><br><br>

        <label for="sentence16">Sentence 16:</label>

        <input type="text" id="sentence16" name="sentence16"><br><br>

        <label for="sentence21">Sentence 21:</label>

        <input type="text" id="sentence21" name="sentence21"><br><br>

      </div>

      <!-- Column 2 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence2">Sentence 2:</label>

        <input type="text" id="sentence2" name="sentence2"><br><br>

        <label for="sentence7">Sentence 7:</label>

        <input type="text" id="sentence7" name="sentence7"><br><br>

        <label for="sentence12">Sentence 12:</label>

        <input type="text" id="sentence12" name="sentence12"><br><br>

        <label for="sentence17">Sentence 17:</label>

        <input type="text" id="sentence17" name="sentence17"><br><br>

        <label for="sentence22">Sentence 22:</label>

        <input type="text" id="sentence22" name="sentence22"><br><br>

      </div>

      <!-- Column 3 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence3">Sentence 3:</label>

        <input type="text" id="sentence3" name="sentence3"><br><br>

        <label for="sentence8">Sentence 8:</label>

        <input type="text" id="sentence8" name="sentence8"><br><br>

        <label for="sentence13">Sentence 13:</label>

        <input type="text" id="sentence13" name="sentence13"><br><br>

        <label for="sentence18">Sentence 18:</label>

        <input type="text" id="sentence18" name="sentence18"><br><br>

        <label for="sentence23">Sentence 23:</label>

        <input type="text" id="sentence23" name="sentence23"><br><br>

      </div>

      <!-- Column 4 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence4">Sentence 4:</label>

        <input type="text" id="sentence4" name="sentence4"><br><br>

        <label for="sentence9">Sentence 9:</label>

        <input type="text" id="sentence9" name="sentence9"><br><br>

        <label for="sentence14">Sentence 14:</label>

        <input type="text" id="sentence14" name="sentence14"><br><br>

        <label for="sentence19">Sentence 19:</label>

        <input type="text" id="sentence19" name="sentence19"><br><br>

        <label for="sentence24">Sentence 24:</label>

        <input type="text" id="sentence24" name="sentence24"><br><br>

      </div>

      <!-- Column 5 -->

      <div class="column">

        <!-- Sentence Inputs -->

        <label for="sentence5">Sentence 5:</label>

        <input type="text" id="sentence5" name="sentence5"><br><br>

        <label for="sentence10">Sentence 10:</label>

        <input type="text" id="sentence10" name="sentence10"><br><br>

        <label for="sentence15">Sentence 15:</label>

        <input type="text" id="sentence15" name="sentence15"><br><br>

        <label for="sentence20">Sentence 20:</label>

        <input type="text" id="sentence20" name="sentence20"><br><br>

        <label for="sentence25">Sentence 25:</label>

        <input type="text" id="sentence25" name="sentence25"><br><br>

      </div>

    </div>

    <button type="button" onclick="generateRandomSentence()">Generate Random Sentence</button><br><br>

    <label for="result">Random Sentence:</label>

    <input type="text" id="result" readonly>

  </form>

  <script>

    function generateRandomSentence() {

      var sentences = [];

      // Get all sentence inputs and push their values into sentences array

      for (var i = 1; i <= 30; i++) {

        var sentence = document.getElementById("sentence" + i).value.trim();

        if (sentence !== "") {

          sentences.push(sentence);

        }

      }

      // If there are sentences in the array, choose one randomly and display it

      if (sentences.length > 0) {

        var randomIndex = Math.floor(Math.random() * sentences.length);

        document.getElementById("result").value = sentences[randomIndex];

      } else {

        document.getElementById("result").value = "No sentences provided";

      }

    }

  </script>

</body>

</html>

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend
Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Frontend, Python 3, Pycharm, Flask
Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Frontend, Python 3, Flask
Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed: 

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Python 3
Warum wird meine Verbindung abgelehnt (Domain)?
Homepage, Online-Shop, HTML, Webseite, Domain, Webentwicklung, Webhosting, Shopify, shopify-store

Meistgelesene Fragen zum Thema HTML