[KI] Der "das-muss-ich-euch-zeigen"-Thread

Uncoolman · Beitrag von **Uncoolman** » 26.03.2026, 12:28

Weil ich über dem Turm kreise. Und da es eine Cessna ist, ist es nicht größer. Ein Airbus wäre größer, aber mit dem würde ich mit 800 km/h eine Schleife von 10 Kilometern in 5000 Metern Höhe drehen... Da sähe ich nix von der Stadt.
Außerdem kann ich den Airbus noch nicht bedienen (räusper)...
Sonst fliege ich einen Heli. Mit dem kann man alles genau anschauen.

Werner1612 · Beitrag von **Werner1612** » 26.03.2026, 23:22

@uncoolman: Es freut mich, dass Du Freiburg kennst. Freiburg ist als Studiumort sehr beliebt, wir haben hier ca. 30.000 eingeschiebene Studenten. Leider macht sich das hier sehr stark auf die Mieten aus.

Die Bilder, die vom FS stammen, sind gar nicht mal so schlecht. Das eine Münsterbild wirkt etwas "nackt", die Szene künstlich, aber für FS ok.
Die Bilder mit dem Heli und der Chesna wirken schon realer. Beim Helibild kann man auch unten jede Menge Details sehen, wie die neue Uni-Bibliothek, das Theater und weiter oben geradeaus sogar die winzigen Überreste des Colombi-Parks. Das Schwabentor auf Deinem Bild kommt ganz gut, wenn auch die seitlichen Sandsteine in der Fasade schwammig wirken. Aber die Szene stimmt.
Da ich hier nichts anderes habe, habe ich auf dem Handy Gemini ebenfalls diese Aufgaben gestellt. Das Ergebnis war unterschiedlich, von "Fantasie" bis "stimmt so".
Hier drei Beispiele:
Ein historisches "Bild" von Gemini der heutigen "Kaiser-Joseph Str." mit dem Martinstor. Das stimmt soweit im Dargestellten.

Bild

Jetzt ins Hier und Heute. Leider stimmt hier einiges nicht. Die Straße ist stark verkürzt. Douglas, rechts, befindet sich minestens 100 Meter weiter hinten und liegt auch nicht gegenüber Kaufhof Galeria sondern Karstadt. Zudem ist die Häuserfront rechts komplett geschlossen, was nicht stimmt, denn eigentlich fehlt hier die Kreuzung in die Salzstr. und Bertholdstr. Die Kreuzung fehlt komplett, auch der Bertholdsbrunnen in der Mitte der Kaiser-Joseph Str. ist nicht vorhanden. Das Martinstor selbst stimmt jedoch.

Bild

So, und jetzt noch mit Gemini zum Schwabentor. Hier stimmt eigentlich alles, die Höhe der Straße, die Gebäude, soweit eigentlich alles OK. Die Straßenbahn im Bild ist eine der wenigen historischen Straßenbahnen, die noch erhalten geblieben sind. Der "Verein der Freunde der Straßenbahn" hegt und pflegt diese Modelle und schickt sie als Attraktion fünf oder sechsmal auf die Strecke. Wird von Freiburgern und Touristen gut angenommen.

Bild

LG Werner

Gerrit · Beitrag von **Gerrit** » 27.03.2026, 03:24

Das . ist meine Startseite im Browser auch von Ki erstellt

Bild

Uncoolman · Beitrag von **Uncoolman** » 27.03.2026, 14:36

Ist das reines HTML (mit CSS natürlich)?

Gerrit · Beitrag von **Gerrit** » 27.03.2026, 20:50

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Recherche-Startseite</title>

