Skip to content

Instantly share code, notes, and snippets.

@surfernsk

surfernsk/index.html

Created March 18, 2023 18:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save surfernsk/6c9be9c89c3d9a0bd180c1573bc53018 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save surfernsk/6c9be9c89c3d9a0bd180c1573bc53018 to your computer and use it in GitHub Desktop.
Download ZIP
Note App
Raw
index.html
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="w-container container-content">
<div class="v-container">
<button class="v-btn">Add Event</button>
<nav class="v-menu">
<a class="v-menu_logo"></a>
<a class="v-menu_link active">
<svg width="16" height="17" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="5.5" width="29" height="27" rx="1.5" stroke="white" stroke-width="3"/>
<rect x="2" y="6" width="28" height="6" fill="white"/>
<rect x="4" width="4" height="6" rx="2" fill="white"/>
<rect x="24" width="4" height="6" rx="2" fill="white"/>
</svg>
</a>
<a class="v-menu_link">
<svg width="16" height="16" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7" width="25" height="4.12903" rx="2.06452" fill="white"/>
<rect width="4" height="4.12903" rx="2" fill="white"/>
<rect x="7" y="27.871" width="25" height="4.12903" rx="2.06452" fill="white"/>
<rect y="27.871" width="4" height="4.12903" rx="2" fill="white"/>
<rect x="7" y="18.5806" width="25" height="4.12903" rx="2.06452" fill="white"/>
<rect y="18.5806" width="4" height="4.12903" rx="2" fill="white"/>
<rect x="7" y="9.29034" width="25" height="4.12903" rx="2.06452" fill="white"/>
<rect y="9.29034" width="4" height="4.12903" rx="2" fill="white"/>
</svg>
</a>
<a class="v-menu_link">
<svg width="16" height="16" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3782 13.7126L4.14035 21.7878C2.96599 22.939 2.85287 24.7867 3.88395 25.9758L6.31493 28.7793C7.37867 30.0061 9.26039 30.0755 10.514 28.9341L18.0648 22.0594" stroke="white" stroke-width="3"/>
<path d="M21.3752 18.4634L29.4903 10.2301C30.6483 9.05524 30.7337 7.20179 29.6838 6.03144L27.2128 3.27711C26.132 2.07238 24.2537 2.03928 23.0191 3.2032L15.5663 10.2295" stroke="white" stroke-width="3"/>
<line y1="-1.5" x2="15.6371" y2="-1.5" transform="matrix(0.727329 -0.686289 0.578625 0.815594 12.3781 22.6556)" stroke="white" stroke-width="3"/>
</svg>
</a>
<a class="v-menu_link">
<svg width="16" height="16" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 4.60656C2 2.73088 3.70194 1.31517 5.54627 1.65672L16.4537 3.67662C16.8148 3.74349 17.1852 3.74349 17.5463 3.67662L28.4537 1.65672C30.2981 1.31517 32 2.73088 32 4.60656V26.1895C32 27.6765 30.9106 28.9392 29.4396 29.1571L17.4396 30.9349C17.1481 30.9781 16.8519 30.9781 16.5604 30.9349L4.56035 29.1571C3.08936 28.9392 2 27.6765 2 26.1895V4.60656Z" stroke="white" stroke-width="3"/>
<line x1="16.9286" y1="4.33334" x2="16.9286" y2="31" stroke="white" stroke-width="2"/>
</svg>
</a>
<a class="v-menu_link top">
<svg width="18" height="4" viewBox="0 0 18 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="2" fill="white"/>
<circle cx="16" cy="2" r="2" fill="white"/>
<circle cx="9" cy="2" r="2" fill="white"/>
</svg>
</a>
</nav>
<div class="v-calendar">
<div class="calendar">
<h1 class="v-title">Note App</h1>
<h3 class="calendar_title">
<svg width="18" height="18" viewBox="0 0 24 24"> <path d="M12,14.071L8.179,10.25c-0.414-0.414-1.086-0.414-1.5,0l0,0c-0.414,0.414-0.414,1.086,0,1.5l4.614,4.614 c0.391,0.391,1.024,0.391,1.414,0l4.614-4.614c0.414-0.414,0.414-1.086,0-1.5v0c-0.414-0.414-1.086-0.414-1.5,0L12,14.071z"></path></svg>September 2020</h3>
<div>
<div class="v-list v-list_info active">
<span>Mon</span>
<span>Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
<span>Sat</span>
<span>Sun</span>
</div>
</div>
<div>
<div class="v-list">
<a>
<span class="v-day">31</span>
</a>
<a>
<span>1</span>
</a>
<a>
<span>2</span>
</a>
<a>
<span>3</span>
</a>
<a>
<span>4</span>
</a>
<a>
<span>5</span>
</a>
<a>
<span>6</span>
</a>
</div>
<div class="v-list">
<a>
<span>7</span>
</a>
<a>
<span class="v-day-current">8</span>
</a>
<a>
<span>9</span>
</a>
<a>
<span>10</span>
</a>
<a>
<span>11</span>
</a>
<a>
<span>12</span>
</a>
<a>
<span>13</span>
</a>
</div>
<div class="v-list active">
<a href="#1">
<span>14
<span class="dots">
<span class="dot color-orange"></span>
<span class="dot color-blue"></span>
</span>
</span>
</a>
<a href="#2">
<span>15</span>
</a>
<a href="#3">
<span>16
<span class="dots">
<span class="dot color-blue"></span>
</span>
</span>
</a>
<a href="#4">
<span>17
<span class="dots">
<span class="dot color-blue"></span>
<span class="dot color-pink"></span>
</span>
</span>
</a>
<a href="#5">
<span>18</span>
</a>
<a href="#6">
<span>19</span>
</a>
<a href="#7">
<span>20
<span class="dots">
<span class="dot color-orange"></span>
<span class="dot color-blue"></span>
<span class="dot color-green"></span>
</span>
</span>
</a>
</div>
<div class="v-list">
<a>
<span>21</span>
</a>
<a>
<span>22</span>
</a>
<a>
<span>23</span>
</a>
<a>
<span>24</span>
</a>
<a>
<span>25</span>
</a>
<a>
<span>26</span>
</a>
<a>
<span>27</span>
</a>
</div>
<div class="v-list">
<a>
<span>28</span>
</a>
<a>
<span>29</span>
</a>
<a>
<span>30</span>
</a>
<a>
<span class="v-day">1</span>
</a>
<a>
<span class="v-day">2</span>
</a>
<a>
<span class="v-day">3</span>
</a>
<a>
<span class="v-day">4</span>
</a>
</div>
</div>
</div>
</div>
<div class="v-info">
<section id="1" class="v-section">
<p class="v-section_item">
<span class="v-section_line color-orange"></span>
<span class="v-section_time">9:00 pm</span>
Complete birthday party preparations: buy baloons and chocolate.
</p>
<p class="v-section_item">
<span class="v-section_line color-orange"></span>
<span class="v-section_time">12:45 pm</span>
Watch series.
</p>
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">15:00 pm</span>
Video calling with Tom.
</p>
<p class="v-section_item">
<span class="v-section_line color-orange"></span>
<span class="v-section_time">19:00 pm</span>
Buy theater tickets
</p>
</section>
<section id="3" class="v-section">
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">12:00 pm</span>
Register for an online painting lesson
</p>
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">12:00 pm</span>
Learn Javascript
</p>
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">12:00 pm</span>
Do homework
</p>
</section>
<section id="4" class="v-section">
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">11:15 pm</span>
Prepare tasty chicken for dinner.
</p>
<p class="v-section_item">
<span class="v-section_line color-pink"></span>
<span class="v-section_time">12:00 pm</span>
Prepare tasty chicken for dinner.
</p>
</section>
<section id="7" class="v-section">
<p class="v-section_item">
<span class="v-section_line color-orange"></span>
<span class="v-section_time">12:00 pm</span>
Prepare tasty chicken for dinner.
</p>
<p class="v-section_item">
<span class="v-section_line color-orange"></span>
<span class="v-section_time">12:00 pm</span>
Prepare tasty chicken for dinner.
</p>
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">12:00 pm</span>
Prepare tasty chicken for dinner.
</p>
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">12:00 pm</span>
Complete birthday party preparations: buy baloons and chocolate.
</p>
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">12:00 pm</span>
Complete birthday party preparations: buy baloons and chocolate.
</p>
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">12:00 pm</span>
Complete birthday party preparations: buy baloons and chocolate.
</p>
<p class="v-section_item">
<span class="v-section_line color-blue"></span>
<span class="v-section_time">12:00 pm</span>
Complete birthday party preparations: buy baloons and chocolate.
</p>
<p class="v-section_item">
<span class="v-section_line color-green"></span>
<span class="v-section_time">12:00 pm</span>
Complete birthday party preparations: buy baloons and chocolate.
</p>
</section>
</div>
</div>
</div>
<a class="box-item" href="https://codepen.io/Anna_Batura/" target="_blank"><svg class="rabbit" version="1.2" viewBox="0 0 600 600"><path d="m 335.94313,30.576451 c -9.79312,-0.146115 -17.39091,4.439466 -17.39091,13.789758 0,11.508038 -2.91019,60.415461 1.40532,76.238951 4.31553,15.82355 21.58583,38.97215 34.51834,54.67597 10.06946,12.22726 4.34772,41.69626 4.34772,56.0813 0,14.38499 -2.89751,25.9107 -8.65153,25.9107 -5.75402,0 -14.35971,5.75217 -20.11373,11.50612 -5.75395,5.75402 -11.51588,12.95631 -18.70841,7.20229 -7.19251,-5.75402 -20.15388,-11.49441 -43.16987,-15.80992 -23.01609,-4.31551 -61.84129,-0.0234 -86.29583,8.60763 -24.45458,8.63104 -76.25857,56.11061 -90.643535,77.6882 -14.385056,21.5775 -15.799189,87.73247 -14.36068,97.80193 1.438509,10.06953 -2.908267,17.28255 -10.100778,8.65153 -7.192459,-8.63104 -12.911438,-4.30381 -12.911438,-4.30381 0,0 -7.202292,14.37045 -7.202292,21.56298 0,7.19244 2.854564,14.36068 2.854564,14.36068 0,0 -11.506099,8.65056 -11.506099,14.40458 0,5.75397 11.515881,15.83044 18.708391,24.46146 7.192546,8.63097 31.651182,25.89997 41.720624,24.46148 10.069543,-1.43851 28.775063,-0.0121 35.967573,4.3038 7.19253,4.31551 24.44687,10.06761 46.02443,11.5061 21.57752,1.43851 81.97845,5.75307 97.80193,5.75307 15.82357,0 20.1675,-2.86435 27.35996,-10.05688 7.19253,-7.19245 -5.78527,-15.84115 -10.10079,-25.9107 -4.31551,-10.06946 14.40363,-7.16912 20.15765,-8.60763 5.75402,-1.43849 21.59424,-11.5061 31.66376,-11.5061 10.06953,0 8.6165,10.05589 21.56298,15.80993 12.94654,5.75393 31.63939,24.43902 46.02443,27.31602 14.38497,2.87695 47.47173,0.0121 58.97979,-4.30381 11.50797,-4.31551 10.06946,-14.37044 0,-21.56297 -10.06955,-7.19244 -34.50663,-20.16742 -38.82214,-27.35994 -4.31551,-7.19246 -5.74329,-15.81969 1.44924,-23.01224 7.19251,-7.19252 14.35876,-4.30292 25.86678,-10.05685 11.50806,-5.75402 15.80992,-23.04354 15.80992,-33.11301 0,-10.06953 1.36928,-21.01352 5.75307,-27.31602 3.67345,-5.28128 5.10015,-22.13212 5.30499,-33.64009 0.21874,-12.28864 -5.29329,-15.24871 -9.60881,-22.44122 -4.31543,-7.19246 4.30285,-17.25917 10.05687,-17.25917 5.75402,0 31.65108,-4.33602 41.72062,-8.65153 10.06946,-4.31546 20.16744,-23.03273 27.35995,-31.66377 7.19246,-8.63095 1.41799,-27.31512 -8.65154,-33.06907 -10.06954,-5.75402 -10.07746,-21.59431 -18.70841,-31.66377 -8.63103,-10.06953 -18.68507,-31.62961 -27.31604,-38.82213 -8.63101,-7.19253 -28.77502,-12.95535 -35.96755,-12.95535 -7.19253,0 -11.50612,9e-4 -11.50612,-5.75306 0,-5.75402 -1.44924,-12.9203 -1.44924,-25.86678 0,-12.94655 -16.24344,-68.464566 -37.3729,-102.149659 -4.40799,-7.027282 -11.5581,-5.405316 -20.15765,-2.898485 -5.69412,1.659863 -8.60761,4.35564 -8.60761,23.056136 0,18.700566 -11.50515,-0.03133 -17.25917,-10.100794 -5.75403,-10.069512 -15.86265,-21.58444 -28.80918,-24.461458 -2.42749,-0.539415 -4.76669,-0.800692 -7.02665,-0.834399 z" id="rabbit"></path></svg></a>
Raw
script.js
let calendar = document.querySelector('.v-calendar');
$(".calendar").on('click', function () {
$(".v-calendar").addClass('mini');
});
var sections = $('section')
, nav = $('.calendar');
$(".v-info").on('scroll', function () {
if ($(".v-info").scrollTop() > 0) {
$(".v-calendar").addClass('mini');
} else {
$(".v-calendar").removeClass('mini');
}
let calendarRect = calendar.getBoundingClientRect();
let curPos = calendarRect.top + calendarRect.height;
sections.each(function() {
let rect = this.getBoundingClientRect();
let style = window.getComputedStyle(this);
let top = rect.top - parseInt(style['margin-top'], 10);
let bottom = rect.bottom;
if (curPos >= top && curPos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
nav.find('a').on('click', function () {
var $el = $(this)
, id = $el.attr('href');
$(".v-info").animate({
scrollTop: $(id).offset().top
}, 500);
return false;
});
Raw
style.sass
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700")
html
font-family: sans-serif
-ms-text-size-adjust: 100%
-webkit-text-size-adjust: 100%
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
margin: 0
padding: 0
border: 0
font-size: 100%
font: inherit
vertical-align: baseline
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
display: block
body
line-height: 1
ol, ul
list-style: none
blockquote, q
quotes: none
blockquote
&:before, &:after
content: ''
content: none
q
&:before, &:after
content: ''
content: none
table
border-collapse: collapse
border-spacing: 0
body
margin: 0
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary
display: block
audio,canvas,progress,video
display: inline-block
vertical-align: baseline
audio:not([controls])
display: none
height: 0
[hidden],template
display: none
a
background: transparent
a:active,a:hover
outline: 0
a:focus
outline: none
abbr[title]
border-bottom: 1px dotted
b,strong
font-weight: 600
.heading.\--h1,h1
font-size: 2em
margin: .67em 0
svg:not(:root)
overflow: hidden
*
-webkit-tap-highlight-color: rgba(0,0,0,0)
body
margin: 40px
background-color: #d9dded
height: 100%
display: flex
align-items: center
justify-content: center
color: #3e396b
font-family: 'Roboto', sans-serif
a
cursor: pointer
color: #000
text-decoration: none
h1
margin: 0
.box
width: 36px
height: 27px
.v-container
position: relative
width: 375px
height: 667px
border-radius: 16px
padding-left: 48px
box-sizing: border-box
border: 4px solid #fff
background-color: #eff0f8
box-shadow: 0px 32px 47px rgba(32, 23, 23, 0.09)
display: flex
align-items: center
justify-content: center
flex-direction: column
.v-scroll
overflow: auto
.v-title
font-weight: 800
font-size: 24px
padding-left: 5px
.calendar
background: #fff
border-radius: 0 0 1em 1em
color: #555
width: 100%
box-sizing: border-box
display: inline-block
padding: 20px 10px
&_title
font-size: 20px
padding: 15px 0 5px
opacity: 0.5
svg
position: relative
transform: rotate(90deg)
top: 2px
.v-menu
position: absolute
top: 4px
left: 4px
bottom: 4px
width: 40px
border-radius: 9px
padding-top: 60px
background: linear-gradient(135deg, #9a0dfe, #637dfb)
&_link
cursor: pointer
width: 40px
height: 40px
display: flex
align-items: center
justify-content: center
transition: all 0.3s
&.top
position: absolute
left: 0
bottom: 7px
&.active
background-color: rgba(0, 0, 0, 0.7)
&:hover
background-color: rgba(0, 0, 0, 0.5)
&_logo
position: absolute
top: 10px
left: 5px
width: 30px
height: 30px
background-color: #000
border-radius: 50%
overflow: hidden
&::before, &:after
content: ""
display: block
position: absolute
width: 50px
height: 50px
&::before
top: 7px
left: 9px
transform: rotate(34deg)
background: linear-gradient(#33ccff, #00fffe)
&:after
top: -26px
left: 7px
background: linear-gradient(52deg, #ffcc58, #ff5050)
transform: rotate(36deg)
.v-calendar
position: absolute
top: 0
left: 56px
right: 10px
&.mini
.v-list:not(.active)
overflow: hidden
opacity: 0
height: 0
transform: scale(0)
+ .v-info
margin-top: 173px
.v-info
overflow: auto
width: 100%
margin-top: 294px
padding-bottom: 60px
margin-bottom: 10px
transition: all 0.3s
.v-day
pointer-events: none
opacity: 0.2
.v-day-current
background: #eff0f8
.v-list
display: flex
opacity: 1
height: 30px
width: 100%
transition: height 0.3s
&_info
pointer-events: none
a
pointer-events: none
width: 100%
display: flex
align-items: center
justify-content: center
a > span, &.v-list_info span
position: relative
width: 100%
padding: 4px 0 7px
margin: 2px 0
text-align: center
border-radius: 6px
.active span
font-weight: 700
color: #fff
background-color: #824bfc
.v-section
border-bottom: 1px solid #fff
padding: 25px 15px 10px
&_item
position: relative
font-size: 14px
margin-bottom: 15px
padding-left: 10px
line-height: 1.15
&_time
font-size: 14px
padding-bottom: 4px
font-weight: 800
&_line
position: absolute
left: 0
top: 0
bottom: 0
width: 4px
border-radius: 2px
.color-orange
background: linear-gradient(#ff9900, #ff5050)
box-shadow: 0 2px 12px -3px #ff5050
.color-pink
background: linear-gradient(#ff66cc, #ff6666)
box-shadow: 0 2px 12px -3px #ff6666
.color-green
background: linear-gradient(#19be6b, #236c61)
box-shadow: 0 2px 12px -3px #236c61
.color-blue
background: linear-gradient(#33ccff, #72abff)
box-shadow: 0 2px 12px -3px #72abff
.dots
position: absolute
bottom: 3px
left: 0
right: 0
display: flex
align-items: center
justify-content: center
flex-direction: row
background-color: transparent !important
.dot
width: 4px
height: 4px
border-radius: 50%
margin: 0 2px
.v-btn
cursor: pointer
position: absolute
right: 30px
bottom: 30px
width: 100px
height: 40px
background: linear-gradient(135deg, #9a0dfe, #637dfb)
box-shadow: 0 2px 12px -3px #637dfb
display: flex
align-items: center
justify-content: center
padding: 0
z-index: 2
font-size: 18px
color: #fff
font-size: 16px
font-weight: 400
border: none
border-radius: 32px
.rabbit
width: 50px
height: 50px
position: fixed
bottom: 20px
right: 20px
z-index: 3
fill: #fff
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment