aplicación del tiempo

1,917 AmirAliAkrami

Abrir en el editor Publica tu código

Recomendado

28 August 2025

Plantilla HTML para aplicación de transmisión de música con Tailwind

20 February 2026

Plantilla HTML de contador de clics del mouse

15 April 2026

una pequeña copa del mundo

HTML

<div class="container">
  <div class="app-container">
    <div class="app-top-bar">
      <button class="button button-small">
        <i class="fas fa-chevron-left"></i>
      </button>
      <h1 class="app-heading">Weather Stats</h1>
    </div>
    <div class="app-content">
      <button class="button button-block">
        <span class="subtle">Period</span> <span>Last 30 days</span> <div class="button button-small"><i class="fas fa-chevron-right"></i></div>
      </button>
      <div class="button button-dial">
        
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        
        <div class="button-dial-top"></div>
        <div class="button-dial-label">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M60.333,68.349V11.111C60.333,4.984,55.349,0,49.222,0c-6.126,0-11.111,4.984-11.111,11.111v57.237   c-4.15,3.323-6.667,8.397-6.667,13.874c0,9.802,7.975,17.777,17.777,17.777C59.024,100,67,92.024,67,82.223   C67,76.746,64.482,71.672,60.333,68.349z M44.778,48.363h4.444v-4.444h-4.444V35.03h4.444v-4.444h-4.444v-8.889h4.444v-4.444   h-4.444v-6.142c0-2.455,1.99-4.444,4.444-4.444c2.455,0,4.445,1.989,4.445,4.444v41.111h-8.889V48.363z"/></g></svg>
          7°F
        </div>
      </div>
      <div class="flex-button-container">
        <button class="button button-large">
          <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="snowflake" class="color-cool" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M440.1 355.2l-39.2-23 34.1-9.3c8.4-2.3 13.4-11.1 11.1-19.6l-4.1-15.5c-2.2-8.5-10.9-13.6-19.3-11.3L343 298.2 271.2 256l71.9-42.2 79.7 21.7c8.4 2.3 17-2.8 19.3-11.3l4.1-15.5c2.2-8.5-2.7-17.3-11.1-19.6l-34.1-9.3 39.2-23c7.5-4.4 10.1-14.2 5.8-21.9l-7.9-13.9c-4.3-7.7-14-10.3-21.5-5.9l-39.2 23 9.1-34.7c2.2-8.5-2.7-17.3-11.1-19.6l-15.2-4.1c-8.4-2.3-17 2.8-19.3 11.3l-21.3 81-71.9 42.2v-84.5L306 70.4c6.1-6.2 6.1-16.4 0-22.6l-11.1-11.3c-6.1-6.2-16.1-6.2-22.2 0l-24.9 25.4V16c0-8.8-7-16-15.7-16h-15.7c-8.7 0-15.7 7.2-15.7 16v46.1l-24.9-25.4c-6.1-6.2-16.1-6.2-22.2 0L142.1 48c-6.1 6.2-6.1 16.4 0 22.6l58.3 59.3v84.5l-71.9-42.2-21.3-81c-2.2-8.5-10.9-13.6-19.3-11.3L72.7 84c-8.4 2.3-13.4 11.1-11.1 19.6l9.1 34.7-39.2-23c-7.5-4.4-17.1-1.8-21.5 5.9l-7.9 13.9c-4.3 7.7-1.8 17.4 5.8 21.9l39.2 23-34.1 9.1c-8.4 2.3-13.4 11.1-11.1 19.6L6 224.2c2.2 8.5 10.9 13.6 19.3 11.3l79.7-21.7 71.9 42.2-71.9 42.2-79.7-21.7c-8.4-2.3-17 2.8-19.3 11.3l-4.1 15.5c-2.2 8.5 2.7 17.3 11.1 19.6l34.1 9.3-39.2 23c-7.5 4.4-10.1 14.2-5.8 21.9L10 391c4.3 7.7 14 10.3 21.5 5.9l39.2-23-9.1 34.7c-2.2 8.5 2.7 17.3 11.1 19.6l15.2 4.1c8.4 2.3 17-2.8 19.3-11.3l21.3-81 71.9-42.2v84.5l-58.3 59.3c-6.1 6.2-6.1 16.4 0 22.6l11.1 11.3c6.1 6.2 16.1 6.2 22.2 0l24.9-25.4V496c0 8.8 7 16 15.7 16h15.7c8.7 0 15.7-7.2 15.7-16v-46.1l24.9 25.4c6.1 6.2 16.1 6.2 22.2 0l11.1-11.3c6.1-6.2 6.1-16.4 0-22.6l-58.3-59.3v-84.5l71.9 42.2 21.3 81c2.2 8.5 10.9 13.6 19.3 11.3L375 428c8.4-2.3 13.4-11.1 11.1-19.6l-9.1-34.7 39.2 23c7.5 4.4 17.1 1.8 21.5-5.9l7.9-13.9c4.6-7.5 2.1-17.3-5.5-21.7z"></path></svg>
          Cool
        </button>
        <button class="button button-large">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fire-alt" class="color-warm" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M323.56 51.2c-20.8 19.3-39.58 39.59-56.22 59.97C240.08 73.62 206.28 35.53 168 0 69.74 91.17 0 209.96 0 281.6 0 408.85 100.29 512 224 512s224-103.15 224-230.4c0-53.27-51.98-163.14-124.44-230.4zm-19.47 340.65C282.43 407.01 255.72 416 226.86 416 154.71 416 96 368.26 96 290.75c0-38.61 24.31-72.63 72.79-130.75 6.93 7.98 98.83 125.34 98.83 125.34l58.63-66.88c4.14 6.85 7.91 13.55 11.27 19.97 27.35 52.19 15.81 118.97-33.43 153.42z"></path></svg>
          Warm
        </button>
      </div>
      <button class="button button-link">
        Update Settings
      </button>
    </div>
  </div>
  <div class="app-container" data-theme="dark">
    <div class="app-top-bar">
      <button class="button button-small">
        <i class="fas fa-chevron-left"></i>
      </button>
      <h1 class="app-heading">Weather Stats</h1>
    </div>
    <div class="app-content">
      <button class="button button-block">
        <span class="subtle">Period</span> <span>Last 30 days</span> <div class="button button-small"><i class="fas fa-chevron-right"></i></div>
      </button>
      <div class="button button-dial">
        
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        <span class="button-dial-spoke"></span>
        
        <div class="button-dial-top"></div>
        <div class="button-dial-label">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve"><g><path d="M60.333,68.349V11.111C60.333,4.984,55.349,0,49.222,0c-6.126,0-11.111,4.984-11.111,11.111v57.237   c-4.15,3.323-6.667,8.397-6.667,13.874c0,9.802,7.975,17.777,17.777,17.777C59.024,100,67,92.024,67,82.223   C67,76.746,64.482,71.672,60.333,68.349z M44.778,48.363h4.444v-4.444h-4.444V35.03h4.444v-4.444h-4.444v-8.889h4.444v-4.444   h-4.444v-6.142c0-2.455,1.99-4.444,4.444-4.444c2.455,0,4.445,1.989,4.445,4.444v41.111h-8.889V48.363z"/></g></svg>
          7°F
        </div>
      </div>
      <div class="flex-button-container">
        <button class="button button-large">
          <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="snowflake" class="color-cool" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M440.1 355.2l-39.2-23 34.1-9.3c8.4-2.3 13.4-11.1 11.1-19.6l-4.1-15.5c-2.2-8.5-10.9-13.6-19.3-11.3L343 298.2 271.2 256l71.9-42.2 79.7 21.7c8.4 2.3 17-2.8 19.3-11.3l4.1-15.5c2.2-8.5-2.7-17.3-11.1-19.6l-34.1-9.3 39.2-23c7.5-4.4 10.1-14.2 5.8-21.9l-7.9-13.9c-4.3-7.7-14-10.3-21.5-5.9l-39.2 23 9.1-34.7c2.2-8.5-2.7-17.3-11.1-19.6l-15.2-4.1c-8.4-2.3-17 2.8-19.3 11.3l-21.3 81-71.9 42.2v-84.5L306 70.4c6.1-6.2 6.1-16.4 0-22.6l-11.1-11.3c-6.1-6.2-16.1-6.2-22.2 0l-24.9 25.4V16c0-8.8-7-16-15.7-16h-15.7c-8.7 0-15.7 7.2-15.7 16v46.1l-24.9-25.4c-6.1-6.2-16.1-6.2-22.2 0L142.1 48c-6.1 6.2-6.1 16.4 0 22.6l58.3 59.3v84.5l-71.9-42.2-21.3-81c-2.2-8.5-10.9-13.6-19.3-11.3L72.7 84c-8.4 2.3-13.4 11.1-11.1 19.6l9.1 34.7-39.2-23c-7.5-4.4-17.1-1.8-21.5 5.9l-7.9 13.9c-4.3 7.7-1.8 17.4 5.8 21.9l39.2 23-34.1 9.1c-8.4 2.3-13.4 11.1-11.1 19.6L6 224.2c2.2 8.5 10.9 13.6 19.3 11.3l79.7-21.7 71.9 42.2-71.9 42.2-79.7-21.7c-8.4-2.3-17 2.8-19.3 11.3l-4.1 15.5c-2.2 8.5 2.7 17.3 11.1 19.6l34.1 9.3-39.2 23c-7.5 4.4-10.1 14.2-5.8 21.9L10 391c4.3 7.7 14 10.3 21.5 5.9l39.2-23-9.1 34.7c-2.2 8.5 2.7 17.3 11.1 19.6l15.2 4.1c8.4 2.3 17-2.8 19.3-11.3l21.3-81 71.9-42.2v84.5l-58.3 59.3c-6.1 6.2-6.1 16.4 0 22.6l11.1 11.3c6.1 6.2 16.1 6.2 22.2 0l24.9-25.4V496c0 8.8 7 16 15.7 16h15.7c8.7 0 15.7-7.2 15.7-16v-46.1l24.9 25.4c6.1 6.2 16.1 6.2 22.2 0l11.1-11.3c6.1-6.2 6.1-16.4 0-22.6l-58.3-59.3v-84.5l71.9 42.2 21.3 81c2.2 8.5 10.9 13.6 19.3 11.3L375 428c8.4-2.3 13.4-11.1 11.1-19.6l-9.1-34.7 39.2 23c7.5 4.4 17.1 1.8 21.5-5.9l7.9-13.9c4.6-7.5 2.1-17.3-5.5-21.7z"></path></svg>
          Cool
        </button>
        <button class="button button-large">
          <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="fire-alt" class="color-warm" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M323.56 51.2c-20.8 19.3-39.58 39.59-56.22 59.97C240.08 73.62 206.28 35.53 168 0 69.74 91.17 0 209.96 0 281.6 0 408.85 100.29 512 224 512s224-103.15 224-230.4c0-53.27-51.98-163.14-124.44-230.4zm-19.47 340.65C282.43 407.01 255.72 416 226.86 416 154.71 416 96 368.26 96 290.75c0-38.61 24.31-72.63 72.79-130.75 6.93 7.98 98.83 125.34 98.83 125.34l58.63-66.88c4.14 6.85 7.91 13.55 11.27 19.97 27.35 52.19 15.81 118.97-33.43 153.42z"></path></svg>
          Warm
        </button>
      </div>
      <button class="button button-link">
        Update Settings
      </button>
    </div>
  </div>