<style>
  :root{
    --bg:#ffffff;
    --fg:#0f172a;
    --muted:#475569;
    --primary:#0b66d3;
    --primary-hover:#0a57b4;
    --danger:#e11d48;
    --danger-hover:#be123c;
    --ring:#93c5fd;
    --input-bg:#ffffff;
    --input-border:#e2e8f0;
    --shadow:0 1px 2px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0b1220;
      --fg:#e5e7eb;
      --muted:#94a3b8;
      --primary:#60a5fa;
      --primary-hover:#3b82f6;
      --danger:#fb7185;
      --danger-hover:#f43f5e;
      --ring:#60a5fa;
      --input-bg:#0f172a;
      --input-border:#1f2937;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);
    }
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    background:var(--bg);
    color:var(--fg);
    line-height:1.4;
    padding:28px 16px 48px;
    display:flex; justify-content:center;
  }
  .wrap{width:100%; max-width:920px}

  h1{font-size:28px; margin:0 0 8px}
  p.lead{color:var(--muted); margin:0 0 24px}

  /* Uhr/Datum-Karte */
  .card{
    display:flex; align-items:center; gap:14px;
    padding:14px 16px; border:1px solid var(--input-border);
    background:var(--input-bg); border-radius:16px;
    box-shadow: var(--shadow);
    min-height:72px;
    margin-bottom:22px;
  }
  .card h3{ margin:0 0 4px; font-size:16px; color:var(--muted); font-weight:600; }
  .card strong{font-size:18px}
  .mono{font-variant-numeric: tabular-nums}

  .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  h2{ font-size:18px; font-weight:600; margin:0 0 10px; color:var(--muted); }
  hr{ border:none; height:1px; background:var(--input-border); margin:20px 0; }

  /* Suchleiste */
  .search-input{
    flex:1 1 460px;
    height:48px;
    padding:0 16px;
    border:1px solid var(--input-border);
    background:var(--input-bg);
    border-radius:9999px;
    font-size:16px;
    outline:none;
    box-shadow: var(--shadow);
    transition: box-shadow .15s ease, border-color .15s ease;
    color:#0f172a;
    caret-color:currentColor;
  }
  .search-input::placeholder{ color:#64748b; opacity:1; }
  .search-input:focus-visible{
    border-color:transparent;
    box-shadow: 0 0 0 3px var(--ring), var(--shadow);
  }
  @media (prefers-color-scheme: dark){
    .search-input{ color:#ffffff; }
    .search-input::placeholder{ color:#cbd5e1; opacity:.9; }
  }

  /* Buttons */
  .btn{
    height:48px;
    padding:0 18px;
    border:none;
    border-radius:9999px;
    font-size:15px;
    cursor:pointer;
    transition:transform .06s ease, filter .15s ease, background-color .15s ease;
    will-change:transform;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-primary{ background:var(--primary); color:#fff; }
  .btn-primary:hover{ background:var(--primary-hover); filter:brightness(1.02); }
  .btn-danger{ background:var(--danger); color:#fff; }
  .btn-danger:hover{ background:var(--danger-hover); filter:brightness(1.02); }
  .btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
</style>
</head>
<body>
  <div class="wrap">
    <h1>Suche</h1>
    <p class="lead">Wiki, Google und YouTube – schnell durchsuchen. Oben Uhr & Datum.</p>

    <!-- Uhr & Datum -->
    <section class="card" aria-labelledby="clock-label">
      <div style="font-size:32px; line-height:1;">🕒</div>
      <div>
        <h3 id="clock-label">Datum & Uhrzeit</h3>
        <strong id="clockLine" class="mono">–:–:–</strong><br>
        <span id="dateLine" class="mono" style="color:var(--muted)">–</span>
      </div>
    </section>

    <!-- Suche: Wikipedia -->
    <section aria-labelledby="wiki-label" style="margin-top:8px">
      <h2 id="wiki-label">Wiki-Suche</h2>
      <form class="search-form" action="https://de.wikipedia.org/wiki/Special:Search" method="get" target="_blank">
        <div class="row">
          <input class="search-input" type="text" name="search" placeholder="Wikipedia durchsuchen…" aria-label="Wikipedia durchsuchen">
          <button class="btn btn-primary" type="submit">Suchen</button>
        </div>
      </form>
    </section>

    <hr>

    <!-- Suche: Google -->
    <section aria-labelledby="google-label">
      <h2 id="google-label">Google-Suche</h2>
      <form class="search-form" action="https://www.google.com/search" method="get" target="_blank">
        <div class="row">
          <input class="search-input" type="text" name="q" placeholder="Google durchsuchen…" aria-label="Google durchsuchen">
          <button class="btn btn-primary" type="submit">Suchen</button>
        </div>
      </form>
    </section>

    <!-- Suche: YouTube -->
    <section aria-labelledby="yt-label">
      <h2 id="yt-label">YouTube-Suche</h2>
      <form class="search-form" action="https://www.youtube.com/results" method="get" target="_blank">
        <div class="row">
          <input class="search-input" type="text" name="search_query" placeholder="YouTube durchsuchen…" aria-label="YouTube durchsuchen">
          <button class="btn btn-primary" type="submit">Suchen</button>
        </div>
      </form>
    </section>

    <!-- Gemeinsamer Leeren-Button -->
    <section style="margin-top:10px">
      <div class="row">
        <button id="clearAll" class="btn btn-danger" type="button" aria-label="Alle Suchfelder leeren">Alles leeren</button>
      </div>
    </section>
  </div>

<script>
  /* Uhr & Datum */
  (function startClock(){
    const clockEl = document.getElementById('clockLine');
    const dateEl  = document.getElementById('dateLine');
    const fmtTime = new Intl.DateTimeFormat('de-DE',{ hour:'2-digit', minute:'2-digit', second:'2-digit' });
    const fmtDate = new Intl.DateTimeFormat('de-DE',{ weekday:'long', year:'numeric', month:'long', day:'numeric' });
    function tick(){
      const now = new Date();
      clockEl.textContent = fmtTime.format(now);
      dateEl.textContent  = fmtDate.format(now);
    }
    tick();
    setInterval(tick, 1000);
  })();

  /* Felder nach Absenden automatisch leeren (mit Delay) */
  document.querySelectorAll('form.search-form').forEach(f => {
    f.addEventListener('submit', () => {
      setTimeout(() => f.reset(), 100);
    });
  });

  /* Alles leeren Button */
  document.getElementById('clearAll').addEventListener('click', () => {
    document.querySelectorAll('form.search-form').forEach(f => f.reset());
    document.querySelector('.search-input')?.focus();
  });

  /* ESC leert nur das aktive Feld */
  document.addEventListener('keydown', (e) => {
    if(e.key === 'Escape'){
      const el = document.activeElement;
      if(el && el.classList.contains('search-input')) el.value = '';
    }
  });
</script>
</body>
</html>

Das ist der code

Uncoolman · Beitrag von **Uncoolman** » 31.03.2026, 20:08

[KI] Der "das-muss-ich-euch-zeigen"-Thread

Re: [KI] Der "das-muss-ich-euch-zeigen"-Thread

Re: [KI] Der "das-muss-ich-euch-zeigen"-Thread

Re: [KI] Der "das-muss-ich-euch-zeigen"-Thread

Re: [KI] Der "das-muss-ich-euch-zeigen"-Thread

Re: [KI] Der "das-muss-ich-euch-zeigen"-Thread

Re: [KI] Der "das-muss-ich-euch-zeigen"-Thread