Public Share | Secure Temporary Text & File Sharing

New Share Room

Create a private room to share content instantly.

Share Your Content

Public workspace

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather Dashboard</title>

<header class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-8">

<div>
        <h1 class="text-2xl sm:text-3xl font-bold">
          Weather Dashboard
        </h1>
        <p class="text-slate-400 mt-1">
          Current weather conditions
        </p>
      </div>

<div class="flex w-full sm:w-auto">
        <input id="cityInput" type="text" placeholder="Search city..." class="w-full sm:w-72 bg-slate-900 border border-slate-700 rounded-l-xl px-4 py-3 outline-none focus:border-blue-500">
        <button id="searchButton" class="bg-blue-600 hover:bg-blue-700 px-5 rounded-r-xl font-medium transition">
          Search
        </button>
      </div>

</header>

<section
      class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-600 via-indigo-600 to-purple-700 p-6 sm:p-8 mb-6">

<div class="absolute -right-20 -top-20 w-64 h-64 bg-white/10 rounded-full"></div>
      <div class="absolute -left-20 -bottom-32 w-80 h-80 bg-white/5 rounded-full"></div>

<div>
          <div class="flex items-center gap-2 text-blue-100 mb-3">
            <span>📍</span>
            <span id="location">
              Dubai, United Arab Emirates
            </span>
          </div>

<h2 class="text-2xl font-semibold">
            Good Afternoon
          </h2>

<p class="text-blue-100 mt-1">
                Feels like
                <span id="feelsLike">42</span>°
              </p>
            </div>

</div>
        </div>

<div class="md:text-right">
          <p class="text-blue-100 text-sm">
            Last updated
          </p>

<div class="mt-5 inline-flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full">
            <span>🌡️</span>
            <span>Current Weather</span>
          </div>
        </div>

</div>

</section>

<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">

<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 hover:border-blue-500/50 transition">

<div class="flex items-center justify-between">
          <span class="text-slate-400">Humidity</span>
          <span class="text-2xl">💧</span>
        </div>

<p class="text-sm text-slate-500 mt-1">
          Relative humidity
        </p>

</div>

<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 hover:border-blue-500/50 transition">

<p class="text-sm text-slate-500 mt-1">
          Direction: <span id="windDirection">N</span>
        </p>

</div>

<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 hover:border-blue-500/50 transition">

<div class="flex items-center justify-between">
          <span class="text-slate-400">Visibility</span>
          <span class="text-2xl">👁️</span>
        </div>

<p class="text-sm text-slate-500 mt-1">
          Current visibility
        </p>

</div>

<div class="bg-slate-900 border border-slate-800 rounded-2xl p-5 hover:border-blue-500/50 transition">

<div class="flex items-center justify-between">
          <span class="text-slate-400">UV Index</span>
          <span class="text-2xl">☀️</span>
        </div>

<p class="text-sm text-slate-500 mt-1">
          UV radiation level
        </p>

</div>

</section>

<section class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">

<div class="lg:col-span-2 bg-slate-900 border border-slate-800 rounded-2xl p-6">

<h3 class="text-xl font-semibold mb-6">
          Weather Details
        </h3>

<div>
            <p class="text-sm text-slate-500">
              Pressure
            </p>
            <p class="text-xl font-semibold mt-1">
              <span id="pressure">999</span> mb
            </p>
          </div>

<div>
            <p class="text-sm text-slate-500">
              Cloud Cover
            </p>
            <p class="text-xl font-semibold mt-1">
              <span id="cloudCover">5</span>%
            </p>
          </div>

<div>
            <p class="text-sm text-slate-500">
              Precipitation
            </p>
            <p class="text-xl font-semibold mt-1">
              <span id="precipitation">0</span> mm
            </p>
          </div>

<div>
            <p class="text-sm text-slate-500">
              Wind Degree
            </p>
            <p class="text-xl font-semibold mt-1">
              <span id="windDegree">351</span>°
            </p>
          </div>

<div>
            <p class="text-sm text-slate-500">
              Latitude
            </p>
            <p class="text-xl font-semibold mt-1">
              25.252
            </p>
          </div>

<div>
            <p class="text-sm text-slate-500">
              Longitude
            </p>
            <p class="text-xl font-semibold mt-1">
              55.280
            </p>
          </div>

</div>

<div class="bg-slate-900 border border-slate-800 rounded-2xl p-6">

<div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-slate-500">
                Sunrise
              </p>
              <p class="font-semibold mt-1">
                06:00 AM
              </p>
            </div>
            <span class="text-2xl">🌅</span>
          </div>

<div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-slate-500">
                Sunset
              </p>
              <p class="font-semibold mt-1">
                06:36 PM
              </p>
            </div>
            <span class="text-2xl">🌇</span>
          </div>

<div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-slate-500">
                Moonrise
              </p>
              <p class="font-semibold mt-1">
                10:38 PM
              </p>
            </div>
            <span class="text-2xl">🌙</span>
          </div>

<div class="pt-3 border-t border-slate-800">
            <p class="text-sm text-slate-500">
              Moon Phase
            </p>

<p class="font-semibold mt-1">
              Waning Gibbous
            </p>
          </div>

</div>

</section>

<section class="bg-slate-900 border border-slate-800 rounded-2xl p-6">

<div>
          <h3 class="text-xl font-semibold">
            Air Quality
          </h3>

<p class="text-sm text-slate-500 mt-1">
            Current air quality measurements
          </p>
        </div>

<span class="px-3 py-1 rounded-full bg-yellow-500/10 text-yellow-400 text-sm">
          Moderate
        </span>

</div>

<div class="bg-slate-950 rounded-xl p-4">
          <p class="text-sm text-slate-500">CO</p>
          <p class="text-2xl font-bold mt-2">750</p>
          <p class="text-xs text-slate-600 mt-1">Carbon Monoxide</p>
        </div>

<div class="bg-slate-950 rounded-xl p-4">
          <p class="text-sm text-slate-500">NO₂</p>
          <p class="text-2xl font-bold mt-2">52.9</p>
          <p class="text-xs text-slate-600 mt-1">Nitrogen Dioxide</p>
        </div>

<div class="bg-slate-950 rounded-xl p-4">
          <p class="text-sm text-slate-500">O₃</p>
          <p class="text-2xl font-bold mt-2">106</p>
          <p class="text-xs text-slate-600 mt-1">Ozone</p>
        </div>

<div class="bg-slate-950 rounded-xl p-4">
          <p class="text-sm text-slate-500">SO₂</p>
          <p class="text-2xl font-bold mt-2">30.3</p>
          <p class="text-xs text-slate-600 mt-1">Sulfur Dioxide</p>
        </div>

<div class="bg-slate-950 rounded-xl p-4">
          <p class="text-sm text-slate-500">PM2.5</p>
          <p class="text-2xl font-bold mt-2">94.3</p>
          <p class="text-xs text-slate-600 mt-1">Fine Particles</p>
        </div>

</div>

</section>

<footer class="text-center text-slate-600 text-sm py-8">
      Weather Dashboard • Powered by Weather API
    </footer>

</div>
  <script src="script.js"></script>
</body>

</html>