Bootstrap Snippet TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU Music Player using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- app root container -->
<div class="app-wrap" id="app" v-cloak>
  <!-- app player container -->
  <main class="player-wrap fx fx-fade-in" ref="playerWrap" style="opacity: 0">
    <!-- bg absolute elements -->
    <figure class="player-bg" ref="playerBg"></figure>
    <canvas class="player-canvas" ref="playerCanvas"></canvas>
    <!-- main player layout -->
    <section class="player-layout">
      <!-- player top header -->
      <header class="player-header flex-row flex-middle flex-stretch">
        <h2 class="text-clip flex-1"><i class="fa fa-headphones"></i> <span>TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU </span></h2>
        <button class="text-nowrap common-btn" @click="toggleSidebar( true )"><i class="fa fa-bars"></i></button>
      </header>
      <!-- player middle content area -->
      <main class="player-content flex-row">
        <!-- default greet message -->
        <section class="player-greet" v-if="!hasChannel && !hasErrors">
          <div class="fx fx-slide-left push-bottom"><h1>Pick a Station</h1></div>
          <div class="fx fx-slide-left fx-delay-1 push-bottom">This is a music streaming player for the channels provided by harunpehlivan.fm.tc Just pick a station from the sidebar to the right to start listening.</div>
          <div class="fx fx-slide-up fx-delay-2 pad-top"><button class="cta-btn" @click="toggleSidebar( true )"><i class="fa fa-headphones">·</i> View Stations</button></div>
        </section>
        <!-- show selected channel info if possible -->
        <section class="player-channel flex-1" v-if="hasChannel && !hasErrors" :key="channel.id">
          <div class="flex-autorow flex-middle flex-stretch">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// spacing and padding
$padSpace: 1em;
$padSmall: $padSpace / 2;
$headerHeight: 3.5em;
$bgImg: 'https://raw.githubusercontent.com/rainner/soma-fm-player/master/public/img/bg.jpg'; 
// document colors
$colorDocument: #8086a0;
$colorDocumentDark: #1e1f30;
$colorDocumentDarker: darken( $colorDocumentDark, 10% );
$colorDocumentLight: #a0a6b0;
$colorDocumentText: desaturate( lighten( $colorDocumentDark, 40% ), 5% );
// common colors
$colorPrimary: crimson;
$colorPrimaryText: lighten( $colorPrimary, 40% );
$colorSecondary: cornflowerblue;
$colorSecondaryText: darken( $colorSecondary, 40% );
$colorDefault: lightslategray;
$colorDefaultText: darken( $colorDefault, 40% );
$colorGrey: slategray;
$colorGreyText: darken( $colorGrey, 40% );
$colorBright: whitesmoke;
$colorBrightText: darken( $colorBright, 40% );
$colorOverlay: rgba( black, 0.4 );
$colorCard: rgba( black, 0.08 );
// borders and lines
$lineWidth: 2px;
$lineStyle: solid;
$lineColor: rgba( black, 0.08 );
$lineJoin: 6px;
// base font options
$fontFamily: 'Roboto Condensed', sans-serif;
$fontSize: 20px;
$fontSpace: 1.2em;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
 * TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU Web Player
 * Author: Rainner Lins (2018)
 * Site: http://harunpehlivan.fm.tc/
/**
 * Sphere object
 */
const Sphere = {
  group  : null,
  shapes : [],
  move   : new THREE.Vector3( 0, 0, 0 ),
  ease   : 8,
  create( box, scene ) {
    this.group   = new THREE.Object3D();
    let shape1   = new THREE.CircleGeometry( 1, 10 );
    let shape2   = new THREE.CircleGeometry( 2, 20 );
    let points   = new THREE.SphereGeometry( 100, 30, 14 ).vertices;
    let material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 0, side: THREE.DoubleSide } );
    let center   = new THREE.Vector3( 0, 0, 0 );
    let radius   = 12;
    for ( let i = 0; i < points.length; i++ ) {
      let { x, y, z } = points[ i ];
      let home  = { x, y, z };
      let cycle = THREE.Math.randInt( 0, 100 );
      let pace  = THREE.Math.randInt( 10, 30 );
      let shape = new THREE.Mesh( ( i % 2 ) ? shape1 : shape2, material );
      shape.position.set( x, y, z );
      shape.lookAt( center );
      shape.userData = { radius, cycle, pace, home };
      this.group.add( shape );
    }
    this.group.position.set( 500, 0, 0 );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU Music Player "
Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU Music Player " Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU Music Player "
Bootstrap 4.1.1 Snippet by harunpehlivan