</div>

CSS

:root {
  --font-color: #222;
  --bg-color: #f2f3f7;
  --button-bg-color: #f2f3f7;
  --button-shadow:
    -6px -6px 8px rgba(255, 255, 255, 0.9),
    5px 5px 8px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] {
  --font-color: #fff;
  --bg-color: #181818;
  --button-bg-color: #121212;
  --button-shadow:
    -2px -2px 4px rgba(255, 255, 255, 0.05),
    0 0 10px 10px rgba(255, 255, 255, 0.005),
    2px 2px 8px rgba(60, 60, 60, 0.1);
}

html {
  box-sizing: border-box;
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: var(--font-color);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #f2f2f2;
}

.color-cool {
  color: #077dfe;
}

.color-warm {
  color: #ff7a00;
}

.container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 25px;
  align-items: center;
  flex-direction: column;
}

@media screen and (min-width:800px) {
  .container {
    flex-direction: row;
  }
}

.app-container {
  background-color: var(--bg-color);
  border-radius: 40px;
  box-shadow: -2px -2px 4px 0px #ffffff, 50px 50px 50px 0px rgba(0, 0, 0, .25);
  display: block;
  flex: 1;
  min-height: 500px;
  max-width: 350px;
  margin-bottom: 25px;
  overflow: hidden;
  padding: 30px;
}

