Home Explore Help
Sign In
kris
/
Musare
mirror of https://github.com/Musare/Musare.git
1
0
Fork 0
Files Issues 0 Wiki
Tree: 70bed2c764
Branches Tags
Musare
/
public
/
index.html

index.html 7.9 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. 	<head>
    4. 

  4. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    5. 

  5. 		<title>Musare with NodeJS + Express + SocketIO + VueJS</title>
    6. 

  6. 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
    7. 

  7. 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
    8. 

  8. 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    9. 

  9. 		<script src='https://www.google.com/recaptcha/api.js'></script>
    10. 

  10. 		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    11. 

  11. 		<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
    12. 

  12. 		<link type="text/css" rel="stylesheet" href="css/main.css" />
    13. 

  13. 		<script src="js/main.js"></script>
    14. 

  14. 	</head>
    15. 

  15. 	<body>
    16. 

  16. 		<div id="app">
    17. 

  17. 			<div class="loading" style="display: block;" v-show="!(home.visible || room.visible)"></div>
    18. 

  18. 			<div class="header" style="display: none;" v-show="home.visible || room.visible">
    19. 

  19. 				<div class="header-home" v-show="home.visible">
    20. 

  20. 					<div class="header-home-title">Musare</div>
    21. 

  21. 					<div class="header-home-link" v-on:click="showModal('account')">Account&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></div>
    22. 

  22. 					<div class="header-home-link" v-on:click="showModal('donate')">Donate</div>
    23. 

  23. 					<div class="header-home-link" v-on:click="showModal('project')">The Project</div>
    24. 

  24. 				</div>
    25. 

  25. 				<div class="header-room" v-show="room.visible">
    26. 

  26. 					<div class="header-room-linkLeft" v-on:click="leaveRoom"><i class="fa fa-home" aria-hidden="true"></i></div>
    27. 

  27. 					<div class="header-room-linkLeft"><i class="fa fa-plus" aria-hidden="true"></i></div>
    28. 

  28. 					<div class="header-room-linkLeft"><i class="fa fa-flag" aria-hidden="true"></i></div>
    29. 

  29. 					<div class="header-room-linkLeft"><i class="fa fa-step-forward" aria-hidden="true"></i></div>
    30. 

  30. 					<div class="header-room-linkCenter">{{ room.name }}</div>
    31. 

  31. 					<div class="header-room-linkRight"><i class="fa fa-users" aria-hidden="true"></i></div>
    32. 

  32. 					<div class="header-room-linkRight"><i class="fa fa-comment" aria-hidden="true"></i></div>
    33. 

  33. 					<div class="header-room-linkRight"><i class="fa fa-list" aria-hidden="true"></i></div>
    34. 

  34. 				</div>
    35. 

  35. 			</div>
    36. 

  36. 			<div class="body" style="display: none;" v-show="home.visible || room.visible">
    37. 

  37. 				<div class="body-home" v-show="home.visible">
    38. 

  38. 					<div class="body-home-group" v-for="group in home.groups">
    39. 

  39. 						<div class="body-home-group-title">{{ group.name }}</div>
    40. 

  40. 						<div class="body-home-group-nav"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
    41. 

  41. 						<div class="body-home-group-rooms">
    42. 

  42. 							<div class="body-home-group-rooms-room" v-for="room in group.rooms" v-on:click="enterRoom(room)">
    43. 

  43. 								<img class="body-home-group-rooms-room-image" :src="room.thumbnail" />
    44. 

  44. 								<div class="body-home-group-rooms-room-info">
    45. 

  45. 									<div class="body-home-group-rooms-room-grid-left">
    46. 

  46. 										<h3>{{ room.name }}</h3>
    47. 

  47. 										<p class="body-home-group-rooms-room-info-description">{{ room.description }}</p>
    48. 

  48. 									</div>
    49. 

  49. 									<div class="body-home-group-rooms-room-grid-right">
    50. 

  50. 										<div class="body-home-group-rooms-room-info-users">{{ room.users }}&nbsp;&nbsp;<i class="fa fa-user" aria-hidden="true"></i></div>
    51. 

  51. 									</div>
    52. 

  52. 								</div>
    53. 

  53. 							</div>
    54. 

  54. 						</div>
    55. 

  55. 						<div class="body-home-group-nav"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
    56. 

  56. 					</div>
    57. 

  57. 				</div>
    58. 

  58. 				<div class="body-room" v-show="room.visible">
    59. 

  59. 					<div class="body-room-player">
    60. 

  60. 						<!-- Youtube stuff goes here -->
    61. 

  61. 					</div>
    62. 

  62. 					<div class="body-room-playlist">
    63. 

  63. 						<div class="body-room-playlist-song" v-for="song in room.playlist.songs">
    64. 

  64. 

  65. 						</div>
    66. 

  66. 					</div>
    67. 

  67. 					<div class="body-room-chat">
    68. 

  68. 						<div class="body-room-chat-message" v-for="message in room.chat.messages">
    69. 

  69. 

  70. 						</div>
    71. 

  71. 					</div>
    72. 

  72. 					<div class="body-room-users"></div>
    73. 

  73. 				</div>
    74. 

  74. 				<div class="body-overlay" v-show="modalVisible()" v-on:click="showModal()"></div>
    75. 

  75. 				<div class="body-modal" v-bind:style="modalPositionStyle('register', 350, 400)">
    76. 

  76. 					<div class="body-modal-register-title">Register</div>
    77. 

  77. 					<div class="body-modal-register-exit" v-on:click="showModal()"><i class="fa fa-times" aria-hidden="true"></i></div>
    78. 

  78. 					<input class="body-modal-register-input" type="text" placeholder="Email..." v-model="modals.register.email"/>
    79. 

  79. 					<input class="body-modal-register-input" type="text" placeholder="Username..." v-model="modals.register.username"/>
    80. 

  80. 					<input class="body-modal-register-input" type="password" placeholder="Password..." v-model="modals.register.password"/>
    81. 

  81. 					<div class="g-recaptcha body-modal-register-recaptcha" data-sitekey="6Ld5jygTAAAAAEi0E1IwovUuVFhZKctMvKnY553W"></div>
    82. 

  82. 					<div class="body-modal-register-submit" v-on:click="register()">Submit</div>
    83. 

  83. 				</div>
    84. 

  84. 				<div class="body-modal" v-bind:style="modalPositionStyle('account', 360, 200)">
    85. 

  85. 					<div class="body-modal-account-button" v-on:click="showModal('register')">Register</div>
    86. 

  86. 					<div class="body-modal-account-button" v-on:click="showModal('login')">Login</div>
    87. 

  87. 				</div>
    88. 

  88. 				<div class="body-modal" v-bind:style="modalPositionStyle('donate', 360, 200)">
    89. 

  89. 					<p>Donations! Woo! :)</p>
    90. 

  90. 				</div>
    91. 

  91. 				<div class="body-modal" style="padding: 24px;" v-bind:style="modalPositionStyle('project', 600, 468)">
    92. 

  92. 					<h2 style="margin: 0 0 8px 0;">What is Musare?</h2>
    93. 

  93. 					<p style="margin: 0 0 16px 0;">Musare is an open-source music website where you can listen to real-time genre specific music stations with your friends, or just alone.</p>
    94. 

  94. 					<h2 style="margin: 0 0 8px 0;">How can I help?</h2>
    95. 

  95. 					<p style="margin: 0;">There are essentially 3 main ways in which you can help us:</p>
    96. 

  96. 					<ol>
    97. 

  97. 						<li style="margin-bottom: 16px; text-align: justify;">If you are a JavaScript developer, then we can use your help! Our project is open source and all the source code can be found on GitHub. We would love for you to create new features, add exciting content or just improve what already is on Musare. Also, if you see a bug or glitch on Musare, then create a new "issue" on GitHub and we will fix it as soon as possible. You can also have a try at fixing a bug that you may find!</li>
    98. 

  98. 						<li style="margin-bottom: 16px; text-align: justify;">If you are not a developer but want some way of supporting us - you can donate to Musare. Any amount of donation is highly appreciated, and will help us maintain server costs.</li>
    99. 

  99. 						<li style="margin-bottom: 16px; text-align: justify;">Send us feedback! Your comments and/or suggestion are extremely valuable to us. In order to improve we need to know what you like, don't like or what you might want on the app.</li>
    100. 

  100. 					</ol>
    101. 

  101. 				</div>
    102. 

  102. 			</div>
    103. 

  103. 			<div class="footer" style="display: none;" v-show="home.visible || room.visible">
    104. 

  104. 				<div class="footer-left">
    105. 

  105. 					<div class="footer-left-title">Stay Connected</div>
    106. 

  106. 					<div class="footer-left-message">Follow us on social media or send us an email!</div>
    107. 

  107. 					<div class="footer-left-icons">
    108. 

  108. 						<div class="footer-left-icons-icon"><i class="fa fa-twitter" aria-hidden="true"></i></div>
    109. 

  109. 						<div class="footer-left-icons-icon"><i class="fa fa-facebook" aria-hidden="true"></i></div>
    110. 

  110. 						<div class="footer-left-icons-icon"><i class="fa fa-twitch" aria-hidden="true"></i></div>
    111. 

  111. 					</div>
    112. 

  112. 				</div>
    113. 

  113. 				<div class="footer-right">
    114. 

  114. 					<div class="footer-right-links">
    115. 

  115. 						<div class="footer-right-links-title">Links</div>
    116. 

  116. 						<a class="footer-right-links-link">Github</a>
    117. 

  117. 						<a class="footer-right-links-link">Feedback</a>
    118. 

  118. 						<a class="footer-right-links-link">FAQ</a>
    119. 

  119. 						<a class="footer-right-links-link">Terms</a>
    120. 

  120. 						<a class="footer-right-links-link">Privacy</a>
    121. 

  121. 					</div>
    122. 

  122. 				</div>
    123. 

  123. 				<div class="footer-message">© Copyright Musare: 2015 - {{ new Date().getFullYear() }}</div>
    124. 

  124. 			</div>
    125. 

  125. 		</div>
    126. 

  126. 	</body>
    127. 

  127. </html>
    128.