.app-top-bar {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.app-heading {
  color: var(--font-color);
  display: block;
  flex: 1;
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  text-align: center;
}

button {
	border: 0;
	&:focus {
		border: none;
		outline: 0 !important;
		outline-style: none;
	}
}

.button {
  color: var(--font-color);
  position: relative;
  border-radius: 15px;
  background: var(--button-bg-color);
  font-weight: 700;
  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: var(--button-shadow);
  cursor: pointer;
  
  &.button-link {
    color: #067CF8;
    display: block;
    font-size: 17px;
    margin: 30px 0 0;
    padding: 20px 0;
    width: 100%;
  }
  
  &.button-small {
    color: #6D6E74;
    font-size: 22px;
    line-height: 40px;
    width: 40px;
    height: 40px;
  }
  
  &.button-large {
    display: flex;
    font-size: 20px;
    flex-direction: column;
    padding: 15px;
    text-align: left;
    width: 45%;
    
    & svg {
      margin-bottom: 40px;
      width: 30px;
    }
  }
}
  
.button-dial {
  border-radius: 50%;
  display: flex;
  height: 270px;
  margin: 35px auto;
  align-items: center;
  justify-content: center;
  width: 270px;
}

.button-dial-top {
  background: var(--button-bg-color);
  box-shadow: var(--button-shadow);
  border-radius: 50%;
  width: 70%;
  height: 70%;
  margin: 0 auto;
  position: absolute;
  top: 15%;
  left: 15%;
  text-align: center;
  z-index: 5;
}

.button-dial-label {
  color: #067CF8;
  font-size: 28px;
  fill: #067CF8;
  position: relative;
  z-index: 10;
}

.button-dial-spoke {
  background-color: rgba(96, 171, 254, 0.6);
  display: block;
  height: 2px;
  width: 83%;
  position: absolute;
  margin: 0 auto;
  z-index: 5;
  top: 50%;
  
  &:nth-child(2) {
    transform: rotate(30deg);
  }
  &:nth-child(3) {
    transform: rotate(60deg);
  }
  &:nth-child(4) {
    transform: rotate(90deg);
  }
  &:nth-child(5) {
    transform: rotate(120deg);
  }
  &:nth-child(6) {
    transform: rotate(150deg);
  }
}

.button-block {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 15px 24px;
  width: 100%;
  
  span {
    font-size: 16px;
  }
}

.subtle {
  color: #6D6E74;
}

.flex-button-container {
  display: flex;
  justify-content: space-between;
}